3.0 KiB
| title | localeTitle |
|---|---|
| Semantic UI Buttons | Botões de interface semântica |
Botões de interface semântica
Um botão indica uma possível ação do usuário. A Semantic UI fornece uma sintaxe fácil de usar que simplifica não apenas o estilo de um botão, mas também a semântica da linguagem natural.
Como usar
A classe de interface semântica é simplesmente adicionada a um elemento de botão, vários exemplos foram dados abaixo para indicar como usá-lo.
Tipos
- Botão Padrão
Botão padrão da interface semântica
<button class="ui button">Standard Button</button>
- Botão de ênfase
Um botão com um nível diferente de ênfase
<button class="ui primary button">
Outras classes de ênfase são secondary , positive e negative
- Botão animado
Um botão com animação, mostrando o conteúdo oculto
<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>
A tabindex="0" propriedade da propriedade tabindex="0" acima torna o teclado do botão focável, já que a tag <button> não foi usada.
- Botão rotulado
Um botão ao lado de um rótulo
<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>
o elemento <i> é usado para especificar um ícone, aqui está um ícone de coração <i class="heart icon"></i> ao lado do rótulo básico <a class="ui basic label">2,048</a>
- Botão do ícone
Um botão de interface semântica pode ser apenas um ícone
<button class="ui icon button">
<i class="camera icon"></i>
</button>
O acima é apenas um ícone da câmera
Grupos
Botões de interface semântica podem existir em um grupo
<div class="ui buttons">
<button class="ui button">One</button>
<button class="ui button">Two</button>
<button class="ui button">Three</button>
</div>
Conteúdo
Botões da interface semântica podem conter condicionais
<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>
Estados
Os botões da interface semântica podem existir em estados diferentes, active , disabled , loading . Basta adicionar um nome de estado ao atributo class of elemento `.
<button class="ui loading button">Loading</button>
Variações
Existem botões UI semânticas em uma variedade de tamanhos mini , tiny , small , medium , large , big , huge e massive .
<button class="ui massive button">Massive Button</button>
Há muito mais sobre os botões da interface semântica, visite o link fornecido na seção Mais informações para saber mais.