- Sobre
- Instalação
- Exemplo
Css
- Grid
- Imagens
- Tabelas
- Estilos
Componentes
- Cabeçalhos
- Botões
- Forms
- Cards
- Rodapé
Javascript
- Menu lateral
- Modais
- Slider
Input de texto
Os inputs tipo texto devem estar dentro de objetos com classe col, dentro de objetos com classe row.
<div class="row">
<div class="col s12">
<input type="text" placeholder="type your text here">
</div>
</div>
Assim como para colocar um input ao lado de outro, siga o modelo descrito abaixo.
Input 1
Input 2
<div class="row">
<div class="col s6">
<p class="label">Input 1</p>
<input type="text">
</div>
<div class="col s6">
<p class="label">Input 2</p>
<input type="text">
</div>
</div>
Select
O objeto select também tem 100% de largura. Para dimensioná-lo, use a estrutura em colunas.
Select 1
Select 2
<div class="row">
<div class="col s6">
<p class="label">Select 1</p>
<select>
<option selected disabled>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="col s6">
<p class="label">Select 2</p>
<select>
<option selected disabled>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
Checkbox
O input com tipo checkbox deve estar dentro de um objeto com classe col e deve estar acompanhado por um objeto p com classe label.
Select 1
Select 1
Select 1
<div class="row">
<div class="col s12 m4">
<input type='checkbox'>
<p class="label">Select 1</p>
</div>
<div class="col s12 m4">
<input type='checkbox' checked>
<p class="label">Select 1</p>
</div>
<div class="col s12 m4">
<input type='checkbox' disabled>
<p class="label">Select 1</p>
</div>
</div>
Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus.