Select
Bootstrap 2.3.2 Select: five direct Base parts, controlled selection and anchored popup.
Bootstrap 2.3.2 Select 提供 Root、Trigger、Value、Content、Item 五个真实原型,每个 part 直接消费对应 Base hook。当前是 draft workspace 源码;源码和 synthetic DOM 测试不等于原生宿主验收通过。
四个例子分别展示非受控 value、禁用、受控 value、RTL 长标签。受控示例选择一个选项后,需要点击 Accept selection 才会提供新的 owner value;popup 可以先关闭,已提交值保持原状。预览工具栏使用本体系真实 Select parts 切换 WC、React、Vue、Vue 2。
五个 part,一个 owner
Section titled “五个 part,一个 owner”- Root 持有
open、value、selected text、collection 和请求。分别传入open/value时进入独立受控模式;defaultOpen/defaultValue初始化非受控状态。保留disabled与closeOnSelect。 - Trigger 投射 combobox 关系、effective disabled 和交互状态。指针激活 toggle;Enter/Space 打开;ArrowDown/ArrowUp 从已选项或首/末可用项进入。
- Value 按 selected text、raw value、placeholder、空内容回退,不拥有输入或 focus。
- Content 持有 listbox、fixed anchored portal、碰撞处理和键盘导航。保留
side、align、sideOffset、alignOffset、avoidCollisions、collisionPadding和 Transition props;本投影使用零时长 presence。 - Item 持有 option identity 与派生 selected/active。指针、Enter、Space 提交可用项;导航和 hover 不提交 value,禁用项从导航中跳过。
Escape 取消并返回 Trigger focus,Tab 关闭但不阻止遍历,outside press 关闭。Root 请求仍为 openChange 与 valueChange,Item 另发出 select。更新已选 Item 的 textValue 会刷新显示标签。
长标签换行且可收缩;Content 受宿主 available width/height 约束,文字对齐和尾部指示符遵循逻辑方向。外部需给 Trigger focus ring 留白。此处是 select-only 单选协议;form submission、editable search、multi-select、虚拟化和 item-aligned positioning 不属于当前 Base 保证。
使用 workspace 源码
Section titled “使用 workspace 源码”import { selectRoot, selectTrigger, selectValue, selectContent, selectItem,} from '@proto.ui/prototypes-bootstrap-2-3-2/select';source-only CLI 项 bootstrap-2-3-2-select 仅在显式 workspace source mode 下生成四种 Web facade 的完整五 part。包仍是 private、未发布;GPUI facade generation 尚未实现。
Bootstrap 2.3.2 原本使用原生 HTML select;当前自定义 Select 明确属于 Proto UI 设计语言扩展,借鉴该版本 button-dropdown 表现。保留 Trigger 4px、panel 6px 圆角、0/5/10px popup shadow 和按 rem 表达的 3px/20px option 留白。改为长标签换行、有界 portal 宽度、明确 focus outline,并加深蓝色高亮以支持白字阅读。不加载 jQuery、Glyphicons 或 upstream JavaScript;源码包保留 Apache 2.0 署名。