mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
24 lines
1.0 KiB
Plaintext
24 lines
1.0 KiB
Plaintext
---
|
|
// Signal (.signal): a row of stepped bars showing a level — priority, strength, coverage.
|
|
|
|
interface Props {
|
|
/** number of lit bars (`.signal-bar.active`) */
|
|
value?: number
|
|
/** total number of bars; core/scss/ui/_signal.scss styles up to $signal-max-bars (5) */
|
|
max?: number
|
|
/** core/scss/ui/_signal.scss `.signal-{color}` */
|
|
color?: string | undefined
|
|
/** accessible name; without it the signal is hidden from assistive technology */
|
|
ariaLabel?: string
|
|
class?: string
|
|
/** remaining attributes (id, data-*, …) are forwarded to the root element */
|
|
[key: string]: unknown
|
|
}
|
|
|
|
const { value = 0, max = 3, color, ariaLabel, class: className, ...rest } = Astro.props
|
|
|
|
const bars = Array.from({ length: max }, (_, index) => index < value)
|
|
---
|
|
|
|
<span class:list={['signal', color && `signal-${color}`, className]} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel} aria-hidden={ariaLabel ? undefined : 'true'} {...rest}>{bars.map((active) => <span class:list={['signal-bar', active && 'active']} />)}</span>
|