Components
Sidebar
Sidebar overlap left
Sidebar à esquerda que se sobrepõe ao conteúdo da página quando aberta. Para utilizar este tipo de sidebar basta utilizar as classes sidebar-overlap
, sidebar-left
e sidebar-icon-arrow-left
conforme pode ser visto no exemplo abaixo.
Sidebar overlap right
Sidebar à direita que se sobrepõe ao conteúdo da página quando aberta. Para utilizar este tipo de sidebar basta utilizar as classes sidebar-overlap
, sidebar-right
e sidebar-icon-arrow-right
conforme pode ser visto no exemplo abaixo.
Sidebar com overlay
Para adicionar um fundo transparente atrás da sidebar, basta adicionar uma div
com a classe sidebar-overlay
após o sidebar.
Sidebar overlap close
Sidebar overlap com botão fechar, ao clicar no botão a sidebar desaparece. O botão close pode ser aplicado com as classes sidebar-left
e sidebar-right
, basta trocar a classe sidebar-icon-arrow-left
/sidebar-icon-arrow-right
pela classe sidebar-icon-close
conforme pode ser visto no examplo abaixo.
Siderbar split left
Sidebar à esqueda que ajusta o conteúdo para a direita quando aberta. Para utilizar este tipo de sidebar basta utilizar as classes sidebar-split
, sidebar-left
e sidebar-icon-arrow-left
conforme pode ser visto no exemplo abaixo.
Sidebar split right
Sidebar à direita que ajusta o conteúdo para a esqueda quando aberta. Para utilizar este tipo de sidebar basta utilizar as classes sidebar-split
, sidebar-left
e sidebar-icon-arrow-right
conforme pode ser visto no exemplo abaixo.
Sidebar Resize
Sidebar à direita que ajusta o conteúdo para a esquerda, é possível ajustar a largura das "colunas" arrastando a barra central que as divide. Para utilizar este tipo de sidebar basta usar as classes sidebar sidebar-resize sidebar-right
e content-resize
, conforme pode ser visto no exemplo abaixo. Além disso é necessário iniciar o componente na página através do comando RD.SidebarResize.init().
- Como alternativa, podem ser usadas as classes
sidebar sidebar-split sidebar-right
econtent-split
. - Os atributos
data-sidebar-size="xs" data-sidebar-min-size-width="100"
podem ser utilizados para definir um tamanho mínimo para a sidebar. - Os atributos
data-content-size="sm" data-content-min-size-width="100"
podem ser utilizados para definir um tamanho mínimo para a coluna de conteúdo. - Os valores possíveis para
data-content-size
edata-sidebar-size
são xs, sm ou lg. - Os atributos
data-sidebar-min-size-width
edata-content-min-size-width
têm maior prioridade em relação aosdata-sidebar-size
edata-content-size
.