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