Storybook 插件 Intl

Intl 插件可用于提供语言切换器和 react-intl。

入门

首先，安装插件

npm install -D storybook-addon-intl

然后，将以下内容添加到 .storybook/main.js 文件中

export default {
    addons: ['storybook-addon-intl']
};

在 .storybook/preview.js 文件中，添加以下内容

// Provide your messages
const messages = {
    en: { message: 'Just some text.' },
    de: { message: 'Nur etwas Text.' },
    es: { message: 'Sólo un texto.' }
};

const getMessages = (locale) => messages[locale];

export default {
    parameters: {
        intl: {
            locales: defaultLocales,
            defaultLocale: 'en',
            getMessages
        }
    }
};

配置

参数键：intl

语言环境

类型：string[]

可用的语言环境。

默认语言环境

类型：string

回退语言环境。

获取消息

类型：(locale: string) => object

获取函数，它以活动语言环境作为参数，并期望返回一个消息对象。

（参见 react-intl 的 IntlProvider 文档 中的 messages）

获取格式

类型：(locale: string) => object

获取函数，它以活动语言环境作为参数，并期望返回一个格式对象。

（参见 react-intl 的 IntlProvider 文档 中的 formats）

默认富文本元素

类型：object

富文本元素对象。

（参见 react-intl 的 IntlProvider 文档 中的 defaultRichTextElements）