README

Craft CMS 5.x 的 Classnames 插件

Classnames 是一个简单的 Twig 函数，用于在 Twig 模板中将 CSS 类名条件性地连接在一起，使其更加易读。它类似于 Jed Watson 的 Classnames，但适用于 Craft 的 Twig。

此插件特别适用于 Tailwind CSS 项目。

要求

此插件需要 Craft CMS 5.0.0 或更高版本。

Craft 4 用户，请查看 v2 分支。

安装

要安装插件，请按照以下说明操作。

打开您的终端并转到您的 Craft 项目
```
 cd /path/to/project
```

然后让 Composer 加载插件

 composer require viget/craft-classnames

您可以通过 CLI 使用 ./craft plugin/install classnames 安装插件，或者在控制面板中转到设置 → 插件，点击 Classnames 的“安装”按钮。

使用 Classnames

真实世界的示例

<button
  class="{{ classNames({
    'group relative z-0 hover:z-1': true,
    'px-24 py-12': true,
    'font-bold text-14 text-dark-gray': true,
    'inline-flex items-center justify-between': props.arrow,
    'inline-block': not props.arrow,
    'w-full text-center': props.full
  }) }}"
>
  {{ props.text }}
</button>

其他示例

{{ classNames('foo', 'bar') }} {# 'foo bar' #}
{{ classNames('foo', { 'bar': true }) }} {# 'foo bar' #}
{{ classNames({ 'foo-bar': true }) }} {# 'foo-bar' #}
{{ classNames({ 'foo-bar': false }) }} {# '' #}
{{ classNames({ 'foo': true }, { 'bar': true }) }} {# 'foo bar' #}
{{ classNames({ 'foo': true, 'bar': true }) }} {# 'foo bar' #}

还有一个可用的缩写 cx 版本

{{ cx('foo', { 'bar': true }) }} {# 'foo bar' #}

访问 code.viget.com 以查看 Viget 的更多项目（Viget）。

viget / craft-classnames

维护者

详细信息

README

Craft CMS 5.x 的 Classnames 插件

要求

安装

使用 Classnames