Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-22 05:51:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create navigation items

Browse source
This commit is contained in:
Marcos Moura 2016-09-26 00:27:16 -03:00
parent 3f856302be
commit a1476461f0
28 changed files with 346 additions and 149 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

182
src/docs/App.vue
View file

@ -8,83 +8,133 @@
</router-link>
</md-toolbar>
<md-list>
<md-list-item>
<router-link to="/avatar">Avatar</router-link>
</md-list-item>
<div class="main-sidebar-links">
<md-list class="md-dense">
<md-list-item>
<router-link to="/">Introduction</router-link>
</md-list-item>
<md-list-item>
<router-link to="/bottom-bar">Bottom Bar</router-link>
</md-list-item>
<md-list-item>
<router-link to="/getting-started">Getting Started</router-link>
</md-list-item>
<md-list-item>
<router-link to="/button">Button</router-link>
</md-list-item>
<md-list-item>
<span>Components</span>
<md-list-item>
<router-link to="/button-toggle">Button Toggle</router-link>
</md-list-item>
<md-list-expand>
<md-list>
<md-list-item class="md-inset">
<router-link to="/components/avatar">Avatar</router-link>
</md-list-item>
<md-list-item>
<router-link to="/checkbox">Checkbox</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/bottom-bar">Bottom Bar</router-link>
</md-list-item>
<md-list-item>
<router-link to="/icon">Icon</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/button">Button</router-link>
</md-list-item>
<md-list-item>
<router-link to="/input">Input</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/button-toggle">Button Toggle</router-link>
</md-list-item>
<md-list-item>
<router-link to="/list">List</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/checkbox">Checkbox</router-link>
</md-list-item>
<md-list-item>
<router-link to="/radio">Radio</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/icon">Icon</router-link>
</md-list-item>
<md-list-item>
<router-link to="/ripple">Ripple</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/input">Input</router-link>
</md-list-item>
<md-list-item>
<router-link to="/select">Select</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/list">List</router-link>
</md-list-item>
<md-list-item>
<router-link to="/sidenav">Sidenav</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/radio">Radio</router-link>
</md-list-item>
<md-list-item>
<router-link to="/subheader">Subheader</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/ripple">Ripple</router-link>
</md-list-item>
<md-list-item>
<router-link to="/switch">Switch</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/select">Select</router-link>
</md-list-item>
<md-list-item>
<router-link to="/tabs">Tabs</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/sidenav">Sidenav</router-link>
</md-list-item>
<md-list-item>
<router-link to="/theme">Theme</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/subheader">Subheader</router-link>
</md-list-item>
<md-list-item>
<router-link to="/toolbar">Toolbar</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/switch">Switch</router-link>
</md-list-item>
<md-list-item>
<router-link to="/tooltip">Tooltip</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/tabs">Tabs</router-link>
</md-list-item>
<md-list-item>
<router-link to="/whiteframe">Whiteframe</router-link>
</md-list-item>
</md-list>
<md-list-item class="md-inset">
<router-link to="/components/toolbar">Toolbar</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/tooltip">Tooltip</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/components/whiteframe">Whiteframe</router-link>
</md-list-item>
</md-list>
</md-list-expand>
</md-list-item>
<md-list-item>
<span>UI Elements</span>
<md-list-expand>
<md-list>
<md-list-item class="md-inset">
<router-link to="/ui-elements/typography">Typography</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/ui-elements/grid-system">Grid System</router-link>
</md-list-item>
</md-list>
</md-list-expand>
</md-list-item>
<md-list-item>
<span>Themes</span>
<md-list-expand>
<md-list>
<md-list-item class="md-inset">
<router-link to="/themes/configuration">Configuration</router-link>
</md-list-item>
<md-list-item class="md-inset">
<router-link to="/themes/dynamic-themes">Dynamic Theme</router-link>
</md-list-item>
</md-list>
</md-list-expand>
</md-list-item>
<md-list-item>
<router-link to="/about">About</router-link>
</md-list-item>
</md-list>
</div>
</md-sidenav>
<md-toolbar class="main-header">
@ -186,7 +236,7 @@
}
.md-toolbar {
height: 172px;
min-height: 172px;
border-bottom: 1px solid rgba(#000, .12);
}
@ -208,9 +258,17 @@
}
}
.md-list {
.main-sidebar-links {
overflow: auto;
flex: 1;
.md-inset .md-list-item-container {
padding-left: 36px;
}
.md-list-item-container {
font-size: 14px;
font-weight: 500;
}
}
}

