前回はページを少し見やすくするために、Tailwind.css を適用しましたが、今回は Preview Search の Widget でも利用する方法を紹介します。

Widget の変更

すでに設定しているウィジットはスタイルシートを設定しているウィジットを利用していました。今回は以前のウィジットに関して、何もスタイルシートが適用されていないものを設定します。

まず最初に、作成済のウィジットを削除します。src\widgets\PreviewSearch を削除してください。続いて、以前と同じ名前のウィジットを作成しますが、最後の選択して No styles を選択してください。これで、何もスタイルシートが適用されていないウィジットを利用する形に切り替わりました。

見事に崩れました。スタイルシートを適用することで修正をしていきます。

入力ボックスの調整

検索キーワードを入力するボックスのサイズが指定されていないためサイズが小さくなっています。そこで、NavMenu.InputTrigger に対して className で以下のように指定します。

          <NavMenu.InputTrigger
            onChange={keyphraseHandler}
            autoComplete="off"
            placeholder="Type to search..."
            className="w-full border-1 border-gray-500 h-8"
          />

結果、横幅の調整ができました。

しかしながら表示される結果は、正しく表示されていません。そこで、NavMenu.SubContent の className に対して以下の値を設定します。

              <NavMenu.SubContent
                orientation="vertical"
                value="defaultArticlesResults"
                ref={widgetRef}
                className="absolute top-4 left-0"
              >

検索結果は以下のように表示されるようになりました。

上のほうに表示されていた項目が、入力ボックスのすぐ下に表示されています。

結果を並べて表示する

もともとは３つ横に並んで合計６つの結果が表示されるようになっていました。そこで、表示している部分にスタイルを適用していきます。NavMenu.List に対して以下の className を指定します。

    <NavMenu.List className="grid grid-cols-3">

横に３つ並んでいますが、すべての結果が隙間なく並んでいます。それぞれに少しマージンを設定しましょう。

          <NavMenu.Item key={article.id} className="mr-1 ml-1 mt-2">

検索結果の見た目の調整がこれで完了です。手順としては上記のようにそれぞれ className を指定することで、要素に合わせたスタイルの調整が可能となります。

まとめ

今回は標準で用意されていない Tailwind.css のスタイルシートを当てるという形でスタイルを調整しましたが、この Tips は実際に運用しているサイトと合わせたい、というときに同様に使える Tips になると思います。