mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
26 lines
718 B
Plaintext
26 lines
718 B
Plaintext
---
|
|
import Progress from './Progress.astro'
|
|
|
|
interface Props {
|
|
value?: number
|
|
color?: string
|
|
/** -lt soft color variant (default true — the usual look for a background progress) */
|
|
light?: boolean
|
|
class?: string
|
|
text?: string
|
|
showValue?: boolean
|
|
}
|
|
|
|
const { value, color = 'primary', light = true, class: className, text, showValue } = Astro.props
|
|
|
|
const barColor = `${color}${light ? '-lt' : ''}`
|
|
|
|
const percentage = value ?? 0
|
|
---
|
|
|
|
<div class={`progressbg${className ? ` ${className}` : ''}`}>
|
|
<Progress value={percentage} class="progressbg-progress" color={barColor} />
|
|
{text && <div class="progressbg-text">{text}</div>}
|
|
{showValue && <div class="progressbg-value">{percentage}%</div>}
|
|
</div>
|