ionic2 学习笔记（十）form 表单个输入框选择框

fixed 保持上下对齐固定输入的起始位置 select 也管用

select：

interface=默认“alert”"popover" action-sheet"设置选择框的方式弹下拉底拉超6个都弹

okText="好" cancelText="取消" 变成汉字或者其他

multiple="true"

placeholder="超过6个就变成alert模式"

[selectOptions]="musicAlertOpts" 可以自己定义标题

手写代码

  1 <ion-header>
  2   <ion-navbar>
  3     <button ion-button menuToggle>
  4       <ion-icon name="menu"></ion-icon>
  5     </button>
  6     <ion-title>hello ionic</ion-title>
  7   </ion-navbar>
  8 </ion-header>
  9 <!-- <ion-header>
 10   <ion-navbar>
 11     <ion-title>Inset Labels</ion-title>
 12   </ion-navbar>
 13 </ion-header> -->
 14 
 15 <ion-content padding>
 16   <!-- <h3>Welcome to your first Ionic app!</h3>
 17 
 18   <p>
 19     This starter project is our way of helping you get a functional app running in record time.
 20   </p>
 21   <p>
 22     Follow along on the tutorial section of the Ionic docs!
 23   </p>
 24   <p>
 25     <button ion-button color="primary" menuToggle>Toggle Menu</button>
 26   </p> -->
 27 <!-- <ion-item>
 28   <ion-label>Start Time</ion-label>
 29   <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
 30 </ion-item> -->
 31 <!-- Real floating action button, fixed. It will not scroll with the content -->
 32 <ion-item-group>
 33     <ion-item-divider color="light">A</ion-item-divider>
 34     <ion-item>Angola</ion-item>
 35     <ion-item>Argentina</ion-item>
 36   </ion-item-group>
 37 <ion-grid>
 38   <ion-row>
 39     <ion-col col-12> This column will take 12 columns</ion-col>
 40   </ion-row>
 41   <ion-row>
 42     <ion-col col-6>This column will take 6 columns</ion-col>
 43   </ion-row>
 44 </ion-grid>
 45   <!-- <ion-fab top right edge>
 46     <button ion-fab mini><ion-icon name="add"></ion-icon></button>
 47     <ion-fab-list>
 48       <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
 49       <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
 50       <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
 51       <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
 52     </ion-fab-list>
 53   </ion-fab>
 54 
 55   <ion-fab right bottom>
 56     <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
 57     <ion-fab-list side="left">
 58       <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
 59       <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
 60       <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
 61       <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
 62     </ion-fab-list>
 63   </ion-fab> -->
 64 
 65 <ion-item>
 66     <ion-label>Daenerys Targaryen</ion-label>
 67     <ion-checkbox color="dark" checked="true"></ion-checkbox>
 68 </ion-item>
 69 <ion-item>
 70     <ion-label>Arya Stark</ion-label>
 71     <ion-checkbox disabled="true"></ion-checkbox>
 72 </ion-item>
 73 <ion-card>
 74 
 75   <ion-item>
 76     <ion-avatar item-left>
 77       <img src="https://static.bootcss.com/www/assets/img/bootcdn.png">
 78     </ion-avatar>
 79     <h2>Marty McFly</h2>
 80     <p>November 5, 1955</p>
 81   </ion-item>
 82 
 83   <img src="https://static.bootcss.com/www/assets/img/bootcdn.png">
 84 
 85   <ion-card-content>
 86     <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
 87   </ion-card-content>
 88 
 89   <ion-row>
 90     <ion-col>
 91       <button ion-button icon-left clear small>
 92         <ion-icon name="thumbs-up"></ion-icon>
 93         <div>12 Likes</div>
 94       </button>
 95     </ion-col>
 96     <ion-col>
 97       <button ion-button icon-left clear small>
 98         <ion-icon name="text"></ion-icon>
 99         <div>4 Comments</div>
