mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 05:38:18 +00:00
70 lines
2.6 KiB
Plaintext
70 lines
2.6 KiB
Plaintext
<section id="select" class="w-full rounded-lg border scroll-mt-16">
|
|
<header class="border-b px-4 py-3">
|
|
<h2 class="text-sm font-medium">Select</h2>
|
|
</header>
|
|
<div class="p-4 gap">
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex flex-wrap items-center gap-2 md:flex-row">
|
|
<select class="select w-[180px]">
|
|
<optgroup label="Fruits">
|
|
<option>Apple</option>
|
|
<option>Banana</option>
|
|
<option>Blueberry</option>
|
|
</optgroup>
|
|
<optgroup label="Grapes">
|
|
<option>Pineapple</option>
|
|
</optgroup>
|
|
</select>
|
|
<select class="select w-[180px]" disabled>
|
|
<option>Disabled</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<div class="flex flex-wrap items-center gap-2 md:flex-row">
|
|
{% call select(trigger_attrs={"class": "w-[180px]"}) %}
|
|
<div role="group" aria-labelledby="fruit-options-label">
|
|
<span id="fruit-options-label" role="heading">Fruits</span>
|
|
<div role="option" data-value="apple">Apple</div>
|
|
<div role="option" data-value="banana">Banana</div>
|
|
<div role="option" data-value="blueberry">Blueberry</div>
|
|
</div>
|
|
<div role="group" aria-labelledby="vegetable-options-label">
|
|
<span id="vegetable-options-label" role="heading">Grapes</span>
|
|
<div role="option" data-value="pineapple">Pineapple</div>
|
|
</div>
|
|
{% endcall %}
|
|
|
|
{% call select(
|
|
trigger_attrs={"class": "w-[180px]"},
|
|
listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"}
|
|
) %}
|
|
{% for i in range(0, 99) %}
|
|
<div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
|
|
{% endfor %}
|
|
{% endcall %}
|
|
|
|
{% call select(trigger_attrs={"disabled": "disabled", "class": "w-[180px]"}) %}
|
|
<div role="option" data-value="disabled">Disabled</div>
|
|
{% endcall %}
|
|
|
|
|
|
{% call select(trigger_attrs={'class': 'w-[180px]'}) %}
|
|
<div type="button" role="option" data-value="bar">
|
|
{% lucide "chart-bar", {"class": "text-muted-foreground"} %}
|
|
Bar
|
|
</div>
|
|
<div type="button" role="option" data-value="line">
|
|
{% lucide "chart-line", {"class": "text-muted-foreground"} %}
|
|
Line
|
|
</div>
|
|
<div type="button" role="option" data-value="pie">
|
|
{% lucide "chart-pie", {"class": "text-muted-foreground"} %}
|
|
Pie
|
|
</div>
|
|
{% endcall %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> |