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

create snackbar

Browse source
This commit is contained in:
Marcos Moura 2016-12-26 18:10:18 -02:00
parent b54211140a
commit 2756dec820
4 changed files with 221 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/src/App.vue
View file

@ -332,6 +332,10 @@
background-color: #fff;
border: 1px solid rgba(#000, .12);
}
.api-table tr > td:first-child {
white-space: nowrap;
}
</style>
<script>

181
docs/src/pages/components/Snackbar.vue
View file

@ -7,59 +7,157 @@
<div slot="api">
<api-table name="md-snackbar">
<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-position</md-table-cell>
<md-table-cell><code>String</code></md-table-cell>
<md-table-cell>Specify which vertical and horizontal position the snackbar will take. Accepts <code>top left</code>|<code>top center</code>|<code>right center</code>|<code>bottom left</code>|<code>bottom center</code>|<code>bottom right</code>. Default: <code>bottom center</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-duration</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>The duration visibility in miliseconds. Default: <code>4000</code></md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
<md-table slot="events">
<md-table-header>
<md-table-row>
<md-table-head>Name</md-table-head>
<md-table-head>Value</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>open</md-table-cell>
<md-table-cell>None</md-table-cell>
<md-table-cell>Triggered when the snackbar open.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>close</md-table-cell>
<md-table-cell>None</md-table-cell>
<md-table-cell>Triggered when the snackbar closes.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
<md-table slot="methods">
<md-table-header>
<md-table-row>
<md-table-head>Name</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>open</md-table-cell>
<md-table-cell>Opens the Snackbar.</md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>close</md-table-cell>
<md-table-cell>Closes the Snackbar.</md-table-cell>
</md-table-row>
</md-table-body>
</md-table>
</api-table>
</div>
<div slot="example">
<example-box card-title="Default">
<div slot="demo">
<div>
<md-button class="md-primary md-raised" @click="$refs.snackbar1.open()">Open bottom center</md-button>
<md-button class="md-primary md-raised" @click="$refs.snackbar2.open()">Open bottom left</md-button>
<md-button class="md-primary md-raised" @click="$refs.snackbar3.open()">Open bottom right</md-button>
</div>
<form novalidate @submit.stop.prevent="open">
<div>
<div class="md-body-2">Vertical</div>
<md-radio v-model="vertical" id="top" name="snackbar-vertical" md-value="top">top</md-radio>
<md-radio v-model="vertical" id="bottom" name="snackbar-vertical" md-value="bottom">bottom</md-radio>
</div>
<div>
<md-button class="md-primary md-raised" @click="$refs.snackbar4.open()">Open top center</md-button>
<md-button class="md-primary md-raised" @click="$refs.snackbar5.open()">Open top left</md-button>
<md-button class="md-primary md-raised" @click="$refs.snackbar6.open()">Open top right</md-button>
</div>
<div>
<div class="md-body-2">Horizontal</div>
<md-radio v-model="horizontal" id="left" name="snackbar-horizontal" md-value="left">left</md-radio>
<md-radio v-model="horizontal" id="center" name="snackbar-horizontal" md-value="center">center</md-radio>
<md-radio v-model="horizontal" id="right" name="snackbar-horizontal" md-value="right">right</md-radio>
</div>
<md-snackbar md-position="bottom center" ref="snackbar1">
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar1.close()">Retry</md-button>
</md-snackbar>
<div>
<div class="md-body-2">Delay</div>
<md-snackbar md-position="bottom left" ref="snackbar2">
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar2.close()">Retry</md-button>
</md-snackbar>
<md-input-container>
<md-input type="number" v-model="duration"></md-input>
</md-input-container>
</div>
<md-snackbar md-position="bottom right" ref="snackbar3">
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar3.close()">Retry</md-button>
</md-snackbar>
<md-button type="submit" class="md-primary md-raised">Open Snackbar</md-button>
<md-snackbar md-position="top center" ref="snackbar4">
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar4.close()">Retry</md-button>
</md-snackbar>
<md-snackbar md-position="top left" ref="snackbar5">
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar5.close()">Retry</md-button>
</md-snackbar>
<md-snackbar md-position="top right" ref="snackbar6">
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar6.close()">Retry</md-button>
</md-snackbar>
<md-snackbar :md-position="vertical + ' ' + horizontal" ref="snackbar" :md-duration="duration">
<span>Connection timeout. Showing limited messages.</span>
<md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar.close()">Retry</md-button>
</md-snackbar>
</form>
</div>
<div slot="code">
<code-block lang="xml">
&lt;form novalidate @submit.stop.prevent=&quot;open&quot;&gt;
&lt;div&gt;
&lt;div class=&quot;md-body-2&quot;&gt;Vertical&lt;/div&gt;
&lt;md-radio v-model=&quot;vertical&quot; id=&quot;top&quot; name=&quot;snackbar-vertical&quot; md-value=&quot;top&quot;&gt;top&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;vertical&quot; id=&quot;bottom&quot; name=&quot;snackbar-vertical&quot; md-value=&quot;bottom&quot;&gt;bottom&lt;/md-radio&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div class=&quot;md-body-2&quot;&gt;Horizontal&lt;/div&gt;
&lt;md-radio v-model=&quot;horizontal&quot; id=&quot;left&quot; name=&quot;snackbar-horizontal&quot; md-value=&quot;left&quot;&gt;left&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;horizontal&quot; id=&quot;center&quot; name=&quot;snackbar-horizontal&quot; md-value=&quot;center&quot;&gt;center&lt;/md-radio&gt;
&lt;md-radio v-model=&quot;horizontal&quot; id=&quot;right&quot; name=&quot;snackbar-horizontal&quot; md-value=&quot;right&quot;&gt;right&lt;/md-radio&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div class=&quot;md-body-2&quot;&gt;Delay&lt;/div&gt;
&lt;md-input-container&gt;
&lt;md-input type=&quot;number&quot; v-model=&quot;duration&quot;&gt;&lt;/md-input&gt;
&lt;/md-input-container&gt;
&lt;/div&gt;
&lt;md-button type=&quot;submit&quot; class=&quot;md-primary md-raised&quot;&gt;Open Snackbar&lt;/md-button&gt;
&lt;md-snackbar :md-position=&quot;vertical + &#039; &#039; + horizontal&quot; ref=&quot;snackbar&quot; :md-duration=&quot;duration&quot;&gt;
&lt;span&gt;Connection timeout. Showing limited messages.&lt;/span&gt;
&lt;md-button class=&quot;md-accent&quot; md-theme=&quot;light-blue&quot; @click=&quot;$refs.snackbar.close()&quot;&gt;Retry&lt;/md-button&gt;
&lt;/md-snackbar&gt;
&lt;/form&gt;
</code-block>
<code-block lang="javacript">
export default {
data: () => ({
vertical: 'bottom',
horizontal: 'center',
duration: 4000
}),
methods: {
open() {
this.$refs.snackbar.open();
}
}
};
</code-block>
</div>
</example-box>
@ -74,6 +172,15 @@
<script>
export default {
data: () => ({
vertical: 'bottom',
horizontal: 'center',
duration: 4000
}),
methods: {
open() {
this.$refs.snackbar.open();
}
}
};
</script>

