https://github.com/aqquaa/blade-emerald
Emmet like Abbreviation to generate and wrap Laravel Blade Component with markup
https://github.com/aqquaa/blade-emerald
emmet-abbreviations laravel laravel-blade laravel-blade-component markup
Last synced: 7 months ago
JSON representation
Emmet like Abbreviation to generate and wrap Laravel Blade Component with markup
- Host: GitHub
- URL: https://github.com/aqquaa/blade-emerald
- Owner: aqquaa
- License: mit
- Created: 2021-09-05T10:48:56.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-31T08:17:27.000Z (over 3 years ago)
- Last Synced: 2025-05-03T12:36:43.800Z (about 1 year ago)
- Topics: emmet-abbreviations, laravel, laravel-blade, laravel-blade-component, markup
- Language: PHP
- Homepage:
- Size: 69.3 KB
- Stars: 32
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Laravel Blade Emerald
> [Emmet](http://emmet.io/) like Abbreviation to generate and wrap [Laravel](https://laravel.com/) [Blade Component](https://laravel.com/docs/master/blade#components) with markup
[](https://packagist.org/packages/aqua/blade-emerald)
[](https://packagist.org/packages/aqua/blade-emerald)
[](https://github.com/aqquaa/blade-emerald/actions/workflows/test.yaml)
[](https://github.com/aqquaa/blade-emerald/issues?q=is%3Aopen+is%3Aissue)
[](https://github.com/aqquaa/blade-emerald/blob/master/LICENSE.md)
## 🌈 Features
- Generate HTML in a Blade file via package provided component: ``
- Emmet style syntax to produce nested markup
- Wrap around any content / other component with markup
- Make any Blade Component accept abbreviation to wrap itself with markup ( *doesn't work for Anonymous Components* )
## 🛸 Compatibility
| Package Version | Laravel version | PHP version | Compatible |
|-----------------|-----------------|-------------|------------|
| ^1.2 | 10.* | 8.1 - 8.2 | 🟢 |
| ^1.0 | 9.* | 8.0 - 8.1 | 🟢 |
| ^1.0 | 8.* | 7.3 - 8.0 | 🟢 |
| | 7.* | 7.3 - 7.4 | 🔴 |
## 📥 Installation
```shell
composer require aqua/blade-emerald
```
## 📖 Usage
💡 The package provides a Blade Component ``, This component can be used like `` as an alias.
The component support one prop named `make` which accept the abbreviation
#### 🏷️ Generate static nested markup
```html
```
> produced html
```html
```
#### 🏷️ Wrap some content
```html
Success ! give it a click if you like.
```
produced html
```html
Success ! give it a click if you like.
```
#### 🏷️ Accept abbreviation in your Blade Component
> this feature doesn't support *Anonymous Components*
1. use `Aqua\Emerald\Traits\Markup` trait in your Component Class
```php
class YourComponent extends Component {
use Markup;
...
```
2. the `Markup` trait assumes the prop name to be `wrap`, so lets add this as a class property & instantiate
```php
public function __construct(public $wrap) {...} // using php 8.0 constructor property promotion
```
[read more](https://php.watch/versions/8.0/constructor-property-promotion) about constructor property promotion
3. accept abbreviation
```html
```
produced html
```html
Laravel... The PHP Framework for Web Artisans
```
4. accept abbreviation using prop of your choise
to customize the prop name that receives the abbreviation create a static property `$wrapby` and set its value to your prop name
```php
class YourComponent extends Component {
use Markup;
protected static $wrapby = 'markup'; 👈
public function __construct(public $markup, ...) {
👆
}
...
```
```html
👆
```
## 🧰 Useful Examples
Bootstrap grid
```html
Hello world!
```
Breadcrumb
```html
```
Bootstrap card with links
```html
Active
Link
Disabled
With supporting text below as a natural lead-in to additional content.
```
Bootstrap form-group
```html
Email address
```
Self closing tag
```html
```
Alpine x-for
```html
```
> equivalent to
```html
```
## 📚 Abbreviation Guide
checkout [spatie/html-element](https://github.com/spatie/html-element#examples) to get more idea.
| Syntax | Example | Description |
|-----------------|-----------------|-----------------|
| `#id` | `p#foo` | ID attribute |
| `.class` | `p.foo` | Class attribute |
| `>` | `div.row>div.col` | Nesting with child |
| `[style='color:green;']` | `div[style='color:green;']` | Single attribute |
| `[title=Hello world][data-foo=bar]` | | Multiple attributes |
## 📅 Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## 🏆 Credits
This package is actually a wrapper around [spatie/html-element](https://github.com/spatie/html-element), all the hard work has been done by Team Spatie so they deserve all the credits. All I did is make it work with Laravel Blade Components.
- [](https://twitter.com/srvrksh)
- [All Contributors](../../contributors)
## 🎫 License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.