-
Notifications
You must be signed in to change notification settings - Fork 4
/
demo.html
141 lines (128 loc) · 6.93 KB
/
demo.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<meta charset="utf-8">
<title>Wizard Component Demo</title>
<link rel="stylesheet" href="node_modules/material-design-lite/material.css">
<link rel="stylesheet" href="wizard.css">
<style>
main {
width: 50%;
margin: 0 auto;
}
.mdl-card {
width: 100%;
}
.wizard__content .mdl-textfield {
width: 100%;
}
.wizard__content {
padding: 0;
}
.wizard__content.is-active {
padding: 16px;
}
</style>
<script src="node_modules/material-design-lite/material.js"></script>
<script src="wizard.js"></script>
<main>
<section>
<h3>Simple Wizard</h3>
<div class="component-js-wizard component-wizard mdl-card mdl-shadow--4dp">
<ul class="wizard__steps">
<li class="wizard__step" data-wizard-step="1">Step 1</li>
<li class="wizard__step" data-wizard-step="2">Step 2</li>
</ul>
<div class="mdl-card__actions">
<button type="button" class="mdl-button mdl-js-button" data-wizard-button="previous">Previous</button>
<button type="button" class="mdl-button mdl-js-button" data-wizard-button="next">Next</button>
</div>
<div class="wizard__content" data-wizard-step="1">
<p>Content for the first step of the wizard.</p>
</div>
<div class="wizard__content" data-wizard-step="2">
<p>Content for the second step of the wizard.</p>
</div>
</div>
</section>
<section>
<h3>Complex Wizard</h3>
<form class="component-js-wizard component-wizard mdl-card mdl-shadow--4dp">
<ul class="wizard__steps">
<li class="wizard__step" data-wizard-step="shipping">Shipping</li>
<li class="wizard__step" data-wizard-step="billing">Billing</li>
<li class="wizard__step" data-wizard-step="review">Review</li>
</ul>
<div class="mdl-card__actions">
<button type="button" class="mdl-button mdl-js-button" data-wizard-button="previous">Previous</button>
<button type="button" class="mdl-button mdl-js-button" data-wizard-button="next">Next</button>
</div>
<div class="wizard__content" data-wizard-step="shipping">
<fieldset name="shipping">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="shipping[name]" />
<label class="mdl-textfield__label" for="shipping[name]">Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="shipping[address]" />
<label class="mdl-textfield__label" for="shipping[address]">Address line</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="shipping[zip]" />
<label class="mdl-textfield__label" for="shipping[zip]">Postal/Zip code</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="shipping[country]" />
<label class="mdl-textfield__label" for="shipping[country]">Country</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="shipping[state]" />
<label class="mdl-textfield__label" for="shipping[state]">State</label>
</div>
</fieldset>
</div>
<div class="wizard__content" data-wizard-step="billing">
<fieldset name="billing">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="billing[name]" />
<label class="mdl-textfield__label" for="billing[name]">Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="billing[address]" />
<label class="mdl-textfield__label" for="billing[address]">Address</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="billing[zip]" />
<label class="mdl-textfield__label" for="billing[zip]">Postal/Zip code</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="billing[country]" />
<label class="mdl-textfield__label" for="billing[country]">Country</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="billing[region]" />
<label class="mdl-textfield__label" for="billing[region]">State</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="billing[cardnumber]" pattern="^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$" />
<label class="mdl-textfield__label" for="billing[cardnumber]">Card Number</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="billing[cvc]" pattern="[0-9]"/>
<label class="mdl-textfield__label" for="billing[cvc]">CVC</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="billing[ccyear]" />
<label class="mdl-textfield__label" for="billing[ccyear]">Card Expiration Year</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" pattern="" id="billing[ccmonth]" />
<label class="mdl-textfield__label" for="billing[ccmonth]">Card Expiration Month</label>
</div>
</fieldset>
</div>
<div class="wizard__content" data-wizard-step="review">
<p>Review panel</p>
<button type="button" class="mdl-button mdl-button--raised mdl-button--colored mdl-js-button">Submit Order</button>
</div>
</form>
</section>
</main>