【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的话,会增加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,},},
};
【storybook】你需要一款能在独立环境下开发组件并生成可视化控件文档的框架吗?(二)相关推荐
- 【storybook】你需要一款能在独立环境下开发组件并生成可视化控件文档的框架吗?(一)
storybook 介绍 入门 说说用法 prop-types .stories.jsx 下一篇: https://blog.csdn.net/tuzi007a/article/details/129 ...
- 【storybook】你需要一款能在独立环境下开发组件并生成可视化控件文档的框架吗?(三)
storybook 插件addons 核心插件 插件API argTypes 写文档 组件注释法 MDX 生成在线可视化UI文档 上一篇: https://blog.csdn.net/tuzi007a ...
- 局域网共享工具_局域网共享精灵,一款助力于局域网环境下文件共享和打印机共享的系统工具软件...
局域网文件打印机共享精灵系统工具软件是一款助力于局域网环境下文件共享和打印机共享的系统工具软件,它能助力于快捷高效的在您的局域网内实现文件共享和打印机共享的操作,有效提升办公效率. 11.下载地址: ...
- 先写API文档还是先写代码?你需要这款神器Apifox!
代码未动,文档先行 其实大家都知道 API 文档先行的重要性,但是在实践过程中往往会遇到很多困难. 程序员最讨厌的两件事:1. 写文档,2. 别人不写文档.大多数开发人员不愿意写 API 文档的原因是 ...
- 还在发愁写API文档?推荐一款阿里腾讯都在用的API管理神器!
欢迎关注方志朋的博客,回复"666"获面试宝典 前言 ❝ 程序员最讨厌的两件事:1. 写文档,2. 别人不写文档.大多数开发人员不愿意写 API 文档的原因:写文档短期收益远低于付 ...
- 盘点 8 款好用的 API 接口文档管理工具
随着互联网的普及和发展,API 接口已经无处不在.它已经在 Web 应用程序.移动应用程序.云计算.物联网.人工智能等领域中得到广泛应用. 例如,在金融行业中,API 接口可以被用于构建支付服务.银行 ...
- 一款强大的API接口文档管理工具(Smart-Doc + Torna)
[本文由龙飞同学供稿] 在团队协作开发项目的时候,接口文档承担着向其他开发人员说明接口相关信息的重要任务,因此,一份清晰而又相近的接口文档至关重要. 但是,写接口文档的痛苦想必各位开发人员都体验过,明 ...
- storybook初探:利用storybook构建组件文档库
storybook初探:利用storybook构建组件文档库 之前的一些项目上用到了storybook来构建组件的文档库,虽不够完善,但仍总结了一些简单的内容以供回顾. Storybook常用来打造团 ...
- 转换环境与执行环境、宿主环境与独立环境、宿主实现与独立实现
文章目录 1 转换环境与执行环境 1.1 转换环境与执行环境的概念 1.2 为什么要区分转换环境和执行环境 2 宿主环境和独立环境 2.1 宿主环境 2.2 独立环境 3 宿主实现.独立实现 3.1 ...
最新文章
- 【零基础】了解一下前端HTML与CSS
- python中列表的运用_python中列表的应用
- 层和 native_React-Native与小程序的底层框架比较
- 怎么写出一份令人惊叹的设计文档?
- ECharts 雷达图在类目值下面显示数值
- php图片上传 thinkphp5,thinkphp5图片上传接口
- react-native 第三方库
- 【图像边缘检测】基于matlab最小二乘法椭圆边缘检测【含Matlab源码146期】
- 【期末划重点】电路与电子技术基础
- Python书籍推荐:《Python编程之美:最佳实践指南》
- chrome谷歌浏览器离线安装axure插件打开页面原型
- cdr图片随意拉伸变形_PS入门篇(6)—修改图片尺寸
- 人心是暖的,眼泪是苦的,杜鹃花真的很香
- FPGA参数定义 regwire 详解
- PHP smarty
- win2012+r2+php+mysql_Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程
- 灰度共生矩阵(GLCM)并计算能量、熵、惯性矩、相关性(matlab)(待总结)
- Word样式的导入与导出
- 中职计算机应用基础word表格,计算机应用基础-word表格编辑.ppt
- html另存为对话框,前端实现弹出“另存为”对话框的三种方式
热门文章
- vscode 选择多行,将光标定位至每行行首或行尾
- 恒玄BES调试笔记-BES2500抢连
- IDEA @Autowired报黄报红解决
- 【MySQL】(6)常用函数
- Golang 打印耗时统计、纳秒级耗时统计(统计函数执行时间)
- wsl docker 启动elasticsearch vm.max_map_count [65530] is too low问题永久解决方案
- Java堆转储文件的生成及工具分析
- 瑞吉外卖(3)—菜品分类管理
- android 使用OPENGL ES实现三角形纹理贴图效果-纹理映射基础
- H5对于公司营销有哪些好处?