@fluid-topics/ftds-combobox

从建议列表中选择值的组合框 : ftds-combobox (单值)和 ftds-combobox-multi-value (若干数值)。 下列文件: ftds-combobox-multi-value。 。 。 .

安装

npm install @fluid-topics/ftds-combobox
yarn add @fluid-topics/ftds-combobox

使用量

import { html } from "lit"
import { FtdsComboboxMultiValueChangeEvent } from "@fluid-topics/ftds-combobox"
import "@fluid-topics/ftds-combobox/build/define"

function render() {
    return html`
        <ftds-combobox-multi-value
            label="Programming language"
            filterSuggestions
            .suggestionsProvider=${ (filter: string) => [
                { label: "Kotlin", value: "kotlin" },
                { label: "Rust", value: "rs" },
            ] }
            @change=${ (e: FtdsComboboxMultiValueChangeEvent) => console.log(e.detail.values) }
        ></ftds-combobox-multi-value>
    `
}

建议

suggestionsProvider 是函数 (filter: string) => ComboboxSuggestion[] | Promise<ComboboxSuggestion[]>。 。 。 . 每次用户类型( 使用) debouncerTimeout 以限制远程获取时的呼叫).

A 类 ComboboxSuggestion 形状如下:

• value (要求):建议标识符,用于所发值.
• label (可选):显示的文字. 回头看 value。 。 。 .
• template (可选):一升 TemplateResult 改为建议清单上的标签.

对于一个静态列表, basicSuggestionsProvider(values, maxSuggest) 建立过滤和排序给定值的提供者.