Question

语义用户界面有很好的方法可以将常见的大小应用于很多事情，例如：一个按钮（在Semantic UI React中）：

<Button size="tiny"  />

然而，Dropdown，在许多情况下看起来就像一个按钮，并放在一个带按钮的行上，似乎没有采取＆＃34;尺寸＆＃34;参数。

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

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

Answer 1

我认为如果你想在下拉列表和使用size attribut的按钮之类的另一个组件之间创建相同的大小，你可以将下拉列表放在按钮内：

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

这是结果：

也许可以帮助你，谢谢

Answer 2

假设您的下拉菜单设置了button选项，则可以在className道具中传递所需的大小。例如：

<Dropdown text='Add Friend' icon='plus' labeled button className='icon tiny'>

Answer 3

我已引用this answer来找到解决方案。我不得不给一个line-height: unset;的CSS类（它可能会覆盖同一类的默认行高）。

HTML

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

CSS

.equal-dropdown-height .text {
  line-height: unset;
}

Answer 4

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

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

或

<div className='ui form mini'>
 <Dropdown>

Answer 5

一种灵活的方法是传入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 Dropdown文档here

中找到一个示例。

如何设置语义UI下拉大小以匹配按钮等

5 个答案: