Padrões de cores dos Alerts.
<div class="alert alert-danger">
<i class="icon material-icons">info</i>
Tipo de alerta de Erro!
<button class="close"><i class="material-icons">close</i></button>
</div>
<div class="alert alert-success">
<i class="icon material-icons">check_circle</i>
Tipo de alerta de Sucesso!
<button class="close"><i class="material-icons">close</i></button>
</div>
<div class="alert alert-warning">
<i class="icon material-icons">warning</i>
Tipo de alerta de perigo!
<button class="close"><i class="material-icons">close</i></button>
</div>
<div class="alert alert-info">
<i class="icon material-icons">info</i>
Tipo de alerta de informação!
<button class="close"><i class="material-icons">close</i></button>
</div>
Histórico navegavel de páginas
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Botões de ação da aplicação.
Destaca quando passa o mouse por cima.
Não deixa clicar quando desabilitado.
Status ativo.
<button class="btn btn-default [modifier]">Default</button>
<button class="btn btn-primary [modifier]">Primary</button>
<button class="btn btn-info [modifier]">Info</button>
<button class="btn btn-success [modifier]">Success</button>
<button class="btn btn-warning [modifier]">Warning</button>
<button class="btn btn-danger [modifier]">Danger</button>
Cards da aplicação.
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
This is some text within a card body.
</div>
</div>
Componente estilo "gaveta" da aplicação.
O componente é escondido por padrão, para exibilo, é necessário a classe drawer-open
.
Por padrão, o componente possui posicionamento absoluto.
Adicione a classe drawer-container
ao elemento pai para deixá-lo relativo.
Caso seja necessário deixar fixo, utilize drawer-fixed
.
Para mudar o lado, adicione a classe drawer-right
.
<div class="drawer-container" style="width: 100%; height: 400px;">
<div class="drawer drawer-open">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Card title
<a class="drawer-close" href><i class="material-icons">close</i></a>
</h5>
This is some text within a card body.
</div>
</div>
</div>
<div class="drawer drawer-open drawer-right">
<div class="card">
<div class="card-body">
<h5 class="card-title">
Filtros
<a class="drawer-close" href><i class="material-icons">close</i></a>
</h5>
<div class="form-group">
<label for="">Planta</label>
<select class="form-control">
<option>Selecione uma planta</option>
</select>
</div>
<div class="form-group">
<label class="required">Status</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">Ativo</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Inativo</label>
</div>
</div>
<button class="btn btn-primary btn-block">Filtrar</button>
</div>
</div>
</div>
</div>
Estado vazio de registros, caso uma busca não retorne nenhum resultado, utilizar este caso vazio.
Estilo de caso vazio com tamanho reduzido, usado geralmente em listas.
<div class="empty-state [modifier]">
<i class="empty-state-icon material-icons">search</i>
<div class="empty-state-content">
<h2 class="empty-state-title">Nenhum registro encontrado</h2>
<small class="empty-state-description">Por favor refaça sua busca</small>
</div>
<button class="btn btn-primary">Criar novo registro</button>
</div>
Formulários baseados no Bootstrap.
Para mais informações: https://getbootstrap.com/docs/4.0/components/forms/
<div class="row justify-content-md-center">
<form class="col-md-12">
<div class="form-group">
<label class="required" for="inputText">Input text</label>
<input type="text" name="inputText" placeholder="Insira seu usuário" class="form-control">
</div>
<div class="form-group">
<label class="required" for="inputPassword">Input password</label>
<input type="password" name="inputPassword" placeholder="Insira sua senha" class="form-control">
</div>
<div class="form-group">
<label class="required" for="inputDisabled">Input disabled</label>
<input type="text" name="inputDisabled" placeholder="Insira sua senha" disabled class="form-control">
</div>
<div class="form-group">
<label class="required" for="inputDisabled">Select</label>
<select name="inputDisabled" class="form-control">
<option value="1">Opção 1</option>
<option value="2">Opção 2</option>
<option value="3">Opção 3</option>
</select>
</div>
<div class="form-group">
<label class="required">Radio inline</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">Opção 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">Opção2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">Opção 3 (disabled)</label>
</div>
</div>
<div class="form-group">
<label class="required">Check inline</label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">Opção 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">Opção2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">Opção 3 (disabled)</label>
</div>
</div>
<div class="form-group">
<label class="required">Mensagem</label>
<textarea placeholder="Insira uma mensagem" class="form-control"></textarea>
</div>
</form>
</div>
Indicador de carregamento.
<svg class="loader-spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="loader-spinner-circle" fill="none" cx="33" cy="33" r="30"></circle>
</svg>
<button disabled class="btn btn-primary">
<svg class="loader-spinner loader-spinner-small loader-spinner-white mr-1" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="loader-spinner-circle" fill="none" cx="33" cy="33" r="30"></circle>
</svg>
Salvando...
</button>
Componente de modal baseado na marcação do bootstrap
Para mais informações: https://getbootstrap.com/docs/4.0/components/modal/
<div class="modal" tabindex="-1" role="dialog" style="position: relative; display: block">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="material-icons">close</i>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Padrão da paginação
<ul class="pagination justify-content-end">
<li class="page-item">
<a class="disabled" href>
<i class="material-icons">first_page</i>
</a>
</li>
<li class="page-item">
<a class="disabled" href>
<i class="material-icons">keyboard_arrow_left</i>
</a>
</li>
<li class="page-item">
<a class="page-link active" href>1</a>
</li>
<li class="page-item">
<a class="page-link" href>2</a>
</li>
<li class="page-item">
<a class="page-link" href>3</a>
</li>
<li class="page-item">
<a class="disabled">...</a>
</li>
<li class="page-item">
<a class="page-link" href>5</a>
</li>
<li class="page-item">
<a href>
<i class="material-icons">keyboard_arrow_right</i>
</a>
</li>
<li class="page-item">
<a href>
<i class="material-icons">last_page</i>
</a>
</li>
</ul>
Barra laterial retrátil de navegação
<div class="sidebar" style="position: relative; height: 420px">
<ul>
<li class="sidebar-item-close">
<a>
<img src="/assets/images/logo-okto-white.png" alt="Okto" height="20">
</a>
</li>
<li class="active">
<a href="#">
<i class="material-icons mr-2">place</i>
<span class="w-100">Lugares</span>
<i class="material-icons ml-2">keyboard_arrow_down</i>
</a>
<ul class="sidebar-nested">
<li><a href="#">Restaurantes</a></li>
<li><a href="#">Lanchonetes</a></li>
<li><a href="#">Hotéis</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="material-icons mr-2">show_chart</i>
<span class="w-100">Relatórios</span>
<i class="material-icons m-l-2">keyboard_arrow_left</i>
</a>
<ul class="sidebar-nested" style="display: none">
<li><a href="#">Desempenho</a></li>
<li><a href="#">Custo</a></li>
<li><a href="#">Tempo</a></li>
</ul>
</li>
<li>
<a href="#">
<i class="material-icons mr-2">settings</i>
<span class="w-100">Configurações</span>
</a>
</li>
</ul>
</div>
Componente que ocupa o espaço de um conteúdo enquanto o mesmo carrega.
<table class="table table-striped skeleton-table">
<thead>
<tr>
<th class="status"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="status"></td>
<td class="two-lines"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="status"></td>
<td class="two-lines"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="status"></td>
<td class="two-lines"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="status"></td>
<td class="two-lines"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Utilize o formato de steps para fluxos de criação com muitos campos, ou que exijam diferentes tipos de informação, diminuindo o nível de carga cognitiva do usuário:
.active
: Identifica a posição atual do usuário dentro do passo-a-passo;.done
: Utilizado para identificar steps que já foram completamente preenchidos pelo usuário;.danger
: Identifica para o usuário um passo que existe um alerta não crítico;.danger
: Identifica para o usuário um passo que ocorreu um erro;Informações
Endereço
Campo inválidoAnexos
Upload não concluídoDocumentos
Confirmação
<div class="steps-indicator">
<ol>
<li class="done">
<span class="step-number"><i class="material-icons">check</i></span>
<p class="step-title">Informações</p>
</li>
<li class="danger">
<span class="step-number">2</span>
<p class="step-title">Endereço</p>
<small class="step-description">Campo inválido</small>
</li>
<li class="warning">
<span class="step-number">3</span>
<p class="step-title">Anexos</p>
<small class="step-description">Upload não concluído</small>
</li>
<li class="active">
<span class="step-number">4</span>
<p class="step-title">Documentos</p>
</li>
<li>
<span class="step-number">5</span>
<p class="step-title">Confirmação</p>
</li>
</ol>
</div>
Variações de tabelas.
Nome | Nascimento | |
---|---|---|
Pedro Souza | psouza@atech.com.br | 22/06/1980 |
Carlos Ferreira | cferreira@atech.com.br | 10/03/1982 |
Henrique Rodrigues | hrodrigues@atech.com.br | 29/07/1989 |
Tabela cor sim cor não
Nome | Nascimento | |
---|---|---|
Pedro Souza | psouza@atech.com.br | 22/06/1980 |
Carlos Ferreira | cferreira@atech.com.br | 10/03/1982 |
Henrique Rodrigues | hrodrigues@atech.com.br | 29/07/1989 |
Tabela com sombra projetada
Nome | Nascimento | |
---|---|---|
Pedro Souza | psouza@atech.com.br | 22/06/1980 |
Carlos Ferreira | cferreira@atech.com.br | 10/03/1982 |
Henrique Rodrigues | hrodrigues@atech.com.br | 29/07/1989 |
Tabela com elementos clicáveis
Nome | Nascimento | |
---|---|---|
Pedro Souza | psouza@atech.com.br | 22/06/1980 |
Carlos Ferreira | cferreira@atech.com.br | 10/03/1982 |
Henrique Rodrigues | hrodrigues@atech.com.br | 29/07/1989 |
<table class="table [modifier]">
<thead>
<tr>
<th>Nome</th>
<th>Email</th>
<th>Nascimento</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pedro Souza</td>
<td>psouza@atech.com.br</td>
<td>22/06/1980</td>
</tr>
<tr>
<td>Carlos Ferreira</td>
<td>cferreira@atech.com.br</td>
<td>10/03/1982</td>
</tr>
<tr>
<td>Henrique Rodrigues</td>
<td>hrodrigues@atech.com.br</td>
<td>29/07/1989</td>
</tr>
</tbody>
</table>
Container flutuante para alertas e mensagens.
Por padrão posicionado na parte superior direita da tela.
<div style="position: relative; height: 400px">
<div class="toastr" style="position: absolute;">
<div class="alert alert-danger">
<i class="icon material-icons">info</i>
Tipo de alerta de Erro!
<button class="close"><i class="material-icons">close</i></button>
</div>
</div>
<div class="toastr top-center" style="position: absolute;">
<div class="alert alert-danger">
<i class="icon material-icons">info</i>
Tipo de alerta de Erro!
<button class="close"><i class="material-icons">close</i></button>
</div>
</div>
<div class="toastr top-left" style="position: absolute;">
<div class="alert alert-danger">
<i class="icon material-icons">info</i>
Tipo de alerta de Erro!
<button class="close"><i class="material-icons">close</i></button>
</div>
</div>
<div class="toastr bottom-right" style="position: absolute;">
<div class="alert alert-danger">
<i class="icon material-icons">info</i>
Tipo de alerta de Erro!
<button class="close"><i class="material-icons">close</i></button>
</div>
</div>
<div class="toastr bottom-center" style="position: absolute;">
<div class="alert alert-danger">
<i class="icon material-icons">info</i>
Tipo de alerta de Erro!
<button class="close"><i class="material-icons">close</i></button>
</div>
</div>
<div class="toastr bottom-left" style="position: absolute;">
<div class="alert alert-danger">
<i class="icon material-icons">info</i>
Tipo de alerta de Erro!
<button class="close"><i class="material-icons">close</i></button>
</div>
</div>
</div>