React.js蓝图变量“Elevation drop shadows”

在本文中，我们将学习blueprint.js库提供的 Elevation Drop Shadow Variables 。BlueprintJS是一个基于React的Web UI工具包，它是用TypeScript编写的。这个库在构建复杂和数据密集的桌面应用程序的界面方面非常优化和流行，运行在现代Web浏览器中。

Elevation Drop Shadow Variables 是用来为自定义UI元素应用阴影（box-shadows）的变量。开发人员可以在Sass或Less变量文件中使用这些变量。

Elevation Drop Shadow Variables List:

$pt-elevation-shadow-0: 对应CSS中的以下值

$pt-elevation-shadow-0: 
0 0 0 1px rgba(17, 20, 24, 0.15)

$pt-elevation-shadow-1： 它在CSS中对应以下值

$pt-elevation-shadow-1: 
    0 0 0 1px rgba(17, 20, 24, 0.1),
0 1px 1px rgba(17, 20, 24, 0.2)

$pt-elevation-shadow-2: 它对应于CSS中的以下值

$pt-elevation-shadow-2: 
    0 0 0 1px rgba(17, 20, 24, 0.1),
      0 1px 1px rgba(17, 20, 24, 0.2), 
0 2px 6px rgba(17, 20, 24, 0.2)

$pt-elevation-shadow-3： 与CSS中的以下值相对应

$pt-elevation-shadow-3: 
    0 0 0 1px rgba(17, 20, 24, 0.1),
      0 2px 4px rgba(17, 20, 24, 0.2), 
0 8px 24px rgba(17, 20, 24, 0.2)

$pt-elevation-shadow-4: 对应CSS中的以下值

$pt-elevation-shadow-4: 
    0 0 0 1px rgba(17, 20, 24, 0.1),
      0 4px 8px rgba(17, 20, 24, 0.2), 
0 18px 46px 6px rgba(17, 20, 24, 0.2)

$pt-dark-elevation-shadow-0： 它在CSS中对应以下值

$pt-dark-elevation-shadow-0: 
inset 0 0 0 1px rgba(255, 255, 255, 0.2)

$pt-dark-elevation-shadow-1: 它对应于CSS中的以下值

$pt-dark-elevation-shadow-1: inset 
    0 0 0 1px rgba(255, 255, 255, 0.2),
0 1px 1px 0 rgba(17, 20, 24, 0.4)

$pt-dark-elevation-shadow-2: 它对应于CSS中的以下值

$pt-dark-elevation-shadow-2: inset 
    0 0 0 1px rgba(255, 255, 255, 0.2),
      0 1px 1px rgba(17, 20, 24, 0.4), 
0 2px 6px rgba(17, 20, 24, 0.4)

$pt-dark-elevation-shadow-3： 它对应于CSS中的以下值

$pt-dark-elevation-shadow-3: inset 
    0 0 0 1px rgba(255, 255, 255, 0.2),
      0 2px 4px rgba(17, 20, 24, 0.4), 
0 8px 24px rgba(17, 20, 24, 0.4)

$pt-dark-elevation-shadow-4: 它对应于CSS中的以下值

$pt-dark-elevation-shadow-4: inset 
    0 0 0 1px rgba(255, 255, 255, 0.2),
      0 4px 8px rgba(17, 20, 24, 0.4), 
0 18px 46px 6px rgba(17, 20, 24, 0.4)

创建React应用程序和安装模块：

步骤1： 使用以下命令创建一个React应用程序：

npx create-react-app foldername

步骤2： 创建您的项目文件夹，即文件夹名称，然后使用以下命令进入该文件夹：

cd foldername

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @blueprintjs/core
npm install @blueprint/datetime @blueprintjs/datetime2
npm install sass

项目结构： 它将如下所示。

示例1： 下面的示例演示了在BlueprintJS使用的亮主题中使用不同高程下降阴影的用法。

现在在App.js文件中写下以下代码。在这里，App是我们的默认组件，我们在这里编写了我们的代码。

App.js

import './App.scss'
  
export default function App() { 
    return ( 
        <div> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong> 
                    React blueprint Variables Elevation  
                    Drop Shadows 
                </strong> 
                <br /><br /> 
            </div> 
            <div className="container"> 
                <div className="box box-1"></div> 
                <div className="box box-2"></div> 
                <div className="box box-3"></div> 
                <div className="box box-4"></div> 
                <div className="box box-5"></div> 
            </div> 
        </div> 
    ); 
}

创建一个新的文件，App.scss，并为不同的方框指定不同的阴影。

App.scss

@import "@blueprintjs/core/lib/scss/variables"; 
  
.container { 
    display: flex; 
    margin: 0 auto; 
    justify-content: center; 
    gap: 5px; 
} 
  
.box { 
    width: 100px; 
    height: 100px; 
    background-color: white; 
} 
  
.box-1 { 
    box-shadow:  $pt-elevation-shadow-0; } .box-2 { box-shadow:$ pt-elevation-shadow-1; 
} 
  
.box-3 { 
    box-shadow:  $pt-elevation-shadow-2; } .box-4 { box-shadow:$ pt-elevation-shadow-3; 
} 
  
.box-5 { 
    box-shadow: $pt-elevation-shadow-4; 
}

运行应用程序的步骤： 从项目的根目录下使用以下命令运行应用程序：

npm start

输出： 现在打开你的浏览器并访问 http://localhost:3000/，你将看到以下输出：

React.js蓝图变量“Elevation drop shadows”

示例2： 下面的示例展示了BlueprintJS在深色主题中使用不同高度的阴影效果。

App.js

import './App.scss'
import "@blueprintjs/core/lib/css/blueprint.css"; 
  
export default function App() { 
    return ( 
        <div> 
            <div 
                className="head"
                style={{ 
                    width: "fit-content", 
                    margin: "auto", 
                }} 
            > 
                <h1 
                    style={{ 
                        color: "green", 
                    }} 
                > 
                    GeeksforGeeks 
                </h1> 
                <strong> 
                    React blueprint Variables  
                    Grids & dimensions 
                </strong> 
                <br /><br /> 
            </div> 
            <div className="container"> 
                <div className="box box-1"></div> 
                <div className="box box-2"></div> 
                <div className="box box-3"></div> 
                <div className="box box-4"></div> 
                <div className="box box-5"></div> 
            </div> 
        </div> 
    ); 
}

创建一个新文件，App.scss，并为不同的框添加不同的阴影效果。

App.scss

@import "@blueprintjs/core/lib/scss/variables"; 
  
.container { 
    display: flex; 
    margin: 0 auto; 
    justify-content: center; 
    gap: 5px; 
} 
  
.box { 
    width: 100px; 
    height: 100px; 
    background-color: white; 
} 
  
.box-1 { 
    box-shadow:  $pt-dark-elevation-shadow-0; } .box-2 { box-shadow:$ pt-dark-elevation-shadow-1; 
} 
  
.box-3 { 
    box-shadow:  $pt-dark-elevation-shadow-2; } .box-4 { box-shadow:$ pt-dark-elevation-shadow-3; 
} 
  
.box-5 { 
    box-shadow: $pt-dark-elevation-shadow-4; 
}

运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序：