アイコンピッカー

ドロップダウンベースのアイコンピッカーで、ユーザーがリストからアイコンを選択できます。

使用方法

import React, { useState } from "react";
import { IconPicker } from "@/ui/input/components/IconPicker";

export const MyComponent = () => {

   const [selectedIcon, setSelectedIcon] = useState("");
   const handleIconChange = ({ iconKey, Icon }) => {
     console.log("Selected Icon:", iconKey);
     setSelectedIcon(iconKey);
   };

  return (
      <IconPicker
        disabled={false}
        onChange={handleIconChange}
        selectedIconKey={selectedIcon}
        variant="primary"
      />
  );
};

プロパティ

プロパティ	タイプ	説明
無効	ブール型	true に設定されるとアイコンピッカーは無効になります
onChange	関数	ユーザーがアイコンを選択したときにトリガーされるコールバック関数。 それは iconKey と Icon プロパティを持つオブジェクトを受け取ります
selectedIconKey	string	最初に選択されたアイコンのキー
onClickOutside	関数	ユーザーがドロップダウン外をクリックしたときにトリガーされるコールバック関数
onClose	関数	ドロップダウンが閉じられたときにトリガーされるコールバック関数
onOpen	関数	ドロップダウンが開かれたときにトリガーされるコールバック関数
バリアント	string	クリック可能なアイコンのビジュアルスタイルバリアント。 オプションには primary、 secondary、 tertiary が含まれます