Лента времени

Вертикальный поток событий. Семантичный список <ol>, хронологический порядок совпадает с порядком в документе.

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

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

1. 2026-09-01

   Экспертиза проекта
2. 2026-09-15

   Доставка первого этапа
3. 2026-09-25

   Приёмка в процессе

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

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">Экспертиза проекта</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">Доставка первого этапа</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">Приёмка в процессе</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">Экспертиза проекта</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">Доставка первого этапа</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">Приёмка в процессе</LhTimelineItem>
  </LhTimeline>
</template>

Попеременное расположение

alternate

1. Q1

   Планирование
2. Q2

   Разработка
3. Q3

   Стресс-тестирование

hollow делает узел полым кружком — обычно используется для незавершённых состояний.

Полые узлы

1. Q1

   Не начато
2. Q2

   В процессе
3. Q3

   Завершено

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

<template>
  <!-- Попеременное расположение -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">Планирование</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">Разработка</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">Стресс-тестирование</LhTimelineItem>
  </LhTimeline>
  <!-- Полые узлы -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>Не начато</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">В процессе</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">Завершено</LhTimelineItem>
  </LhTimeline>
</template>

<script>
export default {}
</script>

<template>
  <!-- Попеременное расположение -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">Планирование</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">Разработка</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">Стресс-тестирование</LhTimelineItem>
  </LhTimeline>
  <!-- Полые узлы -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>Не начато</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">В процессе</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">Завершено</LhTimelineItem>
  </LhTimeline>
</template>

API

LhTimeline Props

Свойство	Описание	Тип	Значение по умолчанию
mode	режим раскладки	"left" | "alternate"	'left'
sx	свойства быстрой раскладки sx	LhSxProps	—

LhTimelineItem Props

Свойство	Описание	Тип	Значение по умолчанию
timestamp	отметка времени	string	—
type	семантический тип узла	'primary' | 'success' | 'warning' | 'danger'	—
hollow	полый узел	boolean	false
sx	свойства быстрой раскладки sx	LhSxProps	—

Слоты: default — содержимое, timestamp — отметка времени, dot — пользовательский кружок.

Доступность

• Семантичный список <ol>: хронологический порядок совпадает с порядком в документе, программа чтения экрана зачитывает по порядку
• Кружки узлов — чистая декорация (aria-hidden="true"); слот пользовательского кружка также не попадает в дерево доступности

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

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

LhTimelineItemProps

/** props элемента (компонент Item) */
export interface LhTimelineItemProps {
  timestamp?: string
  type?: 'primary' | 'success' | 'warning' | 'danger'
  hollow?: boolean
  /** sx: свойства быстрой раскладки */
  sx?: LhSxProps
}

LhTimelineProps

/** props ленты времени */
export interface LhTimelineProps {
  /** режим раскладки (alternate — попеременное расположение) */
  mode?: LhTimelineMode
  /** sx: свойства быстрой раскладки */
  sx?: LhSxProps
}

LhTimelineMode _{(из @lh-ui/share/core/timeline)}

/** режим раскладки ленты времени */
export type LhTimelineMode = 'left' | 'alternate'