13
src/docs/pages/About.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<section>
<h1>About</h1>
</section>
</template>
<script>
export default {
mounted() {
this.$root.pageTitle = 'About';
}
};
</script>

13
src/docs/pages/GettingStarted.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<div class="page-content">
<h1>Getting Started</h1>
</div>
</template>
<script>
export default {
mounted() {
this.$root.pageTitle = 'Getting Started';
}
};
</script>

0
src/docs/pages/Home.vue → src/docs/pages/Introduction.vue
View file

3
src/docs/pages/Theme.vue
View file

@ -1,3 +0,0 @@
<template>
<div>Theme</div>
</template>

2
src/docs/pages/Avatar.vue → src/docs/pages/components/Avatar.vue
View file

@ -59,7 +59,7 @@
<script>
export default {
mounted() {
this.$root.pageTitle = 'Avatar';
this.$root.pageTitle = 'Components - Avatar';
}
};
</script>

2
src/docs/pages/BottomBar.vue → src/docs/pages/components/BottomBar.vue
View file

@ -141,7 +141,7 @@
}
},
mounted() {
this.$root.pageTitle = 'Bottom Bar';
this.$root.pageTitle = 'Components - Bottom Bar';
}
};
</script>

2
src/docs/pages/ButtonToggle.vue → src/docs/pages/components/ButtonToggle.vue
View file

@ -219,7 +219,7 @@
<script>
export default {
mounted() {
this.$root.pageTitle = 'Buttom Toggle';
this.$root.pageTitle = 'Components - Buttom Toggle';
}
};
</script>

2
src/docs/pages/Buttons.vue → src/docs/pages/components/Buttons.vue
View file

@ -163,7 +163,7 @@
}
},
mounted() {
this.$root.pageTitle = 'Button';
this.$root.pageTitle = 'Components - Button';
}
};
</script>

2
src/docs/pages/Checkbox.vue → src/docs/pages/components/Checkbox.vue
View file

@ -56,7 +56,7 @@
};
},
mounted() {
this.$root.pageTitle = 'Checkbox';
this.$root.pageTitle = 'Components - Checkbox';
}
};
</script>

2
src/docs/pages/Icon.vue → src/docs/pages/components/Icon.vue
View file

@ -29,7 +29,7 @@
<script>
export default {
mounted() {
this.$root.pageTitle = 'Icon';
this.$root.pageTitle = 'Components - Icon';
}
};
</script>

2
src/docs/pages/Input.vue → src/docs/pages/components/Input.vue
View file

@ -124,7 +124,7 @@
};
},
mounted() {
this.$root.pageTitle = 'Input';
this.$root.pageTitle = 'Components - Input';
}
};
</script>

4
src/docs/pages/List.vue → src/docs/pages/components/List.vue
View file

@ -630,7 +630,7 @@
</template>
<style lang="scss">
@import '../../core/stylesheets/variables.scss';
@import '../../../core/stylesheets/variables.scss';
.phone-viewport {
width: 360px;
@ -724,7 +724,7 @@
}
},
mounted() {
this.$root.pageTitle = 'List';
this.$root.pageTitle = 'Components - List';
}
};
</script>

2
src/docs/pages/Radio.vue → src/docs/pages/components/Radio.vue
View file

@ -85,7 +85,7 @@
};
},
mounted() {
this.$root.pageTitle = 'Radio';
this.$root.pageTitle = 'Components - Radio';
}
};
</script>

2
src/docs/pages/Ripple.vue → src/docs/pages/components/Ripple.vue
View file

@ -51,7 +51,7 @@
<script>
export default {
mounted() {
this.$root.pageTitle = 'Ripple';
this.$root.pageTitle = 'Components - Ripple';
}
};
</script>

2
src/docs/pages/Select.vue → src/docs/pages/components/Select.vue
View file

@ -104,7 +104,7 @@
};
},
mounted() {
this.$root.pageTitle = 'Select';
this.$root.pageTitle = 'Components - Select';
}
};
</script>

2
src/docs/pages/Sidenav.vue → src/docs/pages/components/Sidenav.vue
View file

