Question

是否可以通过选项中的标题项获得选择下拉列表？

我当然知道有这个标签：

<Dropdown.Header icon='tags' content='Filter by tag' />

但这需要整个下拉菜单具有自定义的下拉菜单项，并且不能与语义UI的“选择”关键字一起使用，该关键字对我做了很多下拉菜单管理，并让我通过对象数组提供选项（“选项”）。

添加/声明我的选项时，我希望能够将其定义为标题项。像这样：

{
                key: id,
                value: id,
                text: name,
                content: (
                    <span>
                        {name}
                        <Label circular>{points}</Label>
                    </span>
                ),
                header: true
            }

有没有类似的东西？我在文档中找不到任何内容。

Answer 1

如果您希望外观与下拉列表结合使用<Dropdown.Header />，请尝试将selection替换为className='selection'：

<Dropdown className='selection'>
  <Dropdown.Menu>
    <Dropdown.Header content='Header' />
    <Dropdown.Item>{'Item'}</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Answer 2

您可以使用Dropdown并像这样操作数组：

const options = [
    {
        component:
            Dropdown.Menu,
        children:
            <Dropdown.Menu scrolling>
                <Dropdown.Header content='Filter by tag' />
                <Dropdown.Divider />
            </Dropdown.Menu>,
    },
    {
        key: id,
        text: id,
        value: name
    },

]

语义UI React下拉列表：标题选项？

2 个答案: