whitecube / bem-components
BEM view components in Laravel
Requires
- laravel/framework: ^7.0|^8.0|^9.0
This package is auto-updated.
Last update: 2022-06-11 15:13:59 UTC
README
This package introduces a BemComponent
class that you can use instead of the regular Component
, which gives you a few helper methods to aid you with your bem-style workflow.
Installation
You can install the package via composer:
composer require whitecube/bem-components
Usage
<?php namespace App\View\Components; use Whitecube\BemComponents\BemComponent; class Btn extends BemComponent { public $href; public $icon; /** * Create a new component instance. * * @return void */ public function __construct($href, $icon = null) { $this->href = $href; $this->icon = $icon; } /** * Get the view / contents that represent the component. * * @return \Illuminate\View\View|string */ public function render() { return view('components.btn'); } }
<a href="{{ $href }}" class="{{ $bem('btn') }}"> @if($hasModifier('icon')) <span class="btn__icon" data-icon="{{ $icon }}"></span> @endif {{ $slot }} </a>
Now you can pass modifiers as you please
<x-btn href="#" modifiers="error">Error</x-btn> will result in <a href="#" class="btn btn--error">Error</a> <x-btn href="#" modifiers="primary icon" icon="calendar">Calendar</x-btn> will result in <a href="#" class="btn btn--primary btn--icon"> <span class="btn__icon" data-icon="calendar"></span> Calendar </a>
Available methods
$bem($base): string
Get the compiled bem classes with modifiers. The modifiers are specified using the modifiers
prop on your component, which accepts either a string of space-separated modifiers, or an array.
For example, calling $bem('btn')
on these:
<x-btn modifiers="primary error" /> <x-btn :modifiers="['primary', 'error']" />
Will output btn btn--primary btn--error
Any additional classes are also kept:
<x-btn modifiers="primary error" class="header__btn" />
Will output header__btn btn btn--primary btn--error
$hasModifier($modifier): bool
Checks if the specified modifier is applied on this component.
$hasClass($class): bool
Checks if the specified class is applied on this component.
💖 Sponsorships
If you are reliant on this package in your production applications, consider sponsoring us! It is the best way to help us keep doing what we love to do: making great open source software.
Contributing
Feel free to suggest changes, ask for new features or fix bugs yourself. We're sure there are still a lot of improvements that could be made, and we would be very happy to merge useful pull requests.
Thanks!
Made with ❤️ for open source
At Whitecube we use a lot of open source software as part of our daily work. So when we have an opportunity to give something back, we're super excited!
We hope you will enjoy this small contribution from us and would love to hear from you if you find it useful in your projects. Follow us on Twitter for more updates!