チェックボックス

尾風で構築された応答チェックボックスフォーム＆調査で使用される選択コンポーネント.これは、リスト内の1つまたは複数のオプションを選択することができます.

インストール

クイックスタート
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">

<div class="block">
  <span class="text-gray-700">Checkboxes</span>
  <div class="mt-2">
    <div>
      <label class="inline-flex items-center">
        <input type="checkbox" class="form-checkbox" checked>
        <span class="ml-2">Option 1</span>
      </label>
    </div>
    <div>
      <label class="inline-flex items-center">
        <input type="checkbox" class="form-checkbox">
        <span class="ml-2">Option 2</span>
      </label>
    </div>
    <div>
      <label class="inline-flex items-center">
        <input type="checkbox" class="form-checkbox">
        <span class="ml-2">Option 3</span>
      </label>
    </div>
  </div>
</div>

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

重要資源
以下は、このコンポーネントを使用して作業するための準備用のリソースです.

読める📄 Checkbox documentation page <-- ここからスタート

プロジェクトを最大限に活用するには、チェックボックスに関連する他のフォームオプションについても知っておく必要があります.それらのリストを見つけるために、下記のセクションを見てください.

プロジェクトを終了した後、CLIでそれを公開することができます💽 Free hosting (beta)

関連するフォームのオプションと機能

Datepicker

File input

Forms Templates

Inputs

Multiselect

Radios

Range

Search

Select

Switch

Textarea

Timepicker

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