UHasselt Component Library

Item Toggle 

<!-- Default -->
<div class='item-toggle'>
    <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='item-toggle'>
    <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='item-toggle'>
    <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-thumbs-up   " aria-hidden="true"></span>

        <span class="label-text">Like</span>
    </label>

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

        <span class="label-text">Like</span>
    </label>
</div>


<!-- Toggle Checked Disabled -->
<div class='item-toggle'>
    <input class='item-toggle-input' type='checkbox' id='replace-id-with-backend-3' name='replace-name-with-backend-3' value='replace-value-with-backend-3' checked disabled />
    <label for='replace-id-with-backend-3' class='icon-checked'>
        <span class="icon fas fa-bell   " aria-hidden="true"></span>

    </label>

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

    </label>
</div>


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

    </label>

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

    </label>
</div>


<div class='item-toggle'>
    <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">{{text}}</span>
      {{/if}}
    </label>
</div>
 
/* Default */
{
  "id": "replace-id-with-backend",
  "name": "replace-name-with-backend",
  "value": "replace-value-with-backend",
  "text": null,
  "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,
  "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": "Like",
  "icon": {
    "icon-checked": {
      "style": "fas",
      "icon": "fa-thumbs-up"
    },
    "icon-unchecked": {
      "style": "fal",
      "icon": "fa-thumbs-up"
    }
  },
  "checked": false,
  "disabled": false
}


/* Toggle Checked Disabled */
{
  "id": "replace-id-with-backend-3",
  "name": "replace-name-with-backend-3",
  "value": "replace-value-with-backend-3",
  "text": null,
  "icon": {
    "icon-checked": {
      "style": "fas",
      "icon": "fa-bell"
    },
    "icon-unchecked": {
      "style": "fal",
      "icon": "fa-bell"
    }
  },
  "checked": true,
  "disabled": true
}


/* Toggle Unchecked Disabled */
{
  "id": "replace-id-with-backend-4",
  "name": "replace-name-with-backend-4",
  "value": "replace-value-with-backend-4",
  "text": null,
  "icon": {
    "icon-checked": {
      "style": "fas",
      "icon": "fa-bell"
    },
    "icon-unchecked": {
      "style": "fal",
      "icon": "fa-bell"
    }
  },
  "checked": false,
  "disabled": true
}
  • Content: 
    .item-toggle {
    .item-toggle-input {
        position: absolute;
        opacity: 0;
    }

    .label-text {
        position: relative;
        top: 2px;
        margin-left: 10px;
    }

    .item-toggle-input:checked ~ .icon-checked {
        @apply text-red;

        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;
    }

    .icon-checked,
    .icon-unchecked {
        display: flex;
        align-items: center;

        padding: 10px;

        cursor: pointer;

        transition: color 250ms ease-in-out, opacity 250ms ease-in-out,
            visibility 250ms ease-in-out;
    }

    .icon-checked {
        position: absolute;
        opacity: 0;
        visibility: hidden;
    }

    .icon-unchecked {
        @apply text-black-500;

        display: flex;
    }
}
  • URL: /components/raw/item-toggle/item-toggle.css
  • Filesystem Path: src\components\02-atoms\item-toggle\item-toggle.css
  • Size: 1.1 KB

No notes defined.