mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-20 04:51:51 +00:00
Create subheaders
This commit is contained in:
Marcos Moura
parent
bf9d734738
commit
0c18cc3153
10 changed files with 228 additions and 15 deletions
|
|
@ -45,6 +45,7 @@
|
|||
<md-list-item v-link="list">List</md-list-item>
|
||||
<md-list-item v-link="ripple">Ripple</md-list-item>
|
||||
<md-list-item v-link="sidenav">Sidenav</md-list-item>
|
||||
<md-list-item v-link="subheader">Subheader</md-list-item>
|
||||
<md-list-item v-link="theme">Theme</md-list-item>
|
||||
<md-list-item v-link="toolbar">Toolbar</md-list-item>
|
||||
<md-list-item v-link="tooltip">Tooltip</md-list-item>
|
||||
|
|
|
|||
|
|
@ -108,6 +108,10 @@
|
|||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
> .md-subheader:first-of-type {
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-item {
|
||||
|
|
|
|||
8
src/components/mdSubheader/index.js
Normal file
8
src/components/mdSubheader/index.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import mdSubheader from './mdSubheader.vue';
|
||||
import mdSubheaderTheme from './mdSubheader.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-subheader', Vue.extend(mdSubheader));
|
||||
|
||||
window.VueMaterial.styles.push(mdSubheaderTheme);
|
||||
}
|
||||
12
src/components/mdSubheader/mdSubheader.scss
Normal file
12
src/components/mdSubheader/mdSubheader.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@import '../../core/variables.scss';
|
||||
|
||||
.md-subheader {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
color: rgba(#000, .54);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
17
src/components/mdSubheader/mdSubheader.theme
Normal file
17
src/components/mdSubheader/mdSubheader.theme
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.THEME_NAME {
|
||||
.md-subheader,
|
||||
&.md-subheader {
|
||||
|
||||
&.md-primary {
|
||||
color: PRIMARY-COLOR;
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
color: ACCENT-COLOR;
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
color: WARN-COLOR;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
src/components/mdSubheader/mdSubheader.vue
Normal file
7
src/components/mdSubheader/mdSubheader.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<div class="md-subheader">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdSubheader.scss"></style>
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<section>
|
||||
<h1 class="title">Lists</h1>
|
||||
<h1 class="md-title">Lists</h1>
|
||||
|
||||
<div>
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="title">Normal - Single Line</h2>
|
||||
<h2 class="md-title">Normal - Single Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="title">Dense - Single Line</h2>
|
||||
<h2 class="md-title">Dense - Single Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list class="md-dense">
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
<div v-md-theme="'indigo'">
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="title">Normal - Double Line</h2>
|
||||
<h2 class="md-title">Normal - Double Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list class="md-double-line">
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="title">Dense - Double Line</h2>
|
||||
<h2 class="md-title">Dense - Double Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list class="md-double-line md-dense">
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
<div class="custom-list" v-md-theme="'orange'">
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="title">Normal - Triple Line</h2>
|
||||
<h2 class="md-title">Normal - Triple Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list class="md-triple-line">
|
||||
|
|
@ -252,7 +252,7 @@
|
|||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
|
|
@ -270,7 +270,7 @@
|
|||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
|
|
@ -288,7 +288,7 @@
|
|||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
|
|
@ -306,14 +306,14 @@
|
|||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="title">Dense - Triple Line</h2>
|
||||
<h2 class="md-title">Dense - Triple Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list class="md-triple-line md-dense">
|
||||
|
|
@ -332,7 +332,7 @@
|
|||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
|
|
@ -350,7 +350,7 @@
|
|||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
|
|
@ -368,7 +368,7 @@
|
|||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
|
|
@ -386,7 +386,7 @@
|
|||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider></md-divider>
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
|
|
|||
157
src/docs/pages/Subheader.vue
Normal file
157
src/docs/pages/Subheader.vue
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<section>
|
||||
<h2 class="md-title">Sidenav</h2>
|
||||
|
||||
<div v-md-theme="'blue'">
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Normal - Single Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list>
|
||||
<md-subheader>Navigation</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>send</md-icon> <span>Outbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>error</md-icon> <span>Spam</span>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-subheader>Contacts</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Abbey Christansen</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Alex Nelson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Mary Johnson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'bottom-bar'">
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Normal - Triple Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list class="md-triple-line">
|
||||
<md-subheader>Today</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Ali Connors</span>
|
||||
<span>Brunch this weekend?</span>
|
||||
<p>I'll be in your neighborhood doing errands...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>me, Scott, Jennifer</span>
|
||||
<span>Summer BBQ</span>
|
||||
<p>Wish I could come, but I'm out of town ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Sandra Adams</span>
|
||||
<span>Oui oui</span>
|
||||
<p>Do you have Paris recommendations ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/8" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Trevor Hansen</span>
|
||||
<span>Order confirmation</span>
|
||||
<p>Thank you for your recent order from ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -12,6 +12,7 @@ import Input from './pages/Input';
|
|||
import Ripple from './pages/Ripple';
|
||||
import List from './pages/List';
|
||||
import Sidenav from './pages/Sidenav';
|
||||
import Subheader from './pages/Subheader';
|
||||
import Theme from './pages/Theme';
|
||||
import Toolbar from './pages/Toolbar';
|
||||
import Tooltip from './pages/Tooltip';
|
||||
|
|
@ -74,6 +75,10 @@ const routes = {
|
|||
name: 'sidenav',
|
||||
component: Sidenav
|
||||
},
|
||||
'/subheader': {
|
||||
name: 'subheader',
|
||||
component: Subheader
|
||||
},
|
||||
'/theme': {
|
||||
name: 'theme',
|
||||
component: Theme
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import MdBottomBar from './components/mdBottomBar';
|
|||
import MdToolbar from './components/mdToolbar';
|
||||
import MdTooltip from './components/mdTooltip';
|
||||
import MdSidenav from './components/mdSidenav';
|
||||
import MdSubheader from './components/mdSubheader';
|
||||
import MdAvatar from './components/mdAvatar';
|
||||
import MdList from './components/mdList';
|
||||
import MdWhiteframe from './components/mdWhiteframe';
|
||||
|
|
@ -31,6 +32,7 @@ let options = {
|
|||
MdInkRipple,
|
||||
MdList,
|
||||
MdSidenav,
|
||||
MdSubheader,
|
||||
MdToolbar,
|
||||
MdTooltip,
|
||||
MdWhiteframe,
|
||||
|
|
|
|||
Loading…
Reference in a new issue