@cw-ui/stack

Atomic Design System for React

Usage no npm install needed!

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

README

@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

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