@brightlayer-ui/ 故事书- trl-addon

此故事本的附加提供了从右到左的切换,用于测试您组件的双向支持.
当这个加通活动时,它设置了当前故事体的 dir 属性为 rtl。 。 。 .

此加法假设父故事簿应用的默认文本取向为"左向右".

安装

安装 @brightlayer-ui/storybook-rtl-addon 运行 :

yarn add @brightlayer-ui/storybook-rtl-addon

在你身边 main.js 文件,注册此添加符 :

addons: ['@brightlayer-ui/storybook-rtl-addon/register']

使用量

此软件包输出两个函数 getDirection 打开 useDirection 返回当前 Direction ("rtl"或"ltr").

获取方向

getDirection 在故事中用于访问当前 Direction。在 React 中,此值只在初始组件挂载时设置.

Brightlayer UI在我们的故事书文档中广泛使用这个外加来保证我们的组件和实例的双向支持.

要查看此加词的活- 实例用法, 请点击每个链接示例的" Story" 标签 .

角用法

import { getDirection } from '@brightlayer-ui/storybook-rtl-addon';

export const angularExampleStory = () => ({
    template: `
        <div>{{direction}}</div>
    `,
    props: {
        direction: getDirection
    }
});

角构件:如果组件使用方向服务,则使用导出函数 getDirection() 供应 [dir] 附有适当指示的指示.

生活实例

反应用法

import { getDirection } from '@brightlayer-ui/storybook-rtl-addon';

export const reactExampleStory = () => {
    const direction = getDirection();
    return <div>{direction}</div>;
}

生活实例

使用方向

useDirection 是返回电流的回放钩 Direction 并重刊于每张 Direction 更改( 当正在显示 RTL 侧边栏按钮时)。 它可用于在装饰或故事中为供应商设定值.

import useDirection from "@brightlayer-ui/storybook-rtl-addon/useDirection";

export const decorators = [
    (Story) => {
        const direction = useDirection();
        return (
            <>
                {direction}
                <Story />
            </>
        );
    },
];

测试的框架

• 角 (^8. 0
• 反应 (^17.0.0)

本地测试

可通过使用 npm link 或者说 yarn link 命令.

从 addon 的根文件夹中运行以下内容,以便在变化发生时重建 addon :

yarn watch

从另一个终端运行 :

yarn link

从您的故事手册 app 的根文件夹中运行 :

yarn link @brightlayer-ui/storybook-rtl-addon

当测试此加词的本地版本时, 运行 :

yarn unlink @brightlayer-ui/storybook-rtl-addon