README

这是一个简单的库，用于管理CSS类列表。

它简化了从给定信息构建CSS类列表、向列表添加和删除类等任务。

安装

只需使用Composer安装即可

composer require flying/css-classes

独立使用

功能通过Classes和MutableClasses类公开，这两个类都实现了相同的ClassesInterface接口。

进一步文档使用不可变的Classes实现作为示例，除非明确指定否则，MutableClasses的用法完全相同，除了可变性。

接受值

任何打算接受CSS类的任何方法实际上接受任意数量的任何类型的参数（mixed ...$classes）。

给定参数按以下方式处理

• 可迭代对象被展开
• 嵌套值被扁平化
• 任何除了非空字符串以外的值都将被忽略

不可变性

v1只提供不可变实现。从v2开始，有不可变的Classes和可变的MutableClasses实现。

列表创建

可以使用创建新的Classes实例或使用Classes::from()静态方法来构建类列表。两种方法都接受任何类型的变量数量的参数。

示例

$classes = Classes::from('foo', 'bar baz', ['a', 'b', 'c']);
// Outputs: foo bar baz a b c
echo $classes;
$classes = $classes->without('baz');
// Outputs: foo bar a b c
echo $classes;
$classes = $classes->filter(fn(string $class): bool => strlen($class) > 1);
// Outputs: foo bar
echo $classes;
$classes = $classes->with('x', null, true, false, 42, 1.2345, ['y', ['z']]);
// Outputs: foo bar x y z
echo $classes;
// Outputs: 5
echo count($classes);

也可以使用流畅的接口

$classes = Classes::from('foo', 'bar baz', ['a', 'b', 'c'])
    ->without('baz')
    ->filter(fn(string $class): bool => strlen($class) > 1)
    ->with('x', null, true, false, 42, 1.2345, ['y', ['z']]);
// Outputs: foo bar x y z
echo $classes;
// Outputs: 5
echo count($classes);

类列表修改

可以使用这些方法修改CSS类列表

• with(...$classes) - 向列表添加给定的CSS类
• without(...$classes) - 从列表中删除给定的CSS类
• filter(callable $filter) - 使用提供的过滤器过滤CSS类列表。$filter签名是(string $class): bool
• clear() - 从列表中删除所有CSS类。对于不可变的Classes实现，它与new Classes()等效。

类列表导出

可以使用toArray()方法将类列表导出为纯数组。

此外，ClassesInterface接口扩展了ArrayAggregate和Stringable接口，因此也可以迭代CSS类列表并将它的值转换为字符串。

其他方法

ClassesInterface扩展了Countable接口，因此可以使用count() PHP函数或调用count()方法来计算可用的CSS类数量。

也可以使用has(string $class)方法检查给定的CSS类是否在列表中。

独立的classes()函数

对于只需要从可用数据创建CSS类列表作为字符串的简单情况，也可以使用\Flying\Util\Css\classes()函数。

classes()函数自v1.1.0版本以来可用

在Twig中使用

该库包含\Flying\Util\Css\Twig\ClassesExtension Twig扩展，它公开了一个提供与主类相同功能的classes函数。

它可以用来简单地构建类列表

{%- set category = 'some-category' -%}
{%- set active = true -%}
{%- set current = false -%}
{# "main-class some-category is-active" will be generated #}
<div class="{{ classes('main-class', category, active ? 'is-active': null, current ? 'is-current' : null) }}"></div>

但也可以使用CSS类列表修改方法

{%- set categories = {foo: 'Foo', bar: 'Bar'} -%}
{%- set current = 'foo' -%}
<ul class="categories-list">
    {%- set cl = classes('category') -%}
    {% for id, name in categories %}
        {# For "foo" category: "category ctg-foo current" will be generated #}
        {# For "bar" category: "category ctg-bar" will be generated #}
        <li class="{{ cl.with('ctg-' ~ id, current == id ? 'current' : null) }}">{{ name }}</li>
    {% endfor %}
</ul>

请参考Twig文档了解如何将扩展添加到Twig。

对于Symfony，有一个独立的扩展包来简化集成。

许可协议

库采用MIT许可协议。