ionic 教程

ionic 安裝

5

xubiao.zhuang 發布于 2016-05-13

ionic 安裝 本站實例采用了ionic v1.0.1 版本,下載地址為:ionic-v1.0.1.zip。 ionic 最新版本下載地址:http://ionicframework.com/docs/overview/#download。 下載后解壓壓縮包,包含以下目錄: c...

閱讀(454)評論(0)贊 (0)

ionic 創建 APP

1

hellas 發布于 2016-05-13

ionic 創建 APP 前面的章節中我們已經學會了 ionic 框架如何導入到項目中。 接下來我們將為大家介紹如何創建一個 ionic APP 應用。 ionic 創建 APP 使用 HTML、CSS 和 Javascript 來構建,所以我們可以創建一個 www 目錄,并在目...

閱讀(527)評論(0)贊 (0)

ionic 頭部與底部

xiaoli.he 發布于 2016-05-13

ionic 頭部與底部 Header(頭部) Header是固定在屏幕頂部的組件,可以包如標題和左右的功能按鈕。 ionic 默認提供了許多種顏色樣式,你可以調用不同的樣式名,當然也可以自定義一個。 bar-light <div class="bar bar-header ...

閱讀(393)評論(0)贊 (0)

ionic 按鈕

songhua.gao 發布于 2016-05-13

ionic 按鈕 按鈕是移動app不可或缺的一部分,不同風格的app,需要的不同按鈕的樣式。 默認情況下,按鈕顯示樣式為:display: inline-block。 <button class="button"> Default </button> &l...

閱讀(374)評論(0)贊 (0)

ionic 列表

xirruiqiang 發布于 2016-05-13

ionic 列表 列表是一個應用廣泛的界面元素,在所有移動app中幾乎都會使用到。 列表可以是基本文字、按鈕,開關,圖標和縮略圖等。 列表項可以是任何的HTML元素。容器元素需要list類,每個列表項需要使用item類。 ionList和ionItem可以很容易的支持各種交互方式...

閱讀(363)評論(0)贊 (0)

ionic 卡片

darida 發布于 2016-05-13

ionic 卡片 近年來卡片(card)的應用越來越流行,卡片提供了一個更好組織信息展示的工具。 針對移動端的應用,卡片會根據屏幕大小自適應大小。 我們可以很靈活的控制卡片的顯示效果,甚至實現動畫效果。 卡片一般放在頁面頂部,當然也可以實現左右切換的功能。 <div cla...

閱讀(341)評論(0)贊 (0)

ionic 表單和輸入框

xiaoli.wang 發布于 2016-05-13

ionic 表單和輸入框 list 類同樣可以用于 input 元素。item-input 和 item 類指定了文本框及其標簽。 輸入框屬性:placeholder 以下實例中,默認為100%寬度(左右兩側沒有邊框),并使用 placeholder 屬性設置輸入字段預期值的提示...

閱讀(400)評論(0)贊 (0)

ionic Toggle(切換開關)

darida 發布于 2016-05-13

ionic Toggle(切換開關) 切換開關類似與 HTML 的 checkbox 標簽,但它更易于在移動設備上使用。 切換開關可以使用 toggle-assertive 來指定顏色。 <label class="toggle"> <input type="c...

閱讀(367)評論(0)贊 (0)

ionic 單選框

changyuan.xu 發布于 2016-05-13

ionic 單選框 ionic 當選按鈕與標準 type=”radio” 的 input元素類似。以下展示了現代app類型的單選按鈕。 每個 item-radio 中的 type=”radio” 的 input 元素的 name 屬...

閱讀(378)評論(0)贊 (0)

ionic Range

xubiao.zhuang 發布于 2016-05-13

ionic Range ionic Range 是一個滑塊控件,ionic 為 Range 提供了很多種默認的樣式。而且你可以在許多種元素里使用它比如列表或者 Card 。 實例 <div class="range"> <i class="icon ion-vo...

閱讀(340)評論(0)贊 (0)

ionic select

dulong 發布于 2016-05-13

ionic select ionic select 的 select 相比原生的要更加美觀些。但是彈出的可選選項樣式是瀏覽器默認的。 每個平臺上的可選項樣式都是不一樣的,在PC電腦的瀏覽器上,你會看到傳統的下拉界面,Android 上會彈出單選按鈕選項,iOS 有個滾輪操作界面。...

閱讀(423)評論(0)贊 (0)

ionic tab(選項卡)

xirruiqiang 發布于 2016-05-13

ionic tab(選項卡) ionic tab(選項卡) 是水平排列的按鈕或者鏈接,用以頁面間導航的切換。它可以包含文字和圖標的組合,是一種移動設備上流行的導航方法。 以下選項卡容器使用了 tabs 類,每個選項卡使用 tab-item 類。默認情況下,選項卡是文本的,并沒有圖...

閱讀(408)評論(0)贊 (0)

ionic 網格(Grid)

劉莉莉 發布于 2016-05-13

ionic 網格(Grid) ionic 的網格(Grid)和其他大部分框架有所不同,它采用了彈性盒子模型(Flexible Box Model) 。而且在移動端,基本上的手機都支持。row 樣式指定行,col 樣式指定列。 同等大小網格 在帶有 row 的樣式的元素里如果包含了...

閱讀(419)評論(0)贊 (0)

ionic 顏色

xubiao.zhuang 發布于 2016-05-13

ionic 顏色 ionic 提供了很多顏色的配置,當然你可以根據自己的需要自定義顏色。 <ul class="list color-list-demo"> <li class="item dark"> light <span class="colo...

閱讀(419)評論(0)贊 (0)

ionic icon(圖標)

zhuangli 發布于 2016-05-13

ionic icon(圖標) ionic 也默認提供了許多的圖標,大概有500多個。用法也非常的簡單: <i class="icon ion-star"></i> 圖標樣式CDN地址:http://www.runoob.com/static/ionic/c...

閱讀(365)評論(0)贊 (0)

ionic icon(圖標)

1

likai 發布于 2016-05-13

ionic icon(圖標) ionic 也默認提供了許多的圖標,大概有500多個。用法也非常的簡單: <i class="icon ion-star"></i> 圖標樣式CDN地址:http://www.runoob.com/static/ionic/c...

閱讀(352)評論(0)贊 (0)

ionic 上拉菜單(ActionSheet)

1

yeseng 發布于 2016-05-13

ionic 上拉菜單(ActionSheet) 上拉菜單(ActionSheet)通過往上彈出的框,來讓用戶選擇選項。 非常危險的選項會以高亮的紅色來讓人第一時間識別。你可以通過點擊取消按鈕或者點擊空白的地方來讓它消失。 實例 HTML 代碼 <body ng-app="s...

閱讀(449)評論(0)贊 (0)

2013平特肖公式