Skip to content

Commit b79e978

Browse files
coderdiazcoderdiaz
committed
Example and docs
1 parent eff87ce commit b79e978

File tree

6 files changed

+110
-0
lines changed

6 files changed

+110
-0
lines changed

‎dist/build.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/build.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>vue-status-indicator</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
<script src="/dist/build.js"></script>
10+
</body>
11+
</html>

‎src/App.vue

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<div id="app">
3+
<h1>
4+
&lt;vue-status-indicator/&gt;</h1>
5+
<p>
6+
<span>&nbsp;</span>
7+
<span>&nbsp;</span>
8+
<span>[active]</span>
9+
<span>[positive]</span>
10+
<span>[intermediary]</span>
11+
<span>[negative]</span>
12+
</p>
13+
<p>
14+
<span></span>
15+
<status-indicator></status-indicator>
16+
<status-indicator active></status-indicator>
17+
<status-indicator positive></status-indicator>
18+
<status-indicator intermediary></status-indicator>
19+
<status-indicator negative></status-indicator>
20+
</p>
21+
<p>
22+
<span>[pulse]</span>
23+
<status-indicator pulse></status-indicator>
24+
<status-indicator active pulse></status-indicator>
25+
<status-indicator positive pulse></status-indicator>
26+
<status-indicator intermediary pulse></status-indicator>
27+
<status-indicator negative pulse></status-indicator>
28+
</p>
29+
</div>
30+
</template>
31+
32+
<script>
33+
import StatusIndicator from './components/StatusIndicator.vue'
34+
export default {
35+
name: 'app',
36+
data () {
37+
return {
38+
msg: 'Welcome to Your Vue.js App'
39+
}
40+
},
41+
components: {
42+
StatusIndicator
43+
}
44+
}
45+
</script>
46+
47+
<style lang="scss">
48+
html,
49+
body,
50+
#app {
51+
height: 100%;
52+
margin: 0;
53+
padding: 0;
54+
display: grid;
55+
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
56+
}
57+
#app {
58+
text-align: center;
59+
}
60+
p {
61+
display: flex;
62+
justify-content: space-around;
63+
align-items: center;
64+
}
65+
h1 {
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
}
70+
p > span {
71+
display: inline-block;
72+
width: 20px;
73+
}
74+
p > span:first-child {
75+
display: inline-block;
76+
width: 100px;
77+
}
78+
p[prompt] {
79+
color: #aaa;
80+
}
81+
alert-message {
82+
color: #4BD28F;
83+
position: fixed;
84+
right: 50px;
85+
bottom: 50px;
86+
}
87+
:root {
88+
--status-indicator-size: 15px !important;
89+
}
90+
</style>

‎src/assets/logo.png

6.69 KB
Loading

‎src/main.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
4+
new Vue({
5+
el: '#app',
6+
render: h => h(App)
7+
})

0 commit comments

Comments
 (0)