Option switch
Full
-
-
{% include "@Components/forms/option-switch/option-switch.twig" with { props: { name: "filter-variant", items: [ { title: "Pronájem", value: "1", checked: true }, { title: "Prodej", value: "2" }, { title: "Dražby", value: "3" } ] } } %} -
<div class="f-option-switch"> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="filter-variant" value="1" checked="checked" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Pronájem </span> <span class="f-option-switch_button__title"> Pronájem </span> </span> </label> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="filter-variant" value="2" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Prodej </span> <span class="f-option-switch_button__title"> Prodej </span> </span> </label> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="filter-variant" value="3" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Dražby </span> <span class="f-option-switch_button__title"> Dražby </span> </span> </label> </div>
Compact
-
-
{% include "@Components/forms/option-switch/option-switch.twig" with {props: { variant: "compact", name: "map-variant", items: [ { title: "Výpis", value: "list", checked: true }, { title: "Mapa", value: "map" } ] }} %} -
<div class="f-option-switch --compact"> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="map-variant" value="list" checked="checked" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Výpis </span> <span class="f-option-switch_button__title"> Výpis </span> </span> </label> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="map-variant" value="map" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Mapa </span> <span class="f-option-switch_button__title"> Mapa </span> </span> </label> </div>
As link
-
-
{% include "@Components/forms/option-switch/option-switch.twig" with {props: { variant: "compact", name: "options-as-links", as_link: true, items: [ { title: "Výpis", value: "https://www.seznam.cz/", checked: true }, { title: "Mapa", value: "https://www.google.com/maps" } ], }} %} -
<div class="f-option-switch --compact"> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="options-as-links" value="https://www.seznam.cz/" checked="checked" onclick="location = this.value;" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Výpis </span> <span class="f-option-switch_button__title"> Výpis </span> </span> </label> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="options-as-links" value="https://www.google.com/maps" onclick="location = this.value;" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Mapa </span> <span class="f-option-switch_button__title"> Mapa </span> </span> </label> </div>
Compact with icon on mobile
-
-
{% include "@Components/forms/option-switch/option-switch.twig" with {props: { variant: "compact", name: "options-as-links", as_link: true, items: [ { title: "Výpis", value: "https://www.seznam.cz/", checked: true, icon: { src: "svg/list-current-color.svg", } }, { title: "Mapa", value: "https://www.google.com/maps", icon: { src: "svg/map-home-current-color.svg", } } ], }} %} -
<div class="f-option-switch --compact"> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="options-as-links" value="https://www.seznam.cz/" checked="checked" onclick="location = this.value;" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.5 19.5"> <line x1="8.34" y1="2.75" x2="18.75" y2="2.75"/> <line x1="8.34" y1="9.75" x2="18.75" y2="9.75"/> <line x1="8.34" y1="16.75" x2="18.75" y2="16.75"/> <rect x="0.75" y="0.75" width="4" height="4" rx="0.88" ry="0.88"/> <rect x="0.75" y="7.75" width="4" height="4" rx="0.88" ry="0.88"/> <rect x="0.75" y="14.75" width="4" height="4" rx="0.88" ry="0.88"/> </svg> </span> </span> <span class="f-option-switch_button__title"> Výpis </span> </span> </label> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="options-as-links" value="https://www.google.com/maps" onclick="location = this.value;" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" width="20.792" height="19.519" viewBox="0 0 20.792 19.519"> <g id="Group_2539" data-name="Group 2539" transform="translate(-321.744 -75.457)"> <line id="Line_311" data-name="Line 311" y2="9.056" transform="translate(334.494 76.236)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/> <line id="Line_312" data-name="Line 312" y2="11.798" transform="translate(328.494 80.428)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/> <path id="Path_3815" data-name="Path 3815" d="M334.382,89.319v4.723a.183.183,0,0,0,.183.183h5.9a.183.183,0,0,0,.183-.183V89.319" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/> <path id="Path_3816" data-name="Path 3816" d="M333.494,89.892l4.082-2.667,3.918,2.667" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/> <path id="Path_3817" data-name="Path 3817" d="M340.494,85.225V78.61a.684.684,0,0,0-.468-.648l-5-1.666a1.693,1.693,0,0,0-1.067,0l-4.933,1.644a1.684,1.684,0,0,1-1.064,0l-4.57-1.524a.682.682,0,0,0-.9.647V89.041a.683.683,0,0,0,.377.611l4.869,2.433a1.686,1.686,0,0,0,1.507,0l1.247-.623" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/> </g> </svg> </span> </span> <span class="f-option-switch_button__title"> Mapa </span> </span> </label> </div>
Full with disabled
-
-
{% include "@Components/forms/option-switch/option-switch.twig" with { props: { name: "filter-variant", items: [ { title: "Pronájem", value: "1", checked: true }, { title: "Prodej", value: "2" }, { title: "Dražby", value: "3", disabled: true } ] } } %} -
<div class="f-option-switch"> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="filter-variant" value="1" checked="checked" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Pronájem </span> <span class="f-option-switch_button__title"> Pronájem </span> </span> </label> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="filter-variant" value="2" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Prodej </span> <span class="f-option-switch_button__title"> Prodej </span> </span> </label> <label class="f-option-switch__label"> <input class="f-option-switch__input" type="radio" name="filter-variant" value="3" disabled="disabled" > <span class="f-option-switch__button"> <span class="f-option-switch_button__icon"> Dražby </span> <span class="f-option-switch_button__title"> Dražby </span> </span> </label> </div>
Schema
{
"props": {
"variant": {
"type": "string",
"description": "undefined | compact"
},
"name": {
"type": "string",
"description": "Unique / required"
},
"items": {
"type": "array of objects",
"description": "Object params: title:string | value:string > unique | checked:boolean | icon: object"
}
}
}