メニュー項目

メニューまたはナビゲーションリストで使用するために設計された汎用性の高いメニュー項目です。

使用方法
プロパティ

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` を含みます
テキスト	string	メニュー項目のテキスト内容
アイコンボタン	配列	メニュー項目に関連する追加のアイコンボタンを表すオブジェクトの配列
ツールチップオープンフラグ	ブール型	メニュー項目に関連するツールチップの表示状態を制御する
テストID	string	テスト目的のためのdata-testid属性
onClick	関数	メニュー項目がクリックされたときにトリガーされるコールバック関数
className	string	追加スタイル用のオプション名

バリエーション

メニュー項目コンポーネントの異なるバリエーションには以下が含まれます:

コマンド

キーボードショートカットを示すためのメニュー内のコマンド形式のメニュー項目。

使用方法
プロパティ

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

プロパティ	タイプ	説明
左アイコン	アイコンコンポーネント	メニュー項目のテキストの前に表示されるオプションの左アイコン
テキスト	string	メニュー項目のテキスト内容
firstHotKey	string	コマンドに関連する最初のキーボードショートカット
secondHotKey	string	コマンドに関連する2番目のキーボードショートカット
isSelected	ブール型	メニュー項目が選択またはハイライトされているかどうかを示します
onClick	関数	メニュー項目がクリックされたときにトリガーされるコールバック関数
className	string	追加スタイル用のオプション名

ドラッグ可能

メニューまたはリスト内で項目をドラッグし、アイコンボタンを通じて追加のアクションを実行するために設計されたドラッグ可能なメニュー項目コンポーネント。

使用方法
プロパティ

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

プロパティ	タイプ	説明
左アイコン	アイコンコンポーネント	メニュー項目のテキストの前に表示されるオプションの左アイコン
アクセント	string	メニュー項目のアクセントカラー。 `default`、`placeholder`、および `danger` のいずれかです
アイコンボタン	配列	メニュー項目に関連する追加のアイコンボタンを表すオブジェクトの配列
ツールチップオープンフラグ	ブール型	メニュー項目に関連するツールチップの表示状態を制御します
onClick	関数	リンクがクリックされるとトリガーされるコールバック関数
テキスト	string	メニュー項目のテキスト内容
isDragDisabled	ブール型	ドラッグが無効かどうかを示します
className	string	追加スタイル用のオプション名

マルチ選択

関連するチェックボックスを使用してマルチ選択機能を実装する方法を提供します。

使用方法
プロパティ

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

プロパティ	タイプ	説明
左アイコン	アイコンコンポーネント	メニュー項目のテキストの前に表示されるオプションの左アイコン
テキスト	string	メニュー項目のテキスト内容
selected	ブール型	メニュー項目が選択されているかどうかを示します
onSelectChange	関数	チェックボックスの状態が変更されたときにトリガーされるコールバック関数
className	string	追加スタイル用のオプション名

マルチ選択アバター

選択用のチェックボックスとテキストコンテンツを備えたアバター付きのマルチ選択メニュー項目。

使用方法
プロパティ

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`	メニュー項目の左側に表示されるアバターまたはアイコン
テキスト	string	メニュー項目のテキスト内容
selected	ブール型	メニュー項目が選択されているかどうかを示します
onSelectChange	関数	チェックボックスの状態が変更されたときにトリガーされるコールバック関数
className	string	追加スタイル用のオプション名

ナビゲート

オプションの左アイコン、テキストコンテンツ、および右のチューロマークを特徴とするメニュー項目。

使用方法
プロパティ

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

プロパティ	タイプ	説明
左アイコン	アイコンコンポーネント	メニュー項目のテキストの前に表示されるオプションの左アイコン
テキスト	string	メニュー項目のテキスト内容
onClick	関数	メニュー項目がクリックされたときにトリガーされるコールバック関数
className	string	追加スタイル用のオプション名

選択

オプションの左コンテンツ（アイコンとテキスト）と選択状態のインジケーター（チェックアイコン）を備えた選択可能なメニュー項目。

使用方法
プロパティ

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

プロパティ	タイプ	説明
左アイコン	アイコンコンポーネント	メニュー項目のテキストの前に表示されるオプションの左アイコン
テキスト	string	メニュー項目のテキスト内容
selected	ブール型	メニュー項目が選択されているかどうかを示します
無効	ブール型	メニュー項目が無効かどうかを示します
hovered	ブール型	メニュー項目が現在ホバーされているかどうかを示します
onClick	関数	メニュー項目がクリックされたときにトリガーされるコールバック関数
className	string	追加スタイル用のオプション名

選択アバター

アバター付きの選択可能なメニュー項目、オプションの左コンテンツ（アバターとテキスト）および選択状態のためのインジケーター（チェックアイコン）。

使用方法
プロパティ

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

プロパティ	タイプ	説明
avatar	`ReactNode`	メニュー項目の左側に表示されるアバターまたはアイコン
テキスト	string	メニュー項目のテキスト内容
selected	ブール型	メニュー項目が選択されているかどうかを示します
無効	ブール型	メニュー項目が無効かどうかを示します
hovered	ブール型	メニュー項目が現在ホバーされているかどうかを示します
テストID	string	テスト目的のためのdata-testid属性
onClick	関数	メニュー項目がクリックされたときにトリガーされるコールバック関数
className	string	追加スタイル用のオプション名

色を選択

ユーザーがメニューから色を選択できるシナリオに使用するための、カラーパレットサンプルを備えた選択可能なメニュー項目。

使用方法
プロパティ

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

プロパティ	タイプ	説明
カラー	string	メニュー項目にサンプルとして表示されるテーマカラー。選択肢には、`green`、`turquoise`、`sky`、`blue`、`purple`、`pink`、`red`、`orange`、`yellow`、`gray`があります。
選択済み	ブール型	メニュー項目が選択されている（チェックされている）かどうかを示します
無効	ブール型	メニュー項目が無効かどうかを示します
ホバー	ブール型	メニュー項目が現在ホバーされているかどうかを示します
バリアント	string	色サンプルのバリアント。 `default` または `pipeline` のいずれかです。
onClick	関数	メニュー項目がクリックされたときにトリガーされるコールバック関数
className	string	追加スタイル用のオプション名

切り替え

特定の機能を有効または無効にするためのトグルスイッチが付いたメニュー項目

使用方法
プロパティ

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

プロパティ	タイプ	説明
左アイコン	アイコンコンポーネント	メニュー項目のテキストの前に表示されるオプションの左アイコン
テキスト	string	メニュー項目のテキスト内容
切り替え済み	ブール型	トグルスイッチが「オン」または「オフ」かを示します
onToggleChange	関数	トグルスイッチの状態が変化した際にトリガーされるコールバック関数
toggleSize	string	トグルスイッチのサイズです。いずれかになります \
className	string	追加スタイル用のオプション名

Welcome

Core Concepts

バリエーション

コマンド

ドラッグ可能

マルチ選択

マルチ選択アバター

ナビゲート

選択

選択アバター

色を選択

切り替え

​バリエーション

​コマンド

​ドラッグ可能

​マルチ選択

​マルチ選択アバター

​ナビゲート

​選択

​選択アバター

​色を選択

​切り替え

バリエーション

コマンド

ドラッグ可能

マルチ選択

マルチ選択アバター

ナビゲート

選択

選択アバター

色を選択

切り替え