115
src/components/mdSnackbar/mdSnackbar.scss
View file

@ -2,83 +2,64 @@
@import '../../core/stylesheets/mixins.scss';
.md-snackbar {
width: auto;
min-width: 288px;
max-width: 568px;
min-height: 48px;
padding: 14px 24px;
display: flex;
position: fixed;
right: 0;
left: 0;
z-index: 120;
overflow: hidden;
border-radius: 2px;
background-color: #323232;
transition: $swift-ease-out;
color: #fff;
font-size: 14px;
@include layout-xsmall {
max-width: 100%;
border-radius: 0;
}
transition-property: margin-top, margin-bottom;
&.md-position-top-center,
&.md-position-bottom-center {
bottom: 0;
left: 50%;
transform: translate3D(-50%, 100%, 0);
justify-content: center;
}
&.md-position-top-right,
&.md-position-bottom-right {
bottom: 8px;
right: 8px;
transform: translate3D(0, calc(100% + 8px), 0);
margin-right: 8px;
justify-content: flex-end;
}
&.md-position-top-left,
&.md-position-bottom-left {
bottom: 8px;
left: 8px;
transform: translate3D(0, calc(100% + 8px), 0);
margin-left: 8px;
justify-content: flex-start;
}
&.md-position-top-right,
&.md-position-top-left,
&.md-position-top-center {
top: 0;
left: 50%;
transform: translate3D(-50%, -100%, 0);
margin-top: 8px;
}
&.md-position-top-right {
top: 8px;
right: 8px;
transform: translate3D(0, calc(-100% - 8px), 0);
&.md-position-bottom-right,
&.md-position-bottom-left {
margin-bottom: 8px;
}
&.md-position-top-center,
&.md-position-top-right,
&.md-position-top-left {
top: 8px;
left: 8px;
transform: translate3D(0, calc(-100% - 8px), 0);
top: 0;
.md-snackbar-container {
transform: translate3D(0, calc(-100% - 8px), 0);
}
}
&.md-position-bottom-center,
&.md-position-bottom-right,
&.md-position-bottom-left {
bottom: 0;
.md-snackbar-container {
transform: translate3D(0, calc(100% + 8px), 0);
}
}
&.md-active {
&.md-position-bottom-center {
transform: translate3D(-50%, 0, 0);
}
&.md-position-bottom-right {
transform: translate3D(0, 0, 0);
}
&.md-position-bottom-left {
transform: translate3D(0, 0, 0);
}
&.md-position-top-center {
transform: translate3D(-50%, 0, 0);
}
&.md-position-top-right {
transform: translate3D(0, 0, 0);
}
&.md-position-top-left {
.md-snackbar-container {
transform: translate3D(0, 0, 0);
}
@ -88,6 +69,10 @@
}
}
@include layout-xsmall {
margin: 0 !important;
}
.md-snackbar-content {
display: flex;
align-items: center;
@ -107,6 +92,26 @@
}
}
.md-snackbar-container {
width: auto;
min-width: 288px;
max-width: 568px;
min-height: 48px;
padding: 14px 24px;
overflow: hidden;
border-radius: 2px;
background-color: #323232;
transition: $swift-ease-out;
color: #fff;
font-size: 14px;
@include layout-xsmall {
width: 100%;
max-width: 100%;
border-radius: 0;
}
}
.md-has-toast-top-right {
.md-fab.md-fab-top-right {
transform: translate3D(0, 48px, 0);

21
src/components/mdSnackbar/mdSnackbar.vue
View file

@ -1,7 +1,9 @@
<template>
<div class="md-snackbar" :class="classes" :id="snackbarId">
<div class="md-snackbar-content">
<slot></slot>
<div class="md-snackbar" :class="[themeClass, classes]" :id="snackbarId">
<div class="md-snackbar-container" ref="container">
<div class="md-snackbar-content">
<slot></slot>
</div>
</div>
</div>
</template>
@ -11,6 +13,7 @@
<script>
import uniqueId from '../../core/utils/uniqueId';
import transitionEndEventName from '../../core/utils/transitionEndEventName';
import theme from '../../core/components/mdTheme/mixin';
import manager from './manager';
export default {
@ -25,6 +28,7 @@
default: 4000
}
},
mixins: [theme],
data() {
return {
snackbarId: this.id || 'snackbar-' + uniqueId(),
@ -53,16 +57,17 @@
manager.current = this;
this.rootElement.appendChild(this.snackbarElement);
window.getComputedStyle(this.snackbarElement).backgroundColor;
window.getComputedStyle(this.$refs.container).backgroundColor;
this.active = true;
this.$emit('open');
//this.closeTimeout = window.setTimeout(this.close, this.mdDuration);
this.closeTimeout = window.setTimeout(this.close, this.mdDuration);
},
close() {
const removeElement = () => {
this.snackbarElement.removeEventListener(transitionEndEventName, removeElement);
this.$refs.container.removeEventListener(transitionEndEventName, removeElement);
if (this.rootElement.contains(this.snackbarElement)) {
this.snackbarElement.querySelector('.md-ripple').classList.remove('md-active');
this.rootElement.removeChild(this.snackbarElement);
}
};
@ -70,8 +75,8 @@
manager.current = null;
this.active = false;
this.$emit('close');
this.snackbarElement.removeEventListener(transitionEndEventName, removeElement);
this.snackbarElement.addEventListener(transitionEndEventName, removeElement);
this.$refs.container.removeEventListener(transitionEndEventName, removeElement);
this.$refs.container.addEventListener(transitionEndEventName, removeElement);
window.clearTimeout(this.closeTimeout);
}
},