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

Question

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

<Button size="tiny"  />

然而，在许多情况下看起来就像一个按钮并且与按钮放在同一行的下拉菜单似乎没有采用 "size" 参数。

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

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

Answer 1

我认为如果你想使用 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

这是结果：

也许可以帮到你，谢谢

Answer 2

假设您的 Dropdown 设置了 button 选项，您可以在 className 属性中传递您想要的大小。例如：

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

Answer 3

一个灵活的方法是传入 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 下拉文档中找到这方面的示例 here

Answer 4

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

HTML

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

CSS

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

Answer 5

我认为正确的方法应该是将其包装在一个表单中，并将大小类应用到该表单。表单可以是表单标签，也可以是 div:

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

或

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

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

How to set Semantic UI Dropdown size to match buttons, etc

semantic-ui

semantic-ui-react