菜单项

一个多用途的菜单项，设计用于菜单或导航列表中。

**用法**
属性

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
    />
  );
};

属性	类型	描述
左侧图标	图标组件	在菜单项文本之前显示的可选左图标
强调色	string	指定菜单项的点缀颜色。选项包括：`default`、`danger` 和 `placeholder`
文本	字符串	菜单项的文本内容
图标按钮	数组	表示与菜单项关联的额外图标按钮的对象数组
isTooltipOpen	布尔值	控制与菜单项关联的工具提示的可见性
测试 ID	字符串	用于测试目的的数据测试 ID 属性
onClick	函数	在点击菜单项时触发的回调函数
类名	字符串	用于额外样式的可选名称

变体

菜单项组件的不同变体包括以下内容：

命令

菜单中的命令样式菜单项，用于表示键盘快捷键。

用法
属性

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
    />
  );
};

属性	类型	描述
LeftIcon	IconComponent	菜单项中显示在文本前的可选左侧图标
文本	字符串	菜单项的文本内容
firstHotKey	字符串	与命令关联的第一个键盘快捷键
secondHotKey	字符串	与命令关联的第二个键盘快捷键
isSelected	布尔值	指示菜单项是否被选中或高亮
onClick	功能	点击菜单项时触发的回调函数
className	字符串	用于额外样式的可选名称

可拖动的

设计用于在菜单或列表中使用的可拖动菜单项组件，项目可以拖动，并且可以通过图标按钮执行其他操作。

用法
属性

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
    />
  );
};

属性	类型	描述
LeftIcon	IconComponent	菜单项中显示在文本前的可选左侧图标
强调色	字符串	菜单项的强调色。可设置为 `default`, `placeholder`, 和 `danger`
iconButtons	数组	表示与菜单项关联的附加图标按钮的对象数组
isTooltipOpen	布尔值	控制与菜单项关联的工具提示的可见性
onClick	功能	点击链接时触发的回调函数
文本	字符串	菜单项的文本内容
isDragDisabled	布尔值	指示是否禁用拖动
className	字符串	用于额外样式的可选名称

多选

提供通过关联选择框实现多选功能的方法。

用法
属性

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
    />
  );
};

属性	类型	描述
LeftIcon	IconComponent	菜单项中显示在文本前的可选左侧图标
文本	字符串	菜单项的文本内容
已选择	布尔值	指示菜单项是否被选中（勾选）
onSelectChange	功能	选择框状态变化时触发的回调函数
className	字符串	用于额外样式的可选名称

多选头像

带有头像、多选功能的菜单项，具有选择框和文本内容。

用法
属性

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
    />
  );
};

属性	类型	描述
avatar	`ReactNode`	将在菜单项左侧显示的头像或图标
文本	字符串	菜单项的文本内容
selected	布尔值	指示菜单项是否被选中（勾选）
onSelectChange	功能	选择框状态变化时触发的回调函数
className	字符串	用于额外样式的可选名称

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
    />
  );
};

属性	类型	描述
LeftIcon	IconComponent	菜单项中显示在文本前的可选左侧图标
文本	字符串	菜单项的文本内容
onClick	功能	点击菜单项时触发的回调函数
className	字符串	用于额外样式的可选名称

选择

可选择的菜单项，具有可选的左侧内容（图标和文本）和用于选择状态的指示器（检查图标）。

用法
属性

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
    />
  );
};

属性	类型	描述
LeftIcon	IconComponent	菜单项中显示在文本前的可选左侧图标
文本	字符串	菜单项的文本内容
selected	布尔值	指示菜单项是否被选中（勾选）
禁用	布尔值	指示菜单项是否被禁用
hovered	布尔值	指示菜单项当前是否被悬停
onClick	功能	点击菜单项时触发的回调函数
类名	字符串	用于额外样式的可选名称

选择头像

带有头像的可选择的菜单项，具有可选的左侧内容（头像和文本）和用于选择状态的指示器（检查图标）。

用法
属性

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
    />
  );
};

属性	类型	描述
头像	`ReactNode`	用于显示在菜单项左侧的头像或图标
文本	字符串	菜单项的文本内容
已选择	布尔值	表示菜单项是否被选中（已选）
禁用	布尔值	表示菜单项是否被禁用
悬停	布尔值	表示菜单项是否正被悬停
测试ID	字符串	用于测试目的的data-testid属性
onClick	功能	点击菜单项时触发的回调函数
类名	字符串	用于额外样式的可选名称

选择颜色

一个可选择的菜单项，带有颜色样本，用于需要用户从菜单中选择颜色的场景。

用法
属性

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
    />
  );
};

属性	类型	描述
颜色	字符串	菜单项中作为样本显示的主题颜色。选项包括：`绿色`，`绿松石`，`天蓝`，`蓝色`，`紫色`，`粉红色`，`红色`，`橙色`，`黄色`，`灰色`
已选择	布尔值	表示菜单项是否被选中（已选）
禁用	布尔值	表示菜单项是否被禁用
悬停	布尔值	表示菜单项是否正被悬停
变体	字符串	颜色样本的变体。可以是`默认`或`管道`
onClick	功能	点击菜单项时触发的回调函数
类名	字符串	用于额外样式的可选名称

切换

一个菜单项，带有一个关联的开关，允许用户启用或禁用某个特定功能

用法
属性

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
    />
  );
};

属性	类型	描述
左侧图标	IconComponent	在菜单项文本前显示的可选左侧图标
文本	字符串	菜单项的文本内容
已切换	布尔值	表示开关按钮处于“开”还是“关”状态
切换状态变更	功能	开关状态改变时触发的回调函数
切换尺寸	字符串	开关的尺寸。它可以是\
类名	字符串	用于额外样式的可选名称

Welcome

Core Concepts

变体

命令

可拖动的

多选

多选头像

导航

选择

选择头像

选择颜色

切换

​变体

​命令

​可拖动的

​多选

​多选头像

​导航

​选择

​选择头像

​选择颜色

​切换

变体

命令

可拖动的

多选

多选头像

导航

选择

选择头像

选择颜色

切换