极客教程React.js 蓝图颜色配色方案
蓝图是基于React的Web界面工具包。这个库非常优化，用于构建复杂和数据密集的桌面应用界面。
在本文中，我们将讨论React.js蓝图颜色配色方案。颜色是用于样式化Web应用程序的非常重要的组件。React.js蓝图提供了不同类型的颜色方案，可以在样式化Web应用程序时使用。
蓝图颜色方案：
- 顺序颜色方案： 此颜色方案最适合表示从低到高值的数据，可以是序数或数值范围。
- 分散颜色方案： 此颜色方案将中间范围和数据范围两端的极端值赋予相等的权重。
- 定性颜色方案： 此颜色方案使用一系列不相关的颜色来创建一个不涉及顺序，只涉及种类差异的方案。
语法：
<div style={{ backgroundColor: "#2D72D2" }}>...</div>
<h3 style={{ color: "#77450D" }}>...</h3>
创建React应用程序和安装模块:
步骤1: 使用以下命令创建React应用程序:
npm create-react-app appname
步骤2： 在创建你的项目文件夹，例如appname之后，使用以下命令进入它：
cd appname
步骤3： 创建ReactJS应用程序后，使用以下命令安装所需的模块：
npm install @blueprintjs/core
项目结构：
示例1: 以下示例演示了顺序配色方案的使用。
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
function App() {
return (
<>
<div style={{ padding: 20, textAlign: "center",
color: "green" }}>
<h1>ReactJS BluePrint Colors Color schemes</h1>
</div>
<div>
<h2 style={{ textAlign: "center",
color: "green" }}>
Sequential Color Scheme
</h2>
<div style={{ padding: 20, display: "flex",
flexDirection: "row" }}>
<div style={{ padding: 10 }}>
<div style={{ backgroundColor: "#CFF3D2",
padding: 20 }}>
#CFF3D2
</div>
<div style={{ backgroundColor: "#8BCDBC",
padding: 20 }}>
#8BCDBC
</div>
<div style={{ backgroundColor: "#59A3AC",
padding: 20 }}>
#59A3AC
</div>
<div style={{ backgroundColor: "#3878A1",
padding: 20 }}>
#3878A1
</div>
<div style={{ backgroundColor: "#1F4B99",
padding: 20 }}>
#1F4B99
</div>
</div>
<div style={{ padding: 10 }}>
<div style={{ backgroundColor: "#97F3EB",
padding: 20 }}>
#CFF3D2
</div>
<div style={{ backgroundColor: "#78D5CC",
padding: 20 }}>
#8BCDBC
</div>
<div style={{ backgroundColor: "#58B8AE",
padding: 20 }}>
#59A3AC
</div>
<div style={{ backgroundColor: "#369C91",
padding: 20 }}>
#3878A1
</div>
<div style={{ backgroundColor: "#008075",
padding: 20 }}>
#1F4B99
</div>
</div>
</div>
</div>
</>
);
}
export default App;
输出:
示例2： 下面的示例演示了Diverging Color Scheme的使用方法。
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
function App() {
return (
<>
<div style={{
padding: 20, textAlign: "center",
color: "green"
}}>
<h1>ReactJS BluePrint Colors Color schemes</h1>
</div>
<div>
<h2 style={{ textAlign: "center", color: "green" }}>
Diverging Color Scheme
</h2>
<div style={{
padding: 20, display: "flex",
flexDirection: "row"
}}>
<div style={{
display: 'flex', flexDirection: 'column',
paddingRight: 10
}}>
<div style={{
backgroundColor: '#1F4B99',
padding: 20,
color: 'white'
}}>
#1F4B99
</div>
<div style={{
backgroundColor: '#6CACB9', padding: 20,
color: 'white'
}}>
#6CACB9
</div>
<div style={{
backgroundColor: '#FFFFFF', padding: 20,
color: 'black'
}}>
#FFFFFF
</div>
<div style={{
backgroundColor: '#DF9563', padding: 20,
color: 'white'
}}>
#DF9563
</div>
<div style={{
backgroundColor: '#9E2B0E', padding: 20,
color: 'white'
}}>
#9E2B0E
</div>
</div>
<div style={{
display: 'flex', flexDirection:
'column', paddingRight: 10
}}>
<div style={{
backgroundColor: '#1D7324',
padding: 20, color: 'white'
}}>
#1D7324
</div>
<div style={{
backgroundColor: '#8BAE44',
padding: 20, color: 'white'
}}>
#8BAE44
</div>
<div style={{
backgroundColor: '#FFE39F',
padding: 20, color: 'white'
}}>
#FFE39F
</div>
<div style={{
backgroundColor: '#6B9FA1',
padding: 20, color: 'white'
}}>
#6B9FA1
</div>
<div style={{
backgroundColor: '#1F4B99',
padding: 20, color: 'white'
}}>
#1F4B99
</div>
</div>
</div>
</div>
</>
);
}
export default App;
输出:
示例3：下面的示例演示了定性颜色模式的使用。
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
function App() {
return (
<>
<div style={{ padding: 20, textAlign: "center",
color: "green" }}>
<h1>ReactJS BluePrint Colors Color schemes</h1>
</div>
<div>
<h2 style={{ textAlign: "center", color: "green" }}>
Qualitative Color Scheme
</h2>
<div style={{ padding: 20, display: "flex",
flexDirection: "row" }}>
<div
style={{ backgroundColor: "#147EB3",
padding: 20, color: "white" }}
>
#147EB3
</div>
<div
style={{ backgroundColor: "#29A634",
padding: 20, color: "white" }}
>
#147EB3
</div>
<div
style={{ backgroundColor: "#D1980B",
padding: 20, color: "white" }}
>
#D1980B
</div>
<div
style={{ backgroundColor: "#D33D17",
padding: 20, color: "white" }}
>
#D33D17
</div>
<div
style={{ backgroundColor: "#9D3F9D",
padding: 20, color: "white" }}
>
#9D3F9D
</div>
</div>
</div>
</>
);
}
export default App;
输出：
