アップロードCSSファイルアップロード入力コンポーネントの構築

Cookieは最近私は非常に多くを使用しているフレームワークであり、私の開発プロセスを遅らせている特定の問題がある:コンポーネントの不足.
私はユーティリティクラスでウェブサイトを構築する新しい方法が大好きですが、私は新しいインターフェイスを構築するときにすぐに使用するWebコンポーネントのカップルを欠場します.

だからこそ、私はDownwind CSSからユーティリティクラスを使用して一般的に使用されるWebコンポーネントを構築する方法を示しているdevのコミュニティ上のチュートリアルシリーズを開始することを決めた理由です.
最後に私はどのように構築する方法を示し、今日私はどのようにきれいに見えるファイルを構築する方法を示すでしょう.
始めましょう!

ファイルアップロードコンポーネント
まず最初に、ファイルアップロード入力にHTMLマークアップを設定する必要があります.

<label for="user_avatar">Upload file</label>
<input aria-describedby="user_avatar_help" id="user_avatar" type="file">
<div id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div>

あなたが見ることができるように、我々はすでにforとid属性を加えました.label要素にいくつかのスタイルを追加しましょう.

<label class="text-sm font-medium text-gray-900 block mb-2" for="user_avatar">Upload file</label>
<input aria-describedby="user_avatar_help" id="user_avatar" type="file">
<div id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div>

よりよく見えます!今重要な部分:スタイルを入力する必要があります.そのためにスタイルを加えましょう.

<label class="text-sm font-medium text-gray-900 block mb-2" for="user_avatar">Upload file</label>
<input class="block w-full cursor-pointer bg-gray-50 border border-gray-300 text-gray-900 focus:outline-none focus:border-transparent text-sm rounded-lg" aria-describedby="user_avatar_help" id="user_avatar" type="file">
<div id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div>

次のヘルパーテキストにスタイルを追加しましょう.

<label class="text-sm font-medium text-gray-900 block mb-2" for="user_avatar">Upload file</label>
<input class="block w-full cursor-pointer bg-gray-50 border border-gray-300 text-gray-900 focus:outline-none focus:border-transparent text-sm rounded-lg" aria-describedby="user_avatar_help" id="user_avatar" type="file">
<div class="mt-1 text-sm text-gray-500" id="user_avatar_help">A profile picture is useful to confirm your are logged into your account</div>

あなたは尋ねるかもしれません:しかし、それはまだよく見えません.なぜですか.理由は、まだ入力ファイルボタンの擬似スタイルを書く必要があるからです.
CSSファイルに次のスタイルを追加します.

input[type=file]::-webkit-file-upload-button,
input[type=file]::file-selector-button {
    @apply text-white bg-gray-700 hover:bg-gray-600 font-medium text-sm cursor-pointer border-0 py-2.5 pl-8 pr-4;
    margin-inline-start: -1rem;
    margin-inline-end: 1rem;
}

このコードを追加したら、クラスの最終的なHTMLは次のようになります.

おめでとう、あなたはTruwind CSSからユーティリティクラスを使用してファイルアップロードコンポーネントを構築しました!
あなたが行く前に、私は、このTailwind CSS file upload componentがflowbiteと呼ばれるより大きくてオープンソースの風変わりなCSS構成図書館の一部であるとあなたに知らせたいです.

あなたはFlowbiteをチェックアウトし、ボタンのような一般的に使用されるWebコンポーネントのセットでより速くウェブサイトを作り始めることができます.