Action Panel

Action Panel стоит над списком или таблицей: остров с рядом контролов — сортировка, вид, поиск, число на странице — и под ним ряд выбранных фильтров-тегов со ссылкой «сбросить всё». Панель задаёт остров, сетку ряда и ритм; набор контролов и тегов приходит сниппетами из продукта.

Статус: experimental · в системе с 2026-09 · интерактивность: conditional (по конфигурации)

Когда использовать

Список или таблица с сортировкой, поиском и фильтрами, которые видны как теги.

Не использовать:

Одна кнопка над таблицей — это Toolbar.
Много фильтров, которые применяют одним действием, — это Drawer.

Альтернативы:

toolbar — ряд кнопок без острова и тегов
drawer — панель фильтров с применением одним действием

Сортировка и фильтры

Остров с селектом сортировки и поиском, теги выбранных фильтров и сброс.

Поиск

GEO: US, CA

Формат: Push

<!--
  🟢

  Остров с селектом сортировки и полем поиска, ниже — теги выбранных
  фильтров и ссылка «сбросить всё».
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ActionPanel from "$lib/ui/ActionPanel.svelte";
import Input from "$lib/ui/Input.svelte";
import Select from "$lib/ui/Select.svelte";
import Tag from "$lib/ui/Tag.svelte";

let sort = $state("date");
let search = $state("");
let filters = $state(["GEO: US, CA", t("Формат: Push")]);
</script>

<div style="width: 560px;">
	<ActionPanel onreset={() => (filters = [])}>
		<Select
			label={t("Сортировка")}
			size="s"
			options={[
				{ value: "date", label: t("По дате") },
				{ value: "spend", label: t("По расходу") },
			]}
			bind:value={sort}
		/>
		<Input label={t("Поиск")} size="s" bind:value={search} />
		{#snippet tags()}
			{#each filters as filter (filter)}
				<Tag size="s" clearable onremove={() => (filters = filters.filter((item) => item !== filter))}>{filter}</Tag>
			{/each}
		{/snippet}
	</ActionPanel>
</div>