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

<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>All operationsTab>
<Tab>SettingsTab>
TabList>

<TabPanel>
<main>
<AllOperations/>
main>
TabPanel>

<TabPanel>
<main>
<Settings/>
main>
TabPanel>
Tabs>

<style lang=“scss”>
// Tab bar
:global(sveltetabs__tablist) {
display: flex;
justifycontent: spaceevenly;
flexwrap: wrap;
}

// Selected tab
:global(sveltetabs li.sveltetabs__selected) {

}
style>

It will be like this:

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *