Skip to content

Commit fa53075

Browse files
kevinongkokevinongko
committed
update demo page
1 parent 2a7ac37 commit fa53075

File tree

2 files changed

+135
-10
lines changed

2 files changed

+135
-10
lines changed

‎docs/build.js

-7
This file was deleted.

‎docs/index.html

+135-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,142 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Vue numeric demo</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>vue-numeric demo</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css">
68
</head>
79
<body>
8-
<div id="app"></div>
9-
<script src="./build.js"></script>
10+
<div id="app">
11+
<section class="hero is-primary is-bold">
12+
<div class="hero-body">
13+
<div class="container">
14+
<h1 class="title">
15+
Vue Numeric
16+
</h1>
17+
<h2 class="subtitle">
18+
Input field component to display currency value based on Vue
19+
</h2>
20+
</div>
21+
</div>
22+
</section>
23+
24+
<br>
25+
26+
<div class="container">
27+
28+
<div class="columns is-multiline is-mobile">
29+
<div class="column is-12 has-text-centered">
30+
<p class="control">
31+
<label class="label"> Value: {{ money }} </label>
32+
<vue-numeric
33+
class="input is-large"
34+
v-model="money"
35+
:min="minValue"
36+
:max="maxValue"
37+
:currency="currency"
38+
:separator="separator"
39+
:precision="decimals"
40+
:read-only="readOnly"
41+
read-only-class="test"
42+
>
43+
</vue-numeric>
44+
</p>
45+
</div>
46+
</div>
47+
48+
<hr>
49+
<h1 class="title is-4">
50+
Config:
51+
</h1>
52+
53+
<div class="columns is-multiline is-mobile">
54+
<div class="column is-12">
55+
<p class="control">
56+
<label class="label"> Currency symbol </label>
57+
<input class="input" v-model="currency">
58+
</p>
59+
</div>
60+
<div class="column is-12">
61+
<p class="control">
62+
<label class="label"> Minimum Value </label>
63+
<input class="input" type="number" v-model="minValue">
64+
</p>
65+
</div>
66+
<div class="column is-12">
67+
<p class="control">
68+
<label class="label"> Maximum Value </label>
69+
<input class="input" type="number" v-model="maxValue">
70+
</p>
71+
</div>
72+
<div class="column is-12">
73+
<p class="control">
74+
<label class="label"> Decimals digits </label>
75+
<input class="input" type="number" v-model="decimals">
76+
</p>
77+
</div>
78+
<div class="column is-12">
79+
<label class="label"> Separator </label>
80+
<p class="control">
81+
<label class="radio">
82+
<input type="radio" value="," v-model="separator">
83+
use ',' as separator
84+
</label>
85+
<label class="radio">
86+
<input type="radio" value="." v-model="separator">
87+
use '.' as separator
88+
</label>
89+
</p>
90+
</div>
91+
<div class="column is-12">
92+
<p class="control">
93+
<input type="checkbox" v-model="readOnly">
94+
Read Only
95+
</p>
96+
</div>
97+
</div>
98+
</div>
99+
100+
<br>
101+
102+
<footer class="footer">
103+
<div class="container">
104+
<div class="content has-text-centered">
105+
<p>
106+
<strong>Vue Numeric</strong> by <a href="http://kevinongko.com">Kevin Ongko</a>. The source code is licensed
107+
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>
108+
</p>
109+
<p>
110+
<a href="https://github.com/kevinongko/vue-numeric">
111+
<img src="https://img.shields.io/github/stars/kevinongko/vue-numeric.svg?style=social&label=Star">
112+
</a>
113+
<a href="https://github.com/kevinongko/vue-numeric">
114+
<img src="https://img.shields.io/github/forks/kevinongko/vue-numeric.svg?style=social&label=Fork">
115+
</a>
116+
</p>
117+
</div>
118+
</div>
119+
</footer>
120+
</div>
121+
122+
<script src="https://unpkg.com/vue"></script>
123+
<script src="https://unpkg.com/vue-numeric"></script>
124+
125+
<script>
126+
Vue.use(VueNumeric.default)
127+
128+
new Vue({
129+
el: '#app',
130+
131+
data: {
132+
money: 100,
133+
minValue: 0,
134+
maxValue: 999999,
135+
currency: '$',
136+
decimals: 2,
137+
separator: ',',
138+
readOnly: false
139+
}
140+
})
141+
</script>
10142
</body>
11143
</html>

0 commit comments

Comments
 (0)