Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NEXT: hotfix to restore v3 navigation docs #2821

Merged
merged 1 commit into from
Aug 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
title: Navigation
description: Provides navigation inerfaces for large, medium, and small screens.
srcSvelte: '/src/lib/components/Nav'
srcReact: '/src/lib/components/Nav'
showDocsUrl: true
---
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
---
layout: '@layouts/LayoutDoc.astro'
---

export const components = componentSet;

import { Page as Example } from '@examples/components/navigation/Example.tsx';
import ExampleRaw from '@examples/components/navigation/Example.tsx?raw';
import { Page as ExampleExpanded } from '@examples/components/navigation/ExampleExpanded.tsx';
import ExampleExpandedRaw from '@examples/components/navigation/ExampleExpanded.tsx?raw';
import { Page as ExampleBar } from '@examples/components/navigation/ExampleBar.tsx';
import ExampleBarRaw from '@examples/components/navigation/ExampleBar.tsx?raw';
import { Page as ExampleTiles } from '@examples/components/navigation/ExampleTiles.tsx';
import ExampleTilesRaw from '@examples/components/navigation/ExampleTiles.tsx?raw';

import { Navigation } from '@skeletonlabs/skeleton-react/schemas';

## Rail

- Recommended for medium to large screens.
- Ideal for horizontal screen layouts.
- Should be fixed to the left or right of the viewport.
- Supports 3-7 tiles.

<Preview client:load>
<Fragment slot="preview">
<Example client:load />
</Fragment>
<Fragment slot="code">
<Code code={ExampleRaw} lang="tsx" />
</Fragment>
</Preview>

### Expanded Mode

Apply the `expanded` property to enable expanded mode. Each tile will resize and used the expanded label.

<Preview client:load>
<Fragment slot="preview">
<ExampleExpanded client:load />
</Fragment>
<Fragment slot="code">
<Code code={ExampleExpandedRaw} lang="tsx" />
</Fragment>
</Preview>

## Bar

- Recommended for small screens.
- Ideal for vertical screen layouts.
- Should be fixed to the bottom of the viewport.
- Supports 3-5 tiles.
- Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).

<Preview client:load>
<Fragment slot="preview">
<ExampleBar client:load />
</Fragment>
<Fragment slot="code">
<Code code={ExampleBarRaw} lang="tsx" />
</Fragment>
</Preview>

## Tiles

Tiles are universal between Rails and Bars. They default to buttons, but will convert to anchors when an `href` is provided. When implementing `value` for selection, each item will reflect the active state automatically. If you wish to set this state manually, use the `selected` property.

<Preview client:load>
<Fragment slot="preview">
<ExampleTiles client:load />
</Fragment>
<Fragment slot="code">
<Code code={ExampleTilesRaw} lang="tsx" />
</Fragment>
</Preview>

## API Reference

<ApiTable types={['NavCommonProps', 'NavBarProps', 'NavRailProps', 'NavTileProps']} schema={Navigation} />
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
layout: '@layouts/LayoutDoc.astro'
---

export const components = componentSet;

import Example from '@examples/components/navigation/Example.svelte';
import ExampleRaw from '@examples/components/navigation/Example.svelte?raw';
import ExampleExpanded from '@examples/components/navigation/ExampleExpanded.svelte';
import ExampleExpandedRaw from '@examples/components/navigation/ExampleExpanded.svelte?raw';
import ExampleBar from '@examples/components/navigation/ExampleBar.svelte';
import ExampleBarRaw from '@examples/components/navigation/ExampleBar.svelte?raw';
import ExampleTiles from '@examples/components/navigation/ExampleTiles.svelte';
import ExampleTilesRaw from '@examples/components/navigation/ExampleTiles.svelte?raw';

## Rail

- Recommended for medium to large screens.
- Ideal for horizontal screen layouts.
- Should be fixed to the left or right of the viewport.
- Supports 3-7 tiles.

<Preview client:load>
<Fragment slot="preview">
<Example client:load />
</Fragment>
<Fragment slot="code">
<Code code={ExampleRaw} lang="svelte" />
</Fragment>
</Preview>

### Expanded Mode

Apply the `expanded` property to enable expanded mode. Each tile will resize and used the expanded label.

<Preview client:load>
<Fragment slot="preview">
<ExampleExpanded client:load />
</Fragment>
<Fragment slot="code">
<Code code={ExampleExpandedRaw} lang="svelte" />
</Fragment>
</Preview>

## Bar

- Recommended for small screens.
- Ideal for vertical screen layouts.
- Should be fixed to the bottom of the viewport.
- Supports 3-5 tiles.
- Consider progressive enhancement with the [Virtual Keyboard API](https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API).

<Preview client:load>
<Fragment slot="preview">
<ExampleBar client:load />
</Fragment>
<Fragment slot="code">
<Code code={ExampleBarRaw} lang="svelte" />
</Fragment>
</Preview>

## Tiles

Tiles are universal between Rails and Bars. They default to buttons, but will convert to anchors when an `href` is provided. When implementing `value` for selection, each item will reflect the active state automatically. If you wish to set this state manually, use the `selected` property.

<Preview client:load>
<Fragment slot="preview">
<ExampleTiles client:load />
</Fragment>
<Fragment slot="code">
<Code code={ExampleTilesRaw} lang="svelte" />
</Fragment>
</Preview>
Loading