选择

选择是一个由可获取的本地选择选项组成的家庭,这使得从列表中选择一个或多个选项变得容易. 选择导出下坠" 构成部分.

使用量

Dropdown 接受一系列选项,其中每个选项是包含至少2个属性的对象, id 打开 key。 。 。 .

import { Dropdown } from "@asphalt-react/selection"

function App() {
  let items = [
    { id: "1", key: "Apple" },
    { id: "2", key: "Banana" },
  ]

  return <Dropdown items={items} />
}

下坠

Dropdown 显示一个 popover 中的选项列表, 供用户选择 。 您可以在列表中过滤选项并设置初始选择的选项,同时选择所有选项. Dropdown 支持自定义选定选项的顺序,将其重置到初始状态并设定在初始渲染时打开.

降水主要由3个部分组成.

• 选择框 - 持有所选值
• ListBox - 持有选项
• 列表项目 - 选项本身

项目

这个 id 属性是 Dropdown 如何识别项目( K) 。 自然,它应该是独一无二的。 这个 key 属性的值将显示为列表项,因此用户可以轻松识别他们想要选择的选项.

多选择和过滤选项

应用 multiSelect 当您想要您的用户选择多个选项时, prop . 为在选项中进行过滤,请使用 typeahead 道具 (英语).

已控制

应用 controlled 管理应用程序中项目状态的道具。 当你启用时 controlled 道具,确保:

• 包含 selected 键 items 道具来.
• 使用 onControlledChange 改为 onChange 以获取关于当前所选项目和动作类型(选择或取消选择)的信息.
• 更新 items 使用返回的值从 onControlledChange 活动.
• 请注意: initialSelected 内 items 道具不会生效.

组

应用 group 可启用分组显示和管理分组基项结构的道具 。 当你启用时 group 道具,确保:

• 表格中的每个项目 items 道具必须包含 subitems 包含子选项的阵列.

import { Dropdown } from "@asphalt-react/selection"

function App() {
  let items = [
  {
      id: "fruits_1",
      key: "Fruits",
      selectable: false,
      subitems: [
        { id: "1", key: "Apple" },
        { id: "2", key: "Banana" },
      ],
    },
    {
      id: "vegetables_1",
      key: "Vegetables",
      selectable: false,
      subitems: [
        { id: "1", key: "Carrot" },
        { id: "2", key: "Broccoli" },
      ],
    },
    {
      id: "grain_1",
      key: "Grain",
      selectable: false,
      subitems: [
        { id: "1", key: "Bread" },
        { id: "2", key: "Flavor" },
      ],
    },
  ]

  return <Dropdown group items={items} />
}

增强选项

为增强选项的字幕,您可以添加自定义元素,如"Avatar",同时添加字幕. 例如,显示一个用户列表的外观/首字母. 使用 getAddonStart 财务报告和审定财务报表 getAddonEnd 以启动行为。 您可以使用 inactive。当将其应用到一个组时,它也会禁用其所有子项.

i18n (英语)

国际化是设计和准备您的应用软件可以使用不同语言的过程. 选择框文本支持 l10n , 可以使用 translate。它只对 multiselect 启用了 Dropdown .

键盘交互

Dropdown组件完全对键盘友好. 它被设计成这样,用户如果愿意,就不需要将手移到鼠标上.

• 使用 标签 专注 Dropdown.
• 使用任意 ↓ , (中文(简体) ), ↑ , (中文(简体) ), 输入 打开列表框.
• 使用 ↓ 以导航列表.
• 使用 ↑ 导航列表.
• 使用 换行+qq 以导航5次列表.
• 使用 换行+qq 导航5倍于名单.
• 使用 输入 从列表中选择一个选项.
• 使用 英格兰 关闭列表.

数据属性

滴滴允许通过 data-* 属性 到 Drop down 的顶级元素. data-* 被 Dropdown 用于识别每个实例并测试其行为。 Dropdown的内部元素有一个 data-testid 用于测试目的的属性.

道具

项目

滴出物体组.

示例

const items = [{ id: "1", key: "Jakarta", ... }];

如果想要将项目作为一个组处理,请为每个组项目提供分项目. 示例

{
  id: "add-unique-string-id",
  key: "DisplayValue",
  initialSelected: false,
  selectionOrder: 0,
  selectable: true,
  selected: true,
  inactive: true,
  subitems: [
    {
      id: "add-unique-child-string-id",
      key: "Child display value",
      initialSelected: false,
      inactive: true,
      selectionOrder: 0
    }
  ]
}

仅以上 id 需要时间。 通常至少提供 id 财务报告和审定财务报表 key。 。 。 . 使用 selected 仅在控制模式下对外部选择进行管理. 使用 selectable 指定组件是否允许选择组标签。 只在多选择和组合中使用. 使用 inactive 以禁用项目。 设定在组级别时, 它也会禁用其所有子项 .

