Создание вкладок в Svelte
Мне часто нужно написать какой-то код для отображения нескольких страниц в одном месте: представьте себе панель конфигурации с несколькими подпанелями. Естественный способ кодирования — использование вкладок.
В этом уроке я буду использовать Svelte для написания простого приложения с двумя вкладками, которое можно легко расширить для управления большим количеством вкладок.
Как обычно, давайте начнем новый проект Svelte с использованием Esbuild, следуя моему предыдущему посту Настройка проекта Svelte с помощью ESBuild.
Вы также можете следить за моей страницей на Github или в этом Svelte Repl.
В app.svelte будет вся логика для управления вкладками.
Мы добавим еще 2 файла для демонстрации вкладок:
t_identity.svelte: главная вкладка (отображается по умолчанию)t_password.svelte: еще одна вкладка, в которой будет повторно использоваться наш инструмент выбора пароля из моего последнего поста. Обучение: Создание пароля в Svelte.
Содержимое этих двух файлов не имеет отношения к этому руководству. Наше основное внимание будет сосредоточено на файле app.svelte:
<script>
import Identity from "./t_identity.svelte";
import Password from "./t_password.svelte";
let tabs = [
{ name: "Identity", comp: Identity },
{ name: "Password", comp: Password },
];
let cur = tabs[0];
</script>Мы начинаем раздел скриптов с импорта двух наших вкладок: Identity и Password.
Затем мы добавляем их в массив tabs. Мы используем простой объект с одним полем для имени и одним полем для хранения компонента. Поэтому, если мы хотим добавить больше вкладок, нам нужно всего лишь импортировать компонент и добавить его в tabs массива.
Наконец, мы объявляем переменную cur для хранения текущей выбранной вкладки: по умолчанию мы будем использовать первую в массиве. Таким образом, cur будет содержать объект с именем вкладки и отображаемым компонентом.
Хорошо, это все, что касается JavaScript-части, давайте посмотрим HTML-часть:
{#each tabs as tab}
<button class:selected={cur === tab} on:click={() => (cur = tab)}>
{tab.name}
</button>
{/each}
<main>
<svelte:component this={cur.comp} />
</main>Мы конструируем вкладки как кнопки с помощью цикла #each, перебирая вкладки массива, объявленные выше:
class:selected={cur === tab}повлияет на класс, выбранный для этой кнопки, если это текущая вкладка (cur), поэтому мы можем стилизовать выбранную вкладку.on:click={() => (cur = tab)}будет реагировать на нажатие кнопки изменением текущей выбранной вкладки.{tab.name}будет именем внутри кнопки.
Важный код находится в основном разделе с директивой svelte:comComponent.
Эта директива Svelte может отображать любой компонент, который мы ей даем. Мы используем тот факт, что мы сохранили текущую вкладку в переменной cur, точнее, компонент находится в поле comp нашего простого объекта.
Итак, <svelte:comComponent this={cur.comp} /> отобразит вкладку в этом месте.
Вот и все! Теперь у нас есть способ управлять вкладками с помощью Svelte, остальное — это просто стили CSS. Весь исходный код доступен на Github.
