Storybook RTL 擴充套件

Storybook RTL 擴充套件允許您在 Storybook 的 stories 中切換到從右到左的流向。

此擴充套件已使用 Storybook for React、Vue 和 Angular 進行測試。它也應該可以在其他框架中運作。

這是 unindented/storybook-addon-rtl 的永久分支，現在已封存。感謝 unindented 提供原始程式碼！

開始使用

npm i --save-dev storybook-addon-rtl

將擴充套件新增到 .storybook/main.js 中的 addons 陣列

module.exports = {
  /// other storybook configuration
  addons: [
    // other addons here
    "storybook-addon-rtl",
  ],
};

然後正常編寫您的 stories

import React from 'react'
import MyComponent from './MyComponent'

export default {
  title: 'My Component',
  component: MyComponent
};

export const default = {};

export const rtlParameter = {
  // Optionally include direction as story parameter
  parameters: {
    direction: 'rtl'
  }
}

進階

查詢參數

您可以使用 URL 中的查詢參數設定方向。這對於 e2e 測試之類的事情很有用。

只需在 URL 的末尾新增 &direction=rtl 或 &direction=ltr

storybook.example.com/?path=/story/button--standard&direction=rtl

通道 API

此擴充套件使用 Storybook 通道 API 發出和回應方向變更事件。這允許任何人編寫自訂程式碼，可以設定或回應方向的變更。當使用某些需要知道目前方向的程式庫時，這特別有用。請參閱 ./src/stories/CustomDecorator.stories.tsx 以取得範例。

中繼資料

• 程式碼：git clone https://github.com/literalpie/storybook-addon-rtl.git
• 首頁：https://github.com/literalpie/storybook-addon-rtl/

貢獻者

• Benjamin Kindle (benjaminkindle@yahoo.com)

授權

版權所有 (c) 2023 Benjamin Kindle (@literalpie)。這是免費軟體，可以根據 LICENSE 檔案中指定的條款重新散佈。