极客教程React.js蓝图颜色
蓝图 是一种基于React的用于Web的UI工具包。此库非常优化，适用于构建桌面应用程序中复杂且数据密集的界面。
在本文中，我们将讨论React.js Blueprint颜色。颜色是样式化Web应用程序中非常重要的组件。React.js Blueprint提供了不同类型的颜色方案，可以在样式化Web应用程序中使用。
蓝图颜色使用：
- 使用Sass的蓝图： 蓝图颜色在Sass脚本语言中使用，Sass是一种预处理器样式表语言，编译为CSS。
- 使用Less的蓝图： 蓝图颜色在Less中使用，Less是一种动态预处理器样式表语言，编译为CSS。
- 使用JavaScript的蓝图： 蓝图颜色在JavaScript中使用，因为蓝图是基于React的库，使用了JavaScript。
1. 灰度： 灰度色是用于设计Web页面的不同灰色阴影。
2. 核心颜色： 核心颜色用于用户界面设计，每种颜色都与我们所谓的视觉意图相关联。
3. 扩展颜色： 我们在需要表示某种数据时使用扩展颜色。因此，基本上它是为数据可视化保留的。
语法：
<div style={{ backgroundColor: "#96290D" }}>...</div>
<h1 style={{ color: "#DB2C6F" }}>...</h1>
创建React应用程序并安装模块：
步骤1： 使用以下命令创建一个React应用程序：
npm create-react-app appname
步骤2： 创建您的项目文件夹，即应用程序名称后，使用以下命令移动到该文件夹中：
cd appname
步骤3： 在创建了ReactJS应用程序之后，使用以下命令安装所需的模块：
npm install @blueprintjs/core
项目结构：
示例1： 下面的示例演示了将扩展颜色用作背景颜色的用法。
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
function App() {
return (
<>
<div>
<h1>
ReactJS BluePrint Colors Extended colors
</h1>
</div>
<div style={{
display: "flex",
flexDirection: "row"
}}>
<div style={{ color: "black", padding: 20 }}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#96290D",
color: "white",
}}
>
Vermilion -1
</div>
<div
style={{
padding: 10,
backgroundColor: "#B83211",
color: "white",
}}
>
Vermilion -2
</div>
<div style={{
padding: 10,
backgroundColor: "#D33D17"
}}>
Vermilion -3
</div>
<div style={{
padding: 10,
backgroundColor: "#EB6847"
}}>
Vermilion -4
</div>
<div style={{
padding: 10,
backgroundColor: "#FF9980"
}}>
Vermilion -5
</div>
</div>
</div>
<div style={{
color: "black",
textAlign: "left", padding: 20
}}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#A82255",
color: "white",
}}
>
Rose -1
</div>
<div
style={{
padding: 10,
backgroundColor: "#C22762",
color: "white",
}}
>
Rose -2
</div>
<div style={{
padding: 10,
backgroundColor: "#DB2C6F"
}}>Rose -3</div>
<div style={{
padding: 10,
backgroundColor: "#F5498B"
}}>Rose -4</div>
<div style={{
padding: 10,
backgroundColor: "#FF66A1"
}}>Rose -5</div>
</div>
</div>
<div style={{
color: "black",
textAlign: "left", padding: 20
}}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#5C255C",
color: "white",
}}
>
Voilet-1
</div>
<div
style={{
padding: 10,
backgroundColor: "#7C327C",
color: "white",
}}
>
Voilet-2
</div>
<div style={{
padding: 10,
backgroundColor: "#9D3F9D"
}}>
Voilet-3
</div>
<div style={{
padding: 10,
backgroundColor: "#BD6BBD"
}}>
Voilet-4
</div>
<div style={{
padding: 10,
backgroundColor: "#D69FD6"
}}>
Voilet-5
</div>
</div>
</div>
<div style={{
color: "black",
textAlign: "left",
padding: 20
}}>
<div style={{ padding: 10 }}>
<div
style={{
padding: 10,
backgroundColor: "#5642A6",
color: "white",
}}
>
Indigo-1
</div>
<div
style={{
padding: 10,
backgroundColor: "#634DBF",
color: "white",
}}
>
Indigo-2
</div>
<div style={{
padding: 10,
backgroundColor: "#7961DB"
}}>
Indigo-3
</div>
<div style={{
padding: 10,
backgroundColor: "#9881F3"
}}>
Indigo-4
</div>
<div style={{
padding: 10,
backgroundColor: "#BDADFF"
}}>
Indigo-5
</div>
</div>
</div>
</div>
</>
);
}
export default App;
运行应用程序的步骤： 打开终端并输入以下命令。
npm start
输出：
示例2： 下面的示例展示了将扩展颜色用作文本的文字样式颜色。
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
function App() {
return (
<>
<div style={{
padding: 20,
color: "green"
}}>
<h1>ReactJS BluePrint Colors Extended Colors</h1>
</div>
<div>
<div style={{
padding: 20, display: "flex",
flexDirection: "row"
}}>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#0C5174" }}>
Cerulean color 1
</h1>
<h2 style={{ color: "#0F6894" }}>
Cerulean color 2
</h2>
<h3 style={{ color: "#147EB3" }}>
Cerulean color 3
</h3>
<h4 style={{ color: "#3FA6DA" }}>
Cerulean color 4
</h4>
<h5 style={{ color: "#68C1EE" }}>
Cerulean color 5
</h5>
</div>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#004D46" }}>
Turquoise color 1
</h1>
<h2 style={{ color: "#007067" }}>
Turquoise color 2
</h2>
<h3 style={{ color: "#00A396" }}>
Turquoise color 3
</h3>
<h4 style={{ color: "#13C9BA" }}>
Turquoise color 4
</h4>
<h5 style={{ color: "#7AE1D8" }}>
Turquoise color 5
</h5>
</div>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#1D7324" }}>
Forest Color 1
</h1>
<h2 style={{ color: "#238C2C" }}>
Forest Color 2
</h2>
<h3 style={{ color: "#29A634" }}>
Forest Color 3
</h3>
<h4 style={{ color: "#43BF4D" }}>
Forest Color 4
</h4>
<h5 style={{ color: "#62D96B" }}>
Forest Color 5
</h5>
</div>
<div style={{ padding: 10 }}>
<h1 style={{ color: "#43501B" }}>
Lime Color 1
</h1>
<h2 style={{ color: "#5A701A" }}>
Lime Color 2
</h2>
<h3 style={{ color: "#8EB125" }}>
Lime Color 3
</h3>
<h4 style={{ color: "#B6D94C" }}>
Lime Color 4
</h4>
<h5 style={{ color: "#D4F17E" }}>
Lime Color 5
</h5>
</div>
</div>
</div>
</>
);
}
export default App;
输出：
参考链接: https://blueprintjs.com/docs/#core/colors