Делаем меню в svelte на модуле svelte-tabs.
Меню можно построить разными способами. svelte-tabs – один из способов. Он подойдет, если нужна простота установки и не требуется менять названия в url при переключении вкладок.
Официальное руководство:
npmjs.com/package/svelte-tabs
Установка:
npm install --save svelte-tabs
Код
<script>
import {Tabs, Tab, TabList, TabPanel} from 'svelte-tabs';
import Settings from './portfolio/Settings.svelte';
import AllOperations from "./portfolio/AllOperations.svelte";
</script>
<Tabs>
<TabList>
<Tab>Все операции</Tab>
<Tab>Настройки</Tab>
</TabList>
<TabPanel>
<main>
<AllOperations/>
</main>
</TabPanel>
<TabPanel>
<main>
<Settings/>
</main>
</TabPanel>
</Tabs>
<style lang="scss">
// Панель вкладок
:global(.svelte-tabs__tab-list) {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
// Выбранная вкладка
:global(.svelte-tabs li.svelte-tabs__selected) {
}
</style>
import {Tabs, Tab, TabList, TabPanel} from 'svelte-tabs';
import Settings from './portfolio/Settings.svelte';
import AllOperations from "./portfolio/AllOperations.svelte";
</script>
<Tabs>
<TabList>
<Tab>Все операции</Tab>
<Tab>Настройки</Tab>
</TabList>
<TabPanel>
<main>
<AllOperations/>
</main>
</TabPanel>
<TabPanel>
<main>
<Settings/>
</main>
</TabPanel>
</Tabs>
<style lang="scss">
// Панель вкладок
:global(.svelte-tabs__tab-list) {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
// Выбранная вкладка
:global(.svelte-tabs li.svelte-tabs__selected) {
}
</style>
Будет так:
