@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
80 lines (78 loc) • 2.7 kB
HTML
<i-layout>
<i-layout-header>
<i-navbar color="light" fluid :collapse="false">
<i-navbar-brand to="/">
Dashboard
</i-navbar-brand>
<i-hamburger-menu v-model="open" color="light" animation="arrow-left" class="_lg:hidden" />
</i-navbar>
</i-layout-header>
<i-layout vertical class="_padding-top:1/2">
<i-sidebar v-model="open" color="light">
<i-nav vertical>
<i-nav-item to="/">
Home
</i-nav-item>
<i-nav-item to="/about">
Contact
</i-nav-item>
<i-nav-item to="/contact">
Contact
</i-nav-item>
</i-nav>
</i-sidebar>
<i-layout-content>
<i-container fluid>
<i-row>
<i-column>
<h1>
Light Sidebar
</h1>
<p>
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
</p>
</i-column>
</i-row>
</i-container>
</i-layout-content>
</i-layout>
</i-layout>
<i-layout>
<i-layout-header>
<i-navbar color="dark" fluid :collapse="false">
<i-navbar-brand to="/">
Dashboard
</i-navbar-brand>
<i-hamburger-menu v-model="open" color="dark" animation="arrow-left" class="_lg:hidden" />
</i-navbar>
</i-layout-header>
<i-layout vertical class="_padding-top:1/2">
<i-sidebar v-model="open" color="dark">
<i-nav vertical>
<i-nav-item to="/">
Home
</i-nav-item>
<i-nav-item to="/about">
Contact
</i-nav-item>
<i-nav-item to="/contact">
Contact
</i-nav-item>
</i-nav>
</i-sidebar>
<i-layout-content>
<i-container fluid>
<i-row>
<i-column>
<h1>
Dark Sidebar
</h1>
<p>
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
</p>
</i-column>
</i-row>
</i-container>
</i-layout-content>
</i-layout>
</i-layout>