Formlar Eklentisi

Markdown olarak görüntüle GitHub üzerinde düzenle Dokümantasyon: 3843abd

@tailwindcss/forms, resmi formlar eklentisinin 1:1 PHP bağlantı noktasıdır. Metin girişleri, metin alanları, seçim kutuları, onay kutuları ve radyo düğmeleri gibi form denetimleri için; görünümü sıfırlayan, kenarlık, iç boşluk, odak halkası, özel seçim oku ve onay kutusu/radyo simgeleri sağlayan, üzerinde görüş bildiren bir sıfırlama uygular. Böylece daha sonra bunları yardımcılarla değiştirebilirsiniz.

Kullanım

Eklentiyi @plugin ile yükleyin ve yardımcılar katmanını içe aktarın:

PHP

use TailwindPHP\tw;

$css = tw::generate(
    '<input class="form-input"><select class="form-select"></select>',
    '@plugin "@tailwindcss/forms"; @import "tailwindcss/utilities.css";'
);

Strateji

strategy seçeneği, stillerin nasıl uygulanacağını belirler:

Strateji	Davranış
`base`	`[type='text']`, `textarea` ve `select` gibi seçicilerle yerel form öğelerini genel olarak biçimlendirir.
`class`	Yalnızca açıkça belirtilen `form-*` sınıflarını biçimlendirir; sınıfı olmayan öğelere dokunmaz.

strategy belirtilmezse her iki strateji de uygulanır: yerel öğeler temel sıfırlamayı alır ve form-* sınıfları da kullanılabilir. Diğerini devre dışı bırakmak için tek bir strateji belirleyin:

CSS

@plugin "@tailwindcss/forms" {
    strategy: "class";
}

Sınıf stratejisi

class stratejisiyle (veya varsayılan ayarla), biçimlendirmek istediğiniz öğelere bu sınıfları açıkça uygulayın:

Sınıf	Öğe
`form-input`	Metin benzeri girişler
`form-textarea`	`<textarea>`
`form-select`	`<select>`
`form-multiselect`	`<select multiple>`
`form-checkbox`	`<input type="checkbox">`
`form-radio`	`<input type="radio">`

PHP

$css = tw::generate(
    '
        <input class="form-input">
        <textarea class="form-textarea"></textarea>
        <select class="form-select"></select>
        <select class="form-multiselect" multiple></select>
        <input type="checkbox" class="form-checkbox">
        <input type="radio" class="form-radio">
    ',
    '
        @plugin "@tailwindcss/forms" {
            strategy: "class";
        }
        @import "tailwindcss/utilities.css";
    '
);

Her sınıf, denetimin görünümünü sıfırlar; kenarlıkları, iç boşluğu ve odak halkasını ayarlar. form-select bir şevron arka plan görseli ekler, form-checkbox/form-radio ise işaretli durum simgelerini ekler. Bunların tümünü normal yardımcılarla (örneğin class="form-input rounded-lg border-gray-300") değiştirebilirsiniz.

Eklentiler sayfasında @plugin yönergesini ve yükleme ayrıntılarını görebilirsiniz.