@ -75,7 +75,7 @@
}
},
mounted() {
this.$root.pageTitle = 'Sidenav';
this.$root.pageTitle = 'Components - Sidenav';
}
};
</script>

2
src/docs/pages/Subheader.vue → src/docs/pages/components/Subheader.vue
View file

@ -157,7 +157,7 @@
<script>
export default {
mounted() {
this.$root.pageTitle = 'Subheader';
this.$root.pageTitle = 'Components - Subheader';
}
};
</script>

2
src/docs/pages/Switch.vue → src/docs/pages/components/Switch.vue
View file

@ -63,7 +63,7 @@
};
},
mounted() {
this.$root.pageTitle = 'Switch';
this.$root.pageTitle = 'Components - Switch';
}
};
</script>

2
src/docs/pages/Tabs.vue → src/docs/pages/components/Tabs.vue
View file

@ -217,7 +217,7 @@
};
},
mounted() {
this.$root.pageTitle = 'Tabs';
this.$root.pageTitle = 'Components - Tabs';
}
};
</script>

2
src/docs/pages/Toolbar.vue → src/docs/pages/components/Toolbar.vue
View file

@ -227,7 +227,7 @@
<script>
export default {
mounted() {
this.$root.pageTitle = 'Toolbar';
this.$root.pageTitle = 'Components - Toolbar';
}
};
</script>

2
src/docs/pages/Tooltip.vue → src/docs/pages/components/Tooltip.vue
View file

@ -74,7 +74,7 @@
<script>
export default {
mounted() {
this.$root.pageTitle = 'Tooltip';
this.$root.pageTitle = 'Components - Tooltip';
}
};
</script>

2
src/docs/pages/Whiteframe.vue → src/docs/pages/components/Whiteframe.vue
View file

@ -57,7 +57,7 @@
<script>
export default {
mounted() {
this.$root.pageTitle = 'Whiteframe';
this.$root.pageTitle = 'Components - Whiteframe';
}
};
</script>

13
src/docs/pages/themes/Configuration.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<div class="page-content">
<h1>Configuration</h1>
</div>
</template>
<script>
export default {
mounted() {
this.$root.pageTitle = 'Themes - Configuration';
}
};
</script>

13
src/docs/pages/themes/DynamicThemes.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<div class="page-content">
<h1>Dynamic Themes</h1>
</div>
</template>
<script>
export default {
mounted() {
this.$root.pageTitle = 'Themes - Dynamic Themes';
}
};
</script>

13
src/docs/pages/ui-elements/GridSystem.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<div class="page-content">
<h1>Grid System</h1>
</div>
</template>
<script>
export default {
mounted() {
this.$root.pageTitle = 'Themes - Grid System';
}
};
</script>

13
src/docs/pages/ui-elements/Typography.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<div class="page-content">
<h1>Typography</h1>
</div>
</template>
<script>
export default {
mounted() {
this.$root.pageTitle = 'Themes - Typography';
}
};
</script>

194
src/docs/routes.js
View file

