[Day11] Storybook - Controls

Storybook 有一个很强大的辅具工具 Controls ，它提供一个 GUI 介面让我们可以即时的调整元件的参数，必且会立即在 Canvas 中改变元件的样貌，而且不需在元件中攥写任何的程序码，它会自动根据元件中定义的 props, emits、slots 产生基础的互动介面。

不过要使用 Controls 有一个前提，就是需要使用 args 的方式攥写 Story，如果不是用 args 的方式，Controls 产生出来的只会是无法互动的文档而已。

Choosing the control type

预设的情况下，Controls 会根据 Props 的型别和初始值产生对应的控制面板，例如

• 字串 (string) - 文字输入框
• 布林值 (boolean) - 开关切换按钮

// src/stories/Button.vue
export default {
  ...
  props: {
    label: {
      type: String,
      required: true,
    },
    primary: {
      type: Boolean,
      default: true,
    }
  }
}

但有些情况我们会需要更严谨或是更便利的控制面板，例如下面这个例子。

Button.vue 中有一个 size 属性，型别为字串，且只有在值为 small, medium 或 large 时才有效果，但在预设下，因为 size 的型别是字串，所以控制面板会出现文字输入框让我们操作。

但因为 size 的值其实是有限制的，所以文字输入框对於这样的情境来说并不是最好的控制面板，因此我们可以透过为 size 属性自定义 argTypes 来指定要使用哪种控制面板。

// src/stories/Button.stories.js
export default {
  title: 'Example/Button',
  component: MyButton,
  argTypes: {
    size: {
      control: {
        type: 'select',
        options: ['small', 'medium', 'large']
      }
    }
  }
}ㄥ

除了 select 以外还有非常多的 control type 可以设定，这里有一份完整列表可以给大家参考，我就不在这边一一列举了 XD。

Custom control type matchers

如果有自己动手玩玩 Storybook 的朋友一定会发现为什麽 backgroundColor 属性好像没有在做任何设定，但它的控制面板却不是单纯的文字输入框，而是可以带有调色盘的文字输入框。

这是因为 Storybook Controls 预设有使用正则表达式针对一些关键字来推断它们，并呈现指定的控制面板，如果我们想要更改它或是新增正规表达式，可以在 preview.js 中的 parameter 下针对 controls.matchers 作设定。

// .storybook/preview.js

export const parameters = {
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

参考资料

• Storybook - Controls
• Storybook - ArgTypes

今天的分享就到这边，如果大家对我分享的内容有兴趣欢迎点击追踪 & 订阅系列文章，如果对内容有任何疑问，或是文章内容有错误，都非常欢迎留言讨论或指教的！

明天要来分享的是 Storybook 主题的第五篇 Writing Docs，那我们明天见！