pub fn FormSelect<T: Clone + PartialEq + 'static>(
_: FormSelectProps<T>,
) -> ElementExpand description
下拉选择框组件(自定义弹层,全主题化)。
原生 <select> 的弹出列表由 OS/浏览器渲染,无法跟随主题(暗色下是白底
系统菜单),故用 button[aria-haspopup=listbox] + 绝对定位面板重写:
- 面板/选项全部使用 Catppuccin 语义色,带
select-enter入场动画; - focus 始终留在触发器,键盘经
aria-activedescendant高亮(↑↓ 循环、 Enter/Space 选中、Esc 关闭、Home/End 跳首尾、Tab 关闭并自然流转焦点); - 透明遮罩拦截外部点击关闭(同 Popover 模式);选项
onmousedown阻止默认 行为,点击不夺走触发器焦点; - 打开时视口下方空间不足且上方更宽余则向上展开(
should_flip); - 泛型值绑定:
onchange直接回传选中项的T,无需字符串反查。
Props:
id:触发器 id,用于与 label 关联(缺省用内部计数器生成)value:当前选中项(受控)options:可选项(值, 标签)列表onchange:选中变化回调,回传新选中项的值aria_label:触发器无障碍标签(可选);可见文本不足以表意时传入, 如 TimePicker 的「小时」/「分钟」
§Props
For details, see the props struct definition.
id:Option<String>value:Toptions:Vec<(T,&'staticstr)>onchange:EventHandler<T>trigger_class:Option<&'staticstr>触发器样式覆盖:缺省为全宽表单款;工具栏内联场景传
FORM_SELECT_COMPACT_CLASS,或自定义类串(如编辑器底部胶囊)。aria_label:Option<&'staticstr>触发器无障碍标签:缺省不加 aria-label(触发器可见文本即标签)。