115 lines
2.9 KiB
HTML
115 lines
2.9 KiB
HTML
<script context="module">
|
|
export async function preload(page, session) {
|
|
const res = await this.fetch(`components/nav.json`)
|
|
const res2 = await this.fetch(`components/navItem.json`)
|
|
const res3 = await this.fetch(`components/navLayout.json`)
|
|
const jsdoc = await res.json()
|
|
const jsdocItem = await res2.json()
|
|
const jsdocLayout = await res3.json()
|
|
|
|
return { jsdoc ,jsdocItem, jsdocLayout}
|
|
}
|
|
</script>
|
|
<script>
|
|
import { Nav, NavItem, NavLayout, Button } from 'svelma-pro'
|
|
import DocHeader from '../../components/DocHeader.svelte'
|
|
import Example from '../../components/Example.svelte'
|
|
|
|
import JSDoc from '../../components/JSDoc.svelte'
|
|
|
|
export let jsdoc
|
|
export let jsdocItem
|
|
export let jsdocLayout
|
|
</script>
|
|
|
|
<DocHeader title="Nav" subtitle="导航" />
|
|
|
|
<Example
|
|
code={`<script>
|
|
import { Nav, NavItem, NavLayout } from 'svelma-pro'
|
|
</script>
|
|
|
|
<Nav logoImg="/logo-192.png">
|
|
<NavLayout navPosition="center">
|
|
<NavItem>管理工具</NavItem>
|
|
<NavItem>开发资源</NavItem>
|
|
</NavLayout>
|
|
<NavLayout navPosition="end">
|
|
<NavItem>
|
|
<Button type="is-link">登录</Button>
|
|
</NavItem>
|
|
</NavLayout>
|
|
</Nav>
|
|
`}>
|
|
<div slot="preview" style="position: relative;">
|
|
<Nav logoImg="/logo-192.png">
|
|
<NavLayout navPosition="center">
|
|
<NavItem>管理工具</NavItem>
|
|
<NavItem>开发资源</NavItem>
|
|
</NavLayout>
|
|
<NavLayout navPosition="end">
|
|
<NavItem>
|
|
<Button type="is-link">登录</Button>
|
|
</NavItem>
|
|
</NavLayout>
|
|
</Nav>
|
|
</div>
|
|
</Example>
|
|
|
|
<hr class="is-medium" />
|
|
|
|
<p class="title is-4">下拉列表</p>
|
|
|
|
<Example
|
|
code={`<script>
|
|
import { Nav, NavItem, NavLayout } from 'smx-svelma'
|
|
</script>
|
|
|
|
<Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
|
|
<NavItem isHover={true}>
|
|
<span style="color:#fff">管理工具</span>
|
|
<div slot="hover">
|
|
<NavItem>开发资源</NavItem>
|
|
<NavItem>开发资源</NavItem>
|
|
<NavItem>开发资源</NavItem>
|
|
</div>
|
|
</NavItem>
|
|
<NavItem><span style="color:#fff">开发资源</span></NavItem>
|
|
</Nav>
|
|
`}>
|
|
<div slot="preview" style="position: relative;">
|
|
<Nav logoImg="/logo-192.png" background="rgba(0,0,0)">
|
|
<NavItem isHover={true}>
|
|
<span style="color:#fff">管理工具</span>
|
|
<div slot="hover">
|
|
<NavItem>开发资源</NavItem>
|
|
<NavItem>开发资源</NavItem>
|
|
<NavItem>开发资源</NavItem>
|
|
</div>
|
|
</NavItem>
|
|
<NavItem><span style="color:#fff">开发资源</span></NavItem>
|
|
</Nav>
|
|
</div>
|
|
</Example>
|
|
|
|
<hr class="is-medium" />
|
|
|
|
<h2 class="title is-4 is-spaced">API</h2>
|
|
|
|
<h3 class="subtitle">Nav</h3>
|
|
|
|
<JSDoc {jsdoc} showHeader={false}/>
|
|
|
|
<br>
|
|
<br>
|
|
|
|
<h3 class="subtitle is-spaced">NavItem</h3>
|
|
|
|
<JSDoc jsdoc={jsdocItem} showHeader={false}></JSDoc>
|
|
|
|
<br>
|
|
<br>
|
|
|
|
<h3 class="subtitle is-spaced">NavLayout</h3>
|
|
|
|
<JSDoc jsdoc={jsdocLayout} showHeader={false}></JSDoc> |