106 lines
4.4 KiB
Markdown
106 lines
4.4 KiB
Markdown
---
|
||
title: Semantic UI Buttons
|
||
localeTitle: Семантические кнопки пользовательского интерфейса
|
||
---
|
||
## Семантические кнопки пользовательского интерфейса
|
||
|
||
Кнопка указывает на возможное действие пользователя. Семантический интерфейс обеспечивает простой в использовании синтаксис, который упрощает не только стилизацию кнопки, но и семантику естественного языка.
|
||
|
||
#### Как использовать
|
||
|
||
Семантический интерфейс пользовательского интерфейса просто добавляется к элементу кнопки, для примера показано, как его использовать.
|
||
|
||
#### Типы
|
||
|
||
* Стандартная кнопка
|
||
|
||
Стандартная кнопка семантического интерфейса
|
||
```
|
||
<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>
|
||
```
|
||
|
||
Существует гораздо больше о кнопках семантического интерфейса, посетите дополнительную ссылку в разделе «Дополнительная информация», чтобы узнать больше.
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* [Документы с интерфейсом пользовательских интерфейсов](https://semantic-ui.com/elements/button.html) |