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 }}>