Skip to content

Switchers

We list here all the switchers that eZ Platform uses.

Switcher

We created switcher as a SASS @mixin function (check ezplatform-admin-ui/src/bundle/Resources/public/scss/_mixins.scss).

Specify its size in the @mixin function: @include checkbox-switcher($size); in the corresponding .scss stylesheet. By default its size is set to 2rem.

1
2
3
4
5
6
<div class="ez-data-source">
    <label class="ez-data-source__label">
        <input class="ez-data-source__input" type="checkbox">
        <span class="ez-data-source__indicator"></span>
    </label>
</div>

Switcher with icons

Primary color

1
2
3
4
5
6
7
8
9
<label class="ez-checkbox-icon ez-page-info-bar-switcher is-checked">
    <svg class="ez-icon ez-icon--view">
        <use xlink:href="../../ez-icons.svg#view"></use>
    </svg>
    <svg class="ez-icon ez-icon--view-hide">
        <use xlink:href="../../ez-icons.svg#edit"></use>
    </svg>
    <input class="ez-checkbox-icon__checkbox" type="checkbox">
</label>

Secondary color

1
2
3
4
5
6
7
8
9
<label class="ez-checkbox-icon is-checked">
    <svg class="ez-icon ez-icon--view">
        <use xlink:href="../../ez-icons.svg#view"></use>
    </svg>
    <svg class="ez-icon ez-icon--view-hide">
        <use xlink:href="../../ez-icons.svg#view-hide"></use>
    </svg>
    <input class="ez-checkbox-icon__checkbox" type="checkbox">
</label>

Note

When using switchers with icons don't forget to add the corresponding JS script linked to the actions you want to trigger.

Preview switcher

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div class="ez-preview-switcher">
    <button class="ez-preview-switcher__action ez-preview-switcher__action--selected">
        <svg class="ez-icon">
            <use xlink:href="../../ez-icons.svg#view-desktop"></use>
        </svg>
    </button>
    <button class="ez-preview-switcher__action">
        <svg class="ez-icon">
            <use xlink:href="../../ez-icons.svg#view-tablet"></use>
        </svg>
    </button>
    <button class="ez-preview-switcher__action">
        <svg class="ez-icon">
            <use xlink:href="../../ez-icons.svg#view-mobile"></use>
        </svg>
    </button>
</div>
Read the Docs