- Uso
- Propriedades
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";
export const MyComponent = () => {
const handleMenuItemClick = (event) => {
console.log("Menu item clicked!", event);
};
const handleButtonClick = (event) => {
console.log("Icon button clicked!", event);
};
return (
<MenuItem
LeftIcon={IconBell}
accent="default"
text="Menu item text"
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
isTooltipOpen={true}
testId="menu-item-1"
onClick={handleMenuItemClick}
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| LeftIcon | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu |
| destaque | string | Especifica a cor de destaque do item de menu. As opções incluem: default, danger, e placeholder |
| texto | string | O conteúdo de texto do item de menu |
| botõesDeÍcone | matriz | Uma matriz de objetos representando botões de ícones adicionais associados ao item de menu |
| isTooltipOpen | booleano | Controla a visibilidade da dica de ferramenta associada ao item de menu |
| testeId | string | O atributo data-testid para fins de teste |
| onClick | função | Função de retorno de chamada disparada quando o item de menu é clicado |
| className | string | Nome opcional para estilização adicional |
Variantes
As diferentes variantes do componente de item de menu incluem o seguinte:Comando
Um item de menu no estilo de comando dentro de um menu para indicar atalhos de teclado.- Uso
- Propriedades
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";
export const MyComponent = () => {
const handleCommandClick = () => {
console.log("Command clicked!");
};
return (
<MenuItemCommand
LeftIcon={IconBell}
text="First Option"
firstHotKey="⌘"
secondHotKey="1"
isSelected={true}
onClick={handleCommandClick}
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| ÍconeEsquerda | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu |
| texto | string | O conteúdo de texto do item de menu |
| primeiraTeclaDeAtalho | string | A primeira tecla de atalho associada ao comando |
| segundaTeclaDeAtalho | string | A segunda tecla de atalho associada ao comando |
| éSelecionado | booleano | Indica se o item de menu está selecionado ou destacado |
| onClick | função | Função de retorno de chamada disparada quando o item de menu é clicado |
| className | string | Nome opcional para estilização adicional |
Arrastável
Um componente de item de menu arrastável projetado para ser usado em um menu ou lista onde os itens podem ser arrastados e ações adicionais podem ser realizadas através de botões de ícone.- Uso
- Propriedades
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";
export const MyComponent = () => {
const handleMenuItemClick = (event) => {
console.log("Menu item clicked!", event);
};
return (
<MenuItemDraggable
LeftIcon={IconBell}
accent="default"
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
isTooltipOpen={false}
onClick={handleMenuItemClick}
text="Menu item draggable"
isDragDisabled={false}
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| ÍconeEsquerda | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu |
| destaque | string | A cor de destaque do item de menu. Pode ser default, placeholder, e danger |
| botõesDeÍcone | matriz | Uma matriz de objetos representando botões de ícones adicionais associados ao item de menu |
| isTooltipOpen | booleano | Controla a visibilidade da dica de ferramenta associada ao item de menu |
| onClick | função | Função de retorno de chamada para ser disparada quando o link é clicado |
| texto | string | O conteúdo de texto do item de menu |
| isDragDisabled | booleano | Indica se o arrasto está desativado |
| className | string | Nome opcional para estilização adicional |
Seleção Múltipla
Proporciona uma maneira de implementar a funcionalidade de seleção múltipla com uma caixa de seleção associada.- Uso
- Propriedades
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";
export const MyComponent = () => {
return (
<MenuItemMultiSelect
LeftIcon={IconBell}
text="First Option"
selected={false}
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| ÍconeEsquerda | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu |
| texto | string | O conteúdo de texto do item de menu |
| selecionado | booleano | Indica se o item de menu está selecionado (marcado) |
| aoMudarSeleção | função | Função de retorno de chamada disparada quando o estado da caixa de seleção muda |
| className | string | Nome opcional para estilização adicional |
Seleção Múltipla Avatar
Um item de menu de seleção múltipla com um avatar, uma caixa de seleção para seleção e conteúdo textual.- Uso
- Propriedades
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";
export const MyComponent = () => {
const imageUrl =
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
return (
<MenuItemMultiSelectAvatar
avatar={<img src={imageUrl} alt="Avatar" />}
text="First Option"
selected={false}
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| avatar | ReactNode | O avatar ou ícone a ser exibido no lado esquerdo do item de menu |
| texto | string | O conteúdo de texto do item de menu |
| selecionado | booleano | Indica se o item de menu está selecionado (marcado) |
| aoMudarSeleção | função | Função de retorno de chamada disparada quando o estado da caixa de seleção muda |
| className | string | Nome opcional para estilização adicional |
Navegar
Um item de menu com um ícone opcional à esquerda, conteúdo textual e um ícone de seta à direita.- Uso
- Propriedades
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";
export const MyComponent = () => {
const handleNavigation = () => {
console.log("Navigate to another page");
};
return (
<MenuItemNavigate
LeftIcon={IconBell}
text="First Option"
onClick={handleNavigation}
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| ÍconeEsquerda | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu |
| texto | string | O conteúdo de texto do item de menu |
| onClick | função | Função de retorno de chamada para ser disparada quando o item de menu é clicado |
| className | string | Nome opcional para estilização adicional |
Selecionar
Um item de menu selecionável, com conteúdo esquerdo opcional (ícone e texto) e um indicador (ícone de seleção) para o estado selecionado.- Uso
- Propriedades
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";
export const MyComponent = () => {
const handleSelection = () => {
console.log("Menu item selected");
};
return (
<MenuItemSelect
LeftIcon={IconBell}
text="First Option"
selected={true}
disabled={false}
hovered={false}
onClick={handleSelection}
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| ÍconeEsquerda | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu |
| texto | string | O conteúdo de texto do item de menu |
| selecionado | booleano | Indica se o item de menu está selecionado (marcado) |
| desativado | booleano | Indica se o item de menu está desativado |
| pairado | booleano | Indica se o item de menu está com o cursor sobre ele no momento |
| onClick | função | Função de retorno de chamada para ser disparada quando o item de menu é clicado |
| className | string | Nome opcional para estilização adicional |
Selecionar Avatar
Um item de menu selecionável com um avatar, com conteúdo esquerdo opcional (avatar e texto) e um indicador (ícone de seleção) para o estado selecionado.- Uso
- Propriedades
import { MenuItemSelectAvatar } from "twenty-ui/display";
export const MyComponent = () => {
const imageUrl =
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
const handleSelection = () => {
console.log("Menu item selected");
};
return (
<MenuItemSelectAvatar
avatar={<img src={imageUrl} alt="Avatar" />}
text="First Option"
selected={true}
disabled={false}
hovered={false}
testId="menu-item-test"
onClick={handleSelection}
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| avatar | ReactNode | O avatar ou ícone a ser exibido no lado esquerdo do item de menu |
| texto | string | O conteúdo de texto do item de menu |
| selecionado | booleano | Indica se o item de menu está selecionado (marcado) |
| desativado | booleano | Indica se o item de menu está desativado |
| pairado | booleano | Indica se o item de menu está com o cursor sobre ele no momento |
| testeId | string | O atributo data-testid para fins de teste |
| onClick | função | Função de retorno de chamada para ser disparada quando o item de menu é clicado |
| className | string | Nome opcional para estilização adicional |
Selecionar Cor
Um item de menu selecionável com uma amostra de cor para cenários onde você deseja que os usuários escolham uma cor em um menu.- Uso
- Propriedades
import { MenuItemSelectColor } from "twenty-ui/display";
export const MyComponent = () => {
const handleSelection = () => {
console.log("Menu item selected");
};
return (
<MenuItemSelectColor
color="green"
selected={true}
disabled={false}
hovered={true}
variant="default"
onClick={handleSelection}
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| cor | string | A cor do tema a ser exibida como exemplo no item do menu. As opções incluem: verde, turquesa, céu, azul, roxo, pink, vermelho, laranja, amarelo e cinza |
| selecionado | booleano | Indica se o item de menu está selecionado (marcado) |
| desativado | booleano | Indica se o item de menu está desativado |
| pairado | booleano | Indica se o item de menu está com o cursor sobre ele no momento |
| variante | string | A variante da amostra de cor. Pode ser default ou pipeline |
| onClick | função | Função de retorno de chamada disparada quando o item de menu é clicado. |
| className | string | Nome opcional para estilização adicional. |
Alternar
Um item de menu com um interruptor associado para permitir que os usuários ativem ou desativem um recurso específico.- Uso
- Propriedades
import { IconBell } from '@tabler/icons-react';
import { MenuItemToggle } from 'twenty-ui/display';
export const MyComponent = () => {
return (
<MenuItemToggle
LeftIcon={IconBell}
text="First Option"
toggled={true}
toggleSize="small"
className
/>
);
};
| Propriedades | Tipo | Descrição |
|---|---|---|
| LeftIcon | ComponenteÍcone | Um ícone opcional à esquerda exibido antes do texto no item de menu. |
| texto | string | O conteúdo de texto do item de menu. |
| alternado | booleano | Indica se o interruptor de alternância está no estado “on” ou “off”. |
| onToggleChange | função | Função de retorno de chamada acionada quando o estado do interruptor de alternância muda. |
| tamanhoAlternar | string | O tamanho do interruptor de alternância. Pode ser \ |
| className | string | Nome opcional para estilização adicional |