浅学一下 storybook

什么是 storybook

storybook是一个组件开发工具，它提供了完整的组件开发的生态环境，包括插件、用例、文档等等。

storybook 支持 react、vue、angular、web component 等主流前端 UI 框架。

怎么用 storybook

storybook 需要安装到已经设置了框架的项目中。

新建 react 应用

npx create-react-app react-app

初始化 storybook 配置

npx storybook init

启动 storybook

npm run storybook

[图片上传失败...(image-ab30a0-1656065341188)]

给组件写 story，一个 story 表示组件的一种状态。

story 的文件名约定为.stories.js。

import React from 'react';

import { Button } from './Button';

export default {
  title: 'Button', // 侧边栏导航名称
  component: Button, // 组件地址
};

export const Primary = () => <Button primary>Button</Button>;

storybook 呈现的用例展示如下

[图片上传失败...(image-813eb1-1656065341188)]

storybook 附带了内置的工具栏：

canvas：用于缩放组件、设置背景、设置尺寸及方向
docs：用于查看组件文档，从组件代码自动推断

[图片上传失败...(image-281540-1656065341188)]

storybook 附带了内置的插件：

controls：支持动态修改组件参数
actions：验证交互是否通过回调产生正确的输出

参考资料

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

浅学一下 storybook