Variantai

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

variants() yra PHP CVA (Class Variance Authority) atitikmuo CVA (Class Variance Authority). Deklaratyvi konfigūracija — pagrindas, įvardytos variantų ašys ir numatytosios reikšmės — paverčiama funkcija, kuri perduodamas ypatybes susieja su klasių eilute. Naudokite, kai komponento stiliaus matmenys, pavyzdžiui, dydis ir paskirtis, derinami tarpusavyje.

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() grąžina callable; iškvieskite ją su ypatybių masyvu (arba be argumentų), kad gautumėte galutinę eilutę.

Konfigūracija

Raktas	Tipas	Paskirtis
`base`	`string`	Klasės, taikomos kiekvienai išvesčiai.
`variants`	`array`	Įvardytos ašys; kiekviena susieja reikšmių pavadinimus su klasių eilutėmis.
`compoundVariants`	`array`	Klasių eilutės, taikomos tik tada, kai derinamos kelios variantų reikšmės.
`defaultVariants`	`array`	Kiekvienos ašies reikšmė, naudojama, kai ypatybė nenurodyta.

Visi raktai pasirenkami. Jei variants nenurodytas, rezultatas grąžina base ir visas pasirinktines klases:

PHP

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

Variantui galima priskirti null, kad jis nieko nepridėtų — tai naudinga kaip aiški parinktis „nenustatyta“ ašyje.

Rezultato iškvietimas

Perduokite vieną ypatybių masyvą, kaip CVA. Raktai turi sutapti su jūsų variantų ašių pavadinimais; nenurodytoms ašims naudojamos defaultVariants numatytosios reikšmės.

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'

Raktas class (ir jo pseudonimas className) pridedamas prie išvesties pabaigos. Vien pridėjimas konfliktų neišsprendžia — žr. toliau pateiktą komponento šabloną.

compoundVariants

Kiekvienas compoundVariants įrašas yra variantų sąlygų masyvas ir papildomų klasių class (arba className). Klasės taikomos tik tada, kai visos sąlygos atitinka galutines ypatybių reikšmes, įskaitant numatytąsias. Sąlygos reikšmė gali būti viena eilutė arba eilučių masyvas, atitinkantis bet kurią iš kelių reikšmių.

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'

Komponento šablonas

variants() tik prideda class; kad iškvietėjai galėtų iš tikrųjų perrašyti numatytąsias variantų reikšmes, apgaubkite rezultatą cn(), kad konfliktai būtų sprendžiami iškvietėjo naudai.

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']);

static $styles talpykla vieną kartą sukuria variantų konfigūraciją ir pakartotinai ją naudoja iškvietimuose.

compose()

compose() sujungia kelis variantų komponentus į vieną. Sudėtinė iškviečiama funkcija perduoda kiekvieną savybę visiems komponentams, surenka jų rezultatus ir prideda visus class/className.

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'

Taip daugkartinio naudojimo ašys (tarpai, iškilumas, išdėstymas) apibrėžiamos atskirai ir sujungiamos kiekvienam komponentui.

Importai

PHP

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

Abi yra pagrindinėje TailwindPHP vardų srityje ir pateikiamos kartu su paketu — tai PHP Joe Bello CVA prievadas.