Storybook RTL 方向擴充功能

一個 Storybook 工具擴充功能，可在 LTR 和 RTL 之間切換 html dir 屬性。

• dir="ltr" 或 dir="rtl" 樣式將會新增到 html 標籤中，工具區會顯示 LTR/RTL 圖示。

安裝

首先，安裝套件。

npm install --save-dev sb-rtl-direction-addon
# using yarn
yarn add --dev sb-rtl-direction-addon
# using pnpm
pnpm add --save-dev sb-rtl-direction-addon

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

export default config;

用法

該擴充功能將在 Storybook UI 的工具列區中可用。

使用語言環境

您可以與語言環境同步以設定預設方向。

// preview.js

export const globalTypes = {
  locale: {
    name: "Locale",
    description: "Internationalization locale",
    defaultValue: "en",
    toolbar: {
      icon: "globe",
      items: [
        { value: "en-US", right: "LTR", title: "English (United States)" },
        { value: "es", right: "LTR", title: "Spanish" },
        { value: "ar", right: "RTL", title: "Arabic" },
        { value: "ar-OM", right: "RTL", title: "Arabic (Oman)" },
        { value: "pa-IN", right: "LTR", title: "Punjabi (India)" },
        { value: "pa-PK", right: "RTL", title: "Punjabi (Pakistan)" },
      ],
    },
  },
};

export const globals = {
  rtlDirection: false,
};

export const parameters = {
  rtlDirection: {
    // Collection to set as RTL (You can add language or with add country code specifically)
    autoLocales: ["ar", "pa-PK"],
    // Condition to reload the page each time locale is updated
    reload: true,
  },
};