Default Layout
In this section, we'll look at the components that you can import and use when working with the default layout.
import { SocialLink } from '@svelteness/kit-docs';
<SocialLink type="discord" href="#" />
<SocialLink type="twitter" href="#" />
<SocialLink type="gitHub" href="#" />
import { TabbedLinks } from '@svelteness/kit-docs';
<TabbedLinks
links={[
{ title: 'First Tab', href: '/first-tab-link' },
{ title: 'Second Tab', href: '/second-tab-link' },
]}
/>
import { Button } from '@svelteness/kit-docs';
<Button>Action</Button>
<Button href="#">Action</Button>
<Button primary type="raised">Action</Button>
<Button type="raised">Action</Button>
<Button arrow="left">Previous</Button>
<Button arrow="right">Next</Button>
<script>
import { Select } from '@svelteness/kit-docs';
let options = ['Option A', 'Option B', 'Option C'];
let value = options[0];
</script>
<Select title="Title" {options} bind:value />
import { Chip } from '@svelteness/kit-docs';
<Chip>Title</Chip>
import { ColorSchemeToggle } from '@svelteness/kit-docs';
<ColorSchemeToggle />
<script>
import { Menu, MenuItem } from '@svelteness/kit-docs';
let menuItems = ['Item 1', 'Item 2', 'Item 3'];
let currentMenuItem = menuItems[0];
</script>
<Menu>
<span slot="button">Menu</span>
{#each menuItems as menuItem (menuItem)}
<MenuItem
selected={currentMenuItem === menuItem}
on:select={() => (currentMenuItem = menuItem)}
>
{menuItem}
</MenuItem>
{/each}
</Menu>
<script>
import { Popover } from '@svelteness/kit-docs';
</script>
<Popover overlay>
<span slot="button">Popover</span>
Content here.
</Popover>