{{!-- This template just creates a data context for the power tools toggle example --}}
{
"label": "Lorem ipsum",
"labelLong": "Lorem ipsum dolor sit amet",
"htmlText": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus at laoreet. Sed congue sollicitudin lacus vitae porttitor. Integer convallis maximus odio.</p>",
"htmlTextMedium": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt.</p>",
"htmlTextShort": "<p>Integer varius tincidunt purus at laoreet. Sed congue sollicitudin.</p>",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius tincidunt purus. Integer convallis maximus odio.",
"url": "#",
"videoUrl": "https://www.youtube.com/embed/roS6oFjCDhc",
"search": {
"id": "Search",
"label": "Search",
"placeholder": "Type keywords"
},
"keywords": {
"id": "Categories",
"label": "Categories",
"attr": "data-placeholder=\"Filter by category\" multiple",
"options": [
{
"value": "option-1",
"label": "Option 1",
"selected": true
},
{
"value": "option-2",
"label": "Option 2"
},
{
"value": "option-3",
"label": "Option 3"
}
]
},
"fromDate": {
"id": "From",
"label": "From date",
"placeholder": null
},
"toDate": {
"id": "To",
"label": "To date",
"placeholder": null
},
"submit": {
"label": "Search",
"class": "js-comForm_submit",
"el": "button",
"attr": "type=\"submit\""
},
"cancel": {
"label": "Cancel search",
"class": "btn-close js-comForm_close",
"el": "button",
"attr": "type=\"submit\""
},
"class": null
}
By default the form is hidden on small / mobile devices and toggled via a button (added the .is-open
class to the module, the button is not displayed here).
For demonstration purposes the .is-open
class is added in this example.
To see a working implementation visit https://www.unibz.it/en/news/?topics=2