Svelte Best Tabs Component

A flexible and easy-to-use Svelte tabs component that allows you to create tabbed interfaces.

Installation

To install this plugin, simply run the following command:

npm install --save svelte-best-tabs-component

Usage

Import and use the Tabs and TabItem components in your Svelte project.

<script>
    import Tabs from "svelte-best-tabs-component/Tabs.svelte";
    import TabItem from "svelte-best-tabs-component/TabItem.svelte";
</script>

<Tabs>
    <TabItem title="General Data">
        Content here ...
    </TabItem>

    <TabItem title="Invoice">
        Another content here...
    </TabItem>
</Tabs>

API

Tabs

The Tabs component is a container for TabItem components. It manages the active tab state and provides context for the child components.

TabItem

The TabItem component represents an individual tab within the Tabs component.

Example

<script>
    import Tabs from "svelte-best-tabs-component/Tabs.svelte";
    import TabItem from "svelte-best-tabs-component/TabItem.svelte";
</script>

<Tabs activeTabValue="invoice">
    <TabItem title="General Data" value="general">
        Content for General Data tab...
    </TabItem>

    <TabItem title="Invoice" icon="ti ti-receipt" value="invoice">
        Content for Invoice tab...
    </TabItem>
</Tabs>

In this example, the Tabs component has an initial active tab value of "invoice", which means that the second TabItem with the title "Invoice" will be active initially. The tabs also include an optional icon property, which renders an icon inside the tab header.

License

This project is licensed under the MIT License.