StoryBook的所有control类型

135 阅读1分钟

在Storybook中,控制(Controls)的类型主要用于在组件的文档和故事(stories)中交互地调整组件的属性(props)。以下是根据参考文章提供的信息列出的Storybook的一些常见控制类型(Control Types):

text:文本输入框,用于输入字符串类型的值。

javascript复制代码
	{  

	  control: {  

	    type: 'text'  

	  }  

	}

select:下拉选择框,用于从预定义的选项中选择一个值。

javascript复制代码
	{  

	  control: {  

	    type: 'select',  

	    options: ['a', 'b', 'c']  

	  }  

	}

boolean:布尔类型,通常显示为切换按钮(toggle button)。

javascript复制代码
	{  

	  control: {  

	    type: 'boolean'  

	  }  

	}

number:数字输入框,用于输入数字类型的值。

javascript复制代码
	{  

	  control: {  

	    type: 'number'  

	  }  

	}

range:范围滑块,允许用户在一个数值范围内选择一个值。

javascript复制代码
	{  

	  control: {  

	    type: 'range',  

	    min: 0,  

	    max: 100,  

	    step: 1  

	  }  

	}

color:颜色选择器,用于选择颜色值。

javascript复制代码
	{  

	  control: {  

	    type: 'color'  

	  }  

	}

date:日期选择器,用于选择日期。

javascript复制代码
	{  

	  control: {  

	    type: 'date'  

	  }  

	}

object:对象类型,通常用于显示和编辑复杂的对象结构,但具体的UI表现可能依赖于Storybook的版本和配置。

javascript复制代码
	{  

	  control: {  

	    type: 'object'  

	  }  

	}

array:数组类型,允许用户添加、删除和编辑数组元素。具体的UI表现可能依赖于Storybook的版本和配置。

javascript复制代码
    {  

      control: {  

        type: 'array'  

      }  

    }