Πρόσθετο φορμών

Προβολή ως Markdown Επεξεργασία στο GitHub Τεκμηρίωση στο 3843abd

Το @tailwindcss/forms είναι μια πιστή, 1:1 PHP μεταφορά του επίσημου πρόσθετου φορμών. Παρέχει μια συγκεκριμένη αρχική ρύθμιση για τα στοιχεία ελέγχου φορμών — πεδία κειμένου, περιοχές κειμένου, λίστες επιλογών, πλαίσια επιλογής και κουμπιά επιλογής — ώστε να έχουν συνεπή βασική εμφάνιση (επαναφορά εμφάνισης, περίγραμμα, εσωτερικό περιθώριο, δακτύλιο εστίασης, προσαρμοσμένο βέλος λίστας επιλογών και εικονίδια για πλαίσια και κουμπιά επιλογής), την οποία μπορείτε στη συνέχεια να παρακάμψετε με βοηθητικές κλάσεις.

Χρήση

Φορτώστε το πρόσθετο με το @plugin και εισαγάγετε το επίπεδο βοηθητικών κλάσεων:

PHP

use TailwindPHP\tw;

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

Στρατηγική

Η επιλογή strategy καθορίζει πώς εφαρμόζονται τα στυλ:

Στρατηγική	Συμπεριφορά
`base`	Μορφοποιεί καθολικά τα εγγενή στοιχεία φορμών μέσω επιλογέων όπως οι `[type='text']`, `textarea` και `select`.
`class`	Μορφοποιεί μόνο τις ρητές κλάσεις `form-*`, αφήνοντας ανέπαφα τα στοιχεία χωρίς κλάση.

Όταν παραλείπεται το strategy, εφαρμόζονται και οι δύο στρατηγικές — τα εγγενή στοιχεία λαμβάνουν τη βασική επαναφορά και διατίθενται επίσης οι κλάσεις form-*. Ορίστε μία μόνο στρατηγική για να απενεργοποιήσετε την άλλη:

CSS

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

Στρατηγική κλάσεων

Με τη στρατηγική class (ή την προεπιλεγμένη), εφαρμόστε ρητά αυτές τις κλάσεις στα στοιχεία που θέλετε να μορφοποιήσετε:

Κλάση	Στοιχείο
`form-input`	Είσοδοι κειμένου
`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";
    '
);

Κάθε κλάση επαναφέρει την εμφάνιση του στοιχείου και ορίζει περιγράμματα, εσωτερικό περιθώριο και δακτύλιο εστίασης· το form-select προσθέτει εικόνα φόντου με βέλος, ενώ τα form-checkbox/form-radio προσθέτουν εικονίδια για την επιλεγμένη κατάσταση. Παρακάμψτε οποιοδήποτε από αυτά με τις συνηθισμένες βοηθητικές κλάσεις (για παράδειγμα, class="form-input rounded-lg border-gray-300").

Δείτε τα Πρόσθετα για την οδηγία @plugin και λεπτομέρειες φόρτωσης.