ColorPalette

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

¥The ColorPalette block allows you to document all color-related items (e.g., swatches) used throughout your project.

{/* 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 配置了以下属性：

¥ColorPalette is configured with the following props:

children

类型：React.ReactNode

¥Type: React.ReactNode

ColorPalette 只需要 ColorItem 子项。

¥ColorPalette expects only ColorItem children.

ColorItem

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

ColorItem 配置了以下属性：

¥ColorItem is configured with the following props:

colors

(必需)

¥(Required)

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

¥Type: string[] | { [key: string]: string }

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

¥Provides the list of colors to be displayed. Accepts any valid CSS color format (hex, RGB, HSL, etc.). When an object is provided, the keys will be displayed above the values. Additionally, it supports gradients such as 'linear-gradient(to right, white, black)' or 'linear-gradient(65deg, white, black)', etc.

subtitle

(必需)

¥(Required)

类型：string

¥Type: string

提供颜色的额外描述。

¥Provides an additional description of the color.

title

(必需)

¥(Required)

类型：string

¥Type: string

设置要显示的颜色的名称。

¥Sets the name of the color to be displayed.