/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/progress/CircularWithValueLabel.tsx
53 строки
1 KB
Albert Yu
[docs][progress] Label all demo components (#48143)
01 апр 2026, 12:09
Не верифицирован
01 апр 2026, 12:09
124db37
Код
Авторство
О чём код?
import * as React from 'react'; import CircularProgress, { CircularProgressProps, } from '@mui/material/CircularProgress'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; function CircularProgressWithLabel( props: CircularProgressProps & { value: number }, ) { 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> ); } 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} />; }