Variandid

Vaata Markdownina Muuda teenuses GitHub Dokumentatsioon: 3843abd

variants() on PHP port CVA (Class Variance Authority)-ist. See teisendab deklaratiivse seadistuse — põhiosa, nimega variandi teljed ja vaikeväärtused — funktsiooniks, mis teisendab omadused klassinime stringiks. Kasutage seda, kui komponendi stiil sõltub kombineeritavatest mõõtmetest, näiteks suurusest ja otstarbest.

PHP

use function TailwindPHP\variants;

$button = variants([
    'base' => 'btn font-semibold border rounded',
    'variants' => [
        'intent' => [
            'primary'   => 'bg-blue-500 text-white',
            'secondary' => 'bg-gray-200 text-gray-800',
        ],
        'size' => [
            'sm' => 'text-sm px-2 py-1',
            'md' => 'text-base px-4 py-2',
        ],
    ],
    'defaultVariants' => [
        'intent' => 'primary',
        'size'   => 'md',
    ],
]);

$button();
// => 'btn font-semibold border rounded bg-blue-500 text-white text-base px-4 py-2'

variants() tagastab callable; kutsu seda atribuutide massiiviga (või ilma argumentideta), et saada lahendatud string.

Konfiguratsioon

Võti	Tüüp	Eesmärk
`base`	`string`	Kõigile väljunditele rakendatavad klassid.
`variants`	`array`	Nimega teljed, millest igaüks seostab väärtuste nimed klassistringidega.
`compoundVariants`	`array`	Klassistrngid, mida rakendatakse ainult mitme variandiväärtuse kombineerimisel.
`defaultVariants`	`array`	Iga telje väärtus, mida kasutatakse atribuudi puudumisel.

Kõik võtmed on valikulised. Kui variants puudub, tagastab tulemus base ja kõik kohandatud klassid:

PHP

$x = variants(['base' => 'box']);
$x();                          // => 'box'
$x(['class' => 'p-4']);        // => 'box p-4'

Variandi väärtuseks võib määrata null, et see ei lisaks midagi — telje selgesõnalise „määramata” valikuna on see kasulik.

Tulemuse kutsumine

Edasta üks atribuutide massiiv nagu CVA-s. Võtmed vastavad sinu varianditelgede nimedele; puuduvate telgede puhul kasutatakse väärtust defaultVariants.

PHP

$button(['intent' => 'secondary']);
// => 'btn font-semibold border rounded bg-gray-200 text-gray-800 text-base px-4 py-2'

$button(['size' => 'sm', 'class' => 'mt-4']);
// => 'btn font-semibold border rounded bg-blue-500 text-white text-sm px-2 py-1 mt-4'

Võti class (ja selle alias className) lisatakse väljundi lõppu. Lisamine üksi konflikte ei lahenda — selle kohta vaata allpoolset komponendi mustrit.

compoundVariants

Iga compoundVariants kirje sisaldab variantide tingimuste massiivi ja täiendavate klasside class-i (või className-i). Klasse rakendatakse ainult siis, kui kõik tingimused vastavad lahendatud atribuutidele (sealhulgas vaikeväärtustele). Tingimuse väärtus võib olla üks string või mitmest stringist koosnev massiiv, mis sobib mitme väärtusega.

PHP

$button = variants([
    'base' => 'btn',
    'variants' => [
        'intent' => [
            'primary' => 'bg-blue-500',
            'warning' => 'bg-yellow-500',
            'danger'  => 'bg-red-500',
        ],
        'size' => ['sm' => 'text-sm', 'md' => 'text-base'],
    ],
    'compoundVariants' => [
        // Applies only when intent=primary AND size=md
        ['intent' => 'primary', 'size' => 'md', 'class' => 'uppercase'],
        // Applies when intent is warning OR danger
        ['intent' => ['warning', 'danger'], 'class' => '!border-red-500'],
    ],
    'defaultVariants' => ['intent' => 'primary', 'size' => 'md'],
]);

$button();
// => 'btn bg-blue-500 text-base uppercase'

$button(['intent' => 'danger']);
// => 'btn bg-red-500 text-base !border-red-500'

Komponendi muster

variants() lisab ainult class; et kutsujad saaksid variandi vaikeväärtusi päriselt üle kirjutada, mähi väljund ümbrisesse cn(), nii lahendatakse konfliktid kutsuja kasuks.

PHP

use function TailwindPHP\variants;
use function TailwindPHP\cn;

function Button(array $props = []): string {
    static $styles = null;
    $styles ??= variants([
        'base' => 'inline-flex items-center justify-center rounded-md font-medium',
        'variants' => [
            'variant' => [
                'default' => 'bg-primary text-primary-foreground hover:bg-primary/90',
                'outline' => 'border border-input bg-background hover:bg-accent',
                'ghost'   => 'hover:bg-accent hover:text-accent-foreground',
            ],
            'size' => [
                'default' => 'h-10 px-4 py-2',
                'sm'      => 'h-9 px-3',
                'lg'      => 'h-11 px-8',
            ],
        ],
        'defaultVariants' => ['variant' => 'default', 'size' => 'default'],
    ]);

    // cn() merges variant output with custom classes, resolving conflicts
    $class = cn($styles($props), $props['class'] ?? null);
    $text  = $props['children'] ?? 'Button';
    return "<button class=\"{$class}\">{$text}</button>";
}

// The custom px-8 wins over the variant's px-3 via cn()
Button(['variant' => 'outline', 'size' => 'sm', 'class' => 'mt-4 px-8']);

Vahemälu static $styles koostab variantide konfiguratsiooni üks kord ja kasutab seda edasistes väljakutsetes uuesti.

compose()

compose() ühendab mitu variandikomponenti üheks. Koostatud väljakutsutav funktsioon edastab iga atribuudi kõigile komponentidele, kogub nende väljundid ja lisab juurde kõik class/className-d.

PHP

use function TailwindPHP\variants;
use function TailwindPHP\compose;

$box   = variants(['variants' => ['shadow' => ['sm' => 'shadow-sm', 'md' => 'shadow-md']]]);
$stack = variants(['variants' => ['gap' => ['1' => 'gap-1', '2' => 'gap-2']]]);
$card  = compose($box, $stack);

$card(['shadow' => 'md', 'gap' => '2']);
// => 'shadow-md gap-2'

Nii saab korduskasutatavaid telgi (vahed, kõrgus, paigutus) hoida eraldi määratlustes ja komponendi kaupa kombineerida.

Impordid

PHP

use function TailwindPHP\variants;
use function TailwindPHP\compose;

Mõlemad asuvad peamises TailwindPHP nimeruumis ja sisalduvad paketis — need on Joe Belli tehtud CVA PHP teisendus.