极客教程React.js蓝图变量颜色别名
在本文中，我们将学习蓝图.js库提供的颜色别名。BlueprintJS是一个基于React的网络用户界面工具包。它是用TypeScript编写的。这个库非常优化，常用于构建复杂和数据密集的桌面应用程序界面，适用于现代网络浏览器。
变量颜色别名： 这些变量是BlueprintJS库使用的颜色的语义别名，用于在不同的内部组件中保持颜色使用的一致性。开发人员可以在Sass或Less变量文件中使用它们。
颜色别名：
- $pt-intent-primary: 它表示主要意图颜色。
- $pt-intent-success ：它表示成功意图颜色。
- $pt-intent-warning: 它表示警告意图颜色。
- $pt-intent-danger: 它表示危险意图颜色。
- $pt-app-background-color: 它表示应用程序背景颜色。
- $pt-dark-app-background-color: 它表示深色主题应用程序背景颜色。
- $pt-text-color: 它表示默认文本颜色。
- $pt-text-color-muted: 它表示柔和的文本颜色。
- $pt-text-color-disabled: 它表示禁用文本的颜色。
- $pt-heading-color: 它表示标题文本的颜色。
- $pt-link-color: 它表示链接文本的颜色。
- $pt-dark-text-color: 它表示暗黑主题的默认文本颜色。
- $pt-dark-text-color-muted: 它表示暗黑主题的静音文本颜色。
- $pt-dark-text-color-disabled: 它表示暗黑主题的禁用文本颜色。
- $pt-dark-heading-color: 它表示暗黑主题标题的文本颜色。
- $pt-dark-link-color: 它表示暗黑主题链接的文本颜色。
- $pt-text-selection-color: 它表示文本选择的颜色。
- $pt-icon-color: 它表示默认的图标颜色。
- $pt-icon-color-hover: 它表示图标的鼠标悬停颜色。
- $pt-icon-color-disabled: 它表示禁用的图标颜色。
- $pt-icon-color-selected: 它表示选中的图标颜色。
- $pt-dark-icon-color: 它表示暗色主题的默认图标颜色。
- $pt-dark-icon-color-hover ：它表示暗色主题的鼠标悬停图标颜色。
- $pt-dark-icon-color-disabled: 它表示暗色主题的禁用图标颜色。
- $pt-dark-icon-color-selected:
- $pt-divider-black: 它表示主要意图颜色。
- $pt-dark-divider-black: 它表示黑色分割线颜色。
- $pt-dark-divider-white: 它表示深色主题黑色分割线颜色。
- $pt-code-text-color: 它表示代码文本颜色。
- $pt-code-background-color: 它表示代码背景颜色。
- $pt-dark-code-text-color: 它表示深色主题代码文本颜色。
- $pt-dark-code-background-color: 它表示深色主题代码背景颜色。
创建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使用的不同intent颜色的用法。现在请在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
color aliases</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>
</div>
);
}
创建一个新文件， App.scss， 并为不同的方框赋予不同的意图颜色。
文件名：App.scss
@import "@blueprintjs/core/lib/scss/variables";
.container {
display: flex;
margin: 0 auto;
justify-content: center;
gap: 5px;
}
.box {
height: 100px;
width: 100px;
}
.box-1 {
background-color: pt-intent-primary;
}
.box-2 {
background-color:pt-intent-success;
}
.box-3 {
background-color: pt-intent-warning;
}
.box-4 {
background-color:pt-intent-danger;
}
运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序：
npm start
输出: 现在打开您的浏览器并转到http://localhost:3000/，您将看到以下输出:
示例2： 下面的示例演示了BlueprintJS使用的不同文本颜色的用法。
文件名：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 color aliases
</strong>
<br />
<br />
</div>
<div className="container">
<p className='p p-1'>default text color</p>
<p className='p p-2'>muted text color</p>
<p className='p p-3'>disabled text color</p>
</div>
</div>
);
}
创建一个新文件， App.scss ，并对不同的段落赋予不同的文本颜色。
文件名：App.scss
@import "@blueprintjs/core/lib/scss/variables";
.container {
display: flex;
flex-direction: column;
margin: 0 auto;
align-items: center;
gap: 5px;
}
.p-1 {
color: pt-text-color;
}
.p-2 {
color:pt-text-color-muted;
}
.p-3 {
color: $pt-text-color-disabled;
}
运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序：
npm start
输出：
参考 : https://blueprintjs.com/docs/#core/variables.color-aliases它表示主要意图的颜色。