100       </button>
101     </ion-col>
102     <ion-col center text-center>
103       <ion-note>
104         11h ago
105       </ion-note>
106     </ion-col>
107   </ion-row>
108 
109 </ion-card>
110 <ion-card>
111   <img src="https://static.bootcss.com/www/assets/img/bootcdn.png"/>
112   <ion-card-content>
113     <ion-card-title>
114       Nine Inch Nails Live
115       </ion-card-title>
116     <p>
117       The most popular industrial group ever, and largely
118       responsible for bringing the music to a mass audience.
119     </p>
120   </ion-card-content>
121 </ion-card>
122 <ion-card>
123   <ion-card-header>
124     Explore Nearby
125   </ion-card-header>
126 
127   <ion-list>
128     <button ion-item>
129       <ion-icon name="cart" item-left></ion-icon>
130       Shopping
131     </button>
132 
133     <button ion-item>
134       <ion-icon name="medical" item-left></ion-icon>
135       Hospital
136     </button>
137 
138     <button ion-item>
139       <ion-icon name="cafe" item-left></ion-icon>
140       Cafe
141     </button>
142 
143     <button ion-item>
144       <ion-icon name="paw" item-left></ion-icon>
145       Dog Park
146     </button>
147 
148     <button ion-item>
149       <ion-icon name="beer" item-left></ion-icon>
150       Pub
151     </button>
152 
153     <button ion-item>
154       <ion-icon name="planet" item-left></ion-icon>
155       Space
156     </button>
157 
158   </ion-list>
159 </ion-card>
160 <ion-card>
161 
162   <ion-card-header>
163     Card Header
164   </ion-card-header>
165 
166   <ion-card-content>
167     <!-- Add card content here! -->
168     card content here!
169   </ion-card-content>
170 
171 </ion-card>
172 <ion-list>
173   <ion-item>
174     Left Icon Button
175     <button ion-button outline item-right icon-left>
176       <ion-icon name="star"></ion-icon>
177       Left Icon
178     </button>
179   </ion-item>
180 </ion-list>
181 <!-- Float the icon right -->
182 <button ion-button icon-right>
183   Right Icon
184   <ion-icon name="home"></ion-icon>
185 </button>
186 
187 <!-- Only icon (no text) -->
188 <button ion-button icon-only>
189   <ion-icon name="home"></ion-icon>
190 </button>
191 <button ion-button icon-left>
192   <ion-icon name="home"></ion-icon>
193   Left Icon
194 </button>
195 <button ion-button small>Small</button>
196 <button ion-button full>Full Button</button>
197 <button ion-button block>Block Button</button>
198 <button ion-button round>Primary Round</button>
199 <button ion-button clear>Primary Clear</button>
200 <button ion-button outline>Primary Outline</button>
201 <button ion-button color="light" outline>Light Outline</button>
202 <button ion-button color="light">Light</button>
203 <button ion-button>Default</button>
204 <button ion-button color="secondary">Secondary</button>
205 <button ion-button color="danger">Danger</button>
206 <button ion-button color="dark">Dark</button>
207   <ion-item>
208     <ion-icon name="logo-twitter" item-left></ion-icon>
209         Followers
210     <ion-badge item-right>260k</ion-badge>
211 </ion-item>
212 <!-- --hrhrhrhrhrhrrhrhrhrhrhrhrhrhrrhrhrhhrhrhrhrhrhrrhrhrh--- -->
213 
214   <ion-list>
215     <ion-item>
216         <ion-label fixed>Username</ion-label>
217         <ion-input type="text" value=""></ion-input>
218     </ion-item>
219     <ion-item>
220         <ion-label fixed>Password</ion-label>
221         <ion-input type="password"></ion-input>
222     </ion-item>
223 </ion-list>
224 
225 <div padding>
226   <button ion-button color="primary" block>Sign In</button>
227 </div>
228 <!-- --hrhrhrhrhrhrrhrhrhrhrhrhrhrhrrhrhrhhrhrhrhrhrhrrhrhrh--- -->
229 <ion-list>
230 
231   <ion-item>
232     <ion-label floating>Username</ion-label>
233     <ion-input type="text"></ion-input>
234   </ion-item>
235 
236   <ion-item>
237     <ion-label floating>Password</ion-label>
238     <ion-input type="password"></ion-input>
239   </ion-item>
240 
241 </ion-list>
242 
243 <div padding>
244   <button ion-button color="primary" block>Sign In</button>
245 </div>
246 <!-- --hrhrhrhrhrhrrhrhrhrhrhrhrhrhrrhrhrhhrhrhrhrhrhrrhrhrh--- -->
247 <ion-list>
248 
249   <ion-item>
250     <ion-label>Username</ion-label>
251     <ion-input type="text"></ion-input>
252   </ion-item>
253 
254   <ion-item>
255     <ion-label>Password</ion-label>
256     <ion-input type="password"></ion-input>
257   </ion-item>
258 
259 </ion-list>
260 
261 <div padding>
262     <button ion-button color="primary" block>Sign In</button>
263 </div>
264 <!-- --hrhrhrhrhrhrrhrhrhrhrhrhrhrhrrhrhrhhrhrhrhrhrhrrhrhrh--- -->
265   <ion-list inset>
266 
267   <ion-item>
268     <ion-label>Username</ion-label>
269     <ion-input type="text"></ion-input>
270   </ion-item>
271 
272   <ion-item>
273     <ion-label>Password</ion-label>
274     <ion-input type="password"></ion-input>
275   </ion-item>
276 
277 </ion-list>
278 <div padding>
279     <button ion-button color="primary" block>Sign In</button>
280 </div>
281 <!-- --hrhrhrhrhrhrrhrhrhrhrhrhrhrhrrhrhrhhrhrhrhrhrhrrhrhrh--- -->
282 <ion-list>
283 
284   <ion-item>
285     <ion-input type="text" placeholder="Username"></ion-input>
286   </ion-item>
287 
288   <ion-item>
289     <ion-input type="password" placeholder="Password"></ion-input>
290   </ion-item>
291 
292 </ion-list>
293 <div padding>
294     <button ion-button color="primary" block>Sign In</button>
295 </div>
296 <!-- --hrhrhrhrhrhrrhrhrhrhrhrhrhrhrrhrhrhhrhrhrhrhrhrrhrhrh--- -->
297 <ion-list>
298 
299   <ion-item>
300     <ion-label stacked>Username</ion-label>
301     <ion-input type="text"></ion-input>
302   </ion-item>
303 
304   <ion-item>
305     <ion-label stacked>Password</ion-label>
306     <ion-input type="password"></ion-input>
307   </ion-item>
308 
309 </ion-list>
310 <div padding>
311     <button ion-button color="primary" block>Sign In</button>
312 </div>
313 <!-- --hrhrhrhrhrhrrhrhrhrhrhrhrhrhrrhrhrhhrhrhrhrhrhrrhrhrh--- -->
314 
315 </ion-content>

 1 export class Inputs {
 2 
 3   gaming: string = "n64";
 4   gender: string = "f";
 5   os: string;
 6   music: string;
 7   month: string;
 8   year: number;
 9 
10   musicAlertOpts: { title: string, subTitle: string };
11 
12   constructor(public navCtrl: NavController, public navParams: NavParams) {
13     this.musicAlertOpts = {
14       title: '1994 音乐',
15       subTitle: '选你喜爱的'
16     };
17   }
18 
19   stpSelect() {
20     alert('dsd')
21     console.log('STP selected');
22   }
23 
24   ionViewDidLoad() {
25     console.log('ionViewDidLoad Inupts');
26   }
27 
28 }

posted on 2017-06-07 18:14 技术V类阅读(280) 评论(0) 收藏举报

刷新页面返回顶部

ionic2 学习笔记（十）form 表单个输入框选择框

导航

公告

ionic2 学习笔记（十）form 表单个输入框 选择框

导航

公告

ionic2 学习笔记（十）form 表单个输入框选择框