<!-- Extra Small -->
<div class="dropdown flex flex-col mb-4 gap-0 dropdown-size-xs">
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="#" class="dropdown-item ">
Item text
</a>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
</div>
<!-- Small -->
<div class="dropdown flex flex-col mb-4 gap-0 dropdown-size-sm">
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="#" class="dropdown-item ">
Item text
</a>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
</div>
<!-- Default -->
<div class="dropdown flex flex-col mb-4 gap-0 dropdown-size-">
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="#" class="dropdown-item ">
Item text
</a>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
</div>
<!-- Medium -->
<div class="dropdown flex flex-col mb-4 gap-0 dropdown-size-md">
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="#" class="dropdown-item ">
Item text
</a>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
</div>
<!-- Large -->
<div class="dropdown flex flex-col mb-4 gap-0 dropdown-size-lg">
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="#" class="dropdown-item ">
Item text
</a>
<!-- Checkable item -->
<label class="dropdown-item ">
Item text
<input type="checkbox">
<svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
</svg>
</label>
</div>
{% for size in sizes %}
<!-- {{ size.name }} -->
<div class="dropdown flex flex-col mb-4 gap-0 {{ size is defined ? ' dropdown-size-' ~ size.size }}">
{% include "@template-dropdown-item-button" %}
{% include "@template-dropdown-item-button" with {href:"#"} %}
{% include "@template-dropdown-item-checkmark" %}
</div>
{% endfor %}
{
"label": "Item text",
"sizes": [
{
"name": "Extra Small",
"size": "xs"
},
{
"name": "Small",
"size": "sm"
},
{
"name": "Default"
},
{
"name": "Medium",
"size": "md"
},
{
"name": "Large",
"size": "lg"
}
]
}
No notes defined.