Progress
Progress components are built with two components: a wrapper <IProgress> and at least one <IProgressBar>. You can set the width of a progress bar by setting its value property.
<template>
<IProgress>
<IProgressBar :value="65" />
</IProgress>
</template>
Inkline includes multiple progress styles. You set the wrapper <IProgress> background using the color property.
<template>
<IProgress color="light">
<IProgressBar :value="65" />
</IProgress>
<IProgress color="dark">
<IProgressBar :value="65" />
</IProgress>
</template>
More importantly, you can change the color of an <IProgressBar> using the color property.
<template>
<IProgress>
<IProgressBar color="primary" :value="65" />
</IProgress>
<IProgress>
<IProgressBar color="secondary" :value="65" />
</IProgress>
<IProgress>
<IProgressBar color="info" :value="65" />
</IProgress>
<IProgress>
<IProgressBar color="success" :value="65" />
</IProgress>
<IProgress>
<IProgressBar color="warning" :value="65" />
</IProgress>
<IProgress>
<IProgressBar color="danger" :value="65" />
</IProgress>
<IProgress color="light">
<IProgressBar color="dark" :value="65" />
</IProgress>
<IProgress color="dark">
<IProgressBar color="light" :value="65" />
</IProgress>
</template>
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.
<template>
<IProgress size="sm">
<IProgressBar :value="65" />
</IProgress>
<IProgress size="md">
<IProgressBar :value="65" />
</IProgress>
<IProgress size="lg">
<IProgressBar :value="65" />
</IProgress>
</template>
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%.
<template>
<IProgress :min="100" :max="200">
<IProgressBar :value="150" />
</IProgress>
</template>
You can add multiple <IProgressBar> inside the <IProgress> component to stack them, adding them up to 100%.
<template>
<IProgress>
<IProgressBar color="success" value="40" />
<IProgressBar color="warning" value="20" />
<IProgressBar color="danger" value="10" />
</IProgress>
</template>
IProgress
IProgressBar
IProgress
IProgressBar
IProgress
IProgressBar