salla-progress-bar
A horizontal progress bar with optional header, value/target labels and a message, mainly used to show how much of a target (for example a donation goal) has been reached.
A horizontal progress bar with optional header, value/target labels and a message, mainly used to show
how much of a target (for example a donation goal) has been reached.
It renders nothing when neither target nor message is set.
Use it
In HTML or JSX, use the tag <salla-progress-bar> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaProgressBar } from '@salla.sa/twilight-components-react/progress-bar';Try it
web-components/salla-progress-bar
Example
import { SallaProgressBar } from '@salla.sa/twilight-components-react/progress-bar';
export function Example() {
return (
<SallaProgressBar header="Donation goal" value={380} target={400} unit="SAR" height="12px" />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
color | color | Fill color of the bar as any CSS color, defaults to: salla.config.get('theme.color.primary', "#ffd5c4") | string | |
donation | donation | A product donation as an object or a JSON string. When can_donate is true and target_amount is set, it fills value (from collected_amount), target (from target_amount), header and message (from target_end_date). Otherwise it only sets message from target_message. It is read once when the element is created, so set it before the element renders. Example: {"target_message":null,"target_date":"2023-04-18","target_end_date":"2023-04-18","target_amount":400,"collected_amount":380,"can_donate":true} | Donation | string | |
header | header | Title shown above the progress bar. | string | |
height | height | Height of the bar as a CSS length, for example 10px. Defaults to 10px. | string | "10px" |
hideUnits | hide-units | Hides the value and target labels shown above the bar. Only has an effect when target is set. | boolean | |
message | message | Text shown under the progress bar, or on its own when target is not set. | string | |
stripped | stripped | Adds a striped effect to the filled part of the bar. | boolean | |
target | target | The goal of the progress bar, in the same unit as value. The bar is hidden when it is not set. | number | |
unit | unit | Text added after the value and target numbers, defaults to: salla.config.currency().symbol | string | |
value | value | The progress so far, in the same unit as target. The bar width is value / target as a percentage. | number |
Related
Used inside: <salla-product-card>, <salla-product-options>, <salla-reviews-summary>, <salla-search-product-card>.