PHP code example of statix / tailor

1. Go to this page and download the library: Download statix/tailor library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

statix / tailor example snippets

bash
php artisan vendor:publish --tag=tailor-config
blade
// view/components/button.blade.php

@props([
    'variant' => 'primary',
    'size' => 'md'
    'type' => 'button',
    'tag' => 'button',
])

@php
// create the tailor
$c = Tailor::make('button');

// start setting up the attributes
$c->attributes()
    ->set([
        'data-variant' => $variant,
        'data-size' => $size,
    ])->if($tag !== 'button', function ($set) use ($type) {
        $set('type', $type);
        $set('aria-role', 'button');
    })->if($tag === 'a', function ($set) {
        $set('aria-role', 'link');
    });

// start building the variants
$c->variant('primary');
$c->variant('secondary');

// start building the classes common to all variants
$c->classes()
    ->base([
        'rounded-md',
        'border',
    ])->focus([
        'focus:ring-2',
        'focus-visible:outline-offset-2',
    ])->match($size, [
        'sm' => 'px-2 py-1',
        'md' => 'px-3 py-2',
        'lg' => 'px-4 py-3',
        'xl' => 'px-5 py-4',
        'default' => $size,
    ]);

// start building the classes for the primary variant
$p = $c->variant('primary');

$p->classes()
    ->light([
        'bg-indigo-600',
    ])->hoverLight([
        'hover:bg-indigo-500',
    ])->focusLight([
        'focus-visible:outline-indigo-600',
    ])->dark([
        'dark:text-white',
        'dark:bg-indigo-700',
    ]);

// start building the classes for the secondary variant
$s = $c->variant('secondary');

$s->classes()
    ->light([
        'bg-gray-200',
    ])->hoverLight([
        'hover:bg-gray-300',
    ])->focusLight([
        'focus-visible:outline-gray-200',
    ])->dark([
        'dark:text-gray-200',
        'dark:bg-gray-700',
    ])->focusDark([
        'focus-visible:outline-gray-200',
    ]);

// merge the attributes and classes with the passed attributes
$c->attributes()->merge($attributes->getAttributes());
$c->classes()->merge($attributes->get('class', ''));

// set the variant to use
$c->setVariant($variant);

// now when we output the component, the classes
// and attributes will be applied, specific to the variant

$c->attributes()
    ->set('onclick', 'alert("Hello")')
    ->set('onDblClick', '$wire.emit("dblClick")');
@endphp

<{{ $tag }} {{ $c }}>{{ $slot}}<{{ $tag }}>