Индикатор выполнения

LhProgress показывает ход выполнения задачи или степень заполнения; поддерживает линейную и круглую формы, настраиваемые цвет и текст.

Базовое использование

Линейный индикатор

60%

<script setup lang="ts">
</script>

<template>
  <LhProgress :percentage="60" />
</template>

<script>
export default {}
</script>

<template>
  <LhProgress :percentage="60" />
</template>

Состояния

normal / success / warning / exception, при достижении 100 автоматически success

100%

80%

40%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="100" />
    <LhProgress :percentage="80" status="warning" />
    <LhProgress :percentage="40" status="exception" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="100" />
    <LhProgress :percentage="80" status="warning" />
    <LhProgress :percentage="40" status="exception" />
  </div>
</template>

Пользовательские цвет и текст

color принимает строку или функцию, format задаёт текст

55%

70 баллов

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="55" color="#B8860B" />
    <LhProgress
      :percentage="70"
      :color="(p: number) => `hsl(${p * 1.2}, 60%, 45%)`"
      :format="(p: number) => `${p} баллов`"
    />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <LhProgress :percentage="55" color="#B8860B" />
    <LhProgress
      :percentage="70"
      :color="(p: number) => `hsl(${p * 1.2}, 60%, 45%)`"
      :format="(p: number) => `${p} баллов`"
    />
  </div>
</template>

Круглый индикатор

type равен circle

75%

100%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; align-items: center; gap: 24px">
    <LhProgress type="circle" :percentage="75" />
    <LhProgress type="circle" :percentage="100" :width="100" :stroke-width="8" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 24px">
    <LhProgress type="circle" :percentage="75" />
    <LhProgress type="circle" :percentage="100" :width="100" :stroke-width="8" />
  </div>
</template>

Без текста

showText равен false

<script setup lang="ts">
</script>

<template>
  <LhProgress :percentage="45" :show-text="false" />
</template>

<script>
export default {}
</script>

<template>
  <LhProgress :percentage="45" :show-text="false" />
</template>

API

Props

Свойство	Описание	Тип	По умолчанию
percentage	Процент выполнения; при выходе за [0, 100] значение автоматически клампится	number	0
type	Форма	"line" | "circle"	'line'
status	Состояние; при normal и достижении 100 автоматически становится success	"normal" | "success" | "warning" | "exception"	'normal'
color	Цвет индикатора: строка или функция, возвращающая цвет по проценту	string | ((percentage: number) => string)	—
strokeWidth	Толщина линии, px (для line — высота, для circle — толщина обводки)	number	6
width	Ширина полотна в круглом режиме, px	number	126
showText	Показывать ли текст	boolean	true
format	Пользовательское форматирование текста	(percentage: number) => string	—
sx	Свойства быстрой разметки sx	LhSxProps	—

Slots

Слот	Описание	Область видимости
text	Пользовательское текстовое содержимое	{ percentage }

Доступность

• Корневой элемент имеет role="progressbar" и aria-valuemin / aria-valuemax / aria-valuenow в соответствии с паттерном progressbar из WAI-ARIA
• aria-valuetext синхронизирован с видимым текстом: по умолчанию это проценты, а при переданном format объявляется отформатированный текст (например, «42 баллов»)
• Клампленное значение попадает в aria-valuenow, объявлений выхода за границы не бывает

Определения типов

Структуры TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/progress/src/types.ts и исходников @lh-ui/share/core/*; нажмите на каждый пункт, чтобы развернуть полное определение; описания свойств см. в таблице Props выше):

LhProgressProps

export interface LhProgressProps {
  /** Процент выполнения 0-100 (при выходе за границы значение автоматически клампится) */
  percentage: number
  type?: LhProgressType
  status?: LhProgressStatus
  /** Цвет индикатора: строка или функция, возвращающая цвет по проценту */
  color?: string | ((percentage: number) => string)
  /** Толщина линии, px (для line — высота, для circle — толщина обводки) */
  strokeWidth?: number
  /** Ширина полотна в круглом режиме, px */
  width?: number
  showText?: boolean
  /** Пользовательское форматирование текста */
  format?: (percentage: number) => string
  /** Свойства быстрой разметки sx */
  sx?: LhSxProps
}

LhProgressType _{(из @lh-ui/share/core/progress)}

export type LhProgressType = 'line' | 'circle'

LhProgressStatus _{(из @lh-ui/share/core/progress)}

export type LhProgressStatus = 'normal' | 'success' | 'warning' | 'exception'