@ -1,126 +1,190 @@
import Home from './pages/Home';
/* main */
import Introduction from './pages/Introduction';
import GettingStarted from './pages/GettingStarted';
import About from './pages/About';
import Error404 from './pages/Error';
import Avatar from './pages/Avatar';
import BottomBar from './pages/BottomBar';
import Buttons from './pages/Buttons';
import ButtonToggle from './pages/ButtonToggle';
import Checkbox from './pages/Checkbox';
import Icon from './pages/Icon';
import Input from './pages/Input';
import List from './pages/List';
import Radio from './pages/Radio';
import Ripple from './pages/Ripple';
import Select from './pages/Select';
import Sidenav from './pages/Sidenav';
import Subheader from './pages/Subheader';
import Switch from './pages/Switch';
import Tabs from './pages/Tabs';
import Theme from './pages/Theme';
import Toolbar from './pages/Toolbar';
import Tooltip from './pages/Tooltip';
import Whiteframe from './pages/Whiteframe';
const routes = [
/* Components */
import Avatar from './pages/components/Avatar';
import BottomBar from './pages/components/BottomBar';
import Buttons from './pages/components/Buttons';
import ButtonToggle from './pages/components/ButtonToggle';
import Checkbox from './pages/components/Checkbox';
import Icon from './pages/components/Icon';
import Input from './pages/components/Input';
import List from './pages/components/List';
import Radio from './pages/components/Radio';
import Ripple from './pages/components/Ripple';
import Select from './pages/components/Select';
import Sidenav from './pages/components/Sidenav';
import Subheader from './pages/components/Subheader';
import Switch from './pages/components/Switch';
import Tabs from './pages/components/Tabs';
import Toolbar from './pages/components/Toolbar';
import Tooltip from './pages/components/Tooltip';
import Whiteframe from './pages/components/Whiteframe';
/* UI Elements */
import Typography from './pages/ui-elements/Typography';
import GridSystem from './pages/ui-elements/GridSystem';
/* Themes */
import Configuration from './pages/themes/Configuration';
import DynamicThemes from './pages/themes/DynamicThemes';
const main = [
{
path: '/',
name: 'home',
component: Home
name: 'introduction',
component: Introduction
},
{
path: '/avatar',
name: 'avatar',
path: '/getting-started',
name: 'getting-started',
component: GettingStarted
},
{
path: '/about',
name: 'about',
component: About
}
];
const components = [
{
path: '/components',
name: 'components',
redirect: '/components/avatar'
},
{
path: '/components/avatar',
name: 'components:avatar',
component: Avatar
},
{
path: '/bottom-bar',
name: 'bottom-bar',
path: '/components/bottom-bar',
name: 'components:bottom-bar',
component: BottomBar
},
{
path: '/button',
name: 'button',
path: '/components/button',
name: 'components:button',
component: Buttons
},
{
path: '/button-toggle',
name: 'button-toggle',
path: '/components/button-toggle',
name: 'components:button-toggle',
component: ButtonToggle
},
{
path: '/checkbox',
name: 'checkbox',
path: '/components/checkbox',
name: 'components:checkbox',
component: Checkbox
},
{
path: '/icon',
name: 'icon',
path: '/components/icon',
name: 'components:icon',
component: Icon
},
{
path: '/input',
name: 'input',
path: '/components/input',
name: 'components:input',
component: Input
},
{
path: '/list',
name: 'list',
path: '/components/list',
name: 'components:list',
component: List
},
{
path: '/radio',
name: 'radio',
path: '/components/radio',
name: 'components:radio',
component: Radio
},
{
path: '/ripple',
name: 'ripple',
path: '/components/ripple',
name: 'components:ripple',
component: Ripple
},
{
path: '/select',
name: 'select',
path: '/components/select',
name: 'components:select',
component: Select
},
{
path: '/sidenav',
name: 'sidenav',
path: '/components/sidenav',
name: 'components:sidenav',
component: Sidenav
},
{
path: '/switch',
name: 'switch',
path: '/components/switch',
name: 'components:switch',
component: Switch
},
{
path: '/subheader',
name: 'subheader',
path: '/components/subheader',
name: 'components:subheader',
component: Subheader
},
{
path: '/tabs',
name: 'tabs',
path: '/components/tabs',
name: 'components:tabs',
component: Tabs
},
{
path: '/theme',
name: 'theme',
component: Theme
},
{
path: '/toolbar',
name: 'toolbar',
path: '/components/toolbar',
name: 'components:toolbar',
component: Toolbar
},
{
path: '/tooltip',
name: 'tooltip',
path: '/components/tooltip',
name: 'components:tooltip',
component: Tooltip
},
{
path: '/whiteframe',
name: 'whiteframe',
path: '/components/whiteframe',
name: 'components:whiteframe',
component: Whiteframe
}
];
const theme = [
{
path: '/themes',
name: 'themes',
redirect: '/themes/configuration'
},
{
path: '/themes/configuration',
name: 'themes:configuration',
component: Configuration
},
{
path: '/themes/dynamic-themes',
name: 'themes:dynamic-themes',
component: DynamicThemes
}
];
const uiElements = [
{
path: '/ui-elements',
name: 'ui-elements',
redirect: '/ui-elements/typography'
},
{
path: '/ui-elements/typography',
name: 'ui-elements:typography',
component: Typography
},
{
path: '/ui-elements/grid-system',
name: 'ui-elements:grid-system',
component: GridSystem
}
];
const error = [
{
path: '*',
name: 'error',
@ -128,4 +192,4 @@ const routes = [
}
];
export default routes;
export default [].concat(main, components, theme, uiElements, error);