StickyBar
Base
Valor inicial e controle de estado
Utilize a propriedade defaultHide
para prover um estado inicial (se fechado ou não) a StickyBar
não controlada, ou utilize a propriedade hide
para gerenciar o valor de forma controlada.
Não controlado
Controlado
Você deve criar um estado para gerenciar o visibilidade através da propriedade hide
ao utilizar a StickyBar
controlada.
Sem o botão de fechar
Utilize a propriedade irremovable
para remover o botão fechar da StickyBar
.
Mesmo sem o botão fechar você pode controlar a visibilidade da StickyBar
normalmente através da propriedade hide
.
Seções
Utilize o subcomponente StickyBar.Section
para particionar o conteúdo da StickyBar
em diferentes seções.
Fluida
Utilize a propriedade fluid
para expandir a seção por todo espaço horizontal disponível.
Esticada
Utilize a propriedade stretch
para expandir a seção até os limites verticais da StickyBar
.
Fluida e esticada
Você pode utilizar as propriedades fluid
e stretch
ao mesmo tempo, se necessário.
Customização
Utilize a propriedade backgroundColor
para adicionar uma cor de fundo customizada a StickyBar
.
Além disto, utilize o hook useStickyBar
para obter cores com contraste apropriado para a cor de fundo da StickyBar
.
Composição com outros componentes de layout
Utilize o componente StickyBarGroup
para posicionar adequadamente uma ou mais StickyBar
no canto superior da página.
Os estilos do StickyBarGroup
interagem automaticamente com os estilos da Navbar, Sidebar e do Main para compor um padrão de layout para páginas. Desde a versão 8.14.0
este comportamento também funciona quando estes componentes estão separados em diferentes micro frontends.
Utiliza a propriedade disabledAutoPosisitioning
para desabilitar o posicionamento automático do componente.
Esta propriedade pode ser útil em cenários onde o layout da página será organizado por uma biblioteca externa ou algum estilo curtomizado.