<div class="powerTools ss-form js-powerTools is-open" data-select="#Categories" data-from-date="#From" data-to-date="#To">
<div class="powerTools_form">
<form action="#">
<fieldset>
<div class="form_field ">
<label class="form_label" for="Search">
Search
</label>
<input id="Search" placeholder="Type keywords" class="form_input " type="">
</div>
<div class="form_field">
<label class="form_label" for="Categories">
Categories
</label>
<select class="form_select" name="Categories" id="Categories" data-placeholder="Filter by category" multiple>
<option value="option-1" selected>
Option 1
</option>
<option value="option-2">
Option 2
</option>
<option value="option-3">
Option 3
</option>
</select>
</div>
<div class="g-row">
<div class="g g-6">
<div class="form_field ">
<label class="form_label" for="From">
From date
</label>
<input id="From" placeholder="" class="form_input " type="">
</div>
</div>
<div class="g g-6">
<div class="form_field ">
<label class="form_label" for="To">
To date
</label>
<input id="To" placeholder="" class="form_input " type="">
</div>
</div>
</div>
</fieldset>
<div class="form_field form_field-actions">
<button class="btn js-comForm_submit" type="submit">
Search
</button>
<button class="btn btn-close js-comForm_close" type="submit">
Cancel search
</button>
</div>
</form>
</div>
</div>
<div
class="powerTools ss-form js-powerTools {{ class }}"
data-select="#Categories"
data-from-date="#From"
data-to-date="#To"
>
<div class="powerTools_form">
<form action="#">
<fieldset>
{{ render '@form--text-input' search }}
{{ render '@form--select' keywords }}
<div class="g-row">
<div class="g g-6">
{{ render '@form--text-input' fromDate }}
</div>
<div class="g g-6">
{{ render '@form--text-input' toDate }}
</div>
</div>
</fieldset>
<div class="form_field form_field-actions">
{{ render '@btn' submit }}
{{ render '@btn' cancel }}
</div>
</form>
</div>
</div>
{
"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": "is-open"
}
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