本指南假定您正在使用 Storybook >=7.0,并遵循了入门指南。还没有?则运行
# Add Storybook:
npm create storybook@latest
Bootstrap
在您的 .storybook/preview.js
文件中导入 Bootstrap 文件。
// .storybook/preview.js
import 'bootstrap/dist/css/bootstrap.min.css';
// Only import this if you want to use Bootstrap's
// JQuery helpers
import 'bootstrap/dist/js/bootstrap.bundle';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
expanded: true,
hideNoControlsWarning: true,
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
查看我们的Sass 指南,了解如何配置 Storybook 以与 Sass 协同工作。
Bootstrap 现在带有暗黑模式,您可以通过向父元素添加 [data-bs-theme]
数据属性来激活它。
您可以使用 @storybook/addon-themes 为您的 stories 添加一个主题切换器。
运行以下脚本安装并注册此插件
npx storybook@latest add @storybook/addon-themes
底层逻辑运行了 npx @storybook/auto-config themes
,它应该会读取您的项目并尝试用正确的装饰器配置您的 Storybook。如果直接运行该命令不能解决您的问题,请在@storybook/auto-config 仓库中提交一个 bug,以便我们改进它。要手动添加此插件,请安装它,然后将其添加到您 .storybook/main.ts
文件中的 addons 数组中。
然后,为了让您的 stories 可以一键切换这些模式,请通过将以下代码添加到您的 .storybook/preview.js
文件中来使用我们的 withThemeByDataAttribute
装饰器。
// .storybook/preview.js
import { withThemeByDataAttribute } from '@storybook/addon-themes';
// snipped for brevity
export const decorators = [
withThemeByDataAttribute({
themes: {
light: 'light',
dark: 'dark',
},
defaultTheme: 'light',
attributeName: 'data-bs-theme',
}),
];
现在您已准备好在 Storybook 中使用 Bootstrap 了。🎉 查看示例仓库以快速入门。
如果您在工作中使用 Bootstrap,我们很乐意听取您关于 Bootstrap + Storybook 体验的反馈。加入Discord 与维护者交流并参与其中,或查阅插件文档。