Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lordsimal/custom-html-elements
Allows you to create custom HTML elements to render more complex template parts with a simpler HTML representation
https://github.com/lordsimal/custom-html-elements
Last synced: 4 months ago
JSON representation
Allows you to create custom HTML elements to render more complex template parts with a simpler HTML representation
- Host: GitHub
- URL: https://github.com/lordsimal/custom-html-elements
- Owner: LordSimal
- License: mit
- Created: 2023-10-13T09:46:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-01T08:04:55.000Z (5 months ago)
- Last Synced: 2024-09-14T01:31:30.124Z (5 months ago)
- Language: PHP
- Homepage:
- Size: 54.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Custom HTML Elements
[](https://packagist.org/packages/lordsimal/custom-html-elements) [](https://packagist.org/packages/lordsimal/custom-html-elements) [](https://packagist.org/packages/lordsimal/custom-html-elements) [](https://packagist.org/packages/lordsimal/custom-html-elements) [](https://packagist.org/packages/lordsimal/custom-html-elements)[](https://codecov.io/gh/LordSimal/custom-html-elements)
Allows you to create custom HTML elements to render more complex template parts with a simpler HTML representation
## Requirements
* PHP 8.1+
## Installation
```shell
composer require lordsimal/custom-html-elements
```
## Usage
This is an example representation of a custom HTML element you want to use:
```html
```
So this would appear in a HTML output like this:
```html
Example Page
```
To render this custom HTML element you need to do this:
```php
$htmlOutput = ''; // This variable represents what is shown above
$engine = new \LordSimal\CustomHtmlElements\TagEngine([
'tag_directories' => [
__DIR__.DIRECTORY_SEPARATOR.'Tags'.DIRECTORY_SEPARATOR,
__DIR__.DIRECTORY_SEPARATOR.'OtherTagsFolder'.DIRECTORY_SEPARATOR,
],
]);
echo $engine->parse($htmlOutput);
```
The element logic can be placed in e.g. `Tags/Youtube.php` or `OtherTagsFolder/Youtube.php`:
```php
src}"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
HTML;
}
}
```
As you can see the main 2 parts are the
```php
public static string $tag = 'c-youtube';
```
which defines what HTML tag is represented by this class and the `render()` method.
Inside the `render()` method you have access to all HTML attributes which you pass onto your element.
So e.g.
```html
```
would be accessible inside the `Button` class via
```php
class Button extends CustomTag
{
public static string $tag = 'c-button';
public function render(): string
{
$classes = ['c-button'];
if ($this->type == 'primary') {
$classes[] = 'c-button--primary';
}
$classes = implode(' ', $classes);
return <<< HTML
$this->text
HTML;
}
}
```
## Accessing the inner content
You may want to create custom HTML elements like
```html
Inner Content
```
To access the `Inner Content` text inside your class you simply have to call `$this->innerContent` like so
```php
class Github extends CustomTag
{
public static string $tag = 'c-github';
public function render(): string
{
return <<< HTML
$this->innerContent
HTML;
}
}
```
## Self closing elements
By default every custom HTML element can be used either way:
```html
```
or
```html
```
both are rendered the same way.
## Rendering nested custom HTML elements
By default, this library renders nested custom HTML elements. So you don't need to worry about that.
## Disabling custom HTML elements
You have 2 ways how you can disable custom HTML elements:
### Disable all occurence of custom HTML elements
You can add the attributes
```php
public bool $disabled = true;
```
to your Custom HTML Element class.
### Disable only specific occurence of custom HTML elements
You can add the attribute `disabled`, then it will not be rendered.
```html
```
## More examples?
See all the different [TagEngine Tests](https://github.com/LordSimal/custom-html-elements/blob/main/tests/TagEngine/)
## Acknowledgements
This library is inspired by the following packages
* https://github.com/buggedcom/PHP-Custom-Tags
* https://github.com/SageITSolutions/MarkupEngine