奇酷學(xué)院老師html5高級(jí)就業(yè)大講堂ionic-05

1、ionic 表單和輸入框list 類同樣可以用于 input 元素。item-input 和 item 類指定了文本框及其標(biāo)簽。輸入框?qū)傩裕簆laceholder以下實(shí)例中，默認(rèn)為100%寬度（左右兩側(cè)沒(méi)有邊框），并使用 placeholder 屬性設(shè)置輸入字段預(yù)期值的提示信息。 輸入框?qū)傩裕篿nput-label使用 input-label 將標(biāo)簽放置于輸入框 input 的左側(cè)。 用戶名： 密碼： 堆疊標(biāo)簽堆疊標(biāo)簽通常位于輸入框的頭部。每個(gè)選項(xiàng)使用 item-stacked-label 類指定。 每個(gè)輸入框需要指定 input-label。以下實(shí)例也使用了 placeholder 屬性來(lái)設(shè)

2、置信息輸入提示。 First Name Last Name Email HYPERLINK /try/tryit.php?filename=ionic_item-stacked-label t /ionic/_blank 嘗試一下 浮動(dòng)標(biāo)簽浮動(dòng)標(biāo)簽類似于堆疊標(biāo)簽，但浮動(dòng)標(biāo)簽有一個(gè)動(dòng)畫的效果，每個(gè)選項(xiàng)需要指定 item-floating-label 類，輸入標(biāo)簽需要指定 input-label。 First Name Last Name Email HYPERLINK /try/tryit.php?filename=ionic_item-floating-label t /ionic/_blan

3、k 嘗試一下 內(nèi)嵌表單默認(rèn)情況下每個(gè)輸入域?qū)挾榷际?00%，但我們可以使用 list list-inset 或 card 類設(shè)置表單的內(nèi)邊距(padding)， card 類帶有陰影。 HYPERLINK /try/tryit.php?filename=ionic_item-input_list-inset t /ionic/_blank 嘗試一下 內(nèi)嵌輸入域使用 list-inset 設(shè)置內(nèi)嵌實(shí)體列表。 使用 item-input-inset 樣式可以內(nèi)嵌一個(gè)按鈕。 Submit HYPERLINK /try/tryit.php?filename=ionic_item-input-inset

4、 t /ionic/_blank 嘗試一下 帶圖標(biāo)的輸入框item-input 輸入框可以很簡(jiǎn)單的添加圖標(biāo)。 圖標(biāo)可以在 前添加。 頭部輸入框輸入框可放置在頭部，并可添加提交或取消按鈕。 取消 ionic Toggle(切換開(kāi)關(guān))切換開(kāi)關(guān)類似與 HTML 的 checkbox 標(biāo)簽，但它更易于在移動(dòng)設(shè)備上使用。切換開(kāi)關(guān)可以使用 toggle-assertive 來(lái)指定顏色。 該實(shí)例有是多個(gè)切換開(kāi)關(guān)列表。注意，每個(gè)選項(xiàng)的 item 類后需要添加 item-toggle 類。 HTML5 . HYPERLINK /try/tryit.php?filename=ionic_toggle t /ion

5、ic/_blank 嘗試一下 運(yùn)行效果如下：ionic checkbox（復(fù)選框）ionic 里面的 Checkbox 和普通的 Checkbox 效果上其實(shí)相差不大，只是樣式上有所不同。以下實(shí)例顏色了多個(gè)復(fù)選框的列表。注意，每個(gè)選項(xiàng)的 item 類后需要添加 item-checkbox 類。復(fù)選框可以使用 checkbox-assertive 來(lái)指定顏色。 Flux Capacitor . HYPERLINK /try/tryit.php?filename=ionic_item-checkbox t /ionic/_blank 嘗試一下 運(yùn)行效果如下：ionic 單選框ionic 當(dāng)選按鈕與

6、標(biāo)準(zhǔn) type=radio 的 input元素類似。以下展示了現(xiàn)代app類型的單選按鈕。每個(gè) item-radio 中的 type=radio 的 input 元素的 name 屬性都相同。radio-icon 類用于是否顯示圖標(biāo)。ionic 在單選項(xiàng)中使用了 元素，使其更易點(diǎn)擊。實(shí)例 Go Python Ruby .Net Java PHP HYPERLINK /try/tryit.php?filename=ionic_item-radio t /ionic/_blank 嘗試一下 運(yùn)行效果如下：ionic Rangeionic Range 是一個(gè)滑塊控件，ionic 為 Range 提供了

