Как разместить метку под значком в Semantic UI-React?

Я использую Semantic UI-React. У меня вопрос: как разместить метку или текст под значком? Есть только два варианта по умолчанию, слева и справа от значка. Однако я хочу разместить метку под значком. Я использую библиотеку Semantic-React.

Например:

<Button icon labelPosition='left'>
  <Icon name='pause' />
  Pause
</Button>

В приведенном выше фрагменте метка «Пауза» добавлена ​​слева от значка на кнопке. Мое требование: я хочу добавить метку «Пауза под значком на кнопке». Я попытался установить:

    labelPosition='down' or 'bottom'

Однако это не работает. Есть какой-либо способ сделать это?


reactjs javascript semantic-ui-react semantic-ui
person SeaWarrior404    schedule 18.12.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я столкнулся с той же проблемой. Я считаю, что это можно сделать, только переопределив свойства CSS элемента Button. Пожалуйста, попробуйте предоставить !important значениям CSS, поскольку семантический интерфейс имеет наивысший приоритет, когда дело касается приоритета свойств.

Вы можете либо использовать класс и определить стиль там, либо использовать специальный селектор, например: div.ui.stackable.two.column.grid.button{.

Пожалуйста, дайте мне знать, если это исправит, иначе у меня есть другое решение.

person A J A Y    schedule 09.07.2018
comment
Я считаю, что это нужно делать с использованием чистого CSS, а не какой-либо опорой для компонента Button. Другой способ - расширить компонент Button, предоставляемый Semantic-React, с помощью настраиваемого CSS и использовать настраиваемый компонент Button в проекте. - person SeaWarrior404; 10.07.2018

arrow_upward
1
arrow_downward

Поместите разрыв строки между значком и текстом.

<Button icon>
  <Icon name='pause' />
  <br />
  Pause
</Button>

Чтобы изменить расстояние между значком и текстом, вы можете добавить поля к разрыву строки.

<Button icon>
  <Icon name='pause' />
  <br style={{marginBottom: '8px'}} />
  Pause
</Button>
person Danny Guo    schedule 15.07.2019