选择
Select允许商家从选项菜单中选择一个选项。当您有4个或更多选项时，请考虑选择，以避免使界面混乱。
呈现一个经典的下拉菜单或等效的选择器，由商家的浏览器决定。
进口｛选择｝从“@shopify /北极星”；进口｛useState，useCallback｝从“反应”；函数SelectExample（）｛常量［选择，setSelected］＝useState（“今天”）；常量handleSelectChange＝useCallback（（价值）= >setSelected（价值），［］）；常量选项＝［｛标签:“今天”，价值:“今天”｝，｛标签:“昨天”，价值:“昨天”｝，｛标签:“最后7天”，价值:“上”｝，］；返回（<选择标签＝“日期范围”选项＝｛选项｝onChange＝｛handleSelectChange｝价值＝｛选择｝/>）；｝道具
想要帮助完善这个功能吗?请分享你的反馈．
接口
SelectProps
- 选项? （（字符串|）|) []
-
可供选择的选项或选项组列表。
- 标签 反应．ReactNode
-
选择的标签。
- labelAction?
-
向标签添加一个操作。
- labelHidden? 布尔
-
在视觉上隐藏标签。
- labelInline? 布尔
-
将标签显示在值的左侧，即控件内部。
- 禁用? 布尔
-
禁用输入。
- helpText? 反应．ReactNode
-
辅助使用的附加文本。
- 占位符? 字符串
-
示例文本显示为占位符。
- id? 字符串
-
表单输入的ID。
- 的名字? 字符串
-
表单输入的名称。
- 价值? 字符串
-
的值。
- 错误? 任何
-
显示错误状态。
- onChange? （选择:字符串，id:字符串) = >无效
-
当选择被改变时回调。
- 得到焦点? () = >无效
-
当select被聚焦时回调。
- 元素失去焦点时? () = >无效
-
当焦点被移除时回调。
- requiredIndicator? 布尔
-
可视所需指示器，在标签上添加星号。
最佳实践
select组件应该:
- 用于在4个或更多预定义选项之间进行选择
- 尽可能选择一个默认选项
- 只有在没有逻辑默认选项时，才使用“Select”作为占位符选项
内容的指导方针
选择标签
标签:
- 对请求的输入做一个简短的描述(1-3个单词)。
- 以句式书写(第一个单词大写，其余字母小写)。
- 避免使用标点符号和冠词(“the”，“an”，“a”)。
- 句子要独立。支持国际化，它们不应该充当由组件选项结束的句子的第一部分。
- 是描述性的，而不是指导性的。如果选择需要更多解释，请使用字段下方的帮助文本。
做
- 电子邮件地址
不
- 你的电子邮件地址是什么?
做
- 电话号码
不
- 我的电话号码是:
选择选项
选项:
- OB欧宝娱乐APP如果没有默认选项，则以“Select”作为占位符开始
- 按字母顺序或其他逻辑顺序列出，以便商家可以轻松找到他们需要的选项
- 以句子形式书写(第一个单词大写，其余字母小写)，避免在每个选项的末尾使用逗号或分号
- 根据选项的作用明确地标注