什么是 storybook
storybook是一個組件開發(fā)工具，它提供了完整的組件開發(fā)的生態(tài)環(huán)境，包括插件、用例、文檔等等。
storybook 支持 react、vue、angular、web component 等主流前端 UI 框架。
怎么用 storybook
storybook 需要安裝到已經(jīng)設置了框架的項目中。
新建 react 應用
npx create-react-app react-app
初始化 storybook 配置
npx storybook init
啟動 storybook
npm run storybook
[圖片上傳失敗...(image-ab30a0-1656065341188)]
給組件寫 story，一個 story 表示組件的一種狀態(tài)。
story 的文件名約定為.stories.js。
import React from 'react';
import { Button } from './Button';
export default {
title: 'Button', // 側(cè)邊欄導航名稱
component: Button, // 組件地址
};
export const Primary = () => <Button primary>Button</Button>;
storybook 呈現(xiàn)的用例展示如下
[圖片上傳失敗...(image-813eb1-1656065341188)]
storybook 附帶了內(nèi)置的工具欄：
- canvas：用于縮放組件、設置背景、設置尺寸及方向
- docs：用于查看組件文檔，從組件代碼自動推斷
[圖片上傳失敗...(image-281540-1656065341188)]
storybook 附帶了內(nèi)置的插件：
- controls：支持動態(tài)修改組件參數(shù)
- actions：驗證交互是否通過回調(diào)產(chǎn)生正確的輸出
