Svelte — меню svelte-tabs

Admin Svelte

Делаем меню в 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>

Будет так:

Кстати, на сайте нет рекламы. У сайта нет цели самоокупаться, но если вам пригодилась информация можете задонатить мне на чашечку кофе в макдаке. Лайкнуть страницу или просто поблагодарить. Карма вам зачтется.

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte — меню svelte-tabs"