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