0
点赞
收藏
分享

微信扫一扫

storybook组件属性详解:组件props到strorybook Args

J简文 2023-03-18 阅读 65

首先我们查看官方文档:​​https://storybook.js.org/docs/vue/writing-docs/doc-block-argstable#customizing​​

官方的例子么有看到v-model如何处理,数组、对象等复杂属性定义。

这里一个是props的定义,一个是Controls

先看一下官方文档,​​https://storybook.js.org/docs/vue/essentials/controls​​

官方的类型只有这些:​​https://storybook.js.org/docs/vue/essentials/controls#annotation​​

Data Tye

Control

Description

boolean

​boolean​

Provides a toggle for switching between possible states.

​argTypes: { active: { control: 'boolean' }}​

number

​number​

Provides a numeric input to include the range of all possible values.

​argTypes: { even: { control: { type: 'number', min:1, max:30, step: 2 } }}​

​range​

Provides a range slider component to include all possible values.

​argTypes: { odd: { control: { type: 'range', min: 1, max: 30, step: 3 } }}​

object

​object​

Provides a JSON-based editor component to handle the object's values.

Also allows edition in raw mode.

​argTypes: { user: { control: 'object' }}​

array

​object​

Provides a JSON-based editor component to handle the values of the array.

Also allows edition in raw mode.

​argTypes: { odd: { control: 'object' }}​


​file​

Provides a file input component that returns an array of URLs.

Can be further customized to accept specific file types.

​argTypes: { avatar: { control: { type: 'file', accept: '.png' } }}​

enum

​radio​

Provides a set of radio buttons based on the available options.

​argTypes: { contact: { control: 'radio', options: ['email', 'phone', 'mail'] }}​

​inline-radio​

Provides a set of inlined radio buttons based on the available options.

​argTypes: { contact: { control: 'inline-radio', options: ['email', 'phone', 'mail'] }}​

​check​

Provides a set of checkbox components for selecting multiple options.

​argTypes: { contact: { control: 'check', options: ['email', 'phone', 'mail'] }}​

​inline-check​

Provides a set of inlined checkbox components for selecting multiple options.

​argTypes: { contact: { control: 'inline-check', options: ['email', 'phone', 'mail'] }}​

​select​

Provides a drop-down list component to handle single value selection. ​​argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}​

​multi-select​

Provides a drop-down list that allows multiple selected values. ​​argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}​

string

​text​

Provides a freeform text input.

​argTypes: { label: { control: 'text' }}​

​color​

Provides a color picker component to handle color values.

Can be additionally configured to include a set of color presets.

​argTypes: { color: { control: { type: 'color', presetColors: ['red', 'green']} }}​

​date​

Provides a datepicker component to handle date selection. ​​argTypes: { startDate: { control: 'date' }}​

但这些都是简单类型,如果是复杂类型,react 很好办,比如:​​https://5a375b97f4b14f0020b0cda3-pmgvlqukun.chromatic.com/?path=/story/argtypes-typescript--unions​​

具体写法:

​​https://storybook.js.org/docs/vue/api/argtypes​​

const argTypes = {
label: {
name: 'label',
type: { name: 'string', required: false },
defaultValue: 'Hello',
description: 'demo description',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'Hello' },
},
control: {
type: 'text'
}
}
}

table 能够更好的描述清属性


Field

Description

​name​

The name of the property.

​argTypes: { label: { name: 'Something' } }​

​type.name​

Sets a type for the property.

​argTypes: { label: { type: { name: 'number' } } }​

​type.required​

Sets the property as optional or required.

​argTypes: { label: { type: { required: true } }​

​description​

Sets a Markdown description for the property.

​argTypes: { label: { description: 'Something' } }​

category

分类

​table.type.summary​

Provide a  short version of the type.

​argTypes: { label: { table: { type: { summary: 'a short summary' } }}}​

​table.type.detail​

Provides an extended version of the type.

​argTypes: { label: { table: { type: { detail: 'something' } }}}​

​table.defaultValue.summary​

Provide a short version of the default value.

​argTypes: { label: { table: { defaultValue: { summary: 'Hello World' } }}}​

​table.defaultValue.detail​

Provides a longer version of the default value.

​argTypes: { label: { table: { defaultValue: { detail: 'Something' } }}}​

​control​

Associates a control for the property.

​argTypes: { label: { control: { type: 'text'} } }​​Read the  ​​Essentials documentation​​ to learn more about controls.

具体查看 ​​https://storybook.js.org/docs/vue/writing-docs/doc-block-argstable​​


给一个案例

// SubmitForm.stories.ts
...
export default {
title: "ui组件/SubmitForm",
component: SubmitForm,
argTypes: {
refName: {
description: '表单组件引用',
type: {
required: true,
},
table: {
defaultValue: {
summary: 'defaultNameRef',
}
},
control: {
type: 'text'
}
},
schema: {
type: {
required: true,
},
table: {
type: {
summary: '渲染表单所需JSON结构',
detail: 'JSON结构包含表单渲染、交互所需要的必要字段,也包含表单的校验规则',
},
defaultValue: {
summary: '[]',
detail: `[
{
key: "moduleName",
name: "title",
type: SchemaType.Text,
label: "栏目名称",
placeholder: "请输入栏目名称",
attrs: {
//
},
rules: [
{
required: true,
message: "栏目名称必填~",
trigger: RuleTrigger.Blur,
},
],
}
]
`
}
}
},
runtimeChange: {
description: '实时监听表单的更新',
table: {
category: 'Events',
},
}
}
};
...



转载​​本站​​文章《​​storybook组件属性详解:组件props到strorybook Args​​》,
请注明出处:​​https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8895.html​​

举报

相关推荐

0 条评论