Skip to content

Latest commit

 

History

History
358 lines (301 loc) · 10.8 KB

progress.md

File metadata and controls

358 lines (301 loc) · 10.8 KB
Raw

Progress

A custom component for displaying progress with support for stacked progress bars.{.lead}

Example

Progress components are built with two components: a wrapper <i-progress> and at least one <i-progress-bar>. You can set the width of a progress bar by setting its value property.

<i-progress>
    <i-progress-bar value="65" />
</i-progress>

Sizes

You're able to use the size modifier to control the size of your progress, using one of the available sizes: sm, md, and lg. The default size is set to md.

<i-progress size="sm">
    <i-progress-bar value="65" />
</i-progress>
<i-progress size="md">
    <i-progress-bar value="65" />
</i-progress>
<i-progress size="lg">
    <i-progress-bar value="65" />
</i-progress>

Variants

Inkline includes multiple progress styles. You can change the style of a<i-progress> to set the background using the variant property.

<i-progress variant="light">
    <i-progress-bar value="65" />
</i-progress>
<i-progress variant="dark">
    <i-progress-bar value="65" />
</i-progress>

Bar Variants

Inkline includes multiple progress styles. You can change the style of a <i-progress-bar> to set the bar color using the variant property.

<i-progress>
    <i-progress-bar variant="primary" value="65" />
</i-progress>
<i-progress>
    <i-progress-bar variant="secondary" value="65" />
</i-progress>
<i-progress>
    <i-progress-bar variant="info" value="65" />
</i-progress>
<i-progress>
    <i-progress-bar variant="success" value="65" />
</i-progress>
<i-progress>
    <i-progress-bar variant="warning" value="65" />
</i-progress>
<i-progress>
    <i-progress-bar variant="danger" value="65" />
</i-progress>
<i-progress variant="light">
    <i-progress-bar variant="dark" value="65" />
</i-progress>
<i-progress variant="dark">
    <i-progress-bar variant="light" value="65" />
</i-progress>

Value

Inkline allows you to set a min and max modifier to calculate the progress based on a meaningful value. The new min will represent 0% and the max will represent 100%.

<i-progress>
    <i-progress-bar min="100" max="200" value="150" />
</i-progress>

Stacked Bars

You can add multiple <i-progress-bar> inside the <i-progress> component to stack them, adding them up to a 100% percentage.

<i-progress>
    <i-progress-bar variant="success" value="40" />
    <i-progress-bar variant="warning" value="20" />
    <i-progress-bar variant="danger" value="10" />
</i-progress>

Component API

Here you can find a list of the various customization options you can use for the progress components as props, as well as available slots.

size Sets the size of the progress component. String sm, md, lg md variant Sets the color variant of the progress component. String light, dark light default Slot for progresss's default content. value The current value based on which the progress percentage is calculated. Number 0 min The minimum / initial number based on which the progress percentage is calculated. Number 0 max The maximum / initial number based on which the progress percentage is calculated. Number 100 variant Sets the color variant of the button component. String primary, secondary, light, dark, success, danger, warning, info primary default Slot for progress bars's default content.

Sass Variables

Here you can find a list of the Sass variables you can use for the progress components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

$progress-background $color-gray-30 $progress-border-radius $border-radius $progress-height-base spacers('1/2') $progress-height size-map($progress-height-base, $sizes, $size-multipliers) $progress-variants ('monochrome')