142 lines
3.1 KiB
HTML
142 lines
3.1 KiB
HTML
<script context="module">
|
|
export async function preload({ params, query }) {
|
|
// const res = await this.fetch('')
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
import difference from 'lodash/difference'
|
|
import { Svelma as Components } from 'svelma-pro'
|
|
|
|
const formComponents = ['Input', 'Field', 'Switch'].sort() // Form
|
|
const omittedComponents = ['Tab', 'NavItem', 'NavLayout', 'CollapseItem'] // 子选项不显示
|
|
let components = ['Form', ...Object.keys(Components)].sort()
|
|
let newComponents = ['Timepicker', 'Datepicker', 'ColorPicker', 'Layout', 'Tip', 'Nav', 'Select', 'Slider', 'Stable', 'District'] // 新组件
|
|
components = difference(components, [...formComponents, ...omittedComponents])
|
|
|
|
const bulmaElements = ['Media', 'Table', 'Hero', 'Tiles'].sort()
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
width: 16rem;
|
|
padding: 3rem 1rem;
|
|
background: #f5f5f5;
|
|
overflow-y: auto;
|
|
max-height: calc(100vh - 2rem - 50px);
|
|
}
|
|
|
|
.sidebar > ul {
|
|
margin-bottom: 1.5em;
|
|
margin-top: 0;
|
|
|
|
ul {
|
|
margin-left: 1.5em;
|
|
}
|
|
}
|
|
|
|
.sidebar li {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-label {
|
|
margin-bottom: 0.5em;
|
|
color: #7a7a7a;
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.sidebar-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 50%;
|
|
background: #f5f5f5;
|
|
// min-height: calc(100vh - 4rem);
|
|
height: 100%;
|
|
z-index: -1;
|
|
width: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
@media screen and (max-width: 1087px) {
|
|
.sidebar {
|
|
order: 2;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
max-height: calc(100vh - 2rem - 50px);
|
|
}
|
|
}
|
|
|
|
.new {
|
|
color: #fff;
|
|
background: red;
|
|
font-size: 12px;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
transform: scale(0.8);
|
|
padding: 1px;
|
|
}
|
|
</style>
|
|
|
|
<div class="sidebar-bg" />
|
|
<aside class="sidebar">
|
|
<p class="sidebar-label">Installation</p>
|
|
<ul>
|
|
<li>
|
|
<a href="install">Start</a>
|
|
</li>
|
|
</ul>
|
|
<p class="sidebar-label">Bulma Elements</p>
|
|
<ul>
|
|
<li>
|
|
<a href="bulma/intro">Intro</a>
|
|
</li>
|
|
{#each bulmaElements as c}
|
|
<li>
|
|
<a href="bulma/{c.toLowerCase()}">{c}</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
<p class="sidebar-label">Svelma Components</p>
|
|
<ul>
|
|
{#each components as c}
|
|
<li>
|
|
{#if c === 'Form'}
|
|
<p>{c}</p>
|
|
<ul>
|
|
{#each formComponents as fc}
|
|
<li>
|
|
<a href="components/{fc.toLowerCase()}">
|
|
{fc}
|
|
{#if newComponents.includes(fc)}
|
|
<span class="new">New</span>
|
|
{/if}
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{:else}
|
|
<a href="components/{c.toLowerCase()}">
|
|
{c}
|
|
{#if newComponents.includes(c)}
|
|
<span class="new">New</span>
|
|
{/if}
|
|
</a>
|
|
{/if}
|
|
</li>
|
|
{/each}
|
|
<!-- <li>
|
|
<a href="/components/collapse">Collapse</a>
|
|
</li>
|
|
<li>
|
|
<a href="/components/icon">Icon</a>
|
|
</li> -->
|
|
</ul>
|
|
</aside>
|