mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
4b465465dd
Generated-By: mintlify-agent Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
163 lines
4.4 KiB
Plaintext
163 lines
4.4 KiB
Plaintext
---
|
|
title: "颜色"
|
|
description: "使用颜色组件展示带有十六进制值和点击复制功能的色板，适用于设计系统和品牌规范文档。"
|
|
keywords: ["color", "palette", "colors", "design system", "hex", "rgb", "rgba", "hsl", "oklch"]
|
|
boost: 3
|
|
---
|
|
|
|
在文档中使用 Color 组件来展示颜色调色板。以紧凑的网格形式显示颜色，或在带有标签行的表格中进行分组展示。
|
|
|
|
<div id="compact-variant">
|
|
## 紧凑样式
|
|
</div>
|
|
|
|
以简单的网格布局显示颜色及其名称和值。
|
|
|
|
<Color variant="compact">
|
|
<Color.Item name="blue-500" value="#3B82F6" />
|
|
|
|
<Color.Item name="blue-600" value="#2563EB" />
|
|
|
|
<Color.Item name="blue-700" value="#1D4ED8" />
|
|
|
|
<Color.Item name="blue-800" value="#1E40AF" />
|
|
</Color>
|
|
|
|
```mdx Compact example
|
|
<Color variant="compact">
|
|
<Color.Item name="blue-500" value="#3B82F6" />
|
|
<Color.Item name="blue-600" value="#2563EB" />
|
|
<Color.Item name="blue-700" value="#1D4ED8" />
|
|
<Color.Item name="blue-800" value="#1E40AF" />
|
|
</Color>
|
|
```
|
|
|
|
|
|
<div id="table-variant">
|
|
## 表格样式
|
|
</div>
|
|
|
|
将颜色按标签行进行整理，用于设计系统文档。
|
|
|
|
<Color variant="table">
|
|
<Color.Row title="主色">
|
|
<Color.Item name="primary-500" value="#3B82F6" />
|
|
|
|
<Color.Item name="primary-600" value="#2563EB" />
|
|
|
|
<Color.Item name="primary-700" value="#1D4ED8" />
|
|
</Color.Row>
|
|
|
|
<Color.Row title="辅助色">
|
|
<Color.Item name="secondary-500" value="#8B5CF6" />
|
|
|
|
<Color.Item name="secondary-600" value="#7C3AED" />
|
|
</Color.Row>
|
|
</Color>
|
|
|
|
```mdx Table example
|
|
<Color variant="table">
|
|
<Color.Row title="主色">
|
|
<Color.Item name="primary-500" value="#3B82F6" />
|
|
<Color.Item name="primary-600" value="#2563EB" />
|
|
<Color.Item name="primary-700" value="#1D4ED8" />
|
|
</Color.Row>
|
|
<Color.Row title="辅助色">
|
|
<Color.Item name="secondary-500" value="#8B5CF6" />
|
|
<Color.Item name="secondary-600" value="#7C3AED" />
|
|
</Color.Row>
|
|
</Color>
|
|
```
|
|
|
|
|
|
<div id="color-formats">
|
|
## 颜色格式
|
|
</div>
|
|
|
|
该组件支持所有 CSS 颜色格式，包括 hex、rgb、rgba、hsl 和 oklch。
|
|
|
|
<Color variant="compact">
|
|
<Color.Item name="hex" value="#FF5733" />
|
|
|
|
<Color.Item name="rgb" value="rgb(51, 255, 87)" />
|
|
|
|
<Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
|
|
|
|
<Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
|
|
|
|
<Color.Item name="oklch" value="oklch(70% 0.2 145)" />
|
|
</Color>
|
|
|
|
```mdx Color formats example
|
|
<Color variant="compact">
|
|
<Color.Item name="hex" value="#FF5733" />
|
|
<Color.Item name="rgb" value="rgb(51, 255, 87)" />
|
|
<Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
|
|
<Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
|
|
<Color.Item name="oklch" value="oklch(70% 0.2 145)" />
|
|
</Color>
|
|
```
|
|
|
|
|
|
<div id="theme-aware-colors">
|
|
## 随主题变化的颜色
|
|
</div>
|
|
|
|
使用包含 `light` 和 `dark` 属性的对象，为浅色和深色模式分别定义不同的颜色。
|
|
|
|
<Color variant="compact">
|
|
<Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
|
|
|
|
<Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
|
|
|
|
<Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
|
|
</Color>
|
|
|
|
```mdx Theme-aware example
|
|
<Color variant="compact">
|
|
<Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
|
|
<Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
|
|
<Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
|
|
</Color>
|
|
```
|
|
|
|
|
|
<div id="properties">
|
|
## 属性
|
|
</div>
|
|
|
|
<div id="color">
|
|
### 颜色
|
|
</div>
|
|
|
|
<ResponseField name="variant" type="string" required>
|
|
颜色调色板的显示样式。可选值：`compact` 或 `table`。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="children" type="Color.Item | Color.Row" required>
|
|
要显示的颜色项或行。
|
|
</ResponseField>
|
|
|
|
<div id="colorrow">
|
|
### Color.Row
|
|
</div>
|
|
|
|
<ResponseField name="title" type="string">
|
|
颜色行的标签。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="children" type="Color.Item" required>
|
|
该行中要显示的颜色项。
|
|
</ResponseField>
|
|
|
|
<div id="coloritem">
|
|
### Color.Item
|
|
</div>
|
|
|
|
<ResponseField name="name" type="string">
|
|
颜色的名称或标签。
|
|
</ResponseField>
|
|
|
|
<ResponseField name="value" type="string | { light: string, dark: string }" required>
|
|
使用任意 CSS 格式表示的颜色值，或包含 light 和 dark 两种模式值的对象。
|
|
</ResponseField> |