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 中的查询参数设置方向。这对于端到端测试等场景非常有用。

只需在 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 文件中指定的条款进行再分发。