Enim velit officia cillum tempor non officia incididunt pariatur nisi. Eu ea eu ad adipisicing in voluptate. Velit pariatur excepteur commodo proident voluptate id. Eiusmod ex commodo quis enim eiusmod velit non esse.
Nulla nisi ea qui commodo est adipisicing sint irure proident duis deserunt ipsum qui. Minim sint non laboris reprehenderit esse nulla cupidatat culpa incididunt elit laboris esse. Voluptate mollit labore qui sint incididunt exercitation esse ullamco enim labore culpa.
Non irure reprehenderit ullamco nisi nostrud dolore nulla veniam cillum cillum aliquip tempor dolor elit. Irure dolore ad ex do. Ea nisi sint laboris adipisicing Lorem. Minim quis amet ad sit aute in deserunt deserunt irure dolor quis. Est enim veniam aliqua cupidatat culpa minim qui laborum laborum labore. Enim ullamco pariatur duis dolore est qui aliqua reprehenderit est Lorem Lorem. Exercitation cillum dolor velit occaecat et irure ut do.
Commodo consequat nostrud culpa ex labore labore in esse. Pariatur incididunt voluptate nostrud exercitation sit nisi laboris occaecat commodo eiusmod aliqua. Amet consectetur aute duis incididunt exercitation elit irure velit mollit. Ad non duis adipisicing quis proident ex id minim magna aute dolore.
Adipisicing cillum proident est do. Nostrud quis dolore fugiat ea quis amet amet reprehenderit tempor labore non eu. Reprehenderit ad est nisi anim ipsum Lorem.
Anim eu ex id id. Dolore nostrud cupidatat qui ipsum excepteur ipsum esse consequat sunt laboris pariatur dolore minim non. Veniam elit occaecat ut aute.
Ullamco est minim dolor velit ex est. Ut nostrud esse magna non adipisicing sunt nulla sint consequat. Eiusmod reprehenderit Lorem proident enim eiusmod nostrud. Nulla in incididunt duis irure adipisicing.
Adipisicing exercitation consequat ut tempor irure culpa consequat. Consequat minim labore elit pariatur adipisicing amet ut nisi proident laboris ut ut cillum. Ullamco ut velit consectetur id ipsum aliquip. Eu adipisicing ex velit id magna Lorem.
Qui laborum magna ut aliquip dolore excepteur. In non sunt quis consequat aute laborum do nulla duis eiusmod culpa. Sint sit ullamco dolor dolor officia tempor. Commodo duis magna id occaecat id do occaecat nisi officia nisi Lorem. Veniam nostrud ullamco aliqua et est eiusmod anim ea culpa. Aute anim aute cupidatat ex dolore. Lorem aute ad anim adipisicing.
Nulla laborum laborum eiusmod id. Culpa exercitation ipsum nulla ut occaecat et eiusmod. Laboris aliqua occaecat nostrud in esse deserunt commodo. Fugiat enim ullamco ullamco ipsum nostrud ad consequat est anim Lorem.
Eiusmod aliqua adipisicing nisi sint nisi commodo dolor aliquip amet laborum. Ullamco elit in cillum sit exercitation aliquip magna occaecat consectetur. Qui reprehenderit fugiat anim incididunt. Velit Lorem cupidatat reprehenderit ipsum eiusmod cupidatat nostrud commodo.
Aute sint exercitation Lorem aliqua sit cillum eiusmod deserunt voluptate aute. Mollit reprehenderit duis labore velit sint aute quis ad non sunt consectetur occaecat labore. Non duis cillum ut ex officia tempor ex amet adipisicing nostrud fugiat. Nisi esse ea officia consectetur eiusmod esse ea commodo tempor consequat consequat.
{
"id": "example-tabs-1",
"list": [
{
"id": "example-panel-1-1",
"label": "Button 1",
"content": "<div class=\"c-rich-text\"><h3 class=\"fs-h3\">Content 1</h3><p>Enim velit officia cillum tempor non officia incididunt pariatur nisi. Eu ea eu ad adipisicing in voluptate. Velit pariatur excepteur commodo proident voluptate id. Eiusmod ex commodo quis enim eiusmod velit non esse.</p>\n<p>Nulla nisi ea qui commodo est adipisicing sint irure proident duis deserunt ipsum qui. Minim sint non laboris reprehenderit esse nulla cupidatat culpa incididunt elit laboris esse. Voluptate mollit labore qui sint incididunt exercitation esse ullamco enim labore culpa.</p>\n<p>Non irure reprehenderit ullamco nisi nostrud dolore nulla veniam cillum cillum aliquip tempor dolor elit. Irure dolore ad ex do. Ea nisi sint laboris adipisicing Lorem. Minim quis amet ad sit aute in deserunt deserunt irure dolor quis. Est enim veniam aliqua cupidatat culpa minim qui laborum laborum labore. Enim ullamco pariatur duis dolore est qui aliqua reprehenderit est Lorem Lorem. Exercitation cillum dolor velit occaecat et irure ut do.</p></div>"
},
{
"id": "example-panel-1-2",
"label": "Button 2",
"content": "<div class=\"c-rich-text\"><h3 class=\"fs-h3\">Content 2</h3><p>Commodo consequat nostrud culpa ex labore labore in esse. Pariatur incididunt voluptate nostrud exercitation sit nisi laboris occaecat commodo eiusmod aliqua. Amet consectetur aute duis incididunt exercitation elit irure velit mollit. Ad non duis adipisicing quis proident ex id minim magna aute dolore.</p>\n<p>Adipisicing cillum proident est do. Nostrud quis dolore fugiat ea quis amet amet reprehenderit tempor labore non eu. Reprehenderit ad est nisi anim ipsum Lorem.</p>\n<p>Anim eu ex id id. Dolore nostrud cupidatat qui ipsum excepteur ipsum esse consequat sunt laboris pariatur dolore minim non. Veniam elit occaecat ut aute.</p></div>"
},
{
"id": "example-panel-1-3",
"label": "Button 3",
"content": "<div class=\"c-rich-text\"><h3 class=\"fs-h3\">Content 3</h3><p>Ullamco est minim dolor velit ex est. Ut nostrud esse magna non adipisicing sunt nulla sint consequat. Eiusmod reprehenderit Lorem proident enim eiusmod nostrud. Nulla in incididunt duis irure adipisicing.</p>\n<p>Adipisicing exercitation consequat ut tempor irure culpa consequat. Consequat minim labore elit pariatur adipisicing amet ut nisi proident laboris ut ut cillum. Ullamco ut velit consectetur id ipsum aliquip. Eu adipisicing ex velit id magna Lorem.</p>\n<p>Qui laborum magna ut aliquip dolore excepteur. In non sunt quis consequat aute laborum do nulla duis eiusmod culpa. Sint sit ullamco dolor dolor officia tempor. Commodo duis magna id occaecat id do occaecat nisi officia nisi Lorem. Veniam nostrud ullamco aliqua et est eiusmod anim ea culpa. Aute anim aute cupidatat ex dolore. Lorem aute ad anim adipisicing.</p></div>"
},
{
"id": "example-panel-1-4",
"label": "Button 4",
"content": "<div class=\"c-rich-text\"><h3 class=\"fs-h3\">Content 4</h3><p>Nulla laborum laborum eiusmod id. Culpa exercitation ipsum nulla ut occaecat et eiusmod. Laboris aliqua occaecat nostrud in esse deserunt commodo. Fugiat enim ullamco ullamco ipsum nostrud ad consequat est anim Lorem.</p>\n<p>Eiusmod aliqua adipisicing nisi sint nisi commodo dolor aliquip amet laborum. Ullamco elit in cillum sit exercitation aliquip magna occaecat consectetur. Qui reprehenderit fugiat anim incididunt. Velit Lorem cupidatat reprehenderit ipsum eiusmod cupidatat nostrud commodo.</p>\n<p>Aute sint exercitation Lorem aliqua sit cillum eiusmod deserunt voluptate aute. Mollit reprehenderit duis labore velit sint aute quis ad non sunt consectetur occaecat labore. Non duis cillum ut ex officia tempor ex amet adipisicing nostrud fugiat. Nisi esse ea officia consectetur eiusmod esse ea commodo tempor consequat consequat.</p></div>"
}
]
}
{
"id": "example-tabs-2",
"list": [
{
"id": "example-panel-2-1",
"label": "Button 1"
},
{
"id": "example-panel-2-2",
"label": "Button 2"
}
]
}
{
"id": "example-tabs-3",
"list": [
{
"url": "http://www.sac-cas.ch/",
"label": "Link 1"
},
{
"url": "http://www.sac-cas.ch/",
"label": "Link 2",
"isActive": true
}
]
}
<div class="m-tabs{{#if type}} m-tabs--{{type}}{{/if}} o-scroll-indicators" data-init="Tabs"{{{moduleAttributes this}}}>
<ul class="m-tabs__nav o-ui-list" id="{{id}}" data-js-binding="Tabs-list">
{{#each list}}
<li class="m-tabs__nav-item{{#if url}}{{#if isActive}} is-active{{/if}}{{else if @first}} is-active{{/if}}"><a class="m-tabs__link fs-copy-bold" href="{{#if url}}{{url}}{{else}}#{{this.id}}{{/if}}"{{#if target}} target="{{target}}"{{/if}}{{#if @first}} aria-selected="true"{{/if}}>{{label}}</a></li>
{{/each}}
</ul>
{{#if list.0.content}}
<div class="m-tabs__panel-wrapper" data-tabs-content="{{id}}">
{{#each list}}
<section class="m-tabs__panel{{#if url}}{{#if isActive}} is-active{{/if}}{{else if @first}} is-active{{/if}}" id="{{this.id}}">
{{{this.content}}}
</section>
{{/each}}
</div>
{{/if}}
</div>
{
"global": {
"lang": "de",
"locale": "de-CH",
"svgSprite": "/assets/media/svg/svg-sprite.svg",
"transparentPixel": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
"season": "summer",
"api": {
"suisseAlpine": "https://dev.suissealpine.sac-cas.ch/api",
"sacRouteDetail": "https://dev.web.sac-cas.ch/de/?type=1567765346410&tx_usersaccas2020_sac2020[routeId]=",
"sacRoutePassTrough": "https://dev.web.sac-cas.ch/de/?type=1567765346411&tx_usersaccas2020_sac2020[routeId]=",
"uploadProfileImage": "https://dev.web.sac-cas.ch/?eID=routing&route=usersaccassite/users/current/uploadProfileImage",
"deleteProfileImage": "https://dev.web.sac-cas.ch/?eID=routing&route=usersaccassite/users/current/deleteProfileImage",
"aimeosShop": "https://dev.web.sac-cas.ch/de/shop/shopapi/",
"mailchimpForm": "https://sac-cas.us2.list-manage.com/subscribe/post?u=466a37a029f12e4df9e7a2a1f&id=ee3f0f3cf3",
"collections": "https://collectionsdev.web.sac-cas.ch/api",
"hrs": "https://www.alpsonline.org/hut-web-service?wsdl"
},
"baseAimeosUploadPath": "https://dev.web.sac-cas.ch/uploads/tx_aimeos/",
"mapIframeUrl": "/modules/m030_map/media/map_iframe.html",
"baseDestinationLinkUrl": "/pages/destination_summit/destination_summit.html?",
"destinationLinkRouteAnchor": "route",
"baseJourneyLinkUrl": "https://dev.web.sac-cas.ch/de/redirect/google-maps-routing/lv03/",
"routeCollectionLinkUrl": "https://dev.web.sac-cas.ch/de/mein-sac/uebersicht/",
"hrsLinkUrl": "https://www.alpsonline.org/reservation/wizard?header=yes&hut_id={{hutId}}&selectedDate={{date}}",
"schweizMobilImportUrl": "https://map.schweizmobil.ch/?showDialog=importcoordinates&showLogin&coordinates={{coordinates}}",
"geologyImageUrl": "https://www.sac-cas.ch/fileadmin/Huetten_und_Touren/Tourenportal/Gesteinszonenkarten/Hovercard/{{image}}.jpg",
"features": {
"archive": true
},
"translations": {
"disciplines": {
"mountain_hiking": "Berg- und Alpinwandern",
"alpine_tour": "Hochtour",
"climbing": "Klettern",
"alpine_climbing": "Alpinklettern",
"via_ferrata": "Klettersteig",
"ski_tour": "Skitour",
"snowshoe_tour": "Schneeschuhtour",
"archive": "Routenarchiv"
},
"types": {
"summit": "Gipfel",
"hut": "Hütte",
"traverse": "Übergang",
"marking_point": "Markanter Punkt",
"departure_arrival": "Ausgangp./Talort",
"climbing_area": "Klettergebiet"
},
"markingPoints": {
"lake": "See",
"catering": "Einkehr",
"waterfall": "Wasserfall",
"cave": "Höhle",
"bridge": "Brücke",
"alp": "Alpe",
"other": "Sehenswürdigkeit"
},
"difficulties": {
"alpine_tour": {
"L": "L",
"WS": "WS",
"ZS": "ZS",
"S": "S",
"SS": "SS",
"AS": "AS"
},
"ski_tour": {
"L": "L",
"WS": "WS",
"ZS": "ZS",
"S": "S",
"SS": "SS",
"AS": "AS"
}
},
"altitudeSuffix": "m ü.M.",
"altitudeDifferenceUnit": "hm",
"hoursUnit": "h",
"difficulty": "Schwierigkeit",
"ascent": "Aufstieg",
"descent": "Abstieg",
"route": "Route",
"routes": "Routen",
"segment": "Routenabschnitt",
"segments": "Routenabschnitte",
"approach": "Zustieg",
"approaches": "Zustiege",
"sector": "Sektor",
"sectors": "Sektoren",
"hut": "Hütte",
"hutPrivate": "Hütte Privat",
"hutFilter": "Hüttenfinder",
"situationWarning": "Zustandswarnung",
"protectionRule": "Schutzbestimmung",
"archiveRoute": "Archivroute",
"archiveRoutes": "Archivrouten",
"map": {
"map": "Karte",
"legend": "Legende",
"zoomIn": "Reinzoomen",
"zoomOut": "Rauszoomen",
"enterFullscreenMode": "Vollbildmodus starten",
"leaveFullscreenMode": "Vollbildmodus verlassen",
"searchLabel": "Region, Gipfel, Hütte, Talort, POI, …",
"disciplineSettings": "Disziplinen Einstellungen",
"layerSettings": "Ergänzende Kartenebenen",
"geolocate": "Lokalisieren",
"searchInView": "In diesem Gebiet suchen",
"waypointDrawing": "Auf Karte zeichnen",
"drawWaypoints": "Route zeichnen",
"removeWaypoints": "Route löschen",
"exportWaypoints": "GPX downloaden",
"saveInSchweizMobil": "Speichern|SchweizMobil Plus",
"moreInFullscreen": "Entdecke weitere Funktionen auf der Vollbildkarte:<br>- Zeichne deine eigenen Tracks",
"baseLayers": {
"pois": "Tourenziele, Hütten",
"routes": "Routen"
},
"additionalLayers": {
"summer": "Sommer",
"winter": "Winter",
"hikingTrails": "Wanderwege",
"closedHikingTrails": "Gesperrte Wanderwege",
"wildlifeReserves": "Wildschutzgebiete",
"skiTours": "swisstopo Skitouren",
"designatedWildlifeAreas": "Wildruhezonen",
"publicTransportStops": "ÖV-Stationen",
"slopesOver30": "Hangneigung ab 30°",
"protectionRules": "Schutzbestimmungen",
"situationWarnings": "Zustandswarnungen",
"geology": "Gesteinszonenkarte",
"alpGuardDogs": "Herdenschutzhunde",
"armyShooting": "Schiessanzeigen",
"snowCover": "Schneeabdeckung",
"snowDepth": "Schneehöhe"
},
"layerOpacity": "Deckkraft aktiver Karten",
"foregroundOpacity": "Deckkraft aktiver Disziplinen und Hütten",
"backgroundOpacity": "Deckkraft inaktiver Disziplinen und Hütten",
"reset": "Zurücksetzen"
},
"mapHoverCard": {
"publicTransport": "Öffentlicher Verkehr",
"parkingInformations": "Parkinformationen",
"planJourneyPublicTransport": "Anreise",
"searchPublicTransport": "Verbindung suchen (SBB)",
"planJourneyCar": "Anreise Google Maps",
"downloadWaypoint": "Wegpunkt downloaden",
"routeLinkLabel": "Route ansehen",
"wildlifeReserve": "Wildschutzgebiet",
"wildlifeArea": "Wildruhezone",
"closedHikingTrail": "Sperrung / Umleitung Wanderweg",
"alpGuardDogs": "Alpweide geschützt durch Herdenschutzhunde",
"armyShooting": "Schiessanzeige und Gefahrenstelle",
"legalBasis": "Grundlage",
"additionalInformation": "Zusatzinformationen",
"showDetails": "Details anzeigen",
"moreOnMapAdminCh": "Mehr Informationen auf map.admin.ch",
"currentSnowDepth": "Aktuelle Schneehöhe"
},
"protectionArea": {
"lastUpdated": "zuletzt aktualisiert am {{lastUpdate}}",
"validity": "gültig von {{validFrom}} bis {{validUntil}}",
"validityEstimated": "gültig von {{validFrom}} bis voraussichtlich {{validUntil}}",
"validFrom": "gültig ab {{validFrom}}",
"validUntil": "gültig bis {{validUntil}}",
"validUntilEstimated": "gültig bis voraussichtlich {{validUntil}}",
"generallyValid": "generell gültig"
},
"collections": {
"addRouteToCollection": "Route merken",
"selectCollection": "Merkliste auswählen",
"selectRoute": "Welche Route(n) dieses Tourenziels möchtest du dir merken?",
"selectRouteError": "Bitte wähle eine Route aus.",
"addToCollection": "Merken",
"cancel": "Abbrechen",
"routeAddedToCollection": "Die ausgewählte Route(n) wurden zu deiner Merkliste hinzugefügt.",
"createNew": "Neue Liste",
"close": "Schliessen",
"goToCollection": "Zur Merkliste",
"alreadyCollectedIn": "Bereits gemerkt auf"
}
},
"basePublicTransportLinkUrl": "https://www.sbb.ch/en/buying/pages/fahrplan/fahrplan.xhtml?language=en&nach=",
"snowDepthInfoUrl": "https://www.sac-cas.ch",
"snowCoverInfoUrl": "https://www.sac-cas.ch",
"destinationFallbackImages": {
"summit": {
"srcset": {
"sizeList": [
[
600
],
[
1200
],
[
2048
]
],
"urlList": [
"/modules/c015_teaser_destination/media/summit_600.jpg",
"/modules/c015_teaser_destination/media/summit_1200.jpg",
"/modules/c015_teaser_destination/media/summit_2048.jpg"
]
}
},
"hut": {
"srcset": {
"sizeList": [
[
600
],
[
1200
]
],
"urlList": [
"/modules/c015_teaser_destination/media/hut_600.jpg",
"/modules/c015_teaser_destination/media/hut_1200.jpg",
"/modules/c015_teaser_destination/media/hut_2048.jpg"
]
}
}
},
"map": {
"news": [
{
"label": "Neu",
"copy": "Jetzt auch <b>GPX downloaden</b>",
"type": "waypointDrawing"
},
{
"label": "Neu",
"copy": "Jetzt Deckkraft für jede Ebene einstellbar",
"type": "layerSettings"
}
],
"metaLinkList": [
{
"url": "https://www.swisstopo.admin.ch/",
"label": "© swisstopo (5701325910)"
},
{
"url": "/pages/map_legend/map_legend.html",
"label": "Hilfe & Legende"
},
{
"url": "#",
"label": "Haftungsausschluss"
}
]
}
}
}
There are three ways to implement the module:
Automatically rendered content: Besides an id simply hand over a content value for each item in the list, this value can be HTML. The tab panels will be switched in the frontend. (See Default)
Manually rendered content: For more complex contents it can be useful to have a separate rendering for them. To make the tabs work, it requires the following additional things:
An overall wrapper with the same id as the one of the Tabs module, which can be placed anywhere on the page:
<div data-tabs-content="{{id}}">
// Panels here
</div> Inside this overall wrapper, for each item a section with the id matching the one of the tabs items (is-active only needs to be added to the active panel):
<section class="m-tabs__panel is-active" id="{{id}}">
Content
</section> (Please note that m-tabs__panel adds the functionality of switching the contents, but in theory it’s also possible to make a custom implementation with an own panel class.)
Linking to other pages: It’s also possible to have separate pages for each tab content, the tabs will link to the defined urls. In this case the backend is responsible to render the content of each page and adding is-active to the right item. (See External links)