vue-easy-toast
Version:
A toast plugin for vue/vue2
146 lines (144 loc) • 4.94 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Easy Toast Example</title>
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script> -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css">
<script src="../dist/vue-easy-toast.min.js"></script>
<!--<script src="../dist/vue-easy-toast-lite.min.js"></script>-->
<!--<link rel="stylesheet" href="../dist/vue-easy-toast.css">-->
<style media="screen">
body {
height: 100%;
}
#app {
max-width: 800px;
margin: 40px;
}
.input, .textarea {
max-width: 300px;
min-width: initial;
}
</style>
</head>
<body>
<style id="cust-style">
.et-wrapper.my-class {
background-color: red;
}
</style>
<div id="app">
<label class="label">Duration (ms)</label>
<p class="control">
<input class="input" type="number" v-model="duration">
</p>
<p class="control">
<label class="label">Default Transitions</label>
<label class="radio">
<input type="radio" name="defaultTransition" v-model="defaultTransition" value="fade">
Fade
</label>
<label class="radio">
<input type="radio" name="defaultTransition" v-model="defaultTransition" value="slide-up">
Slide up
</label>
<label class="radio">
<input type="radio" name="defaultTransition" v-model="defaultTransition" value="slide-down">
Slide down
</label>
<label class="radio">
<input type="radio" name="defaultTransition" v-model="defaultTransition" value="slide-left">
Slide left
</label>
<label class="radio">
<input type="radio" name="defaultTransition" v-model="defaultTransition" value="slide-right">
Slide right
</label>
<label class="radio">
<input type="radio" name="defaultTransition" v-model="defaultTransition" value="">
None
</label>
</p>
<p class="control">
<label class="label">Default Style</label>
<label class="radio">
<input type="radio" name="defalutClass" v-model="defaultClass" value="et-alert">
"et-alert"
</label>
<label class="radio">
<input type="radio" name="defalutClass" v-model="defaultClass" value="et-warn">
"et-warn"
</label>
<label class="radio">
<input type="radio" name="defalutClass" v-model="defaultClass" value="et-info">
"et-info"
</label>
<label class="radio">
<input type="radio" name="defalutClass" v-model="defaultClass" value="">
None
</label>
</p>
<label class="label">Custom Style</label>
<p class="control">
<textarea class="textarea" v-model="customClass"></textarea>
</p>
<label class="label">Mode</label>
<p class="control has-icon has-icon-right">
<label class="radio">
<input type="radio" name="mode" v-model="mode" value="override">
Override
</label>
<label class="radio">
<input type="radio" name="mode" v-model="mode" value="queue">
Queue
</label>
</p>
<label class="label">Closeable</label>
<p class="control has-icon has-icon-right">
<label class="radio">
<input type="radio" name="closeable" v-model="closeable" value="false">
Default
</label>
<label class="radio">
<input type="radio" name="closeable" v-model="closeable" value="true">
Closeable
</label>
</p>
<p class="control">
<label class="label">Horizontal Position</label>
<label class="radio">
<input type="radio" name="horizontalPosition" v-model="horizontalPosition" value="left">
Left
</label>
<label class="radio">
<input type="radio" name="horizontalPosition" v-model="horizontalPosition" value="center">
Center
</label>
<label class="radio">
<input type="radio" name="horizontalPosition" v-model="horizontalPosition" value="right">
Right
</label>
</p>
<p class="control">
<label class="label">Vertical Position</label>
<label class="radio">
<input type="radio" name="verticalPosition" v-model="verticalPosition" value="top">
Top
</label>
<label class="radio">
<input type="radio" name="verticalPosition" v-model="verticalPosition" value="buttom">
Bottom
</label>
</p>
<label class="label">Message</label>
<p class="control">
<textarea class="textarea" v-model="message"></textarea>
</p>
<button class="button is-primary" @click="toast">Toast it!</button>
<!-- <button class="button is-primary" @click="test">Test</button> -->
</div>
<script src="app.js"></script>
</body>
</html>