UNPKG

8.74 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Demo: Input groups</title>
6
7 <link rel="stylesheet" href="../build/marble.css">
8
9 <style>
10 body {
11 margin: 24px auto;
12 width: 480px;
13 }
14
15 h1 {
16 margin: 32px 0;
17 text-align: center;
18 }
19 </style>
20</head>
21<body>
22 <h1>Addons</h1>
23
24 <div class="form-group">
25 <label>Input with preffix</label>
26 <div class="input-group">
27 <div class="input-group-addon">http://</div>
28 <input type="text" class="input-group-addon-input form-control" placeholder="app-url">
29 </div>
30 </div>
31
32 <div class="form-group">
33 <label>Input with suffix</label>
34 <div class="input-group">
35 <input type="text" class="input-group-addon-input form-control" placeholder="app-url">
36 <div class="input-group-addon">.appland.com</div>
37 </div>
38 </div>
39
40 <div class="form-group">
41 <label>Input with preffix and suffix</label>
42 <div class="input-group">
43 <div class="input-group-addon">http://</div>
44 <input type="text" class="input-group-addon-input form-control" placeholder="app-url">
45 <div class="input-group-addon">.appland.com</div>
46 </div>
47 </div>
48
49 <h1>Addons disabled</h1>
50
51 <div class="form-group">
52 <label>Input with preffix</label>
53 <div class="input-group">
54 <div class="input-group-addon disabled">http://</div>
55 <input type="text" class="input-group-addon-input form-control" placeholder="app-url" disabled>
56 </div>
57 </div>
58
59 <div class="form-group">
60 <label>Input with suffix</label>
61 <div class="input-group">
62 <input type="text" class="input-group-addon-input form-control" placeholder="app-url" disabled>
63 <div class="input-group-addon disabled">.appland.com</div>
64 </div>
65 </div>
66
67 <div class="form-group">
68 <label>Input with preffix and suffix</label>
69 <div class="input-group">
70 <div class="input-group-addon disabled">http://</div>
71 <input type="text" class="input-group-addon-input form-control" placeholder="app-url" disabled>
72 <div class="input-group-addon disabled">.appland.com</div>
73 </div>
74 </div>
75
76 <h1>Addons with states</h1>
77
78 <div class="form-group has-error">
79 <label>Input with error</label>
80 <div class="input-group">
81 <div class="input-group-addon">http://</div>
82 <input type="text" class="input-group-addon-input form-control" placeholder="app-url">
83 </div>
84 </div>
85
86 <div class="form-group has-warning">
87 <label>Input with warning</label>
88 <div class="input-group">
89 <input type="text" class="input-group-addon-input form-control" placeholder="app-url">
90 <div class="input-group-addon">.appland.com</div>
91 </div>
92 </div>
93
94 <div class="form-group has-success">
95 <label>Input with success</label>
96 <div class="input-group">
97 <div class="input-group-addon">http://</div>
98 <input type="text" class="input-group-addon-input form-control" placeholder="app-url">
99 <div class="input-group-addon">.appland.com</div>
100 </div>
101 </div>
102
103 <h1>Inner Addons</h1>
104
105 <div class="form-group">
106 <label>Input with icon 12 preffix</label>
107 <div class="input-inner-addon input-inner-addon-left">
108 <span class="input-inner-icon-helper icon-12-person"></span>
109 <input class="form-control" type="text" placeholder="app-url">
110 </div>
111 </div>
112
113 <div class="form-group">
114 <label>Input with icon 16 preffix</label>
115 <div class="input-inner-addon input-inner-addon-left">
116 <span class="input-inner-icon-helper icon-16-info"></span>
117 <input class="form-control" type="text" placeholder="app-url">
118 </div>
119 </div>
120
121 <label>Input with icon 12 suffix</label>
122 <div class="form-group">
123 <div class="input-inner-addon input-inner-addon-right">
124 <input class="form-control" type="text" placeholder="app-url">
125 <span class="input-inner-icon-helper icon-12-person"></span>
126 </div>
127 </div>
128
129 <div class="form-group">
130 <label>Input with icon 16 suffix</label>
131 <div class="input-inner-addon input-inner-addon-right">
132 <input class="form-control" type="text" placeholder="app-url">
133 <span class="input-inner-icon-helper icon-16-info"></span>
134 </div>
135 </div>
136
137 <h1>Addons + Inner Addons</h1>
138
139 <div class="form-group">
140 <label>Input with preffix</label>
141 <div class="input-group">
142 <div class="input-group-addon">http://</div>
143 <div class="input-inner-addon input-inner-addon-left">
144 <span class="icon-12-person"></span>
145 <input type="text" class="input-group-addon-input input-group-addon-input-right form-control" placeholder="app-url">
146 </div>
147 </div>
148 </div>
149
150 <div class="form-group">
151 <label>Input with suffix</label>
152 <div class="input-group">
153 <div class="input-inner-addon input-inner-addon-left">
154 <span class="icon-16-info"></span>
155 <input type="text" class="input-group-addon-input input-group-addon-input-left form-control" placeholder="app-url">
156 </div>
157 <div class="input-group-addon">.appland.com</div>
158 </div>
159 </div>
160
161 <div class="form-group">
162 <label>Input with preffix and suffix</label>
163 <div class="input-group">
164 <div class="input-group-addon">http://</div>
165 <div class="input-inner-addon input-inner-addon-left">
166 <span class="icon-16-info"></span>
167 <input type="text" class="input-group-addon-input input-group-addon-input-center form-control" placeholder="app-url">
168 </div>
169 <div class="input-group-addon">.appland.com</div>
170 </div>
171 </div>
172
173 <h1>Button Addons</h1>
174
175 <div class="form-group">
176 <label>Input with button preffix</label>
177 <div class="input-group">
178 <span class="input-group-btn">
179 <button class="btn btn-sm btn-accent" type="button">Send Invite</button>
180 </span>
181 <input class="form-control" type="text" placeholder="Invite people to this app">
182 </div>
183 </div>
184
185 <div class="form-group">
186 <label>Input with button suffix</label>
187 <div class="input-group">
188 <input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
189 <span class="input-group-btn">
190 <button class="btn btn-sm btn-accent" type="button">Send Invite</button>
191 </span>
192 </div>
193 </div>
194
195 <h1>Button Addons + Select Addons</h1>
196
197 <div class="form-group">
198 <label>Input with button suffix and select</label>
199 <div class="input-group">
200 <span class="input-group-btn">
201
202 </span>
203 <input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
204 <span class="input-group-btn">
205 <button class="btn btn-sm btn-accent" type="button">Send Invite</button>
206 </span>
207 </div>
208 </div>
209
210 <h1>Button Addons + Inner Addon</h1>
211
212 <div class="form-group">
213 <label>Input with button and icon 12 suffix</label>
214 <div class="input-group">
215 <span class="input-group-btn">
216 <button class="btn btn-sm btn-accent" type="button">Send Invite</button>
217 </span>
218 <div class="input-inner-addon input-inner-addon-left">
219 <span class="icon-12-person"></span>
220 <input class="input-btn-left form-control" type="text" placeholder="Invite people to this app">
221 </div>
222 </div>
223 </div>
224
225 <div class="form-group">
226 <label>Input with button and icon 16 suffix</label>
227 <div class="input-group">
228 <span class="input-group-btn">
229 <button class="btn btn-sm btn-accent" type="button">Send Invite</button>
230 </span>
231 <div class="input-inner-addon input-inner-addon-left">
232 <span class="icon-16-info"></span>
233 <input class="input-btn-left form-control" type="text" placeholder="Invite people to this app">
234 </div>
235 </div>
236 </div>
237
238 <div class="form-group">
239 <label>Input with button and icon 12 suffix</label>
240 <div class="input-group">
241 <div class="input-inner-addon input-inner-addon-right">
242 <span class="icon-12-person"></span>
243 <input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
244 </div>
245 <span class="input-group-btn">
246 <button class="btn btn-sm btn-accent" type="button">Send Invite</button>
247 </span>
248 </div>
249 </div>
250
251 <div class="form-group">
252 <label>Input with button and icon 16 suffix</label>
253 <div class="input-group">
254 <div class="input-inner-addon input-inner-addon-right">
255 <span class="icon-16-info"></span>
256 <input class="input-btn-right form-control" type="text" placeholder="Invite people to this app">
257 </div>
258 <span class="input-group-btn">
259 <button class="btn btn-sm btn-accent" type="button">Send Invite</button>
260 </span>
261 </div>
262 </div>
263
264</body>
265</html>