建设储蓄卡网站,网站建设规划申请,html制作电影网站,广告信息发布平台storybook回顾继续说说用法配置文件介绍回顾
上篇博客地址#xff1a;
https://blog.csdn.net/tuzi007a/article/details/129192502说了部分用法。 继续说说用法
配置文件介绍
开发环境的配置都在.storybook目录中#xff0c;里面包含了2个文件
main.js
preview.js先看m…
storybook回顾继续说说用法配置文件介绍回顾
上篇博客地址
https://blog.csdn.net/tuzi007a/article/details/129192502说了部分用法。 继续说说用法
配置文件介绍
开发环境的配置都在.storybook目录中里面包含了2个文件
main.js
preview.js先看main.js文件。
该文件是在安装了storybook后自动生成的里面本身就包含了支持当前框架在开发环境的配置
我们所要做的是在配置上进行补充比如支持less sass scss等增加addon插件修改
stories加载目录修改打包工具版本和对应功能等。
module.exports {stories: [ // 生成可视化UI控件文档时会加载哪些文件// stories目录下的所有.stories.mdx文件../stories/**/*.stories.mdx,// stories目录下的所有.stories.js .jsx .ts .tsx文件../stories/**/*.stories.(js|jsx|ts|tsx)],addons: [// 用于配置storybook的插件// 在安装storybook后这里会自动加载一些常用插件],babel: async (options) {// ...options// babel的配置我们一般在根目录下的.babelrc.js中处理}, // 你使用的框架对应的storybook版本// 比如react框架对应的storybook版本是storybook/reactframework: xxx, // 核心打包工具配置// 比如使用storybook的哪个版本用webpack5的哪个版本打包是否懒加载是否要缓存等core: {builder: {name: webpack5,options: {lazyCompilation: true,fsCache: true}},},webpackFinal: async (config, { configType }) {// 这里写入webpack的补充配置// 不要试图去修改入口和出口// config是一个配置对象要配置哪个参数就从config中调用配置项然后进行追加// 比如config.module.rules.push({...})用来增加loader的配置// config.devtool “xxx-source-map”用来增加source-map的配置// config.plugins.push(xxx)用来增加webpack plugin的配置// 最后要返回配置内容 固定写法return config;}
}再来看看preview.js文件
它主要用于控制story的渲染在渲染story时提供一些数据上的配置。
它有3个配置项
decoratorsparametersglobalTypes
下面进行一一介绍。
decorators
它是一个数组负责为story提供渲染数据可以对单个story使用也可以对某个组件使用
还可以放在全局配置里因此它有如下多种写法
第一种对单个story使用
// Button.stories.jsximport React from react;
import { Button } from ./Button;export default {title: Example/Button,component: Buttonconst Template (args) Button {...args} /;
export const Primary Template.bind({});
Primary.decorators [(Story) (div style{{ margin: 3em }}Story //div),
];配置结果 当前如果选择查看Primary这个story的话会增加3em的margin 而选择查看其他story的时候则不会
第二种对以Button组件为模板的story使用
// Button.stories.jsximport React from react;
import { Button } from ./Button;export default {title: Button,component: Button,decorators: [(Story) (div style{{ margin: 3em }}Story //div),],
};配置后可以看到所有以Button为模板的story它们的margin都增加了3em 而以其他组件为模板的story则不会
第三种对全局的story和组件使用这需要在.storybook/preview.js中配置
// .storybook/preview.jsimport React from react;export const decorators [(Story) (div style{{ margin: 3em }}Story //div),
];然后就可以看到所有的story都增加了3em的margin parameters
它是一个对象是用来控制如下内容的 比如背景色选项事件控制器显示等。
先来看下安装storybook后自动生成的.storybook/preview.js下关于parameters全局配置文件
export const parameters {// 配置事件显示如果组件中的props参数是on大写字母就当作事件处理比如onClickactions: { argTypesRegex: ^on[A-Z].* },// 控制器controls: {matchers: {// 如果props参数里有background或者color就把控制器显示成选色器的样子color: /(background|color)$/i,// 如果props参数是Date就把该参数对应的控制器显示成时间选择器的样式date: /Date$/,},},
}parameters同样有三种配置方式分别对单个story生效、对以某个组件为模板的story生效
和全局生效。下面就以backgrounds配置项为例来说说。就是这里 该配置项用来控制可视化UI文档的背景主题色默认有两种light和dark默认选择是light
也就是图中显示的白色选择dark就会显示成黑色 现在要重新设置选择项让主题色有红色绿色和蓝色的选择项。
第一种方式对单个story配置
// Button.stories.jsximport { Button } from ./Button;export default {title: Button,component: Button,
};const Template (args) Button {...args} /;export const Primary Template.bind({});
Primary.args {primary: true,label: Button,
};
Primary.parameters {backgrounds: {values: [{ name: red, value: #f00 },{ name: green, value: #0f0 },{ name: blue, value: #00f },],},
};此时选择查看Primary这个story就可以选择背景色了
点击这里选择背景色 可以看到可分别选择红黄蓝三种颜色而其他story下就不具备这个选择。
第二种方式对以某个组件为模板的story生效
import React from react;
import { Button } from ../src;export default {title: Example/Button,component: Button,argTypes: {backgroundColor: { control: color },},parameters: {backgrounds: {values: [{ name: red, value: #f00 },{ name: green, value: #0f0 },{ name: blue, value: #00f },],},}
};第三种方式就是在preview.js中配置全局主题背景色
// .storybook/preview.jsexport const parameters {backgrounds: {values: [{ name: red, value: #f00 },{ name: green, value: #0f0 },],},
};globalTypes
这个是全局生效的配置可以设置主题色工具条等。
可参考文档
https://storybook.js.org/docs/react/essentials/toolbars-and-globals全局配置示例
// .storybook/preview.jsexport const globalTypes {theme: { // 主题name: Theme,description: Global theme for components,defaultValue: light,toolbar: {icon: circlehollow,// Array of plain string values or MenuItem shape (see below)items: [light, dark],// Property that specifies if the name of the item will be displayedshowName: true,// Change title based on selected valuedynamicTitle: true,},},
};
