README

HtmlElement

HtmlElement is a library to make dynamic HTML rendering more managable. The syntax is based on Hyperscript, and adds some Emmet-style syntactic sugar too.

Elements are rendered using the static HtmlElement::render method (which I recommend wrapping in a plain function for readability).

el('div.container > div.row > div.col-md-6',
    el('a', ['href' => '#'], 'Hello world!')
);

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <a href="#">Hello world!</a>
    </div>
  </div>
</div>

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Postcardware

You're free to use this package (it's MIT-licensed), but if it makes it to your production environment you are required to send us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.

The best postcards will get published on the open source page on our website.

Usage

I recommend adding an el function to your application to improve readability over the static method.

function el(string $tag, $attributes = null, $content = null) : string
{
    return \Spatie\HtmlElement\HtmlElement::render(...func_get_args());
}

Examples

An empty tag:

el('div');

<div></div>

A plain tag with text contents:

el('p', 'Hello world!');

<p>Hello world!</p>

A tag with an attribute:

el('p', ['style' => 'color: red;'], 'Hello world!');

<p style="color: red;">Hello world!</p>

A tag with an ID set emmet-style:

el('p#introduction', 'Hello world!');

<p id="introduction">Hello world!</p>

A tag with an emmet-style ID and class:

el('p#introduction.red', 'Hello world!');

<p id="introduction" class="red">Hello world!</p>

A tag with emmet-style attributes:

el('a[href=#][title=Back to top]', 'Back to top');

<a href="#" title="Back to top">Back to top</a>

A more complex emmet-style abbreviation:

el('div.container > div.row > div.col-md-6', 'Hello world!');

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Hello world!
    </div>
  </div>
</div>

Limited support of implicit tag names (divs only):

el('.container > .row > .col-md-6', 'Hello world!');

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Hello world!
    </div>
  </div>
</div>

Manually nested tags:

el('div', ['class' => 'container'],
    el('nav', ['aria-role' => 'navigation'], '...')
);

<div class="container">
  <nav aria-role="navigation">...</nav>
</div>

Multiple children:

el('ul', [el('li'), el('li')]);

<ul>
  <li></li>
  <li></li>
</ul>

Self-closing tags:

el('img[src=/background.jpg]');

<img src="background.jpg">

el('img', ['src' => '/background.jpg'], '');

<img src="background.jpg">

Arguments

The el function behaves differently depending on how many arguments are passed in.

`el(string $tag) : string`

When one argument is passed, only a tag will be rendered.

el('p');

<p></p>

`el(string $tag, string|array $contents) : string`

When two arguments are passed, they represent a tag and it's contents.

String example:

el('p', 'Hello world!');

<p>Hello world!</p>

Array example:

el('ul', [el('li'), el('li')]);

<ul>
  <li></li>
  <li></li>
</ul>

`el(string $tag, array $attributes, string|array $contents) : string`

When three arguments are passed, the first will be the tag name, the second an array of attributes, and the third a string or an array of contents.

el('div', ['class' => 'container'],
    el('nav', ['aria-role' => 'navigation'], '...')
);

<div>
  <nav aria-role="navigation">...</nav>
</div>

Changelog

Please see CHANGELOG for more information what has changed recently.

Testing

$ composer test

Contributing

Please see CONTRIBUTING for details.

Security

If you've found a bug regarding security please mail security@spatie.be instead of using the issue tracker.

Credits

About Spatie

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

License

The MIT License (MIT). Please see License File for more information.

spatie / html-element

Maintainers

Details