mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-15 14:38:27 +00:00
99 lines
3.4 KiB
Plaintext
99 lines
3.4 KiB
Plaintext
{% from "select.njk" import select %}
|
|
|
|
<section id="select" class="w-full rounded-lg border scroll-mt-14">
|
|
<header class="border-b px-4 py-3 flex items-center justify-between">
|
|
<h2 class="text-sm font-medium">Select</h2>
|
|
<a href="/components/select" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
|
|
{% lucide "book-open", { "class": "size-4" } %}
|
|
</a>
|
|
</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">
|
|
{{ select(
|
|
id="select-default",
|
|
trigger_attrs={"class": "w-[180px]"},
|
|
selected="blueberry",
|
|
items=[
|
|
{
|
|
type: "group",
|
|
label: "Fruits",
|
|
items: [
|
|
{ type: "item", label: "Apple", value: "apple" },
|
|
{ type: "item", label: "Banana", value: "banana" },
|
|
{ type: "item", label: "Blueberry", value: "blueberry" }
|
|
]
|
|
},
|
|
{
|
|
type: "group",
|
|
label: "Grapes",
|
|
items: [
|
|
{ type: "item", label: "Pineapple", value: "pineapple" }
|
|
]
|
|
}
|
|
]
|
|
) }}
|
|
{% call select(
|
|
id="select-scrollbar",
|
|
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(
|
|
id="select-disabled",
|
|
trigger_attrs={"disabled": "disabled", "class": "w-[180px]"}
|
|
) %}
|
|
<div role="option" data-value="disabled">Disabled</div>
|
|
{% endcall %}
|
|
|
|
|
|
{% call select(
|
|
id="select-with-icon",
|
|
name="chart-type",
|
|
trigger_attrs={'class': 'w-[180px]'}
|
|
) %}
|
|
<div type="button" role="option" data-value="bar">
|
|
<span class="flex items-center gap-2">
|
|
{% lucide "chart-bar", {"class": "text-muted-foreground"} %}
|
|
Bar
|
|
</span>
|
|
</div>
|
|
<div type="button" role="option" data-value="line">
|
|
<span class="flex items-center gap-2">
|
|
{% lucide "chart-line", {"class": "text-muted-foreground"} %}
|
|
Line
|
|
</span>
|
|
</div>
|
|
<div type="button" role="option" data-value="pie">
|
|
<span class="flex items-center gap-2">
|
|
{% lucide "chart-pie", {"class": "text-muted-foreground"} %}
|
|
Pie
|
|
</span>
|
|
</div>
|
|
{% endcall %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> |