UHasselt Component Library

Toggle Button 

<!-- Default -->
<div class='toggle-button'>
    <input class='item-toggle-input' type='checkbox' id='replace-id-with-backend' name='replace-name-with-backend' value='replace-value-with-backend' />
    <label for='replace-id-with-backend' class='icon-checked'>
        <span class="icon fas fa-heart   " aria-hidden="true"></span>

    </label>

    <label for='replace-id-with-backend' class='icon-unchecked'>
        <span class="icon fal fa-heart   " aria-hidden="true"></span>

    </label>
</div>


<!-- Toggle Checked -->
<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>


<!-- Toggle Unchecked Text -->
<div class='toggle-button'>
    <input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-2' name='replace-name-with-backend-2' value='replace-value-with-backend-2' />
    <label for='replace-id-with-backend-2' class='icon-checked'>
        <span class="icon fas fa-heart   " aria-hidden="true"></span>

        <span class="label-text">Toegevoegd aan favorieten</span>
    </label>

    <label for='replace-id-with-backend-2' class='icon-unchecked'>
        <span class="icon fal fa-heart   " aria-hidden="true"></span>

        <span class="label-text">Voeg toe aan favorieten</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>
 
/* Default */
{
  "id": "replace-id-with-backend",
  "name": "replace-name-with-backend",
  "value": "replace-value-with-backend",
  "text": null,
  "active-text": "Voeg toe aan favorieten",
  "icon": {
    "icon-checked": {
      "style": "fas",
      "icon": "fa-heart"
    },
    "icon-unchecked": {
      "style": "fal",
      "icon": "fa-heart"
    }
  },
  "checked": false,
  "disabled": false
}


/* Toggle Checked */
{
  "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 Unchecked Text */
{
  "id": "replace-id-with-backend-2",
  "name": "replace-name-with-backend-2",
  "value": "replace-value-with-backend-2",
  "text": "Toegevoegd aan favorieten",
  "active-text": "Voeg toe aan favorieten",
  "icon": {
    "icon-checked": {
      "style": "fas",
      "icon": "fa-heart"
    },
    "icon-unchecked": {
      "style": "fal",
      "icon": "fa-heart"
    }
  },
  "checked": false,
  "disabled": false
}
  • Content: 
    .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;
    }
}
  • URL: /components/raw/toggle-button/toggle-button.css
  • Filesystem Path: src\components\02-atoms\toggle-button\toggle-button.css
  • Size: 1.4 KB
  • Content: 
    {
    // const init = () => {
    //     console.log('hi from button!');
    //     const $toggleButtons = Array.from(
    //         document.querySelectorAll(`.toggle-button .icon-unchecked`)
    //     );
    //     console.log($toggleButtons);
    //     $toggleButtons.forEach((button) => {});
    // };
    // init();
}
  • URL: /components/raw/toggle-button/toggle-button.js
  • Filesystem Path: src\components\02-atoms\toggle-button\toggle-button.js
  • Size: 337 Bytes

No notes defined.