@cw-ui/menu

Atomic Design System for React

Usage no npm install needed!

<script type="module">
  import cwUiMenu from 'https://cdn.skypack.dev/@cw-ui/menu';
</script>

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 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

MenuDivider

Sem propriedades