この記事では、Tailwind のホバー、フォーカス、その他の状態に最小高さプロパティを適用する手順を説明します。
注記： Tailwind の最低身長クラスの詳細については、これをお読みください。 記事 当社のウェブサイトで。
Tailwind のホバー、フォーカス、その他の状態に Min-height プロパティを適用する方法
Tailwind は、デザイン プロパティで提供できるデフォルトの状態バリアントを提供します。これらの状態のバリエーションには、「ホバー」、「フォーカス」、および「アクティブ」が含まれます。これらの状態バリアントの説明は次のとおりです。
- 「」 ホバリング 」状態は、マウス カーソルが要素の上に移動するたびにトリガーされます。
- ” 集中 」状態は、要素にフォーカスがあるたびにトリガーされます。
- ” アクティブ 」状態は、要素がアクティブ化またはクリックされるたびにトリガーされます。
これらの各状態で最小高さプロパティを 1 つずつ使用してみましょう。
ホバー状態での最小高さプロパティの使用
「」を使用するには 最低高さ Tailwind のホバー状態バリアントを持つクラスでは、次の構文が使用されます。
< ディビジョン クラス = 「hover:min-h-{size}...」 > < / ディビジョン >
上記で定義した構文をデモンストレーションで使用してみましょう。この例では、マウス カーソルが要素の上に移動するたびに、要素の最小の高さを増やします。
< ディビジョン クラス = 'min-h-fitrounded-md bg-blue-700 text-center text-white hover:min-h-screen' >カーソルを合わせると最小値が増加します 身長 < / ディビジョン >上記のコードの説明は次のとおりです。
- ” 最小値フィット ” クラスは、高さの最小制限を、コンテンツに適合するために div 要素が必要とする高さに設定します。
- ” ホバー:min-w-screen 」クラスでは、画面サイズの 100% に等しい最小高さ制限が提供されます。
- ” 丸みを帯びたMD '、' bg-{色}-{数字} '、' テキストセンター '、 そして ' 文字白 」クラスは、それぞれ div 要素の角丸、背景色、中央揃えのテキスト、および白のテキストの色を担当します。 div要素の角が丸くなっています。
出力：
以下の出力から、マウス カーソルを要素の上に置くと、要素の最小高さが画面サイズの 100% まで増加することが明らかです。
フォーカス状態での最小高さプロパティの使用
「」を使用するには 最低高さ Tailwind のフォーカス状態を持つクラスでは、次の構文が使用されます。
< ディビジョン クラス = 「focus:min-h-{size}...」 > < / ディビジョン >上記で定義した構文をデモンストレーションで使用してみましょう。この例では、ユーザーが入力フィールドに注目すると、入力フィールドの最小高さが増加します。
< 入力 プレースホルダー = 「この入力フィールドに注目してください」 クラス = 'min-h-0 h-fit w-48rounded-md bg-gray-200 text-center focus:min-h-[35%]' >< / 入力 >上記のコードの説明は次のとおりです。
- 「 入力 」フィールドは、プレースホルダー属性にテキストを使用して作成されます。
- 「」を使用して、最小高さ制限 0px が提供されます。 分-h-0 ' クラス。そこで開発者は、要素のデフォルトの高さを、「 h-フィット ' クラス。
- ” フォーカス:min-h-[35%] ” クラスは、ユーザーが入力フィールドにフォーカスすると、入力フィールドの最小高さ制限を増やします。
出力：
以下の出力から、ユーザーが入力フィールドに注目すると入力フィールドの高さが増加することが明らかです。これは、高さの最小制限が 0px から画面の高さの 35% まで増加するためです。
Tailwind のアクティブ状態での最小高さプロパティの使用
「」を使用するには 最低高さ 」プロパティを Tailwind のアクティブな状態バリアントで使用する場合、次の構文が使用されます。
< ディビジョン クラス = 「アクティブ:min-h-{size}...」 > < / ディビジョン >上記で定義した構文をデモンストレーションで使用してみましょう。この例では、ユーザーがボタンをクリックすると、ボタンの最小の高さが増加します。
< ボタン クラス = 'min-h-0 h-fit w-48rounded-md bg-blue-300 text-center active:min-h-[35%]' > クリックして増加 身長 < / ボタン >ボタンは高さの最小制限が 0px で作成されます。ただし、「」を使用すると、 アクティブ:分-時間-[35%] ボタンをクリックするたびに、高さの最小制限が 0px から画面サイズの 35% まで増加します。
出力：
次の出力では、ユーザーがボタンをクリックすると、ボタンの最小の高さが増加することがわかります。
Tailwind のホバー、フォーカス、およびその他の状態に最小高さプロパティを適用する方法は以上です。
結論
Tailwind のホバー、フォーカス、アクティブなどの状態バリアントにより、ユーザーは動的なデザイン レイアウトを作成できます。 Tailwind の状態バリアントで最小高さクラスを使用するには、「 hover:min-h-{値} '、' フォーカス:min-h-{値} '、 そして ' アクティブ:min-h-{値} 」クラスが使用されます。この記事では、Tailwind でホバー、フォーカス、およびその他の状態を最小高さクラスで適用する手順を説明しました。