Toggle
Über das Pattern
Bei Klick auf ein Toggle, bestehend aus Text und Pfeil-Icon, klappt nach unten eine Information auf.
JavaScript
Anwendung
import { wmToggle } from './toggle.js';
const toggle = new wmToggle()
toggle.init()
/* oder mit Parametern: */
const toggle = new wmToggle({
class: '.my-custom-toggle-class',
button_class: '.my-custom-button-class',
panel_class: '.my-custom-panel-class',
id: 'myid'
})
toggle.init()Dependencies
utils.js
Parameter und Anwendung in Nunjucks
# Parameter
settings: "object"
text: "string" # frei wählbarer Button-Text
bold: "boolean" # Text im Button fett darstellen (default: false)
mobileOnly: "boolean" # Nur Mobile als toggle darstellen (defaul: false)
attributes: "object" # HTML-Attribute (z. B.: class,...), frei wählbar
# Anwendung
## Die Javascript-Datei "toggle.js" muss eingebunden sein.
{% from "components/toggle/toggle.njk" import toggle with context %}
{% call toggle(settings) %}
Inhalt frei wählbar
{% endcall %}Variationen
Toggle Standard
Toggle nur Mobil
Toggle innerhalb Event-Feed
HTML
Laden…Nunjucks
Laden…