Skip to main content

FormSelect

Function FormSelect 

Source
pub fn FormSelect<T: Clone + PartialEq + 'static>(
    _: FormSelectProps<T>,
) -> Element
Expand 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:选中变化回调,回传新选中项的值

§Props

For details, see the props struct definition.