mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
56 lines
2.1 KiB
Plaintext
56 lines
2.1 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">
|
|
<div class="flex flex-wrap items-center gap-4">
|
|
<select class="select">
|
|
<optgroup label="Colors">
|
|
<option>Fuchsia</option>
|
|
<option selected>Cyan</option>
|
|
<option>Amber</option>
|
|
</optgroup>
|
|
<optgroup label="Gradients">
|
|
<option>Fuchsia to Cyan</option>
|
|
<option>Cyan to Amber</option>
|
|
<option>Amber to Fuchsia</option>
|
|
</optgroup>
|
|
</select>
|
|
|
|
{% call select(
|
|
selected="cyan"
|
|
) %}
|
|
|
|
<div role="group" aria-labelledby="fruit-options-label">
|
|
<span id="fruit-options-label" role="heading">Colors</span>
|
|
<div type="button" role="option" data-value="fuchsia">
|
|
<span class="rounded-full size-4 bg-fuchsia-500"></span>
|
|
Fuchsia
|
|
</div>
|
|
<div type="button" role="option" data-value="cyan">
|
|
<span class="rounded-full size-4 bg-cyan-500"></span>
|
|
Cyan
|
|
</div>
|
|
<div type="button" role="option" data-value="amber">
|
|
<span class="rounded-full size-4 bg-amber-500"></span>
|
|
Amber
|
|
</div>
|
|
</div>
|
|
<div role="group" aria-labelledby="vegetable-options-label">
|
|
<span id="vegetable-options-label" role="heading">Gradients</span>
|
|
<div type="button" role="option" data-value="fuchsia-to-cyan">
|
|
<span class="rounded-full size-4 bg-linear-to-bl from-fuchsia-500 to-cyan-500"></span>
|
|
Amber to Cyan
|
|
</div>
|
|
<div type="button" role="option" data-value="cyan-to-amber">
|
|
<span class="rounded-full size-4 bg-linear-to-bl from-cyan-500 to-amber-500"></span>
|
|
Cyan to Amber
|
|
</div>
|
|
<div type="button" role="option" data-value="amber-to-fuchsia">
|
|
<span class="rounded-full size-4 bg-linear-to-bl from-amber-500 to-fuchsia-500"></span>
|
|
Amber to Fuchsia
|
|
</div>
|
|
</div>
|
|
{% endcall %}
|
|
</div>
|
|
</section> |