4.4 KiB
title | localeTitle |
---|---|
Semantic UI Buttons | Семантические кнопки пользовательского интерфейса |
Семантические кнопки пользовательского интерфейса
Кнопка указывает на возможное действие пользователя. Семантический интерфейс обеспечивает простой в использовании синтаксис, который упрощает не только стилизацию кнопки, но и семантику естественного языка.
Как использовать
Семантический интерфейс пользовательского интерфейса просто добавляется к элементу кнопки, для примера показано, как его использовать.
Типы
- Стандартная кнопка
Стандартная кнопка семантического интерфейса
<button class="ui button">Standard Button</button>
- Кнопка акцента
Кнопка с другим уровнем выделения
<button class="ui primary button">
Другие классы акцентов являются secondary
, positive
и negative
- Анимированная кнопка
Кнопка с анимацией, показывающая скрытое содержимое
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Sign-up for a Pro account</div>
<div class="hidden content">$12.99 a month</div>
</div>
Свойство tabindex="0"
выше делает клавиатуру кнопки фокусируемой, поскольку <button>
не использовался.
- Яркая кнопка
Кнопка рядом с ярлыком
<div class="ui labeled button" tabindex="0">
<div class="ui button"><i class="heart icon"></i> Like</div>
<a class="ui basic label">2,048</a>
</div>
элемент <i>
используется для указания значка, здесь это значок сердца <i class="heart icon"></i>
вместе с базовой меткой <a class="ui basic label">2,048</a>
- Кнопка значка
Кнопка Semantic UI может быть просто значком
<button class="ui icon button">
<i class="camera icon"></i>
</button>
Вышеупомянутый значок камеры
группы
Семантические кнопки пользовательского интерфейса могут существовать в группе
<div class="ui buttons">
<button class="ui button">One</button>
<button class="ui button">Two</button>
<button class="ui button">Three</button>
</div>
содержание
Семантические кнопки пользовательского интерфейса могут содержать условные обозначения
<div class="ui buttons">
<button class="ui positive button">Yes</button>
<div class="or" data-text="or"></div>
<button class="ui negative button">No</button>
</div>
состояния
Семантические кнопки пользовательского интерфейса могут существовать в разных состояниях, active
, disabled
, loading
. Просто добавьте название штата к class
атрибута of
`элемента.
<button class="ui loading button">Loading</button>
вариации
Семантические кнопки пользовательского интерфейса существуют в различных размерах, mini
, tiny
, small
, medium
, large
, big
, huge
и massive
.
<button class="ui massive button">Massive Button</button>
Существует гораздо больше о кнопках семантического интерфейса, посетите дополнительную ссылку в разделе «Дополнительная информация», чтобы узнать больше.