Skip to content

Commit ab7789f

Browse files
marcosmouramarcosmoura
authored
Merge pull request #257 from marcosmoura/components/mdSnackbar
Components/md snackbar
2 parents e4b1fee + dac3abc commit ab7789f

File tree

8 files changed

+276
-103
lines changed

8 files changed

+276
-103
lines changed

‎docs/src/App.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -332,6 +332,10 @@
332332
background-color: #fff;
333333
border: 1px solid rgba(#000, .12);
334334
}
335+
336+
.api-table tr > td:first-child {
337+
white-space: nowrap;
338+
}
335339
</style>
336340

337341
<script>

‎docs/src/components/ExampleBox.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
</button> -->
2424
</md-card>
2525

26-
<form action="http://codepen.io/pen/define" method="POST" target="_blank" v-if="codeBlocks.length" ref="form">
26+
<!-- <form action="http://codepen.io/pen/define" method="POST" target="_blank" v-if="codeBlocks.length" ref="form">
2727
<input type="hidden" name="data" :value="codeString">
2828
</form>
2929
@@ -44,7 +44,7 @@ var App = new Vue({
4444
&lt;div id=&quot;app&quot;&gt;
4545
### TEMPLATE ###
4646
&lt;/div&gt;
47-
</pre>
47+
</pre> -->
4848
</div>
4949
</template>
5050

‎docs/src/pages/components/Snackbar.vue‎

Lines changed: 150 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,59 +7,157 @@
77

88
<div slot="api">
99
<api-table name="md-snackbar">
10-
10+
<md-table slot="properties">
11+
<md-table-header>
12+
<md-table-row>
13+
<md-table-head>Name</md-table-head>
14+
<md-table-head>Type</md-table-head>
15+
<md-table-head>Description</md-table-head>
16+
</md-table-row>
17+
</md-table-header>
18+
19+
<md-table-body>
20+
<md-table-row>
21+
<md-table-cell>md-position</md-table-cell>
22+
<md-table-cell><code>String</code></md-table-cell>
23+
<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>
24+
</md-table-row>
25+
26+
<md-table-row>
27+
<md-table-cell>md-duration</md-table-cell>
28+
<md-table-cell><code>Number</code></md-table-cell>
29+
<md-table-cell>The duration visibility in miliseconds. Default: <code>4000</code></md-table-cell>
30+
</md-table-row>
31+
</md-table-body>
32+
</md-table>
33+
34+
<md-table slot="events">
35+
<md-table-header>
36+
<md-table-row>
37+
<md-table-head>Name</md-table-head>
38+
<md-table-head>Value</md-table-head>
39+
<md-table-head>Description</md-table-head>
40+
</md-table-row>
41+
</md-table-header>
42+
43+
<md-table-body>
44+
<md-table-row>
45+
<md-table-cell>open</md-table-cell>
46+
<md-table-cell>None</md-table-cell>
47+
<md-table-cell>Triggered when the snackbar open.</md-table-cell>
48+
</md-table-row>
49+
50+
<md-table-row>
51+
<md-table-cell>close</md-table-cell>
52+
<md-table-cell>None</md-table-cell>
53+
<md-table-cell>Triggered when the snackbar closes.</md-table-cell>
54+
</md-table-row>
55+
</md-table-body>
56+
</md-table>
57+
58+
<md-table slot="methods">
59+
<md-table-header>
60+
<md-table-row>
61+
<md-table-head>Name</md-table-head>
62+
<md-table-head>Description</md-table-head>
63+
</md-table-row>
64+
</md-table-header>
65+
66+
<md-table-body>
67+
<md-table-row>
68+
<md-table-cell>open</md-table-cell>
69+
<md-table-cell>Opens the Snackbar.</md-table-cell>
70+
</md-table-row>
71+
72+
<md-table-row>
73+
<md-table-cell>close</md-table-cell>
74+
<md-table-cell>Closes the Snackbar.</md-table-cell>
75+
</md-table-row>
76+
</md-table-body>
77+
</md-table>
1178
</api-table>
1279
</div>
1380

1481
<div slot="example">
1582
<example-box card-title="Default">
1683
<div slot="demo">
17-
<div>
18-
<md-button class="md-primary md-raised" @click="$refs.snackbar1.open()">Open bottom center</md-button>
19-
<md-button class="md-primary md-raised" @click="$refs.snackbar2.open()">Open bottom left</md-button>
20-
<md-button class="md-primary md-raised" @click="$refs.snackbar3.open()">Open bottom right</md-button>
21-
</div>
22-
23-
<div>
24-
<md-button class="md-primary md-raised" @click="$refs.snackbar4.open()">Open top center</md-button>
25-
<md-button class="md-primary md-raised" @click="$refs.snackbar5.open()">Open top left</md-button>
26-
<md-button class="md-primary md-raised" @click="$refs.snackbar6.open()">Open top right</md-button>
27-
</div>
28-
29-
<md-snackbar md-position="bottom center" ref="snackbar1">
30-
<span>Connection timeout. Showing limited messages.</span>
31-
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar1.close()">Retry</md-button>
32-
</md-snackbar>
33-
34-
<md-snackbar md-position="bottom left" ref="snackbar2">
35-
<span>Connection timeout. Showing limited messages.</span>
36-
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar2.close()">Retry</md-button>
37-
</md-snackbar>
38-
39-
<md-snackbar md-position="bottom right" ref="snackbar3">
40-
<span>Connection timeout. Showing limited messages.</span>
41-
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar3.close()">Retry</md-button>
42-
</md-snackbar>
43-
44-
<md-snackbar md-position="top center" ref="snackbar4">
45-
<span>Connection timeout. Showing limited messages.</span>
46-
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar4.close()">Retry</md-button>
47-
</md-snackbar>
48-
49-
<md-snackbar md-position="top left" ref="snackbar5">
50-
<span>Connection timeout. Showing limited messages.</span>
51-
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar5.close()">Retry</md-button>
52-
</md-snackbar>
53-
54-
<md-snackbar md-position="top right" ref="snackbar6">
55-
<span>Connection timeout. Showing limited messages.</span>
56-
<md-button class="md-accent" v-md-theme="'light-blue'" @click="$refs.snackbar6.close()">Retry</md-button>
57-
</md-snackbar>
84+
<form novalidate @submit.stop.prevent="open">
85+
<div>
86+
<div class="md-body-2">Vertical</div>
87+
<md-radio v-model="vertical" id="top" name="snackbar-vertical" md-value="top">top</md-radio>
88+
<md-radio v-model="vertical" id="bottom" name="snackbar-vertical" md-value="bottom">bottom</md-radio>
89+
</div>
90+
91+
<div>
92+
<div class="md-body-2">Horizontal</div>
93+
<md-radio v-model="horizontal" id="left" name="snackbar-horizontal" md-value="left">left</md-radio>
94+
<md-radio v-model="horizontal" id="center" name="snackbar-horizontal" md-value="center">center</md-radio>
95+
<md-radio v-model="horizontal" id="right" name="snackbar-horizontal" md-value="right">right</md-radio>
96+
</div>
97+
98+
<div>
99+
<div class="md-body-2">Delay</div>
100+
101+
<md-input-container>
102+
<md-input type="number" v-model="duration"></md-input>
103+
</md-input-container>
104+
</div>
105+
106+
<md-button type="submit" class="md-primary md-raised">Open Snackbar</md-button>
107+
108+
<md-snackbar :md-position="vertical + ' ' + horizontal" ref="snackbar" :md-duration="duration">
109+
<span>Connection timeout. Showing limited messages.</span>
110+
<md-button class="md-accent" md-theme="light-blue" @click="$refs.snackbar.close()">Retry</md-button>
111+
</md-snackbar>
112+
</form>
58113
</div>
59114

60115
<div slot="code">
61116
<code-block lang="xml">
117+
&lt;form novalidate @submit.stop.prevent=&quot;open&quot;&gt;
118+
&lt;div&gt;
119+
&lt;div class=&quot;md-body-2&quot;&gt;Vertical&lt;/div&gt;
120+
&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;
121+
&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;
122+
&lt;/div&gt;
123+
124+
&lt;div&gt;
125+
&lt;div class=&quot;md-body-2&quot;&gt;Horizontal&lt;/div&gt;
126+
&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;
127+
&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;
128+
&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;
129+
&lt;/div&gt;
130+
131+
&lt;div&gt;
132+
&lt;div class=&quot;md-body-2&quot;&gt;Delay&lt;/div&gt;
133+
134+
&lt;md-input-container&gt;
135+
&lt;md-input type=&quot;number&quot; v-model=&quot;duration&quot;&gt;&lt;/md-input&gt;
136+
&lt;/md-input-container&gt;
137+
&lt;/div&gt;
138+
139+
&lt;md-button type=&quot;submit&quot; class=&quot;md-primary md-raised&quot;&gt;Open Snackbar&lt;/md-button&gt;
140+
141+
&lt;md-snackbar :md-position=&quot;vertical + &#039; &#039; + horizontal&quot; ref=&quot;snackbar&quot; :md-duration=&quot;duration&quot;&gt;
142+
&lt;span&gt;Connection timeout. Showing limited messages.&lt;/span&gt;
143+
&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;
144+
&lt;/md-snackbar&gt;
145+
&lt;/form&gt;
146+
</code-block>
62147

148+
<code-block lang="javacript">
149+
export default {
150+
data: () => ({
151+
vertical: 'bottom',
152+
horizontal: 'center',
153+
duration: 4000
154+
}),
155+
methods: {
156+
open() {
157+
this.$refs.snackbar.open();
158+
}
159+
}
160+
};
63161
</code-block>
64162
</div>
65163
</example-box>
@@ -74,6 +172,15 @@
74172

75173
<script>
76174
export default {
77-
175+
data: () => ({
176+
vertical: 'bottom',
177+
horizontal: 'center',
178+
duration: 4000
179+
}),
180+
methods: {
181+
open() {
182+
this.$refs.snackbar.open();
183+
}
184+
}
78185
};
79186
</script>

‎docs/src/routes.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Menu = (resolve) => require(['./pages/components/Menu'], resolve);
2121
const Radio = (resolve) => require(['./pages/components/Radio'], resolve);
2222
const Select = (resolve) => require(['./pages/components/Select'], resolve);
2323
const Sidenav = (resolve) => require(['./pages/components/Sidenav'], resolve);
24-
/*const Snackbar = (resolve) => require(['./pages/components/Snackbar'], resolve);*/
24+
const Snackbar = (resolve) => require(['./pages/components/Snackbar'], resolve);
2525
const Spinner = (resolve) => require(['./pages/components/Spinner'], resolve);
2626
const Subheader = (resolve) => require(['./pages/components/Subheader'], resolve);
2727
const Switch = (resolve) => require(['./pages/components/Switch'], resolve);
@@ -143,11 +143,11 @@ const components = [
143143
name: 'components:sidenav',
144144
component: Sidenav
145145
},
146-
/* {
146+
{
147147
path: '/components/snackbar',
148148
name: 'components:snackbar',
149149
component: Snackbar
150-
}, */
150+
},
151151
{
152152
path: '/components/spinner',
153153
name: 'components:spinner',

‎src/components/mdSnackbar/manager.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue';
2+
3+
const manager = new Vue({
4+
data() {
5+
return {
6+
current: null
7+
};
8+
}
9+
});
10+
11+
export default manager;

0 commit comments

Comments
 (0)