README

Craft 类差异权限

CraftCMS 的类差异权限插件。

要求

此插件需要 Craft CMS 4.8.0 或更高版本，以及 PHP 8.1.0 或更高版本。

安装

您可以从插件商店或使用 Composer 安装此插件。

从插件商店

转到项目控制面板中的插件商店，搜索“cva”，然后按“安装”。

使用 Composer

打开终端并运行以下命令

# go to the project directory
cd /path/to/my-project.test

# tell Composer to load the plugin
composer require wrux/craft-cva

# tell Craft to install the plugin
./craft plugin/install craft-cva

用法

此插件提供生成 HTML 类名和组件变体的实用函数。

CX

cx 函数是生成类名的实用工具。它受到 clsx JavaScript 包的启发。

{# Generate a single class name #}
{{ cx('text-red-500') }}
{# Output: `text-red-500` #}

{# Generate multiple class names #}
{{ cx('text-red-500', 'bg-blue-500') }}
{# Output: `text-red-500 bg-blue-500` #}

{# Generate class names based on a condition #}
{{ cx('text-red-500', 'bg-blue-500', { 'text-lg': true, 'text-sm': false }) }}
{# Output: `text-red-500 bg-blue-500 text-lg` #}

CVA

cva 函数是生成组件变体的实用工具。它受到 class-variance-authority JavaScript 包的启发。

{# Create the component configuration #}
{% set button = cva('block outline-none', {
  variants: {
    display: {
      primary: [
        'bg-blue-500 text-white',
      ],
      secondary: [
        'bg-purple-500 text-white',
      ],
    },
    size: {
      base: [
        'py-2 px-4 text-base',
      ],
      large: [
        'py-3 p-6 text-lg',
      ],
    },
  },
  defaultVariants: {
    display: 'primary',
    size: 'base',
  },
}) %}

{# Generate various button variants #}

<button class="{{ button.generate() }}">
  Click me
</button>
{#
Output:
<button class="block outline-none bg-blue-500 text-white py-2 px-4 text-base">
  Click me
</button>
#}

<button class="{{ button.generate({ display: 'secondary' }) }}">
  Click me
</button>
{#
Output:
<button class="block outline-none bg-purple-500 text-white py-2 px-4 text-base">
  Click me
</button>
#}

<button class="{{ button.generate({ display: 'primary', size: 'large' }) }}">
  Click me
</button>
{#
Output:
<button class="block outline-none bg-blue-500 text-white py-3 p-6 text-lg">
  Click me
</button>
#}