-
-
Notifications
You must be signed in to change notification settings - Fork 314
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
NEXT: hotfix to restore v3 navigation docs (#2821)
- Loading branch information
1 parent
8735a49
commit 2d348ef
Showing
3 changed files
with
159 additions
and
0 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
sites/next.skeleton.dev/src/content/docs/components/navigation/meta.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | ||
| --- |
79 changes: 79 additions & 0 deletions
79
sites/next.skeleton.dev/src/content/docs/components/navigation/react.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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} /> |
73 changes: 73 additions & 0 deletions
73
sites/next.skeleton.dev/src/content/docs/components/navigation/svelte.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |