@cw-ui/positioner NPM

@cw-ui/menu

This package can change any time. Please only use if you are the ETC.Digital team.

Introdução

O componente Popover exibe conteúdo flutuante em relação a um alvo. Os Popovers aparecem na parte superior, inferior, esquerda ou direita de seu alvo. O lado preferencial e padrão é a parte inferior mas usam um posicionamento inteligente se não houver espaço suficiente.

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