Skip to content

Commit 2756dec

Browse files
marcosmouramarcosmoura
committed
create snackbar
1 parent b542111 commit 2756dec

File tree

4 files changed

+224
-103
lines changed

4 files changed

+224
-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/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" 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" 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" 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" 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" 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" 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>

‎src/components/mdSnackbar/mdSnackbar.scss‎

Lines changed: 57 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,83 +2,64 @@
22
@import '../../core/stylesheets/mixins.scss';
33

44
.md-snackbar {
5-
width: auto;
6-
min-width: 288px;
7-
max-width: 568px;
8-
min-height: 48px;
9-
padding: 14px 24px;
5+
display: flex;
106
position: fixed;
7+
right: 0;
8+
left: 0;
119
z-index: 120;
12-
overflow: hidden;
13-
border-radius: 2px;
14-
background-color: #323232;
1510
transition: $swift-ease-out;
16-
color: #fff;
17-
font-size: 14px;
18-
19-
@include layout-xsmall {
20-
max-width: 100%;
21-
border-radius: 0;
22-
}
11+
transition-property: margin-top, margin-bottom;
2312

13+
&.md-position-top-center,
2414
&.md-position-bottom-center {
25-
bottom: 0;
26-
left: 50%;
27-
transform: translate3D(-50%, 100%, 0);
15+
justify-content: center;
2816
}
2917

18+
&.md-position-top-right,
3019
&.md-position-bottom-right {
31-
bottom: 8px;
32-
right: 8px;
33-
transform: translate3D(0, calc(100% + 8px), 0);
20+
margin-right: 8px;
21+
justify-content: flex-end;
3422
}
3523

24+
&.md-position-top-left,
3625
&.md-position-bottom-left {
37-
bottom: 8px;
38-
left: 8px;
39-
transform: translate3D(0, calc(100% + 8px), 0);
26+
margin-left: 8px;
27+
justify-content: flex-start;
4028
}
4129

30+
&.md-position-top-right,
31+
&.md-position-top-left,
4232
&.md-position-top-center {
43-
top: 0;
44-
left: 50%;
45-
transform: translate3D(-50%, -100%, 0);
33+
margin-top: 8px;
4634
}
4735

48-
&.md-position-top-right {
49-
top: 8px;
50-
right: 8px;
51-
transform: translate3D(0, calc(-100% - 8px), 0);
36+
&.md-position-bottom-right,
37+
&.md-position-bottom-left {
38+
margin-bottom: 8px;
5239
}
5340

41+
&.md-position-top-center,
42+
&.md-position-top-right,
5443
&.md-position-top-left {
55-
top: 8px;
56-
left: 8px;
57-
transform: translate3D(0, calc(-100% - 8px), 0);
58-
}
59-
60-
&.md-active {
61-
&.md-position-bottom-center {
62-
transform: translate3D(-50%, 0, 0);
63-
}
64-
65-
&.md-position-bottom-right {
66-
transform: translate3D(0, 0, 0);
67-
}
44+
top: 0;
6845

69-
&.md-position-bottom-left {
70-
transform: translate3D(0, 0, 0);
46+
.md-snackbar-container {
47+
transform: translate3D(0, calc(-100% - 8px), 0);
7148
}
49+
}
7250

73-
&.md-position-top-center {
74-
transform: translate3D(-50%, 0, 0);
75-
}
51+
&.md-position-bottom-center,
52+
&.md-position-bottom-right,
53+
&.md-position-bottom-left {
54+
bottom: 0;
7655

77-
&.md-position-top-right {
78-
transform: translate3D(0, 0, 0);
56+
.md-snackbar-container {
57+
transform: translate3D(0, calc(100% + 8px), 0);
7958
}
59+
}
8060

81-
&.md-position-top-left {
61+
&.md-active {
62+
.md-snackbar-container {
8263
transform: translate3D(0, 0, 0);
8364
}
8465

@@ -88,6 +69,10 @@
8869
}
8970
}
9071

72+
@include layout-xsmall {
73+
margin: 0 !important;
74+
}
75+
9176
.md-snackbar-content {
9277
display: flex;
9378
align-items: center;
@@ -107,6 +92,26 @@
10792
}
10893
}
10994

95+
.md-snackbar-container {
96+
width: auto;
97+
min-width: 288px;
98+
max-width: 568px;
99+
min-height: 48px;
100+
padding: 14px 24px;
101+
overflow: hidden;
102+
border-radius: 2px;
103+
background-color: #323232;
104+
transition: $swift-ease-out;
105+
color: #fff;
106+
font-size: 14px;
107+
108+
@include layout-xsmall {
109+
width: 100%;
110+
max-width: 100%;
111+
border-radius: 0;
112+
}
113+
}
114+
110115
.md-has-toast-top-right {
111116
.md-fab.md-fab-top-right {
112117
transform: translate3D(0, 48px, 0);

0 commit comments

Comments
 (0)