Select

下拉选择：一个在浮出层中打开列表的输入框。

示例可交互

Select — Avalonia UIKit

Live demo unavailable

<Panel MinHeight="280">
  <ComboBox Width="200" PlaceholderText="Select a fruit" HorizontalAlignment="Left" VerticalAlignment="Top">
    <ComboBoxItem Content="Apple" />
    <ComboBoxItem Content="Banana" />
    <ComboBoxItem Content="Cherry" />
    <ComboBoxItem Content="Grape" />
    <ComboBoxItem Content="Orange" />
  </ComboBox>
</Panel>

用法

主题覆盖 ComboBox 与 ComboBoxItem。触发器是一个输入框，显示选中项（或弱化色的 PlaceholderText）和一个弱化色的折叠箭头；获得焦点或展开时显示焦点环，鼠标选择后仍保持焦点。禁用时外框淡化至半强度；在 ComboBoxItem 上设置 IsEnabled="False" 会使该行变弱。无效的选择（通过 DataValidationErrors 得到的 :error）会把边框变为危险色。

弹出层在触发器下方 6px 处打开（翻转时在触发器上方），宽度与触发器一致，最高 320px：浮层表面四周有 4px 内边距，包裹带圆角的行。键盘光标所在行显示强调色，悬停行显示 70% 的强调色，选中行带对勾标记。每次打开时，弹出层向下滑动 8px 并在 150ms 内淡入；打开期间触发器显示光标所在项。尺寸：xsmall、small、large（默认为 medium）。

当有选中项时，Classes="clearButton" 会用清除按钮替代折叠箭头；点击它会在不打开列表的情况下清除选择（ComboBox.Clear()）。IsEditable="True" 会让标题在同一个外框内变为文本框：输入某项的文字即可选中该项，F4 或 Alt+Down 打开列表，文本框获得焦点时外框显示焦点环。在文本框上右键会打开 Input 的菜单（剪切、复制、粘贴、全选）。

若需要搜索框、分组、多选、页脚或空视图，请使用 uikit:Select。

示例

四种尺寸。

尺寸可交互

Live demo unavailable

<Panel MinHeight="200">
  <WrapPanel ItemSpacing="8" LineSpacing="8" VerticalAlignment="Top">
    <ComboBox Classes="xsmall" Width="140" SelectedIndex="0">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
      <ComboBoxItem Content="Cherry" />
    </ComboBox>
    <ComboBox Classes="small" Width="140" SelectedIndex="0">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
      <ComboBoxItem Content="Cherry" />
    </ComboBox>
    <ComboBox Width="140" SelectedIndex="0">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
      <ComboBoxItem Content="Cherry" />
    </ComboBox>
    <ComboBox Classes="large" Width="140" SelectedIndex="0">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
      <ComboBoxItem Content="Cherry" />
    </ComboBox>
  </WrapPanel>
</Panel>

列表中禁用的条目、带值且禁用的选择器，以及显示占位符且禁用的选择器。

状态可交互

Live demo unavailable

<Panel MinHeight="220">
  <WrapPanel ItemSpacing="8" LineSpacing="8" VerticalAlignment="Top">
    <ComboBox Width="200" SelectedIndex="0">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
      <ComboBoxItem Content="Cherry" IsEnabled="False" />
      <ComboBoxItem Content="Grape" />
    </ComboBox>
    <ComboBox Width="200" SelectedIndex="0" IsEnabled="False">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
    </ComboBox>
    <ComboBox Width="200" PlaceholderText="Select a fruit" IsEnabled="False">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
    </ComboBox>
  </WrapPanel>
</Panel>

清除按钮：有值和无值两种状态。

清除按钮可交互

Live demo unavailable

<Panel MinHeight="200">
  <WrapPanel ItemSpacing="8" LineSpacing="8" VerticalAlignment="Top">
    <ComboBox Classes="clearButton" Width="200" SelectedIndex="1">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
      <ComboBoxItem Content="Cherry" />
    </ComboBox>
    <ComboBox Classes="clearButton" Width="200" PlaceholderText="Select a fruit">
      <ComboBoxItem Content="Apple" />
      <ComboBoxItem Content="Banana" />
      <ComboBoxItem Content="Cherry" />
    </ComboBox>
  </WrapPanel>
</Panel>

可编辑的选择器：输入水果名称，或从列表中选择它。

可编辑可交互

Live demo unavailable

<Panel MinHeight="200">
  <ComboBox IsEditable="True" Width="200" PlaceholderText="Type a fruit"
            HorizontalAlignment="Left" VerticalAlignment="Top">
    <ComboBoxItem Content="Apple" />
    <ComboBoxItem Content="Banana" />
    <ComboBoxItem Content="Cherry" />
    <ComboBoxItem Content="Grape" />
  </ComboBox>
</Panel>

Select

#用法

#示例

用法

示例