A Craft plugin (Twig filter) to help with the output of HTML attributes.
{% set attrs = {
class: ['myClass', 'myClass2'],
style: {
'background-image': "url('img.png')",
'color': 'red',
},
'data-foo': {
someKey: 'foo',
otherKey: 'bar',
myArray: ['foo', 'bar', 'baz'],
},
'data-bar': true,
'data-baz': null,
'data-qux': false,
} %}
<div {{ attrs|htmlAttributes }}></div>
htmlAttributes is also aliased to htmlAttrs for convenince.
<div
class="myClass myClass2"
style="background-image: url('img.png'); color: red"
data-foo='{"someKey":"foo","otherKey":"bar","myArray":["foo","bar","baz"]}' data-bar
data-baz
></div>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent