storybook组件属性详解：组件props到strorybook Args_资讯

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

创始人

2025-05-30 12:49:48

0次

首先我们查看官方文档：ArgsTable

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

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

先看一下官方文档，Controls

官方的类型只有这些：Controls

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 } }}`
number	`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 很好办，比如：Storybook

具体写法：

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.

具体查看 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》,
请注明出处：storybook组件属性详解：组件props到strorybook Args - Storybook Driven Development学习笔记—组件化之后之组件管理 - 周陆军的个人网站

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：React如何通过代理进行本地调测

下一篇：前端响应式设计漫谈

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

相关内容

热门资讯