最新
颜色选择器Swatch Grid Picker
A radiogroup of preset colour swatches where the choice is marked by a ring and a check, not colour alone.
#color#swatch#grid
3 个框架初级
Loading…
An opacity range over a CSS checkerboard that reports the full rgba() value.
<!--
Alpha over a checkerboard so "transparent" reads as transparent, not as white. The
track layers a colour->transparent gradient on top of a CSS checkerboard, and the
rgba() string is printed and announced. Static snapshot.
-->
<div class="w-full max-w-xs">
<div class="mb-3 flex items-center gap-3">
<span class="h-9 w-9 shrink-0 rounded-lg border border-black/10 dark:border-white/15" style="background-image:linear-gradient(rgba(59,130,246,0.6),rgba(59,130,246,0.6)),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%);background-size:auto,10px 10px"></span>
<span class="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">rgba(59, 130, 246, 0.60)</span>
</div>
<input type="range" min="0" max="100" value="60" aria-label="Opacity, rgba(59, 130, 246, 0.60)"
class="h-4 w-full cursor-pointer appearance-none rounded-full border border-black/10 dark:border-white/15"
style="background-image:linear-gradient(to right,rgba(59,130,246,0),rgba(59,130,246,1)),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%);background-size:auto,12px 12px" />
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
color | string | '#3b82f6' | Color |
alpha | number | 100 | Alpha |
onChange | (alpha: number) => void | - | On change |
Give it a base `color` and control the `alpha` 0-100. The checkerboard behind the track and swatch is what makes transparency honest - over plain white, half and full alpha look nearly identical.