mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 13:17:00 +04:00
256 lines
11 KiB
Plaintext
256 lines
11 KiB
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import CaptureScript from '@shared/components/CaptureScript.astro'
|
|
import ButtonList from '@ui/ButtonList.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import CardSubtitle from '@ui/CardSubtitle.astro'
|
|
import Progress from '@ui/Progress.astro'
|
|
import ProgressSteps from '@ui/ProgressSteps.astro'
|
|
import ProgressBg from '@ui/ProgressBg.astro'
|
|
import ProgressDescription from '@ui/ProgressDescription.astro'
|
|
import DocsLink from '@ui/DocsLink.astro'
|
|
---
|
|
|
|
<DefaultLayout title="Progress" pageMenu="base.progress">
|
|
<DocsLink slot="page-header-actions" path="/ui/components/progress" />
|
|
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Default</CardTitle>
|
|
<CardSubtitle>Track completion with a simple bar from empty to full.</CardSubtitle>
|
|
<div class="space-y">
|
|
<Progress value={0} />
|
|
<Progress value={20} />
|
|
<Progress value={40} />
|
|
<Progress value={100} />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>With value</CardTitle>
|
|
<CardSubtitle>Show the exact percentage as the <code>progress-bar</code> text inside a larger bar.</CardSubtitle>
|
|
<div class="space-y">
|
|
<Progress value={10} showValue size="lg" />
|
|
<Progress value={20} showValue size="lg" />
|
|
<Progress value={90} showValue size="lg" />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Colors</CardTitle>
|
|
<CardSubtitle>Match the bar color to the context with any theme color.</CardSubtitle>
|
|
<div class="space-y">
|
|
<Progress color="blue" value={20} />
|
|
<Progress color="green" value={40} />
|
|
<Progress color="yellow" value={60} />
|
|
<Progress color="red" value={80} />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Sizes</CardTitle>
|
|
<CardSubtitle>Scale a bar from <code>progress-sm</code> to <code>progress-xl</code>.</CardSubtitle>
|
|
<div class="space-y">
|
|
<Progress value={20} size="sm" />
|
|
<Progress value={40} />
|
|
<Progress value={60} size="lg" />
|
|
<Progress value={80} size="xl" />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Indeterminate</CardTitle>
|
|
<CardSubtitle>Animate a bar with no known end point with <code>progress-bar-indeterminate</code>.</CardSubtitle>
|
|
<div class="space-y">
|
|
<Progress indeterminate />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Multiple values</CardTitle>
|
|
<CardSubtitle>Stack several segments in one bar to compare parts of a whole.</CardSubtitle>
|
|
<div class="space-y">
|
|
<Progress values={[20, 30, 10]} colors={['blue', 'red', 'green']} />
|
|
<Progress values={[10, 20, 30, 40]} colors={['blue', 'red', 'green', 'yellow']} class="progress-separated" />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Striped</CardTitle>
|
|
<CardSubtitle>Add diagonal stripes with <code>progress-bar-striped</code> for a textured look.</CardSubtitle>
|
|
<div class="space-y">
|
|
<Progress color="blue" value={20} striped />
|
|
<Progress color="green" value={40} striped />
|
|
<Progress color="yellow" value={60} striped />
|
|
<Progress color="red" value={80} striped />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Animated</CardTitle>
|
|
<CardSubtitle>Combine <code>progress-bar-striped</code> with <code>progress-bar-animated</code> to keep the stripes moving.</CardSubtitle>
|
|
<div class="space-y">
|
|
<Progress value={20} striped animated />
|
|
<Progress value={40} color="green" striped animated />
|
|
<Progress value={60} color="yellow" striped animated />
|
|
<Progress value={80} color="red" striped animated />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle> Animated with JavaScript </CardTitle>
|
|
<CardSubtitle>Update the bar's width at runtime and watch it react.</CardSubtitle>
|
|
<div class="row align-items-center g-0">
|
|
<div class="col">
|
|
<Progress value={0} id="progress-animated" />
|
|
</div>
|
|
<div class="col-2 text-end" id="progress-animated-value">0%</div>
|
|
</div>
|
|
<ButtonList class="mt-3">
|
|
<button class="btn btn-sm" id="progress-animated-0">0%</button>
|
|
<button class="btn btn-sm" id="progress-animated-10">10%</button>
|
|
<button class="btn btn-sm" id="progress-animated-50">50%</button>
|
|
<button class="btn btn-sm" id="progress-animated-100">100%</button>
|
|
<button class="btn btn-sm ms-3" id="progress-animated-minus-10">-10%</button>
|
|
<button class="btn btn-sm" id="progress-animated-add-10">+10%</button>
|
|
</ButtonList>
|
|
<CaptureScript>
|
|
<!-- BEGIN SCRIPT OF ANIMATION -->
|
|
<script is:inline>
|
|
/*
|
|
This script is for animation of the last progress bar.
|
|
It increases the progress bar value by a random amount every 2 seconds until it reaches 100%.
|
|
When it reaches 100%, it changes the color to green and stops the animation.
|
|
|
|
This is just a demo script to show how to animate the progress bar. You can modify it as needed.
|
|
*/
|
|
const progress = document.getElementById('progress-animated')
|
|
let width = 0
|
|
|
|
const setWidth = (w) => {
|
|
width = Math.min(Math.max(w, 0), 100)
|
|
|
|
const bar = progress.querySelector('.progress-bar')
|
|
bar.style.width = `${width}%`
|
|
bar.setAttribute('aria-valuenow', `${width}`)
|
|
document.getElementById('progress-animated-value').innerText = `${width}%`
|
|
bar.classList.toggle('bg-green', width >= 100)
|
|
}
|
|
|
|
const interval = setInterval(() => {
|
|
setWidth(width + Math.ceil(Math.random() * 10))
|
|
if (width >= 100) clearInterval(interval)
|
|
}, 2000)
|
|
|
|
document.getElementById('progress-animated-0').addEventListener('click', () => setWidth(0))
|
|
document.getElementById('progress-animated-10').addEventListener('click', () => setWidth(10))
|
|
document.getElementById('progress-animated-50').addEventListener('click', () => setWidth(50))
|
|
document.getElementById('progress-animated-add-10').addEventListener('click', () => setWidth(width + 10))
|
|
document.getElementById('progress-animated-minus-10').addEventListener('click', () => setWidth(width - 10))
|
|
document.getElementById('progress-animated-100').addEventListener('click', () => setWidth(100))
|
|
</script>
|
|
<!-- END SCRIPT OF ANIMATION -->
|
|
</CaptureScript>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle> Steps Progress </CardTitle>
|
|
<CardSubtitle>Mark discrete steps instead of a continuous percentage.</CardSubtitle>
|
|
<div class="space-y">
|
|
<ProgressSteps count={3} />
|
|
<ProgressSteps count={5} active={4} />
|
|
<ProgressSteps count={10} color="red" />
|
|
<ProgressSteps count={8} color="green" active={8} />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle> Progress Background </CardTitle>
|
|
<CardSubtitle>Fill a row's background as the progress indicator itself.</CardSubtitle>
|
|
<div class="space-y">
|
|
<ProgressBg value={85} text="Poland" showValue />
|
|
<ProgressBg value={65} text="Germany" showValue />
|
|
<ProgressBg value={45} text="United States" showValue />
|
|
<ProgressBg value={25} text="France" showValue />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle> Progress Background Colors </CardTitle>
|
|
<CardSubtitle>Pair a light background fill with a matching accent color.</CardSubtitle>
|
|
<div class="space-y">
|
|
<ProgressBg value={75} text="Success" color="success" showValue />
|
|
<ProgressBg value={60} text="Warning" color="warning" showValue />
|
|
<ProgressBg value={40} text="Danger" color="danger" showValue />
|
|
<ProgressBg value={90} text="Info" color="info" showValue />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle> Progress Description </CardTitle>
|
|
<CardSubtitle>Pair a label and percentage with the bar for more context.</CardSubtitle>
|
|
<div class="space-y">
|
|
<ProgressDescription label="Project completion" value={85} color="green" />
|
|
<ProgressDescription label="Storage usage" description="2.4GB of 5GB" value={48} color="blue" />
|
|
<ProgressDescription label="Download progress" value={75} color="yellow" />
|
|
<ProgressDescription label="Skills assessment" description="HTML/CSS" value={92} color="red" />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
<div class="col">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle> Progress Description Sizes </CardTitle>
|
|
<CardSubtitle>Scale the labeled progress bar from <code>progress-sm</code> to <code>progress-xl</code>.</CardSubtitle>
|
|
<div class="space-y">
|
|
<ProgressDescription label="Small progress" value={60} size="sm" color="blue" />
|
|
<ProgressDescription label="Default progress" value={70} color="green" />
|
|
<ProgressDescription label="Large progress" value={80} size="lg" color="orange" />
|
|
<ProgressDescription label="Extra large" value={90} size="xl" color="purple" />
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|