REAL SHOWCASE SOURCEdropdown-states
1 个文件 · 45 行 · TypeScript
// ===== showcase/src/examples/components/dropdown.ts ===== import { RenderComboBox, RenderPageHeader, RenderStackPanel, RenderText,} from 'ds-ui' const options = [ { value: 'respiratory', label: '呼吸内科' }, { value: 'cardiology', label: '心内科' }, { value: 'neurology', label: '神经内科' }, { value: 'radiology', label: '放射科' }, { value: 'laboratory', label: '检验科' },] export function createDropdownExample(): RenderStackPanel { const status = new RenderText('打开下拉框,尝试搜索、键盘导航、清除和状态切换') const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' }) panel.addChild(new RenderPageHeader({ title: 'Dropdown 单选下拉', description: '搜索、清除、前后缀、校验、只读和禁用状态使用同一公共组件。', })) panel.addChild(new RenderComboBox({ options, value: 'respiratory', placeholder: '选择科室', searchable: true, clearable: true, prefixText: '科室', onChange: (_value, option) => { status.text = option ? `已选择:${option.label}` : '已清除科室' }, })) panel.addChild(new RenderComboBox({ options, placeholder: '请选择会诊科室', status: 'error', helperText: '会诊科室为必填项', })) panel.addChild(new RenderComboBox({ options, value: 'radiology', readonly: true, suffixText: '只读' })) panel.addChild(new RenderComboBox({ options, value: 'laboratory', disabled: true, suffixText: '禁用' })) panel.addChild(status) panel.padding = 24 return panel}