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

locales

类型：string[]

可用的语言环境。

defaultLocale

类型：string

备用语言环境。

getMessages

类型：(locale: string) => object

一个获取函数，以当前激活的语言环境作为参数，并期望返回一个消息 object。

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

getFormats

类型：(locale: string) => object

一个获取函数，以当前激活的语言环境作为参数，并期望返回一个格式 object。

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

defaultRichTextElements

类型：object

富文本元素的 object。

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