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}