Formų papildinys

Peržiūrėti kaip Markdown Redaguoti per GitHub Dokumentacija: 3843abd

@tailwindcss/forms yra 1:1 PHP oficialiojo formų papildinio perkėlimas. Jis pateikia iš anksto nustatytą formų valdiklių – tekstinių laukų, teksto sričių, išskleidžiamųjų sąrašų, žymimųjų langelių ir pasirinkimo mygtukų – stilių atstatymą, suvienodinantį jų bazinę išvaizdą (atstatoma išvaizda, kraštinė, vidinis tarpas, fokusavimo žiedas, pasirinktinė išskleidžiamojo sąrašo rodyklė ir žymimųjų langelių bei pasirinkimo mygtukų piktogramos). Tada šį stilių galite pakeisti pagalbinėmis klasėmis.

Naudojimas

Įkelkite papildinį naudodami @plugin ir importuokite paslaugų sluoksnį:

PHP

use TailwindPHP\tw;

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

Strategija

Parinktis strategy valdo, kaip taikomi stiliai:

Strategija	Veikimas
`base`	Stilius taiko visiems saviesiems formos elementams naudodama tokius parinkiklius kaip `[type='text']`, `textarea` ir `select`.
`class`	Stilius taiko tik aiškiai nurodytoms klasėms `form-*`, o elementų be klasės nekeičia.

Jei strategy nenurodyta, taikomos abi strategijos: saviesiems elementams nustatomos pradinės reikšmės, o klasės form-* taip pat pasiekiamos. Nurodykite vieną strategiją, jei norite atsisakyti kitos:

CSS

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

Klasių strategija

Taikydami strategiją class (arba numatytąją), aiškiai priskirkite šias klases elementams, kuriuos norite stilizuoti:

Klasė	Elementas
`form-input`	Teksto įvesties laukai
`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";
    '
);

Kiekviena klasė atkuria valdiklio išvaizdą ir nustato kraštines, užpildą bei fokusavimo žiedą; form-select prideda fono paveikslėlį su rodykle, o form-checkbox/form-radio – piktogramas pažymėtai būsenai. Visa tai galite pakeisti įprastomis paslaugomis (pavyzdžiui, class="form-input rounded-lg border-gray-300").

Daugiau informacijos apie Papildinius, @plugin direktyvą ir įkėlimą rasite čia.