Я использую Semantic UI-React. У меня вопрос: как разместить метку или текст под значком? Есть только два варианта по умолчанию, слева и справа от значка. Однако я хочу разместить метку под значком. Я использую библиотеку Semantic-React.
Например:
<Button icon labelPosition='left'>
<Icon name='pause' />
Pause
</Button>
В приведенном выше фрагменте метка "Пауза" добавлена слева от значка на кнопке. Мое требование: я хочу добавить метку "Пауза под значком на кнопке". Я попытался установить:
labelPosition='down' or 'bottom'
Однако это не работает. Есть какой-либо способ сделать это?
Ответ 1 · рейтинг 1 · A J A Y
Я столкнулся с той же проблемой. Я считаю, что это можно сделать, только переопределив свойства CSS элемента Button. Пожалуйста, попробуйте предоставить !important значениям CSS, поскольку семантический интерфейс имеет наивысший приоритет, когда дело касается приоритета свойств.
Вы можете либо использовать класс и определить стиль там, либо использовать специальный селектор, например: div.ui.stackable.two.column.grid.button{.
Пожалуйста, дайте мне знать, если это исправит, иначе у меня есть другое решение.
Ответ 2 · рейтинг 1 · Danny Guo
Поместите разрыв строки между значком и текстом.
<Button icon>
<Icon name='pause' />
<br />
Pause
</Button>
Чтобы изменить расстояние между значком и текстом, вы можете добавить поля к разрыву строки.
<Button icon>
<Icon name='pause' />
<br style={{marginBottom: '8px'}} />
Pause
</Button>
