storybook doc-block argType 详解

参数详情 overview

字段说明
name同字段名,可省略
type.requireboolean
description描述
defaultValue数据:默认值
table.type.summary类型的简单描述
table.type.detail类型的长描述
table.defaultValue.summary显示:默认值
table.defaultValue.detail显示:默认值详细说明
control.type控件类型(需要有[数据]默认值) e.g. null , radio , text , number
options控件类型为 radio 时的值数组

举个 🌰 e.g.

Primary.argTypes = {
  fNotFoundImage: {
    name: 'fNotFoundImage',
    type: {
      required: false,
    },
    table: {
      defaultValue: {
        summary: 'null',
      },
      type: {
        summary: 'string | TemplateRef<void>'
      }
    },
    description: '图片url',
    defaultValue: null,
    options: [null, 'https://www.sass.hk/images/sass.png'],
    control: { type: 'radio' }, // 可简写成 => control: 'radio'
  }
};

控件参数详解

data type & 数据类型control type & 控件类型description & 描述options & 选项
arrayarrayserialize array into a comma-separated string inside a textboxseparator
booleanbooleancheckbox input-
numbernumbera numberic text box inputmin, max, step
-rangea range slider inputmin, max, step
objectobjectjson editor text input-
enumradioradio buttons input Ïoptions
-inline-radioinline radio buttons inputoptions
-checkmulti-select checkbox inputoptions
-inline-checkmulti-select inline checkbox inputoptions
-selectselect dropdown inputoptions
-multi-selectmulti-select dropdown inputoptions
stringtextsimple text input-
-colorcolor picker input that assumes strings are color values-
-datedate picker input-

再举个 🌰 e.g.

export default {
  title: 'Gizmo',
  component: Gizmo,
  argTypes: {
    width: { type: 'range', min: 400, max: 1200, step: 50 };
  },
};
Last modification:August 6, 2021
如果觉得文章对你有所收获,可以请笔者喝杯咖啡