DaisyUIを使用して検索ボックスに検索アイコンを追加する方法

2024-02-17 12:38 DaisyUI 検索ボックス 検索アイコン

まず、DaisyUIのインストールとセットアップが完了していることを確認してください。それから、次の手順に従って進めます。

  1. HTMLの検索ボックスを作成します。例えば、次のようなコードを使用できます:
<div class="relative">
  <input type="text" placeholder="検索..." class="w-full border border-gray-300 rounded py-2 pl-10 pr-4 focus:outline-none focus:ring-1 focus:ring-blue-300">
  <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
    <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l5-5m0 0l-5-5m5 5h9m-9 0H4"></path>
    </svg>
  </div>
</div>

このコードは、検索ボックスを含む<div>要素を作成し、その中に<input>要素と検索アイコンの<svg>要素を配置しています。検索アイコンは、SVGのパスとして定義されています。

  1. 上記のコードでは、検索アイコンにh-5やw-5といったサイズを指定しています。これらの値を調整することで、アイコンのサイズを変更できます。

  2. 各要素には、DaisyUIのクラスを追加しています。例えば、borderクラスはボーダーを追加し、roundedクラスは角を丸くします。これらのクラスを調整することで、外観をカスタマイズできます。

以上で、DaisyUIを使用して検索ボックスに検索アイコンを追加する方法の説明が完了です。この方法を使えば、シンプルで洗練された検索ボックスを作成することができます。