Как установить размер раскрывающегося списка семантического пользовательского интерфейса в соответствии с кнопками и т. Д.

Семантический интерфейс имеет отличный способ применить общие размеры ко многим вещам, например кнопка (в Semantic UI React):

<Button size="tiny"  />

Однако раскрывающийся список, который во многих случаях выглядит так же, как кнопка и размещается в строке с кнопками, похоже, не принимает параметр «размер».

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

Есть ли хороший способ применить тот же размер к раскрывающемуся списку, что и к другим элементам, например Кнопки подряд? (т.е. не просто возиться с настраиваемым CSS, а что-то более удобное в обслуживании).


semantic-ui-react semantic-ui
person Dan    schedule 06.09.2017    source источник
comment
вы хотите создать одинаковый размер между кнопкой и раскрывающимся списком, верно?   -  person Rizal Sidik    schedule 06.09.2017

Ответы (5)


arrow_upward
2
arrow_downward

Я думаю, что правильный путь должен заключаться в том, чтобы обернуть его внутри формы и применить классы размера к форме. Форма может быть тегом формы, но также может быть div:

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

or

<div className='ui form mini'>
 <Dropdown>
person eveevans    schedule 26.06.2020
comment
Это действительно кажется лучшим решением, ‹Form› не имеет опоры «размер» в соответствии с документами SUI React, но я вижу, что это есть в документации стандартного SUI. - person Dan; 13.12.2020

arrow_upward
3
arrow_downward

Я думаю, это если вы хотите создать одинаковый размер между раскрывающимся списком и другим компонентом, например кнопкой, с использованием атрибута 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

вот результат:

введите здесь описание изображения

Может быть, смогу тебе помочь, спасибо

person Rizal Sidik    schedule 06.09.2017
comment
Похоже результат хочу .. Проверю и вернусь. - person Dan; 06.09.2017
comment
Работает отлично. В моем раскрывающемся списке была установлена ​​кнопка, она была заменена простым элементом, как и у вас, и все было в порядке. - person Dan; 06.09.2017
comment
Обратите внимание, что это приводит к нежелательному заполнению Dropdown (по крайней мере, в наши дни), что будет проблемой, например, для фона inverted и т. Д. - person basse; 13.05.2020

arrow_upward
3
arrow_downward

Предполагая, что в вашем раскрывающемся списке установлен параметр button, вы можете передать нужный размер в опоре className. Например:

<Dropdown text='Add Friend' icon='plus' labeled button className='icon tiny'>
person Andrew B.    schedule 16.01.2019
comment
Это был единственный ответ, который работал правильно. Однако мне пришлось удалить атрибут labeled и класс icon, чтобы значок стрелки раскрывающегося списка размещался правильно. - person basse; 13.05.2020
comment
@basse Спасибо за предложенное редактирование! Я оставляю свой ответ как есть, потому что он работал для определенной версии semantic-ui, и их API может снова измениться ... - person Andrew B.; 13.05.2020

arrow_upward
1
arrow_downward

Я сослался на этот ответ, чтобы найти решение. Мне пришлось указать класс css line-height: unset; (который может переопределить высоту строки по умолчанию для того же класса).

HTML

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

CSS

.equal-dropdown-height .text {
  line-height: unset;
}
person maudulus    schedule 18.05.2020

arrow_upward
0
arrow_downward

Гибкий способ сделать это - передать 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

Вы можете найти пример этого в раскрывающейся документации Semantic UI React, здесь

person Roman Scher    schedule 21.05.2019