<div class='toggle-button'>
<input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-1' name='replace-name-with-backend-1' value='replace-value-with-backend-1' checked />
<label for='replace-id-with-backend-1' class='icon-checked'>
<span class="icon fas fa-bell " aria-hidden="true"></span>
</label>
<label for='replace-id-with-backend-1' class='icon-unchecked'>
<span class="icon fal fa-bell " aria-hidden="true"></span>
</label>
</div>
<div class='toggle-button'>
<input
class='item-toggle-input'
type='checkbox'
id='{{id}}'
name='{{name}}'
value='{{value}}'
{{#if checked}}checked{{/if}}
{{#if disabled}}disabled{{/if}}
/>
<label for='{{id}}' class='icon-checked'>
{{render '@icon' icon.icon-checked}}
{{#if text }}
<span class="label-text">{{text}}</span>
{{/if}}
</label>
<label for='{{id}}' class='icon-unchecked'>
{{render '@icon' icon.icon-unchecked}}
{{#if text }}
<span class="label-text">{{active-text}}</span>
{{/if}}
</label>
</div>
{
"id": "replace-id-with-backend-1",
"name": "replace-name-with-backend-1",
"value": "replace-value-with-backend-1",
"text": null,
"active-text": "Voeg toe aan favorieten",
"icon": {
"icon-checked": {
"style": "fas",
"icon": "fa-bell"
},
"icon-unchecked": {
"style": "fal",
"icon": "fa-bell"
}
},
"checked": true,
"disabled": false
}
.toggle-button {
@apply inline-grid relative font-semibold border-solid cursor-pointer leading-5 border-white;
.item-toggle-input {
position: absolute;
opacity: 0;
}
.label-text {
position: relative;
top: 2px;
width: 100%;
text-align: center;
margin-left: 10px;
}
.item-toggle-input:checked ~ .icon-checked {
@apply bg-red text-white;
border-width: 1px;
border: 1px solid #e03131;
opacity: 1;
visibility: visible;
}
.item-toggle-input:checked ~ .icon-unchecked {
opacity: 0;
visibility: hidden;
}
.item-toggle-input:disabled ~ .icon-checked,
.item-toggle-input:disabled ~ .icon-unchecked {
opacity: 0.5;
width: 100%;
}
.icon-checked,
.icon-unchecked {
@apply rounded;
display: flex;
align-items: center;
width: 100%;
grid-area: 1 / 1 / 1 / 1;
border-width: 1px;
border: 1px solid #e3e3e3;
padding: 10px 20px;
cursor: pointer;
transition: color 250ms ease-in-out, opacity 250ms ease-in-out,
visibility 250ms ease-in-out;
}
.icon-checked {
opacity: 0;
visibility: hidden;
width: 100%;
}
.icon-unchecked {
@apply text-black;
}
}
{
// const init = () => {
// console.log('hi from button!');
// const $toggleButtons = Array.from(
// document.querySelectorAll(`.toggle-button .icon-unchecked`)
// );
// console.log($toggleButtons);
// $toggleButtons.forEach((button) => {});
// };
// init();
}
No notes defined.