Ionic既是一個CSS框架也是一個Javascript UI庫。許多組件需要Javascript才能產生神奇的效
果,盡管通常組件不需要編碼,通過框架擴展可以很容易地使用,比如我們的AngularIonic擴
展。
ion-header-bar在內容頂部添加一個固定header欄。如果應用'bar-subheader'類,就可以成為一個subheader(在下面)。 查看header CSS文檔。用法左側按鈕
Title!
右側按鈕一些內容!API屬性 類型 詳情align-title(可選)字符串標題對齊的位置。可用: 'left', 'right', or 'center'。默認為'center'。Ionic 中文文檔66 ion-header-barion-footer-bar在內容底部添加一個固定的footer欄。如果應用'bar-subfooter'類,就成了一個subfooter(在上面)。查看footer CSS 文檔。用法一些內容!左側按鈕
Title!
右側按鈕API屬性 類型 詳情align-title(可選)字符串標題對齊的位置。可選: 'left', 'right', 或 'center'。 默認為'center'。Ionic 中文文檔67 ion-footer-bar
Content(內容)
ion-content授權:? $ionicScrollDelegateionContent指令提供一個易用的內容區域,該區域可以用Ionic的自定義滾動視圖進行配置,或瀏覽器內置的溢出滾動。在大多數情況下,我們建議使用Ionic的定制滾動功能,有時(出于性能原因)僅用瀏覽器原生的溢出滾動就足夠了,因此我可以輕松地在設置了Ionic滾動和溢出滾動間切換。你可以用 ionRefresher? 指令實現拉動刷新,并可以用 ionInfiniteScroll? 指令實現無限滾動。用法...API屬性 類型 詳情delegate-handle(可選)字符串該句柄用于標識帶有 $ionicScrollDelegate? 的滾動視圖。padding(可選)布爾值是否在內容上添加內填充。在iOS上默認為true,在Android上為false。scroll(可選)布爾值是否允許內容滾動。默認為true。overflow-scroll(可選)布爾值是否用溢出滾動代替Ionic滾動。has-bouncing(可選)布爾值是否允許內容滾動反彈到邊緣。iOS上默認為true,Android上默認為false。on-scroll(可選)表達式當內容滾動時表現的評估。on-scroll-complete(可選)表達式一個滾動動作完成時表現的評估。Ionic 中文文檔69 ion-contention-refresher隸屬于 ionContent? 或? ionScroll允許你添加下拉刷新滾動視圖。把它作為 ionContent? 或? ionScroll? 元素的第一個子元素。當刷新完成時,從你的控制器中廣播( $broadcast? )出 'scroll.refreshComplete'事件。用法angular.module('testApp', ['ionic']).controller('MyController', function($scope, $http) {$scope.items = [1,2,3];$scope.doRefresh = function() {$http.get('/new-items').success(function(newItems) {$scope.items = newItems;}).finally(function() {// 停止廣播ion-refresher$scope.$broadcast('scroll.refreshComplete');});};});APIIonic 中文文檔70 ion-refresher屬性 類型 詳情on-refresh(可選)表達式當用戶下拉到一定程度然后開始刷新時觸發。on-pulling(可選)表達式當用戶開始下來刷新時觸發。pulling-icon(可選)字符串當用戶下拉時顯示的圖標。默認: 'ion-arrow-down-c'。pulling-text(可選)字符串當用戶下拉時顯示的文字。refreshing-icon(可選)字符串用戶刷新后顯示的圖標。refreshing-text(可選)字符串用戶刷新后顯示的文字。
ion-tabs授權:? $ionicTabsDelegateSee the Pen by Ionic (@ionic) on CodePen.帶有標簽欄的多標簽界面的功能是,通過標簽切換一組“頁面”。在某個元素上指定任何標簽類或 動畫類來定義它的外觀和感覺。請查看 ionTab? 指令文檔來了解各個選項卡的更多詳情。注意:不要將ion-tabs置入一個ion-content元素內;它會造成一定的已知CSS錯誤。用法API屬性 類型 詳情delegate-handle(可選)字符串該句柄用 $ionicTabsDelegate? 來標識這些選項卡。Ionic 中文文檔82 ion-tabsion-tab隸屬于 [ionTabs](/js_doc-index-name-ionTabs/)? 包含一個選項卡內容。該內容僅存在于被選中的給定選項卡中。每個ionTab都有自己的瀏覽歷史。用法要查看標簽欄完整運行的例子,參見 ionTabs? 文檔。APIIonic 中文文檔83 ion-tab屬性 類型 詳情title字符串選項卡的標題。