<div class="switch">
<div class="switch__item">
<input class="switch__input" type="radio" name="switch" id="offline" checked>
<label class="switch__label" for="offline">
Stores
</label>
</div>
<div class="switch__item">
<input class="switch__input" type="radio" name="switch" id="online">
<label class="switch__label" for="online">
Online stores
</label>
</div>
</div>
<div class="switch">
{{#each options}}
<div class="switch__item">
<input class="switch__input" type="radio" name="switch" id="{{this.id}}"{{#if checked}} checked{{/if}}>
<label class="switch__label" for="{{this.id}}">
{{this.label}}
</label>
</div>
{{/each}}
</div>
options:
- label: Stores
id: offline
checked: true
- label: Online stores
id: online
const SWITCH = ((w, d, undefined) => {
'use strict';
const selectors = {
theTrigger: '.switch__input',
};
const classes = {
isActiveSuffix: '--is-active',
};
const els = {};
const state = {
active: null,
triggers: {},
};
const init = () => {
els.theTriggers = d.querySelectorAll(selectors.theTrigger);
[...els.theTriggers].forEach((theTrigger) => {
state.triggers[theTrigger.id] = theTrigger;
if (theTrigger.checked) {
setActive(theTrigger.id);
}
theTrigger.addEventListener('change', () => {
if (theTrigger.checked) {
setActive(theTrigger.id);
}
});
});
};
const setActive = (id) => {
if (!id) {
return;
};
d.body.classList.remove(`${state.active}${classes.isActiveSuffix}`);
d.body.classList.add(`${id}${classes.isActiveSuffix}`);
state.active = id;
};
d.addEventListener('DOMContentLoaded', init);
})(window, window.document);
.switch {
display: flex;
height: var(--atom-height);
border: 1px solid var(--color--neutrals-10);
}
.switch__item {
position: relative;
flex: 0 0 50%;
display: flex;
@media (min-width: 750px) {
flex: 0 0 auto;
}
}
.switch__input {
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
appearance: none;
opacity: 0;
}
.switch__label {
transition: background-color 150ms, color 150ms;
display: flex;
align-items: center;
white-space: nowrap;
justify-content: center;
width: 100%;
min-width: 100px;
height: var(--atom-height);
padding: 0 calc(var(--gap) * 6);
cursor: pointer;
user-select: none;
@media (min-width: 750px) {
width: auto;
min-width: 100px;
}
.switch__input:checked + & {
color: var(--color--neutrals-0);
background-color: var(--color--neutrals-10);
cursor: initial;
}
}
No notes defined.