Preskoči na vsebino

Pripomočki za razrede

Prikaži kot Markdown Uredi na GitHub Dokumentacija za 3843abd

Sestavljanje atributov class v predlogah pomeni združevanje nizov, preklapljanje razredov glede na pogoje in preprečevanje poznejšim pripomočkom, da bi bili v sporu s prejšnjimi (p-2 in p-4 se ne smeta ohraniti hkrati). V JavaScript je to delo razdeljeno med clsx in tailwind-merge. TailwindPHP vključuje različici obeh knjižnic PHP, zato dobite enako vedenje brez verige orodij Node.js in dodatnih paketov Composer.

Tri funkcije pokrivajo različne potrebe: cn() sestavlja in razrešuje spore, merge() razrešuje samo spore, join() pa samo združuje nize.

cn()

Priporočeni pripomoček. Najprej izvede pogojno sestavljanje po vzoru clsx, nato razreši spore med Tailwind z uporabo tailwind-merge — zmaga torej zadnji pripomoček v sporu.

PHP
use function TailwindPHP\cn;

// Conflicts are resolved — px-4 overrides px-2
cn('px-2 py-1', 'px-4');
// => 'py-1 px-4'

// Conditional classes via a key => bool array
cn('btn', ['btn-primary' => true, 'btn-disabled' => false]);
// => 'btn btn-primary'

Sprejeti argumenti

cn() sprejme poljubno število argumentov. Vsakega splošči in filtrira po pravilih clsx:

Argument Vedenje
string Doda nespremenjenega.
int / float Pretvori v niz in doda.
Navadna matrika Rekurzivno obdela vsak element.
Matrika key => bool Doda vsak ključ, katerega vrednost je resnična.
null, false, 0, '' Prezre.
PHP
cn('flex', ['items-center' => true], ['p-4', ['gap-2']], null);
// => 'flex items-center p-4 gap-2'

Vzorec za komponente

cn() omogoča prepisovanje komponente: združite lastne razrede komponente s tistimi, ki jih posreduje klicatelj, spore pa razrešite v korist klicatelja.

PHP
use function TailwindPHP\cn;

function Card(array $props = []): string {
    $class = cn(
        'rounded-lg border bg-card text-card-foreground shadow-sm',
        $props['class'] ?? null
    );
    return "<div class=\"{$class}\">" . ($props['children'] ?? '') . "</div>";
}

Card(['class' => 'p-6', 'children' => 'Content']);
// <div class="rounded-lg border bg-card text-card-foreground shadow-sm p-6">Content</div>

Za deklarativne sloge komponent z več osmi združite cn() z variants().

merge()

Samo razreševanje sporov, brez pogojnega sestavljanja. Posredujte nize razredov; poznejši razredi preglasijo prejšnje, kadar določajo isto lastnost. Uporabite, kadar je vaš vhod že sestavljen iz navadnih nizov.

PHP
use function TailwindPHP\merge;

merge('px-2 py-1 bg-red-500', 'px-4 bg-blue-500');
// => 'py-1 px-4 bg-blue-500'

// Conflict resolution is variant-aware
merge('hover:bg-red-500', 'hover:bg-blue-500');
// => 'hover:bg-blue-500'

cn() je sestavljen na vrhu knjižnice clsx in merge(), zato uporabite neposredno samo merge(), kadar ne potrebujete pogojne sintakse z matrikami.

join()

Preprosto združevanje brez razreševanja sporov. Neresnične vrednosti so odstranjene, vendar se ohranijo vsi pripomočki v sporu. Uporabite ga, kadar veste, da ni sporov in želite najcenejšo možnost.

PHP
use function TailwindPHP\join;

join('foo', 'bar', null, 'baz');
// => 'foo bar baz'

Katero naj uporabim?

Funkcija Sestavlja (pogoji, matrike) Razrešuje spore Uporaba
cn() da da Privzeta izbira — za sestavljanje nizov razredov, v katerih lahko pride do sporov.
merge() ne da Vhod so navadni nizi; potrebujete samo razreševanje sporov.
join() da ne Veste, da ni sporov, in želite čim manj obdelave.

Uvozi

PHP
use function TailwindPHP\cn;
use function TailwindPHP\merge;
use function TailwindPHP\join;

Vsi trije so v glavnem imenskem prostoru TailwindPHP in so vključeni v paket. Gre za PHP različici clsx (avtorja Lukea Edwardsa) in tailwind-merge (avtorja Danyja Castilla).