README

本包引入了 HasBemClasses 特性，您可以在 Laravel 的 App\View\Components 实例中使用它，提供了一些有用的辅助方法和自动化，以实现无缝的 BEM 风格集成到您的工作流程中。

安装

您可以通过 composer 安装此包

composer require whitecube/bem-components

使用方法

按照您习惯的方式生成组件文件，然后将 Whitecube\BemComponents\HasBemClasses 特性添加到 App\View\Components 中组件的视图控制器

<?php

namespace App\View\Components;

use Illuminate\View\Component;
use Whitecube\BemComponents\HasBemClasses;

class Btn extends Component
{
    use HasBemClasses;

    public ?string $icon;

    public function __construct(?string $icon = null)
    {
        $this->icon = $icon;

        if($this->icon) {
            $this->modifier('icon');
        }
    }

    public function render()
    {
        return view('components.btn');
    }
}

然后，不要忘记在组件的视图中 echo $attributes->bem(string $base, string|array $extraModifiers = [])

<a {{ $attributes->bem('btn') }}>
    @if($hasModifier('icon'))
        <span class="btn__icon" data-icon="{{ $icon }}"></span>
    @endif
    <span class="btn__label">{{ $slot }}</span>
</a>

您现在可以随意传递修饰符和类

<x-btn href="#" modifier="big">Click me!</x-btn>
<x-btn href="#" modifier="big" :modifiers="['foo','bar',null]">Click me!</x-btn>
<x-btn href="#" icon="eye">Click me!</x-btn>
<x-btn href="#" icon="eye" modifier="big">Click me!</x-btn>
<x-btn href="#" icon="eye" modifier="big" class="ajax">Click me!</x-btn>

<a href="#" class="btn btn--big">
    <span class="btn__label">Click me!</span>
</a>
<a href="#" class="btn btn--bar btn--big btn--foo">
    <span class="btn__label">Click me!</span>
</a>
<a href="#" class="btn btn--icon">
    <span class="btn__icon" data-icon="eye"></span>
    <span class="btn__label">Click me!</span>
</a>
<a href="#" class="btn btn--big btn--icon">
    <span class="btn__icon" data-icon="eye"></span>
    <span class="btn__label">Click me!</span>
</a>
<a href="#" class="ajax btn btn--big btn--icon">
    <span class="btn__icon" data-icon="eye"></span>
    <span class="btn__label">Click me!</span>
</a>

可用方法

`$bem(string $base, string|array $modifiers = []): string`

获取带有修饰符的编译后的 BEM 类。参数 modifiers 可以是一个用空格分隔的修饰符字符串或一个数组。

例如，调用

$bem('btn__label', 'blue bold')
// OR
$bem('btn__label', ['blue','bold'])

将得到

btn__label btn__label--blue btn__label--bold

`$hasModifier(string $modifier): bool`

检查指定的 modifier 是否应用于此组件。

重要

此方法也可在 Component 实例中（使用 $this->hasModifier(string $modifier)）中使用，但遗憾的是，由于 Laravel 10.x 中这些值在渲染组件视图之前没有暴露，所以无法检查定义为组件标签属性（<x-component modifiers="foo bar" />）的修饰符。希望这个限制将来会被解除。

如果您需要在 Component 实例中访问这些修饰符，您始终可以从组件的 __construct 参数中请求它们并手动注入

public function __construct(null|string|array $modifiers = [])
{
    $this->modifiers($modifiers);

    // Now this will work:
    if($this->hasModifier('big')) {
        // ...
    }
}

`$hasClass(string $classname): bool`

检查指定的 CSS 类名是否应用于此组件。

重要

此方法也可在 Component 实例中（使用 $this->hasClass(string $classname)）中使用，但遗憾的是，由于 Laravel 10.x 中这些值在渲染组件视图之前没有暴露，所以无法检查定义为组件标签属性（<x-component class="foo bar" />）的类名。希望这个限制将来会被解除。

如果您需要在 Component 实例中访问这些类名，您始终可以从组件的 __construct 参数中请求它们并手动注入

public function __construct(null|string|array $classnames = [])
{
    $this->classes($classnames);

    // Now this will work:
    if($this->hasClass('ajax')) {
        // ...
    }
}

💖 赞助

如果您在生产应用程序中依赖此包，请考虑赞助我们！这是帮助我们继续做我们热爱的事情：制作优秀的开源软件的最好方式。

贡献

请随时提出更改建议，请求新功能或自己修复错误。我们确信还有许多可以改进的地方，我们将非常乐意合并有用的拉取请求。

谢谢！

用 ❤️ 为开源制作

在 Whitecube，我们每天都在工作中使用大量的开源软件。所以，当我们有机会回馈社会时，我们感到非常兴奋！

我们希望您能喜欢我们的小贡献，如果您在项目中觉得它有用，我们非常乐意收到您的反馈。关注我们的Twitter，获取更多更新！

whitecube / bem-components

维护者

详细信息