# @brightlayer-ui/storybook-rtl-addon 中文文档

规范地址：https://npmcn.com/package/%40brightlayer-ui/storybook-rtl-addon/

版本：1\.1\.0
npm 元数据更新时间：2022-12-14T12:43:21.240Z
中文译文更新时间：2026-11-09T21:42:40.785Z
软件包许可：BSD-3-Clause

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40brightlayer-ui/storybook-rtl-addon
原文对照：https://npmcn.com/package/%40brightlayer-ui/storybook-rtl-addon/?lang=original
项目主页：https://github.com/brightlayer-ui/storybook-addons#readme
源码仓库：https://github.com/brightlayer-ui/storybook-addons

弃用说明：This package has been deprecated\.

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：19.2 kB，23 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@storybook/addons \>= 5\.x，@storybook/api \>= 5\.x，@storybook/components \>= 5\.x，@storybook/core-events \>= 5\.x
- 首次发布：2021-10-21T16:25:25.629Z
- 最新版本发布：2021-10-26T12:15:34.243Z
- 近 30 天下载量：1715（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

RTL 故事簿切换

## 安装

```sh
npm install @brightlayer-ui/storybook-rtl-addon
```

也可以使用：`pnpm add @brightlayer-ui/storybook-rtl-addon`、`yarn add @brightlayer-ui/storybook-rtl-addon`、`bun add @brightlayer-ui/storybook-rtl-addon`

## README

![npm](https://img.shields.io/npm/v/@brightlayer-ui/storybook-rtl-addon?label=%40brightlayer-ui%2Fstorybook-rtl-addon)

# @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" 标签 .

### 角用法

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

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

```

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

[生活实例](https://brightlayer-ui-components.github.io/angular/?path=/story/components-score-card--with-full-config)

### 反应用法

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

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

```

[生活实例](https://brightlayer-ui-components.github.io/react/?path=/story/components-user-menu--within-toolbar)

### 使用方向

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

```ts
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`

## 常见问题

### @brightlayer-ui/storybook-rtl-addon 是什么？

RTL 故事簿切换注意：该包已被作者标记为弃用——This package has been deprecated\.

### 如何安装 @brightlayer-ui/storybook-rtl-addon？

在项目目录运行 npm install @brightlayer-ui/storybook-rtl-addon，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@storybook/addons（\>= 5\.x）、@storybook/api（\>= 5\.x）、@storybook/components（\>= 5\.x）、@storybook/core-events（\>= 5\.x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @brightlayer-ui/storybook-rtl-addon 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @brightlayer-ui/storybook-rtl-addon 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @brightlayer-ui/storybook-rtl-addon 可以商用吗？

@brightlayer-ui/storybook-rtl-addon 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @brightlayer-ui/storybook-rtl-addon 的下载量有多少？

根据 npm 官方下载统计，@brightlayer-ui/storybook-rtl-addon 在 2026/10/09 – 2026/11/07 这 30 天内被下载 1,715 次，日均约 57 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @brightlayer-ui/storybook-rtl-addon 还在维护吗？

最新版本 1\.1\.0 发布于 2021/10/26（5 年前）；至今共发布 2 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/10/22。作者已将其标记为弃用，新项目建议寻找替代方案。