Trouxemos um singelo pacote de componentes independentes e reutilizáveis para facilitar o seu trabalho. :)
GA IN TI MEModals são caixas de diálogo que sobrepõem a página de maneira inteligente e agradável. São muito utilizadas para formulários ou informações rápidas.
esc é pressionada.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<!-- Um elemento com o atributo data-modal dispara um modal que possui o id informado no data-modal. --><button class="btn info" data-modal="myModal">My Modal</button><div class="gt-modal"><!-- Aqui você vai atribuir um id ao seu modal --><div id="myModal" class="modal"><!-- Este botão é responsável por fechar o modal --><button class="modal-close" type="button">×</button><div class="modal-body"><!-- Digite o conteúdo do modal aqui --></div></div></div>
Recomendamos que as classes para botão sejam utilizadas preferencialmente nos elementos button e a.
Você pode utilizar as classes de botão em outros elementos, mas não garantimos a aparência nem a acessibilidade do uso.
A classe básica para botões é a .btn. Ela pode ser utilizada junto com classes auxiliares para gerar cores e detalhes diferentes.
<!-- Botão básico. -->
<button
class="btn"
type="button"
name="button">Basic</button>
<!-- Estilo padrão de botão, que pode ser mesclado com cores que dão indicação de emoção. -->
<button
class="btn success"
type="button"
name="button">Success</button>
<!-- Para usar o estilo outline em um botão, apenas adicione a classe .outline. -->
<button
class="btn danger outline"
type="button"
name="button">Outline</button>
<!-- Para usar o estilo clean em um botão, apenas adicione a classe .clean. -->
<button
class="btn success clean"
type="button"
name="button">Clean</button>
As .action são botões. Contudo, foram criadas para escopos com espaço reduzido, como uma posição numa tabela, ou o cabeçalho de um cartão. São excelentes para serem aplicadas com ícones. Deve ser utilizada em tags a e button.
| Nome | Ações | |
| JP Rodrigues | email@example.com | Edit Delete Show |
| Exemplo de utilização; | ||
<!-- Exemplo de .action. -->
<a
class="action info"
href="product/255">Detalhes</a>
Um dropdown/up é um menu contextual, que deve conter uma lista de links. É dependente do GainTime JS.
Recomendamos que você utlize div para colocar a classe dropdown ou a classe dropdup, e que dentro de div você tenha um elemento que descreva o contexto, e um elemento do tipo lista não ordenada (ul).
Dropdowns não são botões, mas podem ser tão estilosos quanto eles.
.dropdown, .dropdown-left: Lista originada da baixa esquerda..dropdown-right: Lista originada da baixa direita..dropup, .dropup-left: Lista originada da alta esquerda..dropup-right: Lista originada da alta direita.
<!-- Exemplo de .dropdown estilizado como um .btn, com lista alinhada à direita. -->
<div class="btn dropdown-right danger"><span>DOWN RIGHT</span><ul><li>A</li><li>B</li></ul></div>
As .tag são rótulos de ênfase visual para serem adicionadas preferencialmente em span, em phrase tags (ex: strong, em, code, samp, kbd, var), ou em formatting tags (ex: b, i, u, strike).
<h4>Exemplo de utilização da classe <span class="tag">.tag</span></h4>
Os .badge são uma boa opção para contadores de notificações e afins. Eles dão um realce arredondado em elementos do tipo span.
<button>Exemplo<span class="badge">2</span></button>
A classe de informação .inform foi construida para criar caixas de texto com destaque. Muito útil para textos de alerta ou aviso. Deve ser adicionada ao elemento div, preferencialmente, e unida a .warning, .info, .success ou .danger.
Este é um típico .inform.
No .inform você pode ficar a vontade para usar tags de texto. :)
<div class="inform">
</div>
As mensagens .msg são semelhantes às informações, porém são feitas para serem temporárias e, por isso, devem ser acompanhadas por um botão type="button" class="close" que vai fazer com que a .msg seja removida do DOM.
Na .msg você pode ficar a vontade para usar tags de texto. :)
A função de fechar a mensagem é totalmente dependente do GainTime JS.
Opa! OOOOOPAAAAAA!
Opa! OOOOOPAAAAAA!
Opa! OOOOOPAAAAAA!
Opa! OOOOOPAAAAAA!
<!-- Exemplo de .dropdown estilizado como um .btn, com lista alinhada à direita. -->
<div class="msg success"><button type="button" class="close"></button><p>Exemplo de mensagem temporária.</p></div>
As barras de progresso .bar são dependentes de HTML5 e GainTime JS. Elas possuem uma estrutura particular que precisa ser seguida.
A estrutura básica é a seguinte:
<div
class="bar"
data-percentage="20%"
data-color="success"
data-tooltip="Test"
data-text="20% do total">
Atributos obrigatórios:
class="bar" - Classe que ativa a barra de progresso.data-percentage="x%" - Atributo que determina o progresso.Atributos opcionais:
class="bar" - Classe que ativa a barra de progresso.data-color="" - Atributo que determina a cor do indicador de progresso. Variações: .success, .warning, .danger, .info. O padrão é #2e7bcf, mas você pode criar a sua própria classe de cor e atribuir ao data-color.data-tooltip="" - Determina a mensagem que vai aparecer quando a barra estiver em :hover.data-text="" - Determina o texto que deve aparecer no indicador de progresso.