- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
| akcent | řetězec | Určuje barvu akcentu položky menu. Možnosti zahrnují: default, danger a placeholder |
| text | textový řetězec | Textový obsah položky menu |
| ikonová tlačítka | pole | Seznam objektů představujících další ikony tlačítek spojené s položkou menu |
| isTooltipOpen | booleovská hodnota | Řídí viditelnost tooltipu spojeného s položkou menu |
| testId | řetězec | Atribut data-testid pro testovací účely |
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
| className | řetězec | Volitelný název pro dodatečné stylování |
Varianty
Různé varianty komponenty položky menu zahrnují následující:Příkaz
Položka menu ve stylu příkazu v menu pro označení klávesových zkratek.- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
| text | řetězec | Textový obsah položky menu |
| firstHotKey | řetězec | První klávesová zkratka spojená s příkazem |
| secondHotKey | řetězec | Druhá klávesová zkratka spojená s příkazem |
| isSelected | booleovská hodnota | Určuje, zda je položka menu vybrána nebo zvýrazněna |
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
| className | řetězec | Volitelný název pro dodatečné stylování |
Přetahovatelný
Komponenta položky menu s možností přetahování, určená k použití v nabídce nebo seznamu, kde je možné položky přetahovat, a prostřednictvím tlačítek s ikonami lze provádět další akce.- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
| akcent | řetězec | Barva akcentu položky menu. Může být default, placeholder, nebo danger |
| ikonová tlačítka | pole | Seznam objektů představujících další ikony tlačítek spojené s položkou menu |
| isTooltipOpen | booleovská hodnota | Řídí viditelnost tooltipu spojeného s položkou menu |
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz |
| text | řetězec | Textový obsah položky menu |
| isDragDisabled | booleovská hodnota | Určuje, zda je táhnutí zakázáno |
| className | řetězec | Volitelný název pro dodatečné stylování |
Vícenásobný výběr
Poskytuje způsob, jak implementovat funkci vícenásobného výběru s přidruženým zaškrtávacím políčkem.- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
| text | řetězec | Textový obsah položky menu |
| vybráno | booleovská hodnota | Určuje, zda je položka menu vybrána (zaškrtnuto) |
| poZměněVýběru | funkce | Funkce zpětného volání spuštěná při změně stavu zaškrtávacího políčka |
| className | řetězec | Volitelný název pro dodatečné stylování |
Vícenásobný výběr s avatarem
Položka menu pro vícenásobný výběr s avatarem, zaškrtávacím políčkem pro výběr a textovým obsahem.- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| avatar | ReactNode | Avatar nebo ikona, která má být zobrazena na levé straně položky menu |
| text | řetězec | Textový obsah položky menu |
| vybráno | booleovská hodnota | Určuje, zda je položka menu vybrána (zaškrtnuto) |
| poZměněVýběru | funkce | Funkce zpětného volání spuštěná při změně stavu zaškrtávacího políčka |
| className | řetězec | Volitelný název pro dodatečné stylování |
Navigovat
Položka menu s volitelnou levou ikonou, textovým obsahem a ikonou šipky vpravo.- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| LeváIkona | KomponentaIkony | Volitelná levá ikona zobrazená před textem v položce menu |
| text | řetězec | Textový obsah položky menu |
| poKliknutí | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
| className | řetězec | Volitelný název pro dodatečné stylování |
Vybrat
Výběrová položka menu, s volitelným levým obsahem (ikonou a textem) a indikátorem (ikonou zaškrtnutí) pro vybraný stav.- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| LeváIkona | KomponentaIkony | Volitelná levá ikona zobrazená před textem v položce menu |
| text | řetězec | Textový obsah položky menu |
| vybráno | booleovská hodnota | Určuje, zda je položka menu vybrána (zaškrtnuto) |
| neaktivní | booleovská hodnota | Určuje, zda je položka menu neaktivní |
| zvýrazněno | booleovská hodnota | Určuje, zda je položka menu aktuálně přejeta kurzorem |
| poKliknutí | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
| className | řetězec | Volitelný název pro dodatečné stylování |
Vybrat Avatar
Výběrová položka menu s avatarem, s volitelným levým obsahem (avatar a text) a indikátorem (ikonou zaškrtnutí) pro vybraný stav.- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| avatar | ReactNode | Avatar nebo ikona, která se zobrazuje na levé straně položky menu |
| text | řetězec | Textový obsah položky menu |
| vybráno | booleovská hodnota | Označuje, zda je položka menu vybrána (zaškrtnuta) |
| neaktivní | booleovská hodnota | Označuje, zda je položka menu deaktivována |
| zvýrazněno | booleovská hodnota | Označuje, zda je položka menu aktuálně zvýrazněna |
| testId | řetězec | Atribut data-testid pro testovací účely |
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
| className | řetězec | Volitelný název pro dodatečné stylování |
Vybrat barvu
Volitelná položka menu s ukázkou barvy pro situace, kdy chcete, aby uživatelé zvolili barvu z menu.- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| barva | řetězec | Barva motivu, která se zobrazí jako ukázka v položce menu. Možnosti zahrnují: green, turquoise, sky, blue, purple, pink, red, orange, yellow a gray |
| vybráno | booleovská hodnota | Označuje, zda je položka menu vybrána (zaškrtnuta) |
| neaktivní | booleovská hodnota | Označuje, zda je položka menu deaktivována |
| zvýrazněno | booleovská hodnota | Označuje, zda je položka menu aktuálně zvýrazněna |
| varianta | řetězec | Varianta ukázky barvy. Může být buďto default nebo pipeline |
| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na položku menu |
| className | řetězec | Volitelný název pro dodatečné stylování |
Přepnout
Položka menu s přidruženým přepínačem k umožnění nebo zakázání určité funkce- Použití
- Vlastnosti
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
/>
);
};
| Vlastnosti | Typ | Popis |
|---|---|---|
| Levá ikona | Ikonová komponenta | Volitelná levá ikona zobrazená před textem v položce menu |
| text | řetězec | Textový obsah položky menu |
| přepnuto | booleovská hodnota | Označuje, zda je přepínač v “zapnutém” nebo “vypnutém” stavu |
| naZměnuPřepnutí | funkce | Funkce zpětného volání spuštěná při změně stavu přepínače |
| velikostPřepnutí | řetězec | Velikost přepínače. Může být buď \ |
| className | řetězec | Volitelný název pro dodatečné stylování |