/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/progress/CircularWithValueLabel.js
61 строка
2 KB
Silviu Alexandru Avram
[circularprogress][linearprogress] Improve accessibility (#48172)
15 апр 2026, 13:29
Не верифицирован
15 апр 2026, 13:29
529b113
Код
Авторство
О чём код?
import * as React from 'react'; import PropTypes from 'prop-types'; import CircularProgress from '@mui/material/CircularProgress'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; function CircularProgressWithLabel(props) { return ( <Box sx={{ position: 'relative', display: 'inline-flex' }}> <CircularProgress variant="determinate" aria-label="Upload photos" {...props} /> <Box sx={{ top: 0, left: 0, bottom: 0, right: 0, position: 'absolute', display: 'flex', alignItems: 'center', justifyContent: 'center', }} > <Typography variant="caption" component="div" sx={{ color: 'text.secondary' }} > {`${Math.round(props.value)}%`} </Typography> </Box> </Box> ); } CircularProgressWithLabel.propTypes = { /** * The value of the progress indicator for the determinate variant. * Value between `min` and `max`. * @default props.min ?? 0 */ value: PropTypes.number.isRequired, }; export default function CircularWithValueLabel() { const [progress, setProgress] = React.useState(10); React.useEffect(() => { const timer = setInterval(() => { setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); }, 800); return () => { clearInterval(timer); }; }, []); return <CircularProgressWithLabel value={progress} />; }