变化

回调处理项目选择事件 。 Ivokes on user 交互或 Dropdown 重置. 其签名如下:

• 项目 - 用户交互选择的项目
• 选项 - 有以下属性的选项桶
  • 参考: Dropdown 的回放
  • 选中的项目: 万一 multiselect 启用下拉
  • 全部选中: 如果选中所有项目, 则显示布尔值

 (item, { ref, selectedItems }) => {}

控制

滴滴让你控制了内部状态 使用此道具来管理项目的选择 .

关于控制下的变化

回调处理项目选择/取消选择 controlled 放下来 启动用户交互或标签删除. 其签名如下:

(item, { ref, selection, changedItems }) => {}

• 项 - 用户互动的项目。 如果用户选择“全部选择”选项,则 item 无效.
• 选项 - 具有以下属性的选项桶:
  • 参考: Dropdown 的回放
  • 选择: 表示项目选择/取消选择的布尔值( 真/假)
  • 更改项目:仅在用户选择时显示 select all。该修改状态的所有项目。 使用 selection 键来确定是否 changedItems 被选中或取消.

多选择

启用多个项选择

类型头

允许根据打出的关键字过滤匹配的项目. 这个 匹配算法 使用过的 给予最终用户尽可能最好的用户体验.

输入

回调处理用户输入 typeahead 启用了 Dropdown 。 它接收回声合成事件作为论据.

(event) => {}

布莱尔

回调处理模糊事件 typeahead 启用了 Dropdown 。 它接收回声合成事件作为论据.

(event) => {}

大小

使组件具有所提供的大小。 接受"s","m","l"表示中小和大.

缩放

扩展组件宽度以匹配其容器.

默认突出显示 指数

这是在 Droppdown 初始化或重置时突出显示的项目的索引值

首选项

初始化时下拉

已禁用

禁用下坠.

占位符

提示未选中项目时显示的文本 .

无效

对 Dropdown 应用无效的样式.

显示键

Dropdown 使用此道具来渲染列表项的标题而不是“ 关键” 属性 .

const item = [
{
 id: 1,
 label: "Bali",
},
{
 id: 2,
 label: "Jakarta"
}]

function App () {
 return <Dropdown items={items} displayKey="label" />
}

在分组模式中,确保分组 key 匹配其分项目 key。 。 。 .

翻转

如果没有空间来制造弹出器,则会按照取景口边界进行俯冲.

过滤器

下放显示在 a 中过滤的项目 typeahead 默认启用了 Drop down 。 设置此道具的值 改为 false 来显示所有项目.

相匹配的项目列在清单的首位,然后是其余项目.

翻译

在选中框中显示自定义文本的函数 multiSelect 启用了 Dropdown .

编号

DOM DOM DOD DOD (英语:DOM id of the Dropdown)). DOM ID of the DOD DOD (英语).

标签编号

Dropdown使用的标签的编号 。 用于aria属性.

空文本

未找到结果时显示自定义文本 .

标记

将选中的项目显示为上方的标签 multiselect 放下枪.

获取AddonStart

3⁄4 ̄ ̧漯B 它接收的项目作为 参数以唯一地识别列表项目.

const itemAvatar = (item) => {
 const caption = item.key.substring(0,2)

 return <Avatar uppercase>{caption}</Avatar>
}

function App () {
 return <Dropdown getAddonStart={itemAvatar} />
}

获取后端

3⁄4 ̄ ̧漯B 它接收的项目作为 参数以唯一地识别列表项目.

const itemAvatar = (item) => {
 const caption = item.key.substring(0,2)

 return <Avatar uppercase>{caption}</Avatar>
}

function App () {
 return <Dropdown getAddonEnd={itemAvatar} />
}

全部选择

在列表中渲染一个特殊项目,允许用户在 Dropdown 中选择或取消所有选项. 它接受布尔值或节点.

可接受值 :

• true:允许选择所有特性,并使用“选择全部”作为项目的标题.
• false: 跳过选中的全部功能.
• 节点:允许选择所有特性,并使用元素作为项目的标题.

import {Text} from "@asphalt-react/typography"

<Dropdown selectAll={<Text>Pilih Semua</Text>} />

组

启用分组项目选择 .

列表项目

道具

儿童

列出项目包的节点

已禁用

项目的已禁用状态

突出显示

突出项目状态

选中

选定项目状态

大小

项目大小。 接受一个"s","m"和"l"

缩进

项目缩进状态

列表项目关联

道具

儿童

折叠文字

大小

检查

已禁用

添加开始

添加结束

复选框

不确定

缩进

强调

可选择

匹配

不活动