README
@cw-ui/menu
This package can change any time. Please only use if you are the ETC.Digital team.
Introdução
É um menu. Pode ser usado com um Popover para criar um menu dropdown.
Gestão de foco
O componente Menu é usado para ajudar no gerenciamento do foco.
A seta para baixo em um botão trará o foco para dentro do popover.
As teclas de seta dentro do menu percorrerão todos os itens do menu e pularão os itens desativados.
A tecla Home
(fn + seta para a esquerda) irá para o primeiro item.
A tecla End
(fn + seta para a direita) irá para o último item.
Exemplo
import { Menu, MenuItem, MenuDivider, MenuHeadingGroup } from "@cw-ui/menu"
const AlignExample: FC = () => {
return <Menu>
<MenuHeadingGroup title="Actions"/>
<MenuItem title="Share..."/>
<MenuItem title="Move..."/>
<MenuItem title="Rename..."/>
</Menu.Item>
<Menu.Divider />
<MenuHeadingGroup title="destructive">
<MenuItem intent="danger" title="Delete..."/>
</Menu>
}
API
Menu
requerido
children
: O componente menu precisa englobar um outro componente.
MenuHeadingGroup
requerido
title
: Texto exibido do grupo de items
MenuItem
requerido
title
: Texto exibido no componenteonSelect
: Função que é acionada quando o item do menu é clicado
opcionais
intent
: Intenção do menunone
padrão, sem alteração da cor do textoinfo
para informaçõesdanger
para exclusões ou algo que 'remova uma informação'warning
para dados não informadossuccess
para conclusão bem succedida de um processo
isDisabled
: Indicador se o item está desabilitadoonKeyPress
: Função usada pelo componenteMenu
para mover o foco entre os items
MenuDivider
Sem propriedades