当前位置: 首页 > news >正文

【storybook】你需要一款能在独立环境下开发组件并生成可视化控件文档的框架吗?(二)

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/react"framework: "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个配置项,

  • decorators
  • parameters
  • globalTypes

下面进行一一介绍。

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的话,会增加3emmargin
在这里插入图片描述
而选择查看其他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文档的背景主题色,默认有两种,lightdark,默认选择是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,},},
};

http://www.lryc.cn/news/18374.html

相关文章:

  • (免费分享)基于ssm的BBS社区论坛系统带论文
  • RebbitMQ 消息队列(简单使用)
  • OpenCV-Python学习(21)—— OpenCV 图像几何变换之图像翻转(cv.flip、np.flip)
  • CRM系统能帮外贸行业解决哪些问题
  • 掌握lombok简化Java编码完成后端提效
  • 【蓝桥集训】第七天——并查集
  • 该来的总会来,继岳云鹏走红之后,孔云龙也和主流相声界打成一片
  • 索引的创建与设计原则
  • day51【代码随想录】动态规划之回文子串、最长回文子序列
  • 拟凸函数,拟凹函数,单峰函数
  • 数据处理(伪)代码:卡尔曼滤波 vs. 卡尔曼平滑
  • 华为OD机试题,用 Java 解【比赛评分】问题
  • 【基础算法】哈希表(开放寻址法)
  • 优化算法(寻优问题)
  • 基于视频流⽔线的Opencv缺陷检测项⽬
  • 百万数据excel导出功能如何实现?
  • 华为OD机试题,用 Java 解【合规数组】问题
  • SAP ABAP中的数据类型 Data Types
  • HashMap~
  • EasyNLP集成K-Global Pointer算法,支持中文信息抽取
  • mysql lesson3
  • python源码保护
  • 第51讲:SQL优化之COUNT查询的优化
  • ArrayBlockingQueue
  • DeepLabV3+:对预测处理的详解
  • 【Git】与“三年经验”就差个分支操作的距离
  • 【经验】win10设置自启动
  • Linux SPI-NAND 驱动开发指南
  • 【THREE.JS学习(3)】使用THREEJS加载GeoJSON地图数据
  • 在windows搭建Redis集群并整合入Springboot项目