Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jadu/twig-attribute-parser

Takes an array of attributes to be converted into HTML formatted attributes ready for use in an HTML element.
https://github.com/jadu/twig-attribute-parser

Last synced: 5 days ago
JSON representation

Takes an array of attributes to be converted into HTML formatted attributes ready for use in an HTML element.

Awesome Lists containing this project

README

        

# Twig Attribute Parser

Takes an array of attributes to be converted into HTML formatted attributes ready for use in an HTML element.

The optional `tag` attribute will also generate the required HTML element and is useful for contextually switching elements within Twig views.

Output will always begin with an empty space to avoid unwanted spaces if no attributes are passed to the markup.

## Example

```twig
{%
set arrayToProcess = ['slim': 'shady', 'marshall': 'mathers', 'eminem': true, 'class': 'wrapper']
%}

{# output: #}
```

## Boolean attributes

Boolean attribute values will output the key only. The `disabled` boolean attribute behavior is contextual based on the presence and type of an optional `tag` (see below).

```twig
{%
set arrayToProcess = ['foo': true]
%}

{# output: #}
```

## Disabled attribute

The `disabled` attribute is only valid on specific elements, if you attempt to pass a boolean `disabled` attribute without a valid `tag` or to a tag which doesn’t support the disabled attribute, it will output an `is-disabled` class instead which you can style appropriately.

```twig
{%
set arrayToProcess = ['disbled': true]
%}

{# output: #}
```

If a `class` attribute is also present, the class list will be merged appropriately. If the `class` list also contains `is-disabled` it will not be duplicated.

```twig
{%
set arrayToProcess = ['class': 'foo', 'disbled': true]
%}

{# output: #}
```

If `tag` is `button`, `fieldset`, `input`, `option`, `select`, `textarea` or `div`, it will output the disabled attribute.

```twig
{%
set arrayToProcess = ['disbled': true]
%}

{# note the absence of the element here, we let the attribute parser output it #}
<{{ attributes(arrayToProcess, {'tag': ('button')}) }} />

{# output: #}
```

If you want the output to be `disabled class="disabled"` you will need to pass both attributes in your array.

If `tag` is `a`, it will add the `aria-disabled` attribute instead as an opinionated accessibility choice.

```twig
{%
set arrayToProcess = ['disbled': true]
%}

<{{ attributes(arrayToProcess, {'tag': ('a')}) }} />

{# output: #}
```

## HTML entities

HTML entities will be properly quoted to suit HTML markup, this allows embedded HTML to be passed within attributes for later rendering, for example in tooltops.

```twig
{%
set arrayToProcess = ['foo': 'bar baz']
%}

{# output: #}
```

## Empty values

Empty values will be removed, if you want to display only the key, use a boolean instead.

```twig
{%
set arrayToProcess = ['foo': '']
%}

{# output: #}
```

## Nested/multidimensional arrays

Not supported.