Lomakelaajennus

Näytä Markdown-muodossa Muokkaa palvelussa GitHub Dokumentaatio: 3843abd

@tailwindcss/forms on virallisen lomakelaajennuksen 1:1-porttaus PHPlle. Se tarjoaa valmiin nollauksen lomakeohjaimille — tekstikentille, tekstialueille, valintaluetteloille, valintaruuduille ja valintapainikkeille — ja saattaa ne yhtenäiseen perustilaan (ulkoasun nollaus, reunus, sisennys, kohdistusrengas, mukautettu valintaluettelon nuoli sekä valintaruutujen ja valintapainikkeiden kuvakkeet). Voit tämän jälkeen korvata tyylit apuohjelmilla.

Käyttö

Lataa laajennus komennolla @plugin ja tuo apuohjelmakerros:

PHP

use TailwindPHP\tw;

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

Strategia

strategy-asetus määrittää, miten tyylejä käytetään:

Strategia	Toiminta
`base`	Tyylittelee natiivit lomake-elementit yleisesti valitsimilla, kuten `[type='text']`, `textarea` ja `select`.
`class`	Tyylittelee vain erikseen määritetyt `form-*`-luokat, eikä vaikuta luokittelemattomiin elementteihin.

Kun strategy jätetään pois, käytössä ovat molemmat strategiat: natiivit elementit saavat perustason nollauksen ja myös form-*-luokat ovat käytettävissä. Voit poistaa toisen käytöstä valitsemalla vain yhden strategian:

CSS

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

Luokkiin perustuva strategia

Käytä class-strategiassa (tai oletusasetuksella) näitä luokkia erikseen niissä elementeissä, joita haluat tyylitellä:

Luokka	Elementti
`form-input`	Tekstimäiset syötekentät
`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";
    '
);

Kukin luokka nollaa ohjaimen ulkoasun ja määrittää reunukset, sisennyksen ja kohdistusrenkaan; form-select lisää taustakuvan nuolelle, ja form-checkbox/form-radio lisäävät kuvakkeet valittuun tilaan. Voit korvata minkä tahansa tyylin tavallisilla apuohjelmilla (esimerkiksi class="form-input rounded-lg border-gray-300").

Katso sivulta Laajennukset tiedot @plugin-direktiivistä ja lataamisesta.