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_INBOX、TASK_PINNED、TASK_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的寫法要做調整

完整程式碼：Vue、Angular

Next

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

Reference

Essential Addons - Controls：Vue、Angular