Pular para o conteúdo principal

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.

Dica

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.

Informação

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.

Feedback

Para reportar algum problema ou sugerir alterações, use nosso formulário de melhorias ou, se preferir, abra uma issue no nosso Github.