7、很多種默認(rèn)的樣式。而且你可以在許多種元素里使用它比如列表或者 Card 。實(shí)例 Ranges In A List HYPERLINK /try/tryit.php?filename=ionic_item-range t /ionic/_blank 嘗試一下 運(yùn)行效果如下：ionic selectionic select 的 select 相比原生的要更加美觀些。但是彈出的可選選項(xiàng)樣式是瀏覽器默認(rèn)的。每個(gè)平臺(tái)上的可選項(xiàng)樣式都是不一樣的，在PC電腦的瀏覽器上，你會(huì)看到傳統(tǒng)的下拉界面，Android 上會(huì)彈出單選按鈕選項(xiàng)，iOS 有個(gè)滾輪操作界面。實(shí)例 Lightsaber Blue Green R

8、ed Fighter ARC-170 A-wing Delta-7 Naboo N-1 TIE X-wing Y-wing Droid 2-1B B1 C-3PO IG-88 IT-O R2-D2 Planet Alderaan Dagobah Felucia Geonosis Hoth Kamino Mygeeto Naboo Tataouine Utapau Yavin HYPERLINK /try/tryit.php?filename=ionic_item-select t /ionic/_blank 嘗試一下 運(yùn)行效果如下：ionic 網(wǎng)格(Grid)ionic 的網(wǎng)格(Grid)和其

9、他大部分框架有所不同，它采用了彈性盒子模型(Flexible Box Model) 。而且在移動(dòng)端，基本上的手機(jī)都支持。row 樣式指定行，col 樣式指定列。同等大小網(wǎng)格在帶有 row 的樣式的元素里如果包含了 col 的樣式，col 就會(huì)設(shè)置為同等大小。以下實(shí)例中 row 的樣式包含了 5 個(gè) col 樣式，每個(gè) col 的寬度為 20%。 .col .col .col .col .col HYPERLINK /try/tryit.php?filename=ionic_row t /ionic/_blank 嘗試一下 指定列寬你可以設(shè)定一行中各個(gè)列的大小不一樣。默認(rèn)情況下，列都會(huì)被劃分為同

10、等大小。但你也可以按百分比來(lái)設(shè)置列的寬度（一行為 12 個(gè)網(wǎng)格）。 .col.col-50 .col .col .col.col-75 .col .col .col.col-75 .col .col HYPERLINK /try/tryit.php?filename=ionic_col_percent t /ionic/_blank 嘗試一下 注意：實(shí)例中，每個(gè) col 樣式會(huì)自動(dòng)添加上邊框和灰色背景。下面列出了指定列寬的一些百分比的樣式名:.col-1010%.col-2020%.col-2525%.col-3333.3333%.col-5050%.col-6766.6666%.col-75

11、75%.col-8080%.col-9090%有偏移量的網(wǎng)格列可以設(shè)置左側(cè)偏移量，實(shí)例如下： .col .col .col .col .col HYPERLINK /try/tryit.php?filename=ionic_col_offset t /ionic/_blank 嘗試一下 下面是一些百分比的偏移量樣式名：.col-offset-1010%.col-offset-2020%.col-offset-2525%.col-offset-3333.3333%.col-offset-5050%.col-offset-6766.6666%.col-offset-7575%.col-offset

12、-8080%.col-offset-9090%縱向?qū)R網(wǎng)格彈性盒子模型可以很容易設(shè)置列縱向?qū)R?？v向?qū)R包含頂部，中間部分，底部，可以應(yīng)用到每一行的列，或者指定的某列。實(shí)例中，最后一列設(shè)置了最高的內(nèi)容用于更好的演示縱向?qū)R網(wǎng)格。 .col .col .col 1234 .col .col .col 1234 .col .col .col 1234 .col .col .col 1234 .col .col .col 1234 HYPERLINK /try/tryit.php?filename=ionic_grid_vertically_align t /ionic/_blank 嘗試一下 響應(yīng)式網(wǎng)格手持設(shè)備屏幕在切換時(shí)，例如橫屏，豎屏等。就需要設(shè)置每行的網(wǎng)格可以