componentes
drawer
É um painel lateral que abre quando seu trigger é pressionado.
índice
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
closeDrawer | Close drawer default function | true | undefined | () => void |
isOpen | Is drawer open value | true | undefined | boolean |
wrapperZIndex | Drawer Wrapper z-index | false | 99999 | number |
children | Drawer children | true | undefined | ReactNode |
*valores gerados automaticamente.
Drawer.Header
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
children | Drawer header children | true | undefined | ReactNode |
*valores gerados automaticamente.
Drawer.Body
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
children | Drawer body children | true | undefined | ReactNode |
*valores gerados automaticamente.
guia de uso
O drawer menu normalmente é acionado através de um botão. É utilizado quando queremos que o usuário complee uma ação sem necessariamente sair da tela atual. O recomendado é utilizar o drawer junto com seus componentes de header e body, que já garantem um espaçamento certo do corpo e cabeçalho do drawer em relação ao botão que fecha o próprio drawer
guia de design
- Tem guia de uso.
- Tem guia de conteúdo.
- Usa os design tokens.
- Tem símbolo no Figma.
- Possui motion.
- Possui versão web.
- Possui versão responsiva.
- Possui versão mobile.
- É acessível via leitor de tela.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).