İçeriğe geç

Varyantlar

Markdown olarak görüntüle GitHub üzerinde düzenle Dokümantasyon: 3843abd

variants(), CVA (Class Variance Authority)'nın PHP uyarlamasıdır. Bildirimsel bir yapılandırmayı — taban, adlandırılmış varyant eksenleri ve varsayılanlar — özellikleri bir sınıf dizgesine eşleyen çağrılabilir bir yapıya dönüştürür. Bir bileşende boyut ve amaç gibi birleşen stil boyutları varsa bunu kullanın.

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() bir callable döndürür; çözümlenmiş dizgeyi almak için bunu bir özellikler dizisiyle (veya hiçbir şey iletmeden) çağırın.

Yapılandırma

Anahtar Tür Amaç
base string Her çıktıya uygulanan sınıflar.
variants array Adlandırılmış eksenler; her biri değer adlarını sınıf dizgelerine eşler.
compoundVariants array Yalnızca birden çok varyant değeri birleştiğinde uygulanan sınıf dizgeleri.
defaultVariants array Bir özellik atlandığında kullanılan her eksen için değer.

Tüm anahtarlar isteğe bağlıdır. variants olmadığında sonuç, base ile tüm özel sınıfları döndürür:

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

Bir varyant değeri hiçbir katkı sağlamaması için null ile eşlenebilir; bu, bir eksende açıkça "ayarlanmamış" seçeneği sunmak için kullanışlıdır.

Sonucun çağrılması

CVA tarzında tek bir özellikler dizisi iletin. Anahtarlar varyant eksenlerinizin adlarıyla eşleşir; atlanan eksenler için defaultVariants kullanılır.

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'

class anahtarı (ve diğer adı className), çıktının sonuna eklenir. Yalnızca ekleme yapmak çakışmaları çözmez; bunun için aşağıdaki bileşen kalıbına bakın.

compoundVariants

compoundVariants içindeki her öğe, varyant koşullarından oluşan bir diziyle birlikte ek sınıfları belirten bir class (veya className) içerir. Sınıflar yalnızca tüm koşullar, varsayılanlar dahil çözümlenmiş özelliklerle eşleştiğinde uygulanır. Koşul değeri, tek bir dizge veya birden çok değerden herhangi biriyle eşleşecek dizgeler dizisi olabilir.

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'

Bileşen kalıbı

variants() yalnızca class ekler; çağıranların varyant varsayılanlarını gerçekten geçersiz kılabilmesi için çıktıyı cn() içine sarın; böylece çakışmalar çağıranın lehine çözülür.

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 önbelleği, varyant yapılandırmasını bir kez oluşturur ve çağrılar arasında yeniden kullanır.

compose()

compose() birden çok varyant bileşenini tek bir bileşende birleştirir. Bileşik çağrılabilir yapı her özelliği her bileşene iletir, çıktıları toplar ve varsa class/className öğelerini ekler.

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'

Bu sayede yeniden kullanılabilir eksenler (aralık, yükselti, düzen) ayrı tanımlarda tutulur ve bileşen başına birleştirilir.

İçe aktarmalar

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

Her ikisi de ana TailwindPHP ad alanında yer alır ve paketle birlikte sunulur — Joe Bell'in CVA uyarlamasıdır: PHP.