Varianti

Skatīt kā Markdown Rediģēt vietnē GitHub Dokumentācija vietnē 3843abd

variants() ir PHP realizācija CVA (Class Variance Authority). Deklaratīva konfigurācija — bāzes klase, nosauktas variantu dimensijas un noklusējuma vērtības — tiek pārvērsta izsaucamā funkcijā, kas rekvizītus pārveido par klašu virkni. Izmantojiet to komponentiem ar apvienojamām stila dimensijām, piemēram, izmēru un nolūku.

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() atgriež callable; izsauciet to ar rekvizītu masīvu (vai bez argumentiem), lai iegūtu atrisināto virkni.

Konfigurācija

Atslēga	Tips	Nolūks
`base`	`string`	Klases, kas tiek lietotas katrai izvadei.
`variants`	`array`	Nosauktas dimensijas, kur katra vērtība tiek sasaistīta ar klases virkni.
`compoundVariants`	`array`	Klašu virknes, ko lieto tikai vairāku variantu vērtību kombinācijām.
`defaultVariants`	`array`	Katras dimensijas vērtība, ko izmanto, ja rekvizīts nav norādīts.

Visas atslēgas nav obligātas. Ja variants nav norādīts, rezultātā tiek iekļauts base un visas pielāgotās klases:

PHP

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

Varianta vērtībai var piešķirt null, lai tā neko nepievienotu — tas ir noderīgi kā skaidri norādīta “nenoteikta” opcija dimensijā.

Rezultāta izsaukšana

Padodiet vienu rekvizītu masīvu, kā CVA. Atslēgām jāsakrīt ar variantu dimensiju nosaukumiem; ja dimensija nav norādīta, tiek izmantota 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'

Atslēga class (un tās aizstājvārds className) tiek pievienota izvades beigās. Pievienošana pati par sevi konfliktus neatrisina — par to skatiet tālāk sadaļu “Komponenta paraugs”.

compoundVariants

Katrs compoundVariants ieraksts ir variantu nosacījumu masīvs kopā ar papildu klašu class (vai className). Klases tiek lietotas tikai tad, ja sakrīt visi nosacījumi un atrisinātie rekvizīti, ieskaitot noklusējuma vērtības. Nosacījuma vērtība var būt viena virkne vai virkņu masīvs, lai tā atbilstu jebkurai no vairākām vērtībām.

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'

Komponenta paraugs

variants() tikai pievieno class; lai ļautu zvanītājiem patiesi pārrakstīt variantu noklusējuma vērtības, apvienojiet izvadi ar cn(), lai konfliktu gadījumā priekšroka būtu zvanītāja vērtībām.

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 kešatmiņa izveido variantu konfigurāciju vienreiz un izmanto to atkārtoti turpmākajos izsaukumos.

compose()

compose() apvieno vairākus variantu komponentus vienā. Apvienotā izsaucamā funkcija nodod katru rekvizītu visiem komponentiem, apkopo to izvades un pievieno jebkuru 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'

Tas ļauj atkārtoti izmantojamās dimensijas (atstarpes, pacēlumu, izkārtojumu) definēt atsevišķi un apvienot katram komponentam.

Importi

PHP

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

Abas funkcijas atrodas galvenajā TailwindPHP nosaukumtelpā un ir iekļautas pakotnē — CVA realizācija PHP, kuras autors ir Joe Bell.