ionic基礎(chǔ)教程
ionic 安裝
ionic 創(chuàng)建 APP
ionic CSS
ionic 頭部與底部
ionic 按鈕
ionic 列表
ionic 卡片
ionic 表單和輸入框
ionic Toggle(切換開關(guān))
ionic 復(fù)選框
ionic 單選框
ionic Range
ionic select
ionic tab(選項卡)
ionic 網(wǎng)格(Grid)
ionic 顏色
ionic JavaScript
ionic 上拉菜單(ActionSheet)
ionic 背景層
ionic 下拉刷新
ionic 復(fù)選框
ionic 切換開關(guān)操作
ionic 手勢事件
ionic 頭部和底部
ionic 列表操作
ionic 加載動作
ionic 模型
ionic 導(dǎo)航
ionic 平臺
ionic 浮動框
ionic 對話框
ionic 滾動條
ionic 側(cè)欄菜單
ionic 滑動框
ionic 加載動畫
ionic 選項卡欄操作
?
This document uses PHP Chinese website manual Release
characters
ionic 頭部和底部
ion-header-bar
這個是固定在屏幕頂部的一個頭部標(biāo)題欄。如果給它加上'bar-subheader' 這個樣式，它就是副標(biāo)題。
用法
<ion-header-bar align-title="left" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="doSomething()">Left Button</button> </div> <h1 class="title">Title!</h1> <div class="buttons"> <button class="button">Right Button</button> </div> </ion-header-bar> <ion-content> Some content! </ion-content>
API
| 屬性 | 類型 | 描述 |
|---|---|---|
| align-title (optional) | string | 這個是對齊 title 的。如果沒有設(shè)置，它將會按照手機(jī)的默認(rèn)排版(Ios的默認(rèn)是居中，Android默認(rèn)是居左)。它的值可以是 'left','center','right'。 |
| no-tap-scroll (optional) | boolean | 這個是設(shè)置 header-bar 是否跟隨著內(nèi)容的滾動而滾動，就是是否固定在頂部。它的值是布爾值（true/false）。 |
ion-footer-bar
知道了 ion-header-bar ，理解ion-footer-bar就輕松多啦！只是 ion-footer-bar 是在屏幕的底部。
用法
<ion-content> Some content! </ion-content> <ion-footer-bar align-title="left" class="bar-assertive"> <div class="buttons"> <button class="button">Left Button</button> </div> <h1 class="title">Title!</h1> <div class="buttons" ng-click="doSomething()"> <button class="button">Right Button</button> </div> </ion-footer-bar>
API
與 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 這個 API。| 屬性 | 類型 | 描述 |
|---|---|---|
| align-title (optional) | string | 這個是對齊 title 的。如果沒有設(shè)置，它將會按照手機(jī)的默認(rèn)排版(Ios的默認(rèn)是居中，Android默認(rèn)是居左)。它的值可以是 'left','center','right'。 |