加入直播:美国东部时间周四上午 11 点,Storybook 9 发布及 AMA

颜色方案

在指定的颜色方案中渲染你的 stories

在 Github 上查看

Storybook Addon 颜色方案

在指定的颜色方案中预览和渲染你的 stories

安装

首先,安装软件包。

npm install --save-dev storybook-addon-color-scheme

然后,在 .storybook/main.js 中将其注册为插件。

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    'storybook-addon-color-scheme', // 👈 register the addon here
  ],
};

export default config;

使用方法

使用此插件的主要方法是定义 colorScheme 参数。你可以在组件级别(如下所示)定义它,以影响文件中的所有 stories,或者只为一个单独的 story 定义。

// Button.stories.ts

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    colorScheme: "dark",
  },
};

export default meta;
作者
  • floriangirardey
    floriangirardey
适用于
    Angular
    Ember
    HTML
    Preact
    React
    React Native
    Svelte
    Vue
    Web Components
标签