-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
SnackbarExample.vue
39 lines (33 loc) · 1.27 KB
/
SnackbarExample.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
<form novalidate @submit.stop.prevent="showSnackbar = true">
<div>
<div for="snackbar-center" class="md-body-2">Position</div>
<md-radio v-model="position" id="snackbar-center" name="snackbar-horizontal" value="center">Centered</md-radio>
<md-radio v-model="position" id="snackbar-left" name="snackbar-horizontal" value="left">Left</md-radio>
</div>
<div>
<div class="md-body-2">Duration</div>
<md-switch v-model="isInfinity">Infinite</md-switch>
<md-field>
<label for="snackbar-duration">Miliseconds</label>
<md-input type="number" id="snackbar-duration" v-model.number="duration" :disabled="isInfinity"></md-input>
</md-field>
</div>
<md-button type="submit" class="md-primary md-raised">Open Snackbar</md-button>
<md-snackbar :md-position="position" :md-duration="isInfinity ? Infinity : duration" :md-active.sync="showSnackbar">
<span>Connection timeout. Showing limited messages!</span>
<md-button class="md-primary" @click="showSnackbar = false">Retry</md-button>
</md-snackbar>
</form>
</template>
<script>
export default {
name: 'SnackbarExample',
data: () => ({
showSnackbar: false,
position: 'center',
duration: 4000,
isInfinity: false
})
}
</script>