ColorPalette

观看视频教程

ColorPalette 块允许您记录项目中使用的所有颜色相关项（例如，色板）。

Screenshot of ColorPalette and ColorItem blocks

Colors.mdx

import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 
<Meta title="Colors" />
 
<ColorPalette>
  <ColorItem
    title="theme.color.greyscale"
    subtitle="Some of the greys"
    colors={{ White: '#FFFFFF', Alabaster: '#F8F8F8', Concrete: '#F3F3F3' }}
  />
  <ColorItem 
    title="theme.color.primary" 
    subtitle="Coral" 
    colors={{ WildWatermelon: '#FF4785' }} 
  />
  <ColorItem 
    title="theme.color.secondary" 
    subtitle="Ocean" 
    colors={{ DodgerBlue: '#1EA7FD' }} 
  />
  <ColorItem
    title="theme.color.positive"
    subtitle="Green"
    colors={{
      Apple: 'rgba(102,191,60,1)',
      Apple80: 'rgba(102,191,60,.8)',
      Apple60: 'rgba(102,191,60,.6)',
      Apple30: 'rgba(102,191,60,.3)',
    }}
  />
  <ColorItem
    title="gradient"
    subtitle="Grayscale"
    colors={{
      Gradient: 'linear-gradient(to right,white,black)',
    }}
  />
  <ColorItem
    title="gradient"
    subtitle="Grayscale"
    colors={['linear-gradient(65deg,white,black)']}
  />
</ColorPalette>

ColorPalette

import { ColorPalette } from '@storybook/blocks';

ColorPalette 通过以下 props 配置

`children`

类型：React.ReactNode

ColorPalette 仅接受 ColorItem 子元素。

ColorItem

import { ColorItem } from '@storybook/blocks';

ColorItem 通过以下 props 配置

`colors`

（必填）

类型：string[] | { [key: string]: string }

提供要显示的颜色列表。接受任何有效的 CSS 颜色格式（十六进制、RGB、HSL 等）。当提供对象时，键将显示在值上方。此外，它还支持渐变，例如 'linear-gradient(to right, white, black)' 或 'linear-gradient(65deg, white, black)' 等。

`subtitle`

（必填）

类型：string

提供颜色的附加描述。

`title`

（必填）

类型：string

设置要显示的颜色名称。