この記事では、Tailwind でリスト ブロックのリスト スタイル イメージを設定する手順を説明します。
Tailwind でリスト スタイルのイメージ クラスを設定するにはどうすればよいですか?
List Style Image Class は、Tailwind でリスト マーカーとして画像を提供するために使用されます。デフォルトでは、Tailwind は「 リスト画像-なし 」クラスは、リストに対して以前に設定された画像マーカーを削除する場合にのみ使用できます。
構文
Tailwind でリスト スタイルのイメージ クラスを使用するための構文は次のとおりです。
< ウル クラス = 「リスト-画像-[url({画像URL})]」 > < / ウル >
この構文は、指定された画像をリスト要素のマーカーとして提供します。
< ウル クラス = 「リスト-画像-なし」 > < / ウル >
この構文は、リスト要素のマーカーとして以前に設定された画像を削除します。
上記で定義した構文を使用して、順序なしリストのマーカーとして画像を使用してみましょう。このデモでは、ユーザーは「」という名前の画像を持っています。 ハンドポインター.png 」は、同じ Tailwind プロジェクト フォルダー内に存在します。画像が他のフォルダーに存在する場合、ユーザーはリスト スタイルの画像クラスへのフル パスを指定する必要があります。 「list-image」クラスを使用して、その画像をリスト マーカーとして使用します。
< ディビジョン クラス = 「flex justify-center」 >
< ウル クラス = ' list-inside list-image-[url(handpointer.png)] space-y-2rounded-md bg-green-400 p-2' >
サンプルリスト
< それ >これは最初のアイテムです< / それ >
< それ >これは 2 番目のアイテムです< / それ >
< それ >これは 3 番目のアイテムです< / それ >
< / ウル >
< / ディビジョン >
上記のコードの説明は次のとおりです。
- 「 ” 要素が作成され、” が提供されます。 フレックス 」クラスを使用して、コンテナ内で項目を水平方向に整列させます。
- ” 中央揃え 」クラスは、子項目をコンテナの中央に配置します。
- 次に、「
- 「」が付属しています。 リスト内 」クラスを使用して、指定されたリスト項目マーカーをリスト ブロック内に配置します。
- ” リスト画像-[url({画像URL})] ” クラスは、要素にリスト項目マーカーとして画像を提供するために使用されます。
- ” スペース-y-{数字} ” クラスは、リスト項目間の垂直方向のスペースを提供します。
- ” 丸みを帯びたMD ”クラスはリストブロックの角を丸くします。
- ” bg-{色}-{数字} ” クラスは、リスト ブロックに背景色を提供するために使用されます。
- ” p-2 ” クラスはリスト要素に境界線を提供します。
- 3 つのリスト項目は「」を使用して作成されます。 <それ> 』タグ。
出力：
出力では、ハンド ポインターの画像がリスト項目のマーカーとして設定されていることがわかります。
Tailwind でのリスト スタイル イメージ クラスでの状態バリアントの使用
Tailwind は、インタラクティブなデザインの作成に役立つ、ホバー、フォーカス、アクティブなどのさまざまな状態のバリアントを提供します。これらの状態でリスト スタイルのイメージ クラスを使用するには、次の構文が使用されます。
< ウル クラス = '{state}:list-image-{なし OR 画像 URL}' > < / ウル >上記で定義した構文を使用して、リスト スタイルの画像プロパティを「 ホバリング テイルウィンドの状態。このデモでは、リストにはリスト マーカーとして画像が提供されます。ただし、「」を使用すると、 ホバリング 」状態になると画像が削除されます。
< ディビジョン クラス = 「flex justify-center」 >
< ウル クラス = ' list-inside list-image-[url(handpointer.png)] hover:list-image-none space-y-2rounded-md bg-green-400 p-2' >
サンプルリスト
< それ >これは最初のアイテムです< / それ >
< それ >これは 2 番目のアイテムです< / それ >
< それ >これは 3 番目のアイテムです< / それ >
< / ウル >
< / ディビジョン >上記のコードでは、「 ホバー:リスト画像なし ”クラスは、以前にリストマーカーとして設定された画像を削除します。
出力：
以下の出力では、リスト スタイルの画像が「」にリセットされます。 なし ユーザーがマウス カーソルをその上に置くと、「これにより、リストマーカーとして使用されていた画像が削除されました。
Tailwind のリスト スタイル イメージ クラスでブレークポイントを使用する
ブレークポイントは、Tailwind の要素に対して事前に設定されたメディア クエリです。これらは、デザインをさまざまな画面サイズに対応させるために使用されます。これらのブレークポイントには、sm、md、lg、xl、および 2xl が含まれます。ブレークポイントを含むリスト スタイルのイメージ クラスを使用するには、次の構文が使用されます。
< ウル クラス = '{ブレークポイント}:list-image-{なし OR 画像 URL}' > < / ウル >上記で定義した構文を使用して、リスト マーカーを「」から変更してみましょう。 画像 ' に ' なし ” ブレークポイントを使用します。この例では、画面サイズが「」の幅を増やすと画像マーカーが削除されます。 MD ” ブレークポイント:
< ディビジョン クラス = 「flex justify-center」 >
< ウル クラス = ' list-inside list-image-[url(handpointer.png)] md:list-image-none space-y-2rounded-md bg-green-400 p-2' >
サンプルリスト
< それ >これは最初のアイテムです< / それ >
< それ >これは 2 番目のアイテムです< / それ >
< それ >これは 3 番目のアイテムです< / それ >
< / ウル >
< / ディビジョン >上記のコードでは、「 md:リストイメージなし ” クラスは、画面サイズが ” に達したときに画像リスト マーカーを削除します。 MD ” ブレークポイント。
出力：
以下の出力では、画面サイズが md ブレークポイントに達すると画像マーカーが削除されます。
Tailwind でリスト形式の画像を設定する方法は以上です。
結論
Tailwind には、要素のリスト マーカーをイメージから削除または設定するための 2 つの事前定義されたリスト スタイルのイメージ クラスがあります。 ” リスト画像-[url({画像URL})] ” クラスは、指定された画像をリスト マーカーとして提供します。 ” リスト画像-なし ” クラスは、リスト マーカーとして以前に提供された画像を削除します。この記事では、Tailwind でリストのスタイル タイプを設定する手順を説明しました。