Шаги со статусами

Компоненты Steps и Step создают нумерованный список шагов с визуальными индикаторами статуса. Подходит для инструкций, процессов и прогресс-индикаторов.

Превью

Подготовить страницу

Страница создана и подключена к навигации.

Проверить оформление

Идёт проверка markdown-блоков.

Опубликовать

Следующий шаг после ревью.

Проверить зависимости

Обнаружены устаревшие пакеты.

<script lang="ts">
	import { cn } from '$lib/utils/cn';
	import type { Snippet } from 'svelte';

	let {
		class: className,
		children
	}: {
		class?: string;
		children?: Snippet;
	} = $props();
</script>

<div
	class={cn(
		'relative mb-12 ml-4 space-y-10 border-l border-border [counter-reset:step]',
		className
	)}
>
	{@render children?.()}
</div>

<script lang="ts">
	import { cn } from '$lib/utils/cn';
	import type { Snippet } from 'svelte';

	let {
		class: className,
		children
	}: {
		class?: string;
		children?: Snippet;
	} = $props();
</script>

<div
	class={cn(
		'relative mb-12 ml-4 space-y-10 border-l border-border [counter-reset:step]',
		className
	)}
>
	{@render children?.()}
</div>

Статусы

Статус	Иконка	Описание
`todo`	Номер шага	Ожидает выполнения
`active`	Часы (Clock)	В процессе выполнения
`done`	Галочка (Checkmark)	Завершён успешно
`warning`	Предупреждение (Warning)	Требует внимания

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

<script>
	import Steps from '$lib/components/docs/markdown/Steps.svelte';
	import Step from '$lib/components/docs/markdown/Step.svelte';
</script>

<Steps>
	<Step title="Первый шаг" status="done">
		Первый шаг выполнен.
	</Step>
	<Step title="Второй шаг" status="active">
		Этот шаг в процессе.
	</Step>
	<Step title="Третий шаг" status="todo">
		Ещё не начат.
	</Step>
</Steps>

<script>
	import Steps from '$lib/components/docs/markdown/Steps.svelte';
	import Step from '$lib/components/docs/markdown/Step.svelte';
</script>

<Steps>
	<Step title="Первый шаг" status="done">
		Первый шаг выполнен.
	</Step>
	<Step title="Второй шаг" status="active">
		Этот шаг в процессе.
	</Step>
	<Step title="Третий шаг" status="todo">
		Ещё не начат.
	</Step>
</Steps>

В markdown (.svx)

<Steps>
<Step title="Установить зависимости" status="done">
	`npm install` выполнен.
</Step>
<Step title="Запустить сервер" status="active">
	Запущен на localhost:5173.
</Step>
</Steps>

<Steps>
<Step title="Установить зависимости" status="done">
	`npm install` выполнен.
</Step>
<Step title="Запустить сервер" status="active">
	Запущен на localhost:5173.
</Step>
</Steps>

Пропсы Steps

Пропс	Тип	По умолчанию	Описание
`class`	`string`	`''`	Дополнительные классы
`children`	`Snippet`	—	Шаги `<Step>`

Пропсы Step

Пропс	Тип	По умолчанию	Описание
`title`	`string`	—	Заголовок шага
`status`	`'todo'` `'active'` `'done'` `'warning'`	`'todo'`	Статус
`class`	`string`	`''`	Дополнительные классы
`children`	`Snippet`	—	Содержимое шага