@cw-ui/menu NPM

@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

MenuHeadingGroup

requerido

title: Texto exibido do grupo de items

MenuItem

requerido

title: Texto exibido no componente
onSelect: Função que é acionada quando o item do menu é clicado

opcionais

intent: Intenção do menu
- none padrão, sem alteração da cor do texto
- info para informações
- danger para exclusões ou algo que 'remova uma informação'
- warning para dados não informados
- success para conclusão bem succedida de um processo
isDisabled: Indicador se o item está desabilitado
onKeyPress: Função usada pelo componente Menu para mover o foco entre os items