/
kaws
/
ui-kit-ce
Обзор
Документация
Войти
/
kaws
/
ui-kit-ce
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/progress/examples/IndeterminateProgress.tsx
66 строк
2 KB
Denis Svyatovets
v1.10.0
27 мар 2024, 13:48
27 мар 2024, 13:48
c9029ae
Код
Авторство
О чём код?
import React from 'react' import { LinearProgress, useText, createUseStyles, clsx } from '@v-uik/base' const useStyles = createUseStyles((theme) => { return { label: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12, color: theme.sys.color.onBackgroundLow, }, element: { marginBottom: 20, '&:nth-child(3)': { marginBottom: 80, }, }, } }) export const IndeterminateProgress = (): JSX.Element => { const classList = useStyles() const textClassList = useText() const labelClassName = clsx(classList.label, textClassList.caption) return ( <> <div className={classList.element}> <span className={labelClassName}>Sm</span> <LinearProgress size="sm" /> </div> <div className={classList.element}> <span className={labelClassName}>Md</span> <LinearProgress size="md" /> </div> <div className={classList.element}> <span className={labelClassName}>Lg</span> <LinearProgress size="lg" /> </div> <div className={classList.element}> <span className={labelClassName}>Sm without track</span> <LinearProgress hideTrack size="sm" /> </div> <div className={classList.element}> <span className={labelClassName}>Md without track</span> <LinearProgress hideTrack size="md" /> </div> <div className={classList.element}> <span className={labelClassName}>Lg without track</span> <LinearProgress hideTrack size="lg" /> </div> </> ) }