ファイル入力

5987 ワード
tailwindcss webdev テキストリンク
ファイルをアップロード入力をTailwindで構築.ヘルプは、単一または多くの項目をアップロードします.サポート画像、ファイル、およびドキュメント.あなたのローカルストレージから直接アイテムを追加します.

インストール

クイックスタート
Tailwindを使用して起動するには、単に私たちのスターターをダウンロードします.
DOWNLOAD ZIP STARTER
Tailwind要素は、TarWindCSSからのすべてのCSSを変更または追加しません.
あなたは直接あなたのTarwindデザインに我々の構成要素をコピーすることができます、そして、彼らはすぐに働きます.
いくつかの動的なコンポーネント(dropdownsまたはmodalsのような)では、フォント素晴らしいアイコンとカスタムJavaScriptを追加します.しかし、彼らは追加のインストールを必要としません、すべての必要なコードは常に例に含まれていて、どんなTailwindプロジェクトにでもコピーされます-それは働きます.

MDBゴー

カスタマイズ

基本的な例

HTML
<!-- Required form plugin -->
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/[email protected]/dist/custom-forms.css" rel="stylesheet">

<label
  class="w-64 flex flex-col items-center px-4 py-6 bg-white rounded-md shadow-md tracking-wide uppercase border border-blue cursor-pointer hover:bg-purple-600 hover:text-white text-purple-600 ease-linear transition-all duration-150">
  <i class="fas fa-cloud-upload-alt fa-3x"></i>
  <span class="mt-2 text-base leading-normal">Select a file</span>
  <input type='file' class="hidden" />
</label>

あなたは、より多くのカスタマイズ例を見ることができます📄 File input documentation page

重要資源
以下は、このコンポーネントを使用して作業するための準備用のリソースです.
  • 読める📄 File input documentation page <-- ここからスタート
  • プロジェクトを最大限に活用するには、ファイル入力に関連する他のフォームのオプションを知りましょう.それらのリストを見つけるために、下記のセクションを見てください.
  • プロジェクトを終了した後、CLIでそれを公開することができます💽 Free hosting (beta)

    • 関連するフォームのオプションと機能
  • Checkbox
  • Datepicker
  • Forms Templates
  • Inputs
  • Multiselect
  • Radios
  • Range
  • Search
  • Select
  • Switch
  • Textarea
  • Timepicker

    • 追加リソース
    我々の学習ロードマップでウェブ開発を学んでください:
    🎓 Start Learning
    我々のメーリングリストに加わってください
    🎁 Get gifts
    インスピレーションとコミュニティ経験のために我々の個人的なFBグループに加わってください
    👨‍👩‍👧‍👦 Ask to join
    Githubの上でスターによるオープンソースパッケージのサポート作成
    koan
    Launcherソースコードの高速起動の変更