Storybook Addon 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

Getter 函數，它將活動語系作為參數，並期望回傳一個訊息的 object。

（請參閱 react-intl 的 IntlProvider 文件中的 messages）

getFormats

類型：(locale: string) => object

Getter 函數，它將活動語系作為參數，並期望回傳一個格式的 object。

（請參閱 react-intl 的 IntlProvider 文件中的 formats）

defaultRichTextElements

類型：object

富文本元素的 Object。

（請參閱 react-intl 的 IntlProvider 文件中的 defaultRichTextElements）