Svelte – svelte-tabs menu
Making a menu in svelte on the module svelte-tabs…
The menu can be built in different ways. svelte-tabs – one of the methods. It is suitable if you need ease of installation and do not need to change the names in the url when switching tabs.
Official guide:
npmjs.com/package/svelte-tabs
Installation:
npm install –save svelte-tabs
The code
import {Tabs, Tab, TabList, TabPanel} from ‘svelte-tabs’;
import Settings from ‘./portfolio/Settings.svelte’;
import AllOperations from “./portfolio/AllOperations.svelte”;
script>
<Tabs>
<TabList>
<Tab>All operationsTab>
<Tab>SettingsTab>
TabList>
<TabPanel>
<main>
<AllOperations/>
main>
TabPanel>
<TabPanel>
<main>
<Settings/>
main>
TabPanel>
Tabs>
<style lang=“scss”>
// Tab bar
:global(…svelte–tabs__tab–list) {
display: flex;
justify–content: space–evenly;
flex–wrap: wrap;
}
// Selected tab
:global(…svelte–tabs li.svelte–tabs__selected) {
}
style>
It will be like this: