GainTime

Componentes

Trouxemos um singelo pacote de componentes independentes e reutilizáveis para facilitar o seu trabalho. :)

GA IN TI ME

Modals

Modals 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.

  • Só é possível abrir um modal por vez.
  • Modals fecham quando a tecla esc é pressionada.

  <!-- 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>

            

Botões

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.

.btn

A classe básica para botões é a .btn. Ela pode ser utilizada junto com classes auxiliares para gerar cores e detalhes diferentes.

LINK
<!-- 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 cores oferecem apenas uma indicação visual de emoção, que não será transmitida para os utilizadores de tecnologia assistiva – tais como leitores de tela. Garanta que as informações indicadas pela cor sejam óbvias a partir do conteúdo em si (o texto visível do botão), ou que esteja incluída através de meios alternativos.

.action

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 E-mail 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>

Tags

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).

Aluno relata sobre prova fácil de cálculo. BUG

OLA OLA OLA OLA OLA
<h4>Exemplo de utilização da classe <span class="tag">.tag</span></h4>

Badges

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.

Inbox 42 19 08
<button>Exemplo<span class="badge">2</span></button>

Informações

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.

Atenção!

Este é um típico .inform.

No .inform você pode ficar a vontade para usar tags de texto. :)

<div class="inform"> </div>

Mensagens

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>
            

Barra de progresso

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.

Tooltips

Essa não é a melhor implementação de tooltip que você vai ver na vida, mas pode ser útil. Temos apenas Tooltips que aparecem abaixo do elemento, e eles são ativados através do atributo data-tooltip="Seu Texto Aqui". As barras de progresso da seção anterior são exemplos de uso.

Cards

Os cards são caixas flexíveis muito úteis na hora de listar itens com título, imagem e descrição.


  <div
  class="card">

  
    <div
    class="card-body">
  
    
      <h4
      class="card-title">Título do card</h4>
    
    ...
    
      <div
      class="card-img">
    
      
        <img/>
      
    
      </div>
    
  
    </div>
  

  </div>

              

project11

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Card com Grid System

project7

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

project7

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Listas verticais

A classe .vertical-list vai colocar todos os itens que são seus filhos diretos em formato de lista vertical.

  • ASD
  • ASD
  • ASD
A A A

Vertical List table

A classe .vertical-list-table vai colocar todos os itens que são seus filhos diretos em formato de tabela vertical. A .vertical-list-table pode ser ainda concatenada com as classes .bordered e .striped.

  • Item com a classe .active
  • ASD
  • ASD

Lista de .btn:

A A A