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

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

2、置信息輸入提示。 First Name Last Name Email HYPERLINK /try/tryit.php?filename=ionic_item-stacked-label t /ionic/_blank 嘗試一下 浮動標(biāo)簽浮動標(biāo)簽類似于堆疊標(biāo)簽，但浮動標(biāo)簽有一個動畫的效果，每個選項需要指定 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)嵌表單默認情況下每個輸入域?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)嵌實體列表。 使用 item-input-inset 樣式可以內(nèi)嵌一個按鈕。 Submit HYPERLINK /try/tryit.php?filename=ionic_item-input-inset

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

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

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

7、很多種默認的樣式。而且你可以在許多種元素里使用它比如列表或者 Card 。實例 Ranges In A List HYPERLINK /try/tryit.php?filename=ionic_item-range t /ionic/_blank 嘗試一下 運行效果如下：ionic selectionic select 的 select 相比原生的要更加美觀些。但是彈出的可選選項樣式是瀏覽器默認的。每個平臺上的可選項樣式都是不一樣的，在PC電腦的瀏覽器上，你會看到傳統(tǒng)的下拉界面，Android 上會彈出單選按鈕選項，iOS 有個滾輪操作界面。實例 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 嘗試一下 運行效果如下：ionic 網(wǎng)格(Grid)ionic 的網(wǎng)格(Grid)和其

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

10、等大小。但你也可以按百分比來設(shè)置列的寬度（一行為 12 個網(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 嘗試一下 注意：實例中，每個 col 樣式會自動添加上邊框和灰色背景。下面列出了指定列寬的一些百分比的樣式名:.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è)偏移量，實例如下： .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。縱向?qū)R包含頂部，中間部分，底部，可以應(yīng)用到每一行的列，或者指定的某列。實例中，最后一列設(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è)置每行的網(wǎng)格可以