mirror of
https://github.com/shoelace-style/shoelace.git
synced 2026-01-12 11:09:13 +00:00
8121faa1d4
* keep header styles with repositioned description text * `animated-image` move description to component * code style * `avatar` add summary from docs * `badge` add summary from docs * `breadcrumb` add summary from docs * `button` add summary from docs * lead sentence is now part of the header * `button-group` add summary from docs * `card` add summary from docs * `checkbox` add summary from docs * `color-picker` add summary from docs * `details` add summary from docs * `dialog` add summary from docs * `divider` add summary from docs * `drawer` add summary from docs * `dropdown` add summary from docs * `format-bytes` add summary from docs * `format-date` add summary from docs * `format-number` add summary from docs * `icon` add summary from docs * `icon-button` add summary from docs * `image-comparer` add summary from docs * `include` add summary from docs * `input` add summary from docs * `menu` add summary from docs * `menu-item` add summary from docs * `menu-label` add summary from docs * `popup` add summary from docs * `progressbar` add summary from docs * `progress-ring` add summary from docs * `radio` add summary from docs * `radio-button` add summary from docs * `range` add summary from docs * `rating` add summary from docs * `relative-time` add summary from docs * `select` add summary from docs * `skeleton` add summary from docs * `spinner` add summary from docs * `split-panel` add summary from docs * `switch` add summary from docs * `tab-group` add summary from docs * `tag` add summary from docs * `textarea` add summary from docs * `tooltip` add summary from docs * `visually-hidden` add summary from docs * `animation` add summary from docs * `breadcrumb-item` add summary from docs * `mutation-observer` add summary from docs * `radio-group` add summary from docs * `resize-observer` add summary from docs * `tab` add summary from docs * `tab-panel` add summary from docs * `tree` add summary from docs * `tree-item` add summary from docs * remove `title` for further usage of `Sl` classnames in docs * revert: use markdown parser for component summary
3.0 KiB
3.0 KiB
Progress Bar
[component-header:sl-progress-bar]
<sl-progress-bar value="50"></sl-progress-bar>
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlProgressBar value={50} />;
Examples
Labels
Use the label attribute to label the progress bar and tell assistive devices how to announce it.
<sl-progress-bar value="50" label="Upload progress"></sl-progress-bar>
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlProgressBar value="50" label="Upload progress" />;
Custom Height
Use the --height custom property to set the progress bar's height.
<sl-progress-bar value="50" style="--height: 6px;"></sl-progress-bar>
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlProgressBar value={50} style={{ '--height': '6px' }} />;
Showing Values
Use the default slot to show a value.
<sl-progress-bar value="50" class="progress-bar-values">50%</sl-progress-bar>
<br />
<sl-button circle><sl-icon name="dash" label="Decrease"></sl-icon></sl-button>
<sl-button circle><sl-icon name="plus" label="Increase"></sl-icon></sl-button>
<script>
const progressBar = document.querySelector('.progress-bar-values');
const subtractButton = progressBar.nextElementSibling.nextElementSibling;
const addButton = subtractButton.nextElementSibling;
addButton.addEventListener('click', () => {
const value = Math.min(100, progressBar.value + 10);
progressBar.value = value;
progressBar.textContent = `${value}%`;
});
subtractButton.addEventListener('click', () => {
const value = Math.max(0, progressBar.value - 10);
progressBar.value = value;
progressBar.textContent = `${value}%`;
});
</script>
import { useState } from 'react';
import { SlButton, SlIcon, SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => {
const [value, setValue] = useState(50);
function adjustValue(amount) {
let newValue = value + amount;
if (newValue < 0) newValue = 0;
if (newValue > 100) newValue = 100;
setValue(newValue);
}
return (
<>
<SlProgressBar value={value}>{value}%</SlProgressBar>
<br />
<SlButton circle onClick={() => adjustValue(-10)}>
<SlIcon name="dash" label="Decrease" />
</SlButton>
<SlButton circle onClick={() => adjustValue(10)}>
<SlIcon name="plus" label="Increase" />
</SlButton>
</>
);
};
Indeterminate
The indeterminate attribute can be used to inform the user that the operation is pending, but its status cannot currently be determined. In this state, value is ignored and the label, if present, will not be shown.
<sl-progress-bar indeterminate></sl-progress-bar>
import { SlProgressBar } from '@shoelace-style/shoelace/dist/react';
const App = () => <SlProgressBar indeterminate />;
[component-metadata:sl-progress-bar]