React.js Blueprint 变量网格和维度

在本文中，我们将学习蓝图.js库提供的网格和维度变量。BlueprintJS是基于React的Web界面工具包，使用TypeScript编写。该库非常优化，用于构建复杂且数据密集的桌面应用程序界面，可以在现代Web浏览器中运行。

网格和维度变量 这些变量用于控制自定义组件的尺寸。开发人员可以在Sass或Less变量文件中使用它们。

网格和维度变量

$pt-grid-size: 它在CSS中对应以下值

$pt-grid-size: 10px

$pt-border-radius: 它对应于CSS中的以下值

$pt-border-radius: 2px

$pt-button-height: 它对应于CSS中的以下值

$pt-button-height: 30px

$pt-button-height-large: 它在CSS中对应以下的值

$pt-button-height-large: 40px

$pt-input-height: 它对应于CSS中的以下值

$pt-input-height: 30px

$pt-input-height-large： 它对应CSS中的以下值

$pt-input-height-large: 40px

$pt-navbar-height: 它对应于CSS中的以下值

$pt-navbar-height: 50px

创建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

项目结构：

它会看起来像下面这样。

React.js Blueprint 变量网格和维度

示例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 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; 
    background-color: red; 
} 
  
.box-1 { 
    height:  $pt-grid-size; } .box-2 { height:$ pt-border-radius; 
} 
  
.box-3 { 
    height:  $pt-button-height; } .box-4 { height:$ pt-button-height-large; 
} 
  
.box-5 { 
    height: $pt-navbar-height; 
}

运行应用程序的步骤：

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

npm start

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

React.js Blueprint 变量网格和维度

示例2 : 下面的示例演示了使用BlueprintJS的不同网格和尺寸变量的用法，但使用CSS中的 calc 实用函数进行了轻微修改。

文件名：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 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

@import "@blueprintjs/core/lib/scss/variables"; 
  
.container { 
    display: flex; 
    margin: 0 auto; 
    justify-content: center; 
    gap: 5px; 
} 
  
.box { 
    width: 100px; 
    background-color: red; 
} 
  
.box-1 { 
    height: calc(2 *  $pt-grid-size); } .box-2 { height:$ pt-border-radius; 
} 
  
.box-3 { 
    height: calc(2 *  $pt-input-height); } .box-4 { height:$ pt-input-height-large; 
} 
  
.box-5 { 
    height: $pt-navbar-height; 
}

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