PHP code example of vewe / classvariance

1. Go to this page and download the library: Download vewe/classvariance 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/ */

vewe / classvariance example snippets


use Vewe\ClassVariance\Cv;

 $button = Cv::new(
    [
        'base' => ['font-semibold', 'border', 'rounded'],
        'label' => [''],
    ],
    [
        'variants' => [
            'color' => [
                'primary' => [
                    'base' => [
                        'bg-blue-500',
                        'border-transparent',
                        'hover:bg-blue-600'
                    ],
                    'label' => ['text-white'],
                ],
                'secondary' => [
                    'base' => [
                        'bg-white',
                        'border-gray-400',
                        'hover:bg-gray-100'
                    ],
                    'label' => ['text-black'],
                ],
            ],
            'size' => [
                'small' => [
                    'base' => ['py-1', 'px-2'],
                    'label' => ['text-sm'],
                ],
                'medium' => [
                    'base' => ['py-2', 'px-4'],
                    'label' => ['text-base'],
                ],
            ],
        ],
        'compoundVariants' => [
            [
                'color' => 'primary',
                'size' => 'medium',
                'class' => [
                    'label' => 'uppercase',
                ],
            ],
        ],
        'defaultVariants' => [
            'color' => 'primary',
            'size' => 'medium',
        ],
    ],
);


use Vewe\ClassVariance\Cv;

$button = Cv::new(
    ['font-semibold', 'border', 'rounded'],
    [
        'variants' => [
            'color' => [
                'primary' => [
                    'bg-blue-500',
                    'text-white',
                    'border-transparent',
                    'hover:bg-blue-600'
                ],
                'secondary' => 'bg-white text-gray-800 border-gray-400 hover:bg-gray-100',
            ],
            'size' => [
                'small' => ['text-sm', 'py-1', 'px-2'],
                'medium' => 'text-base py-2 px-4',
            ],
        ],
        'compoundVariants' => [
            [
                'color' => 'primary',
                'size' => 'medium',
                'class' => 'uppercase',
            ],
        ],
        'defaultVariants' => [
            'color' => 'primary',
            'size' => 'medium',
        ],
    ],
);

html
<button class="<?= $button(props: ['color' => 'secondary', 'size' => 'small']);