Tabs (tabbed content)

This tabs component is borrowed from this great component in the Svelte REPL: Tabs.

I have simply restyled that component to match the rest of the Fanny Pack UI components.

Example Usage

First Panel

This content is inside the first panel...

<script lang="ts">
  import { TabsContainer, TabBar, Tab, TabPanel } from "@fanny-pack-ui/svelte-kit";  
</script>

<TabsContainer
  border={true} 
  containerPadding="var(--tabs-default-container-padding)" 
  tabPadding="var(--tabs-default-tab-padding)"  
  tabFontSize="var(--tabs-default-tab-font-size)"
  panelPadding="var(--tabs-default-panel-padding)"
>
  <TabBar
    tabStyle="line" 
    marginBottom="var(--tabs-default-tab-bar-margin-bottom)"
  >
    <h2>First Panel</h2>
    <p>This content is inside the first panel...</p>
  </TabPanel>

  <TabPanel>
    <h2>Second Panel</h2>
    <p>This content is inside the second panel...</p>
  </TabPanel>

  <TabPanel>
    <h2>Third Panel</h2>
    <p>This content is inside the third panel...</p>
  </TabPanel>
</TabsContainer>

The order of the <Tab> and <TabPanel> components matters. The first <Tab> is associated with the first <TabPanel>, the second <Tab> is associated with the second <TabPanel>, and so on.

There are two different tab styles: fill and line. The default style is line.

This is how a line tab style looks without a border:

First Panel

This content is inside the first panel...

<TabsContainer border={false} containerPadding="20px">
  ...
</TabsContainer>

The next example shows how to set the tab style to fill with the tabStyle prop.

First Panel

This content is inside the first panel...

<script lang="ts">
  import { TabsContainer, TabBar, Tab, TabPanel } from "@fanny-pack-ui/svelte-kit";
</script>

<TabsContainer border={true} containerPadding="10px">
  <TabBar tabStyle="fill">
    <Tab>First Tab</Tab>
    <Tab>Second Tab</Tab>
    <Tab>Third Tab</Tab>
  </TabBar>

  <TabPanel>
    <h2>First Panel</h2>
    <p>This content is inside the first panel...</p>
  </TabPanel>

  <TabPanel>
    <h2>Second Panel</h2>
    <p>This content is inside the second panel...</p>
  </TabPanel>

  <TabPanel>
    <h2>Third Panel</h2>
    <p>This content is inside the third panel...</p>
  </TabPanel>
</TabsContainer>

This is how a fill tab style looks without a border:

First Panel

This content is inside the first panel...

<TabsContainer border={false} containerPadding="0">
  <TabBar tabStyle="fill">
    <Tab>First Tab</Tab>
    <Tab>Second Tab</Tab>
    <Tab>Third Tab</Tab>
  </TabBar>
  ...
</TabsContainer>

Props

TabsContainer

Prop name	Type	Possible values	Default value	Description
`border`	`boolean`	`true`, `false`	`true`	This prop will add a border around the tab bar and the tab panels.
`containerPadding`	`string`	Any CSS padding value or CSS size variable from your `theme.css` file.	`var(--tabs-default-container-padding)`	The value that is passed to this prop will be applied as the padding between the border and the tab contents. The default value can be set in the `theme.css` file.
`tabPadding`	`string`	Any CSS padding value or CSS size variable from your `theme.css` file.	`var(--tabs-default-tab-padding)`	The value that is passed to this prop will be applied as the padding for each tab. The default value can be set in the `theme.css` file.
`tabFontSize`	`string`	Any CSS font size value or CSS font size variable from your `theme.css` file.	`var(--tabs-default-tab-font-size)`	The value that is passed to this prop will set the font size for the tabs. The default value can be set in the `theme.css` file. Note that this will not change the font size inside the panels because you can change the font yourself depending on the elements that you pass in between the `<TabPanel>` and `</TabPanel>` components.
`panelPadding`	`string`	Any CSS padding value or CSS size variable from your `theme.css` file.	`var(--tabs-default-panel-padding)`	The value that is passed to this prop will be applied as the padding for each panel. The default value can be set in the `theme.css` file.

NOTE: You can also wrap your tab components in a <div> and apply your own border and padding values. The above props are just for convenience.