mirror of
https://github.com/tabler/tabler.git
synced 2026-08-08 04:12:26 +04:00
Paweł Kuna
25 lines
816 B
Plaintext
25 lines
816 B
Plaintext
---
|
|
// "Less -> More" gradient legend, e.g. for a choropleth map's color scale.
|
|
interface Props {
|
|
/** number of swatches */
|
|
steps?: number
|
|
/** theme color the swatches ramp up to, e.g. 'primary' */
|
|
color?: string
|
|
minLabel?: string
|
|
maxLabel?: string
|
|
class?: string
|
|
}
|
|
|
|
const { steps = 10, color = 'primary', minLabel = 'Less', maxLabel = 'More', class: className } = Astro.props
|
|
|
|
const items = Array.from({ length: steps }, (_, i) => i + 1)
|
|
---
|
|
|
|
<div class:list={['d-flex align-items-center gap-2', className]}>
|
|
<div class="text-secondary">{minLabel}</div>
|
|
<div class="d-flex gap-1">
|
|
{items.map((step) => <span class="legend" style={`background: color-mix(in srgb, transparent, var(--tblr-${color}) ${(step / steps) * 100}%);`} />)}
|
|
</div>
|
|
<div class="text-secondary">{maxLabel}</div>
|
|
</div>
|