jeudi 28 juillet 2022

Add Additional Custom Attributes in Template (Slightly)

I'd like to use additional attribute when using data-sly-call

Here's the template:

<template data-sly-template.button="${ @ model}">
    <button data-info="Body"
            class="${model.moreClass}">
        ${model.label}
    </button>
</template>

When I use the button template, if there are additional css class that I'd like to add that the template does not have, what's the syntax that I should use?

Currently I have tried the following:

(1)

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<div data-sly-call="${btnTemplate.button @ model= btnModel.btn}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">${model.label}</div>

(2)

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<sly data-sly-call="${btnTemplate.button @ model= btnModel.btn}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">${model.label}</sly>

(3)

<sly data-sly-use.btnTemplate="button/button.html"></sly>
<sly data-sly-call="${btnTemplate.button @ model= btnModel.btn}" data-sly-attribute.aria-expanded="false" data-sly-attribute.toggle-style="${model.toggleStyle}" data-sly-attribute.aria-controls="${model.id}" data-sly-attribute.data-alternate-aria-label="${model.altAriaLabel}">${model.label}</sly>

All the above are not working. I was wondering what's the correct syntax?

I'd like it to render as:

<button data-info="Body" class="${model.moreClass}" aria-expanded="false" toggle-style="${model.toggleStyle}" aria-controls="${model.id}" data-alternate-aria-label="${model.altAriaLabel}">
            ${model.label}
        </button>

Aucun commentaire:

Enregistrer un commentaire