Layout-Schalter @layout-switch
Kachelansicht aktiv @layout-switch--tiles
<!-- Kachelansicht aktiv -->
<ul class="layout-switch" aria-label="Ansicht wechseln">
<li class="layout-switch__item layout-switch__item--active">
<a class="icon-button layout-switch__button" href="#" title="Zur Listenansicht"><span class="icon-button__label">Zur Listenansicht</span><span class="icon-button__circle"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-list"></use>
</svg></span></a>
</li>
<li class="layout-switch__item"><span class="icon-button layout-switch__button" title="Kachelansicht aktiv"><span class="icon-button__label">Kachelansicht aktiv</span><span class="icon-button__circle"><svg class="icon icon--tiles icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-tiles"></use>
</svg></span></span>
</li>
</ul>{
"items": [
{
"active": true,
"button": {
"title": "Zur Listenansicht",
"label": "Zur Listenansicht",
"icon": "list",
"link": "#"
}
},
{
"button": {
"title": "Kachelansicht aktiv",
"label": "Kachelansicht aktiv",
"icon": "tiles",
"tag": "span",
"type": null
}
}
]
}
Listenansicht aktiv @layout-switch--list
<!-- Listenansicht aktiv -->
<ul class="layout-switch" aria-label="Ansicht wechseln">
<li class="layout-switch__item"><span class="icon-button layout-switch__button" title="Listenansicht aktiv"><span class="icon-button__label">Listenansicht aktiv</span><span class="icon-button__circle"><svg class="icon icon--list icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-list"></use>
</svg></span></span>
</li>
<li class="layout-switch__item layout-switch__item--active">
<a class="icon-button layout-switch__button" href="#" title="Zur Kachelansicht"><span class="icon-button__label">Zur Kachelansicht</span><span class="icon-button__circle"><svg class="icon icon--tiles icon-button__icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-tiles"></use>
</svg></span></a>
</li>
</ul>{
"items": [
{
"button": {
"title": "Listenansicht aktiv",
"label": "Listenansicht aktiv",
"icon": "list",
"tag": "span",
"type": null
}
},
{
"active": true,
"button": {
"title": "Zur Kachelansicht",
"label": "Zur Kachelansicht",
"icon": "tiles",
"link": "#"
}
}
]
}