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

Add example code for md-avatar

Browse source
This commit is contained in:
Marcos Moura 2016-08-15 23:34:05 -03:00
parent 5cac33b2c3
commit c2f1c321cd
9 changed files with 181 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
index.html
View file

@ -19,44 +19,8 @@
</head>
<body>
<div class="container" id="app" v-cloak>
<md-whiteframe md-elevation="3dp" class="main-header">
<md-toolbar>
<md-button class="md-icon-button" @click="toggleSidenav">
<md-icon>menu</md-icon>
</md-button>
<h2 class="md-title">Vue Material</h2>
</md-toolbar>
</md-whiteframe>
<md-sidenav class="main-sidebar md-left md-fixed" :md-visible.sync="showSidenav">
<md-list>
<md-list-item v-link="avatar">Avatar</md-list-item>
<md-list-item v-link="bottom-bar">Bottom Bar</md-list-item>
<md-list-item v-link="button">Button</md-list-item>
<md-list-item v-link="button-toggle">Button Toggle</md-list-item>
<md-list-item v-link="checkbox">Checkbox</md-list-item>
<md-list-item v-link="divider">Divider</md-list-item>
<md-list-item v-link="icon">Icon</md-list-item>
<md-list-item v-link="input">Input</md-list-item>
<md-list-item v-link="list">List</md-list-item>
<md-list-item v-link="radio">Radio</md-list-item>
<md-list-item v-link="ripple">Ripple</md-list-item>
<md-list-item v-link="select">Select</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="switch">Switch</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>
<md-list-item v-link="whiteframe">Whiteframe</md-list-item>
</md-list>
</md-sidenav>
<div class="main-content">
<router-view></router-view>
</div>
<div id="app">
<app></app>
</div>
</body>
</html>

1
package.json
View file

@ -16,6 +16,7 @@
},
"dependencies": {
"autosize": "^3.0.17",
"highlight.js": "^9.6.0",
"scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim",
"vue-touch": "^1.1.0"
},

2
src/components/mdSelect/mdSelect.scss
View file

@ -5,7 +5,6 @@
min-width: 128px;
height: 32px;
position: relative;
color: rgba(#212121, .87);
&:focus {
outline: none;
@ -83,6 +82,7 @@
transition: opacity .25s $swift-ease-in-timing-function,
top .25s $swift-ease-in-timing-function,
transform 0s .25s $swift-ease-in-timing-function;
color: rgba(#212121, .87);
> * {
opacity: 0;

1
src/core/stylesheets/core.theme
View file

@ -4,6 +4,5 @@ body.THEME_NAME {
:not(input):not(textarea)::selection {
background: ACCENT-COLOR;
color: ACCENT-CONTRAST !important;
}
}

60
src/docs/App.vue Normal file
View file

@ -0,0 +1,60 @@
<template>
<div class="container" v-cloak>
<md-whiteframe md-elevation="3dp" class="main-header">
<md-toolbar>
<md-button class="md-icon-button" @click="toggleSidenav">
<md-icon>menu</md-icon>
</md-button>
<h2 class="md-title">Vue Material</h2>
</md-toolbar>
</md-whiteframe>
<md-sidenav class="main-sidebar md-left md-fixed" :md-visible.sync="showSidenav">
<md-list>
<md-list-item v-link="avatar">Avatar</md-list-item>
<md-list-item v-link="bottom-bar">Bottom Bar</md-list-item>
<md-list-item v-link="button">Button</md-list-item>
<md-list-item v-link="button-toggle">Button Toggle</md-list-item>
<md-list-item v-link="checkbox">Checkbox</md-list-item>
<md-list-item v-link="divider">Divider</md-list-item>
<md-list-item v-link="icon">Icon</md-list-item>
<md-list-item v-link="input">Input</md-list-item>
<md-list-item v-link="list">List</md-list-item>
<md-list-item v-link="radio">Radio</md-list-item>
<md-list-item v-link="ripple">Ripple</md-list-item>
<md-list-item v-link="select">Select</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="switch">Switch</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>
<md-list-item v-link="whiteframe">Whiteframe</md-list-item>
</md-list>
</md-sidenav>
<div class="main-content">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
showSidenav: false
};
},
methods: {
toggleSidenav() {
this.showSidenav = !this.showSidenav;
},
hideSidenav() {
this.showSidenav = false;
}
}
};
</script>

93
src/docs/core/components/code-example.vue Normal file
View file

@ -0,0 +1,93 @@
<template>
<div class="code-example">
<pre class="code" :class="syntax"><slot></slot></pre>
</div>
</template>
<style src="../../../../node_modules/highlight.js/styles/ocean.css"></style>
<style lang="scss">
.code-example {
.code {
padding: 0 16px;
background-color: #2d3234;
color: #cdd3de;
font-family: Hack, 'Operator Mono', Inconsolata, Monaco, Menlo, 'Fira Code', Consolas;
font-size: 15px;
line-height: 1.4em;
}
::selection {
background: lighten(#3f4345, 40%) !important;
}
.hljs-keyword {
color: #69c;
}
.hljs-built_in {
color: #fac863;
}
.hljs-string {
color: #99c794;
}
.hljs-literal,
.hljs-number {
color: #f99157;
}
.hljs-selector-class {
color: #c594c5;
}
.hljs-attribute {
color: #fac863;
}
.hljs-attribute {
color: #fac863;
}
.hljs-variable {
color: #f07178;
}
.hljs-selector-tag {
color: #f07178;
}
.html {
.hljs-tag {
color: inherit;
}
.hljs-name {
color: #f07178;
}
.hljs-attr {
color: #c594c5;
}
}
}
</style>
<script>
import highlight from 'highlight.js';
export default {
props: {
syntax: String
},
ready() {
highlight.configure({
tabReplace: ' ',
languages: ['html', 'javascript', 'scss']
});
highlight.highlightBlock(this.$el.querySelector('.code'));
}
};
</script>

4
src/docs/core/index.js Normal file
View file

@ -0,0 +1,4 @@
import Vue from 'vue';
import CodeExample from './components/code-example';
Vue.component('code-example', CodeExample);

21
src/docs/index.js
View file

@ -10,29 +10,16 @@ Vue.use(VueRouter);
/* Configs */
import './stylesheets/docs.scss';
import './config.js';
import './core';
import routes from './routes.js';
import app from './App.vue';
let App = Vue.component('app', app);
let router = new VueRouter({
hashbang: false
});
let App = Vue.component('app', {
name: 'app',
data() {
return {
showSidenav: false
};
},
methods: {
toggleSidenav() {
this.showSidenav = !this.showSidenav;
},
hideSidenav() {
this.showSidenav = false;
}
}
});
router.afterEach(function() {
router.app.hideSidenav();
document.querySelector('.main-content').scrollTop = 0;

16
src/docs/pages/Avatar.vue
View file

@ -12,4 +12,20 @@
<md-icon>home</md-icon>
</md-avatar>
</section>
<section>
<code-example>
&lt;md-avatar&gt;
&lt;img src=&quot;https://placeimg.com/40/40/people/1&quot; alt=&quot;People&quot;&gt;
&lt;/md-avatar&gt;
&lt;md-avatar class=&quot;md-large&quot;&gt;
&lt;img src=&quot;https://placeimg.com/64/64/people/2&quot; alt=&quot;People&quot;&gt;
&lt;/md-avatar&gt;
&lt;md-avatar class=&quot;md-avatar-icon&quot;&gt;
&lt;md-icon&gt;home&lt;/md-icon&gt;
&lt;/md-avatar&gt;
</code-example>
</section>
</template>