/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/progress/LinearWithValueLabel.tsx
50 строк
1 KB
Silviu Alexandru Avram
[circularprogress][linearprogress] Improve accessibility (#48172)
15 апр 2026, 13:29
Не верифицирован
15 апр 2026, 13:29
529b113
Код
Авторство
О чём код?
import * as React from 'react'; import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; function LinearProgressWithLabelAndValue( props: LinearProgressProps & { value: number }, ) { const progressId = React.useId(); return ( <div> <Typography id={progressId} variant="body2" color="text.secondary"> Uploading photos… </Typography> <Box sx={{ display: 'flex', alignItems: 'center' }}> <Box sx={{ width: '100%', mr: 1 }}> <LinearProgress variant="determinate" aria-labelledby={progressId} {...props} /> </Box> <Box sx={{ minWidth: 35 }}> <Typography variant="body2" sx={{ color: 'text.secondary' }}> {`${Math.round(props.value)}%`} </Typography> </Box> </Box> </div> ); } export default function LinearWithValueLabel() { const [progress, setProgress] = React.useState(10); React.useEffect(() => { const timer = setInterval(() => { setProgress((prevProgress) => (prevProgress >= 100 ? 10 : prevProgress + 10)); }, 800); return () => { clearInterval(timer); }; }, []); return ( <Box sx={{ width: '100%' }}> <LinearProgressWithLabelAndValue value={progress} /> </Box> ); }