Skip to content
API 风格:

Пусто ​

Заполнитель при отсутствии данных. Контейнер имеет role="status": при появлении пустого состояния программа чтения с экрана автоматически его озвучивает.

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

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

Нет данных

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

<template>
  <LhEmpty />
</template>
vue
<script>
export default {}
</script>

<template>
  <LhEmpty />
</template>

Пользовательское описание ​

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

Результаты поиска отсутствуют

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

<template>
  <LhEmpty description="Результаты поиска отсутствуют" />
</template>
vue
<script>
export default {}
</script>

<template>
  <LhEmpty description="Результаты поиска отсутствуют" />
</template>

Пользовательское изображение ​

Пользовательское изображение

Заказов пока нет

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

<template>
  <LhEmpty image="/logo.svg" description="Заказов пока нет" />
</template>
vue
<script>
export default {}
</script>

<template>
  <LhEmpty image="/logo.svg" description="Заказов пока нет" />
</template>

С действиями ​

С действиями

Вы ещё ничего не добавили в избранное

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

<template>
  <LhEmpty description="Вы ещё ничего не добавили в избранное">
    <template #actions>
      <LhButton type="primary" size="small">Перейти к обзору</LhButton>
      <LhButton size="small">Обновить</LhButton>
    </template>
  </LhEmpty>
</template>
vue
<script>
export default {}
</script>

<template>
  <LhEmpty description="Вы ещё ничего не добавили в избранное">
    <template #actions>
      <LhButton type="primary" size="small">Перейти к обзору</LhButton>
      <LhButton size="small">Обновить</LhButton>
    </template>
  </LhEmpty>
</template>

Empty API ​

Props ​

СвойствоОписаниеТипПо умолчанию
descriptionТекст описания (если не передан, берётся empty.description из языкового пакета)string—
imageURL пользовательского изображения (замещает стандартную встроенную иллюстрацию)string—
sxСвойство быстрой компоновки sxLhSxProps—

Slots ​

СлотОписаниеСодержимое по умолчанию
defaultПользовательская визуальная область (замещает иллюстрацию)Стандартная иллюстрация в стиле тушь
descriptionПользовательское описаниеempty.description из языкового пакета
actionsОбласть действий—

Доступность ​

  • Контейнер role="status": пустое состояние озвучивается автоматически при появлении
  • Декоративное изображение с alt="" скрыто от программы чтения с экрана; семантику несёт текст описания

Типы ​

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

LhEmptyProps
ts
export interface LhEmptyProps {
  /** Текст описания пустого состояния (если не передан, берётся empty.description из языкового пакета) */
  description?: string
  /** URL пользовательского изображения (замещает стандартную встроенную иллюстрацию) */
  image?: string
  /** Свойство быстрой компоновки sx */
  sx?: LhSxProps
}

Красота традиций — основа кода