この記事では、Tailwind でのホバー、フォーカス、および位置プロパティを使用したその他の状態の使用方法を説明します。
Tailwind の Position プロパティでホバー、フォーカス、その他の状態を使用する方法
Tailwind のホバー、フォーカス、その他の状態は、Tailwind の要素のスタイルを設定するために使用され、魅力的でユーザーフレンドリーなインターフェイスと魅力的なエクスペリエンスをユーザーに提供します。エクスペリエンスを最高水準に維持するために、位置プロパティが適用される場合があります。
方法 1: Position プロパティで Hover バリアントを使用する
ホバー バリアントは、ユーザーが選択した要素の上にカーソルを移動したときに、選択した要素のスタイルを設定するために使用されます。 ” 位置 ” 属性は、” と組み合わせて使用できます。 ホバリング 」を押してホバー前後の位置を設定します。このペアは、ユーザーにとって魅力的なエクスペリエンスを作成するために使用されます。
ステップ 1: HTML に位置を指定して Hover プロパティを追加する
以下のコードでは、hover プロパティが「position」プロパティに沿って適用されます。 ボタン ' 要素：
< 体 >
< ボタン クラス = '相対 w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< p クラス = 「テキスト-ホワイト テキスト-センター」 > ホバー・ミー < / p >
< / ボタン >
< / 体 >
このコードでは:
- ” 相対的 」クラスは、親ページに相対してボタンを設定します。
- 「 w-40 」は幅を40pxに設定します。
- 「 h-12 ” は高さを 12px に設定します。
- 「 bg-ブルー-500 」は背景色を青に設定します。
- 「 ホバー: 絶対 」は、マウス カーソルがボタンの上に移動すると、ボタンの相対位置を絶対位置に変更します。
- 「 ホバー:translate-x-4 ” ボタンを x 軸上で右に 4 ピクセル移動すると同時に、” だけ下に 4 ピクセル移動します。 ホバー:translate-y-4 ”。
- テキストは「」で中央揃えになります。 テキストセンター ”。
ステップ 2: 検証
上記のコードで作成された Web ページをプレビューします。次のようになります。
出力には、要素が右下方向に 4px 移動されたことが示されています。
方法 2: Position プロパティで Focus Variant を使用する
focus バリアントは、ユーザーの注意を引き、一部の要素を強調するために HTML 要素のスタイルを設定するために使用されます。位置を組み合わせて適用して、オブジェクトを親ページに対して相対的または絶対的に配置することもできます。これはユーザーの関心を維持するために行われます。
ステップ 1: HTML に位置を指定して Focus プロパティを追加する
HTML ファイルを作成し、適切な位置に focus プロパティを適用します。たとえば、以下のコードでは相対位置が入力ボックスに適用されます。
< / 体 >
このコードでは:
- 「」の位置を設定します。 入力 ”要素を”に 相対的 ”。
- 「 フォーカス:translate-x-4 ” ボタンを x 軸上で右に 4 ピクセル移動すると同時に、” だけ下に 4 ピクセル移動します。 フォーカス:translate-y-4 ユーザーが入力ボックスをクリックしたとき。
- 「 フォーカス: アウトライン-2 」は、ユーザーがクリックするとテキスト ボックスの周囲にアウトラインを作成します。
ステップ 2: 出力を確認する
コードによって作成された Web ページをプレビューして、変更を確認します。
上記の出力は、選択された要素がフォーカスされたときにスタイルが適用されたことを示しています。
Position プロパティで Active Variant を使用する。
アクティブ バリアントは、HTML 要素をスタイル設定して、ユーザーがボタンまたはその他の要素をクリックして押したままにしたときの状態を定義するために使用されます。位置プロパティを使用すると、出力がユーザーにとってより魅力的なものになり、より動的なエクスペリエンスが作成されます。
ステップ 1: HTML に位置を指定して Hover プロパティを追加する
HTML ファイルを作成し、position プロパティと組み合わせてアクティブなバリアントを適用します。たとえば、以下のコード例では、これらのプロパティがボタンに適用されます。
< ボタン クラス = 「相対 w-48 h-12 bg-blue-500 アクティブ:translate-y-2 アクティブ:bg-green-400」 >
< スパン クラス = 「テキスト白」 >クリックしてください< / スパン >
< / ボタン >
< / 体 >
上記のコードでは次のようになります。
- 「」の位置を設定します。 ボタン ”要素を”に 相対的 ”。
- 「 bg-ブルー-500 」はボタンの背景色を青に設定します。
- 「 アクティブ:translate-y-2 ”でボタンを2px下に移動し、ボタンの色を緑色に変更します。 アクティブ: bg-green-400 ”。
ステップ 2: 出力を確認する
上記のコードで作成された Web ページをプレビューし、ボタンをクリックしたままにして変更を確認します。
上の gif は、選択したボタン要素がアクティブになるとそのスタイルが変更されることを示しています。
Tailwind の位置プロパティを使用してホバー、フォーカス、その他の状態を適用するのはこれですべてです。
結論
ホバー、フォーカス、その他の状態は、ホバー、フォーカス、その他の状態の事前定義クラスを使用してから、「」のような位置クラス属性を適用することで、位置プロパティで使用できます。 絶対 '、' 相対的 」などと連動。このブログでは、Tailwind の位置ユーティリティを使用してホバー、フォーカス、その他の状態を使用する方法を説明しました。