mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-15 18:53:12 +00:00
create ripple documentation with the new template
This commit is contained in:
Marcos Moura
parent
9e5261b589
commit
b5ad249f9e
5 changed files with 283 additions and 79 deletions
|
|
@ -72,7 +72,7 @@
|
|||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/ripple">Ripple</router-link>
|
||||
<router-link exact to="/components/ink-ripple">Ink Ripple</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
|
|
|
|||
|
|
@ -63,16 +63,16 @@ Docs = new Docs({
|
|||
|
||||
handleSectionTheme(router.currentRoute);
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
let mainContent = document.querySelector('.main-content');
|
||||
router.afterEach((to) => {
|
||||
Vue.nextTick(() => {
|
||||
let mainContent = document.querySelector('.main-content');
|
||||
|
||||
if (mainContent) {
|
||||
mainContent.scrollTop = 0;
|
||||
}
|
||||
if (mainContent) {
|
||||
mainContent.scrollTop = 0;
|
||||
}
|
||||
|
||||
Docs.closeSidenav();
|
||||
Docs.closeSidenav();
|
||||
|
||||
handleSectionTheme(to);
|
||||
|
||||
next();
|
||||
handleSectionTheme(to);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
269
docs/src/pages/components/InkRipple.vue
Normal file
269
docs/src/pages/components/InkRipple.vue
Normal file
|
|
@ -0,0 +1,269 @@
|
|||
<template>
|
||||
<page-content page-title="Components - Ink Ripple">
|
||||
<docs-component>
|
||||
<div slot="description">
|
||||
<p>Ink ripples confirm user input by immediately expanding outward from the point of touch. The card lifts to indicate an active state.</p>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
<api-table name="md-ink-ripple">
|
||||
<md-table slot="properties">
|
||||
<md-table-header>
|
||||
<md-table-row>
|
||||
<md-table-head>Name</md-table-head>
|
||||
<md-table-head>Type</md-table-head>
|
||||
<md-table-head>Description</md-table-head>
|
||||
</md-table-row>
|
||||
</md-table-header>
|
||||
|
||||
<md-table-body>
|
||||
<md-table-row>
|
||||
<md-table-cell>md-disabled</md-table-cell>
|
||||
<md-table-cell><code>Boolean</code></md-table-cell>
|
||||
<md-table-cell>Disable the ripple effect on the parent element. Default <code>false</code></md-table-cell>
|
||||
</md-table-row>
|
||||
</md-table-body>
|
||||
</md-table>
|
||||
</api-table>
|
||||
</div>
|
||||
|
||||
<div slot="example">
|
||||
<example-box card-title="As a component">
|
||||
<div slot="demo">
|
||||
<div class="has-ripple">
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
This div has ripple effect
|
||||
</div>
|
||||
|
||||
<div class="has-ripple purple">
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
This div has ripple effect
|
||||
</div>
|
||||
|
||||
<div class="has-ripple blue">
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
This div has ripple effect
|
||||
</div>
|
||||
|
||||
<div class="has-ripple red">
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
This div has ripple effect
|
||||
</div>
|
||||
|
||||
<md-card class="card-ripple" md-with-hover>
|
||||
<md-card-media>
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div class="has-ripple">
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
This div has ripple effect
|
||||
</div>
|
||||
|
||||
<div class="has-ripple purple">
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
This div has ripple effect
|
||||
</div>
|
||||
|
||||
<div class="has-ripple blue">
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
This div has ripple effect
|
||||
</div>
|
||||
|
||||
<div class="has-ripple red">
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
This div has ripple effect
|
||||
</div>
|
||||
|
||||
<md-card class="card-ripple" md-with-hover>
|
||||
<md-card-media>
|
||||
<md-ink-ripple></md-ink-ripple>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.has-ripple {
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.purple {
|
||||
color: #9C27B0;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.card-ripple {
|
||||
width: 300px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="As a directive">
|
||||
<div slot="demo">
|
||||
<span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple purple" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple red" v-md-ink-ripple>This span has ripple effect</span>
|
||||
|
||||
<md-card class="card-ripple" md-with-hover>
|
||||
<md-card-media v-md-ink-ripple>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple purple" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple red" v-md-ink-ripple>This span has ripple effect</span>
|
||||
|
||||
<div>
|
||||
<md-avatar v-md-ink-ripple>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar v-md-ink-ripple class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
</div>
|
||||
|
||||
<md-card class="card-ripple" md-with-hover>
|
||||
<md-card-media v-md-ink-ripple>
|
||||
<img src="assets/card-image-1.jpg" alt="People">
|
||||
</md-card-media>
|
||||
|
||||
<md-card-actions>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>bookmark</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>share</md-icon>
|
||||
</md-button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.has-ripple {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.purple {
|
||||
color: #9C27B0;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.card-ripple {
|
||||
width: 300px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
</div>
|
||||
</docs-component>
|
||||
</page-content>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.has-ripple {
|
||||
margin-bottom: 16px;
|
||||
padding: 20px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.purple {
|
||||
color: #9C27B0;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.card-ripple {
|
||||
width: 300px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Ripple">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple green" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
|
||||
|
||||
<div>
|
||||
<md-avatar v-md-ink-ripple>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar v-md-ink-ripple class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<demo-example label="Default">
|
||||
<code-block lang="xml">
|
||||
<span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple green" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
|
||||
|
||||
<div>
|
||||
<md-avatar v-md-ink-ripple>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar v-md-ink-ripple class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
</div>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.has-ripple {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #4CAF50;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -18,7 +18,7 @@ import Input from './pages/components/Input';
|
|||
import List from './pages/components/List';
|
||||
import Menu from './pages/components/Menu';
|
||||
import Radio from './pages/components/Radio';
|
||||
import Ripple from './pages/components/Ripple';
|
||||
import InkRipple from './pages/components/InkRipple';
|
||||
import Select from './pages/components/Select';
|
||||
import Sidenav from './pages/components/Sidenav';
|
||||
import Subheader from './pages/components/Subheader';
|
||||
|
|
@ -127,9 +127,9 @@ const components = [
|
|||
component: Radio
|
||||
},
|
||||
{
|
||||
path: '/components/ripple',
|
||||
name: 'components:ripple',
|
||||
component: Ripple
|
||||
path: '/components/ink-ripple',
|
||||
name: 'components:ink-ripple',
|
||||
component: InkRipple
|
||||
},
|
||||
{
|
||||
path: '/components/select',
|
||||
|
|
|
|||
Loading…
Reference in a new issue