Storybook Addon RTL

Storybook Addon RTL 允许您在 Storybook 中的 Story 中切换到从右到左的流程。

此插件已在 React、Vue 和 Angular 的 Storybook 中测试。它也应该在其他框架中工作。

这是 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",
  ],
};

然后正常编写您的 Story

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 测试等情况很有用。

只需将 &direction=rtl 或 &direction=ltr 添加到 URL 的末尾

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 ([email protected])

许可证

版权所有 (c) 2023 Benjamin Kindle (@literalpie)。这是一个免费软件，可以在 LICENSE 文件中指定的条款下重新分发。