iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
1
Modern Web

玩轉 Storybook系列 第 15

玩轉 Storybook: Day 15 Addons - Controls

Controls Addon 提供 Storybook 一個視覺化動態設定元件參數的方式,這樣就不需要寫程式重啟,也能發現元件的變化。

要使用 Controls addon,Stories在撰寫的時候必需要使用args,Storybook會自動為其產生對應的操作控制項,你也可以更深入的使用argTypes為Controls做設定。

args

使用args,因為Storybook會自動為其產生對應的操作控制項,如果是文字類型會產生文字輸入框,如果是布林值會顯示True|False開關。

我們先把預設的Button Story設定的argTypes關掉,可以發現backgroundColor及size現在只有文字可以設定。

argsTypes

使用args表示輸入的設定值必需是要可以設定的值不能輸入錯誤,元件才會產生對應的變化,如果需要更好的操作方式,就可以使用argTypes指定control的控制項。

backgroundColor可以使用control:'color',這樣Storybook會幫我們產生ColorPicker

size可以使用Select下拉選單,防止輸入不是預期的值

control:{type:'select', options:[...]}

argsTypes Annotation

以下表格是argsTypes可以讓我們指定的控制項顯示方式

試看看

回憶一下Taskbox的專案,我們的Task有三種狀態

分別是Task_INBOXTASK_PINNEDTASK_ARCHIVED

就讓我們使用argTypes的方式去指定顯示Control的方式吧

在這邊使用inline-radio的方式來顯示狀態的切換

// src/components/Task.stories.js
import { action } from "@storybook/addon-actions";
import Task from "./Task";
export default {
  title: "Task",
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
  argTypes: {
    state: {
        control: {
          type: 'inline-radio',
          options: ['Task_INBOX', 'TASK_PINNED', 'TASK_ARCHIVED'],
        },
    },
  },
};

Stories的設定修改好了,控制項也在畫面上看到是用radio呈現

但元件狀態並沒有跟著指定的狀態做變化,畫面也顯示提示訊息

觀察程式碼後發現,僅只有設定argTypes是不夠的,還必需把argTypes跟Template合併在一起,原來Task Stories的寫法也比較冗長,讓我們做一些優化及簡化修改吧!

// src/components/Task.stories.js

...

const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { Task },
    template: `
        <task :task="$props" 
          @archive-task="onArchiveTask"
          @pin-task="onPinTask" />
    `,
    methods: actionsData
});

// Default Task State
export const Default = Template.bind({});
Default.args = taskData;

// Pinned Task State
export const Pinned = Template.bind({});
Pinned.args = Object.assign({}, taskData, {state: "TASK_PINNED"});

// Archived Task State
export const Archived = Template.bind({});
Archived.args = Object.assign({}, taskData, {state: "TASK_ARCHIVED"});

接下觀察Storybook運行的畫面,在側邊欄可以看到每種狀態 Task 的變化,我們也可以在 Controls Addon 透過修改參數來顯示 Task 元件的不同。

update_at的字串輸入框,也可以改由DatePicker來顯示

updated_at: { control: 'date'}

Anular的寫法差異不大,只是Template的寫法要做調整

完整程式碼:VueAngular

Next

接下來要介紹二個在實際上開發非常實用的Addon - Viewport 及 Accessibility。

Reference

Essential Addons - Controls:VueAngular


上一篇
玩轉 Storybook: Day 14 Addons - Essential / Actions
下一篇
玩轉 Storybook: Day 16 Addons - Viewport/Accessibility
系列文
玩轉 Storybook30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言