Skip to main content

浅学一下 storybook

· 2 min read

什么是 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.png

给组件写 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.png

storybook 附带了内置的工具栏：

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

image.png

storybook 附带了内置的插件：

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

参考资料​