Storybook 文本方向插件

安装

首先，安装软件包。

npm install --save-dev storybook-addon-text-direction

然后，在 .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-text-direction', // 👈 register the addon here
  ],
};

export default config;

用法

使用此插件的主要方法是定义 textDirection 参数。您可以在组件级别（如下所示）进行此操作，以影响文件中的所有 stories，也可以仅为一个 story 进行此操作。

// Button.stories.ts

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

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    textDirection: 'rtl',
  }
};

export default meta;