api
Components
Experimental! Components may change or be moved to a separate package.
Components are prefabricated parts that you can use or copy into your projects.
Carousel
@roxi/routify/components/Carousel.svelteThe Carousel component displays inline pages and automatically synchronizes
swipes and page changes.
<script>
import Carousel from '@roxi/routify/components/Carousel.svelte';
</script>
<Carousel>
<slot/>
</Carousel>- Supports touchscreen.
- Swiping to a page automatically sets it as the active page.
- Changing a page automatically scrolls the carousel to the new page.
Nav
@roxi/routify/components/Nav.svelteThe Nav component provides a basic unstyled navigation. Feel free to style it as you wish.
<script>
import Nav from '@roxi/routify/components/Nav.svelte';
</script>
<nav>
<Nav />
</nav>- Displays navigation links for the current node's children.
- Automatically sets the active class for the current page.
- Supports custom titles using
meta.title.
NavNested
@roxi/routify/components/NavNested.svelteThe NavNested component provides a basic unstyled nested navigation or sitemap. Feel free to style it as you wish.
<script>
import NavNested from '@roxi/routify/components/NavNested.svelte';
</script>
<nav>
<NavNested />
</nav>- Displays nested navigation links for the current node's children.
- Automatically sets the active class for the current page.
- Supports custom titles using
meta.title. - Recursively renders child nodes up to a specified depth.
ProgressBar
@roxi/routify/components/ProgressBar.svelteThe ProgressBar component displays a loading indicator when a route change is pending.
<script>
import ProgressBar from '@roxi/routify/components/ProgressBar.svelte';
</script>
<ProgressBar />- Displays a progress bar when a route change is pending.