13

Semantic UI 有一种很好的方法可以将通用大小应用于很多东西，例如按钮（在 Semantic UI React 中）：

<Button size="tiny"  />

然而，在许多情况下看起来就像一个按钮并放置在带有按钮的一行上的下拉菜单似乎没有采用“大小”参数。

https://react.semantic-ui.com/modules/dropdown

有没有一种好方法可以将与其他元素（例如连续按钮）相同的大小应用于下拉列表？（即不仅仅是摆弄自定义 CSS，而是更易于维护的东西）。

4

5 回答 5

4

假设您的 Dropdownbutton设置了选项，您可以在className道具中传递所需的大小。例如：

<Dropdown text='Add Friend' icon='plus' labeled button className='icon tiny'>
于 2019-01-16T15:16:44.563 回答
3

我认为正确的方法应该是将其包装在表单中，并将尺寸类应用于表单。表单可以是表单标签，也可以是 div：

<form className='ui form small'>
 <Dropdown>

或者

<div className='ui form mini'>
 <Dropdown>
于 2020-06-26T21:22:59.473 回答
3

我认为这是如果您想使用size属性在下拉列表和另一个组件（如按钮）之间创建相同的大小，您可以将下拉列表放在按钮内：

import React from 'react'
import { Dropdown, Menu, Button } from 'semantic-ui-react'

const options = [
  { key: 1, text: 'Choice 1', value: 1 },
  { key: 2, text: 'Choice 2', value: 2 },
  { key: 3, text: 'Choice 3', value: 3 },
]

const DropdownExampleSimple = () => (
  <div>
    <Button size="tiny" >
      <Dropdown text='Dropdown' options={options} simple item />
    </Button>
    <Button size="tiny">
      This is Button
    </Button>
  </div>
)

export default DropdownExampleSimple

这是结果：

在此处输入图像描述

或许能帮到你，谢谢

于 2017-09-06T08:01:04.210 回答
1

我参考了这个答案来找到解决方案。我必须给出一个 css 类line-height: unset;（它可能会覆盖同一类的默认行高）。

HTML

<Dropdown className="equal-dropdown-height" placeholder="State" options={stateOptions} search selection />

CSS

.equal-dropdown-height .text {
  line-height: unset;
}
于 2020-05-18T18:47:56.947 回答
0

一种灵活的方法是传入，icon={null}然后将trigger属性设置为您要显示的任何节点：

import React from 'react'
import { Dropdown, Icon } from 'semantic-ui-react'

const LargeIconDropdown = () => (
    <Dropdown
        icon={null}
        trigger={
            <Icon
                link
                name='ellipsis vertical'
                size='large'
            />
        }>
        <Dropdown.Menu>
            <Dropdown.Item
                icon='pencil'
                text='Edit'
            />
        </Dropdown.Menu>
    </Dropdown>
)

export default LargeIconDropdown

您可以在此处的语义 UI React 下拉文档中找到一个示例

于 2019-05-21T18:01:17.893 回答