ionic頭(低)部+按鈕+列表+卡片

ionic 頭部與底部

Header(頭部)

Header是固定在屏幕頂部的組件,可以包如標題和左右的功能按鈕。
ionic 默認提供了許多種顏色樣式，你可以調用不同的樣式名，當然也可以自定義一個。

bar-light

<div class="bar bar-header bar-light"> 
    <h1 class="title">bar-light</h1>
</div>

嘗試一下 ?

bar-stable

<div class="bar bar-header bar-stable"> 
    <h1 class="title">bar-stable</h1>
</div>

嘗試一下 ?

bar-positive

<div class="bar bar-header bar-positive"> 
    <h1 class="title">bar-positive</h1>
</div>

嘗試一下 ?

bar-calm

<div class="bar bar-header bar-calm"> 
    <h1 class="title">bar-calm</h1>
</div>

嘗試一下 ?

bar-balanced

<div class="bar bar-header bar-balanced"> 
    <h1 class="title">bar-balanced</h1>
</div>

嘗試一下 ?

bar-energized

<div class="bar bar-header bar-energized"> 
    <h1 class="title">bar-energized</h1>
</div>

嘗試一下 ?

bar-assertive

<div class="bar bar-header bar-assertive"> 
    <h1 class="title">bar-assertive</h1>
</div>

嘗試一下 ?

bar-royal

<div class="bar bar-header bar-royal"> 
    <h1 class="title">bar-royal</h1>
</div>

嘗試一下 ?

bar-dark

<div class="bar bar-header bar-dark"> 
    <h1 class="title">bar-dark</h1>
</div>

嘗試一下 ?

Sub Header（副標題）

Sub Header同樣是固定在頂部，只是是在Header的下面，就算沒有寫Header這個，Sub Header這個樣式也會距離頂部有一個Header的距離。顏色樣式同 Header 。

<div class="bar bar-header"> 
    <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader"> 
    <h2 class="title">Sub Header</h2>
</div>

嘗試一下 ?

Footer(底部)

Footer 是在屏幕的最下方，可以包含多種內容類型。

<div class="bar bar-footer bar-balanced"> 
    <div class="title">Footer</div>
</div>

嘗試一下 ?

Footer 同上面的 Header，只是把樣式名 bar-header 換做 bar-footer 。

<div class="bar bar-footer"> 
    <button class="button button-clear">Left</button> 
    <div class="title">Title</div> 
    <button class="button button-clear">Right</button>
</div>

嘗試一下 ?

此外，如果底部沒有標題，但是又需要右邊的按鈕，你需要在右側按鈕添加 pull-right如:

<div class="bar bar-footer"> 
    <button class="button button-clear pull-right">Right</button>
</div>

嘗試一下 ?

ionic 按鈕

按鈕是移動app不可或缺的一部分，不同風格的app，需要的不同按鈕的樣式。
默認情況下，按鈕顯示樣式為：display: inline-block。

<button class="button"> 
    Default
</button>

<button class="button button-light"> 
    button-light
</button>

<button class="button button-stable"> 
    button-stable
</button>

<button class="button button-positive"> 
    button-positive
</button>

<button class="button button-calm"> 
    button-calm
</button>

<button class="button button-balanced"> 
    button-balanced
</button>

<button class="button button-energized"> 
    button-energized
</button>

<button class="button button-assertive"> 
    button-assertive
</button>

<button class="button button-royal"> 
    button-royal
</button>

<button class="button button-dark"> 
    button-dark
</button>

嘗試一下 ?

button-block 樣式按鈕顯示為：display: block，它將完全填充父元素的寬度，包含了內邊距屬性padding。

<button class="button button-block button-positive"> 
    Block Button
</button>

嘗試一下 ?

使用 button-full 類，可以讓按鈕顯示完全寬度，且不包含內邊距padding。

<button class="button button-full button-positive"> 
    Full Width Block Button
</button>

嘗試一下 ?

不同大小的按鈕

button-large 設置為大按鈕，button-small 設置為小按鈕。

<button class="button button-small button-assertive"> 
    Small Button
</button>
<button class="button button-large button-positive"> 
    Large Button
</button>

嘗試一下 ?

無背景按鈕

button-outline 設置背景為透明。

<button class="button button-outline button-positive"> 
    Outlined Button
</button>

嘗試一下 ?

無背景與邊框按鈕

button-clear 設置按鈕背景為透明，且無邊框。

<button class="button button-clear button-positive"> 
    Clear Button
</button>

嘗試一下 ?

圖標按鈕

我們可以在按鈕上添加圖標。

<button class="button"> 
    <i class="icon ion-loading-c"></i> Loading...
</button>

<button class="button icon-left ion-home">Home</button>

<button class="button icon-left ion-star button-positive">Favorites</button>

<a class="button icon-right ion-chevron-right button-calm">Learn More</a>

<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>

<button class="button icon ion-gear-a"></button>

<a class="button button-icon icon ion-settings"></a>

<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

嘗試一下 ?

頭部/底部添加按鈕

頭部/底部可以添加按鈕，按鈕的樣式根據頭部/底部來設定，所以你不需要為按鈕添加額外的樣式。

<div class="bar bar-header"> 
    <button class="button icon ion-navicon"></button> 
    <h1 class="title">Header Buttons</h1> 
    <button class="button">Edit</button>
</div>

嘗試一下 ?

button-clear 類可以設置無背景和邊框的頭部/底部按鈕。

<div class="bar bar-header"> 
    <button class="button button-icon icon ion-navicon"></button> 
    <div class="h1 title">Header Buttons</div> 
    <button class="button button-clear button-positive">Edit</button>
</div>

嘗試一下 ?

按鈕欄

我們可以使用 button-bar 類來設置按鈕欄。以下實例中，我們在頭部和內容中添加了按鈕欄。

<div class="button-bar"> 
    <a class="button">First</a> 
    <a class="button">Second</a> 
    <a class="button">Third</a>
</div>

嘗試一下 ?

ionic 列表

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

基本用法:

<ul class="list"> 
    <li class="item"> 
        ... 
    </li>
</ul>

嘗試一下 ?

列表分隔符

我們可以使用 item-divider 類來為列表創建分隔符，默認情況下，列表項以不同的背景顏色和字體加粗來區分，但你也可以很容易的定制他。

<div class="list"> 

    <div class="item item-divider"> 
        Candy Bars 
    </div> 

    <a class="item" href="#"> 
        Butterfinger 
    </a> 

    ...

</div>

嘗試一下 ?

帶圖標列表

我們可以在列表項的左側或右側指定圖標。
使用 item-icon-left 圖標在左側， item-icon-right 設置圖標在右側。如果你需要在兩邊都有圖標，則兩個類都添加上即可。
以下實例中，我們在列表項中使用了 < a> 標簽，使得每個列表項可點擊。
列表項在使用 < a>或<button> 元素時，如果右側未添加圖標，則會自動添加上箭頭號。
實例中，第一項只有左側圖標，第二項左右均有圖標，第三項有右側圖標（還有注釋 item-note），第四項有badge（標記）元素。

<div class="list"> 

    <a class="item item-icon-left" href="#"> 
        <i class="icon ion-email"></i> 
        Check mail 
    </a> 

    <a class="item item-icon-left item-icon-right" href="#"> 
        <i class="icon ion-chatbubble-working"></i> 
        Call Ma 
        <i class="icon ion-ios-telephone-outline"></i> 
    </a> 

    <a class="item item-icon-left" href="#"> 
        <i class="icon ion-mic-a"></i> 
        Record album 
        <span class="item-note"> 
            Grammy 
        </span> 
    </a> 

    <a class="item item-icon-left" href="#"> 
        <i class="icon ion-person-stalker"></i> 
        Friends 
        <span class="badge badge-assertive">0</span> 
    </a>

</div>

嘗試一下 ?

按鈕列表

使用 item-button-right 或 item-button-left 類將按鈕放在列表項中。

<div class="list"> 

    <div class="item item-button-right"> 
        Call Ma 
        <button class="button button-positive"> 
            <i class="icon ion-ios-telephone"></i> 
        </button> 
    </div> 

    ...

</div>

嘗試一下 ?

帶頭像列表

使用 item-avatar 來創建一個帶頭像的列表：

<div class="list"> 

    <a class="item item-avatar" href="#"> 
        <img src="venkman.jpg"> 
        <h2>Venkman</h2> 
        <p>Back off, man. I'm a scientist.</p> 
    </a> 

    ...

</div>

嘗試一下 ?

縮略圖列表

item-thumbnail-left 類用于添加左側對齊的縮略圖， item-thumbnail-right 類用于添加右側對齊的縮略圖。

<div class="list"> 

    <a class="item item-thumbnail-left" href="#"> 
        <img src="cover.jpg"> 
        <h2>Pretty Hate Machine</h2> 
        <p>Nine Inch Nails</p> 
    </a> 

    ...

</div>

嘗試一下 ?

內嵌列表(inset list)

我們可以在容器當中內嵌列表，列表不會顯示完整的寬度。
內嵌列表的樣式為：list list-inset，與常規列表區別是，它設置了外邊距（marign）,類似于選項卡。
內嵌列表是沒有陰影效果的，滾動時效果會更好。

<div class="list list-inset"> 

    <div class="item"> 
        Raiders of the Lost Ark 
    </div> 

    ...

</div>

嘗試一下 ?

ionic 卡片

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

<div class="card"> 
    <div class="item item-text-wrap"> 
      基本卡片，包含了文本信息。 
    </div>
</div>

嘗試一下 ?
卡片(card)默認樣式帶有box-shadow(陰影)，由于性能的原因，和他類似的元素像 list list-inset 并沒有陰影。
如果你有很多的卡片，每個卡片都有很多子元素，建議使用內嵌列表（inset list）。

卡片的頭部與底部

我們可以通過添加 item-divider 類為卡片添加頭部與底部：

<div class="card"> 
    <div class="item item-divider"> 
      卡片頭部！ 
    </div> 
    <div class="item item-text-wrap"> 
      基本卡片，包含了文本信息。 
    </div> 
    <div class="item item-divider"> 
      卡片底部！ 
    </div>
</div>

嘗試一下 ?

卡片列表

使用 list card 類來設置卡片列表：

<div class="list card"> 

    <a href="#" class="item item-icon-left"> 
      <i class="icon ion-home"></i> 
      Enter home address 
    </a> 

    <a href="#" class="item item-icon-left"> 
      <i class="icon ion-ios-telephone"></i> 
      Enter phone number 
    </a> 

    <a href="#" class="item item-icon-left"> 
      <i class="icon ion-wifi"></i> 
      Enter wireless password 
    </a> 

    <a href="#" class="item item-icon-left"> 
      <i class="icon ion-card"></i> 
      Enter card information 
    </a>

</div>

嘗試一下 ?

帶圖片卡片

卡片中使用圖片，效果會更好，實例如下：

<div class="list card"> 

  <div class="item item-avatar"> 
    <img src="avatar.jpg"> 
    <h2>Pretty Hate Machine</h2> 
    <p>Nine Inch Nails</p> 
  </div> 

  <div class="item item-image"> 
    <img src="cover.jpg"> 
  </div> 

  <a class="item item-icon-left assertive" href="#"> 
    <i class="icon ion-music-note"></i> 
    Start listening 
  </a>

</div>

嘗試一下 ?
運行效果如下：

卡片展現

以下實例中使用幾種不同的選項的卡片展現方式。開始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示圖片和文本信息，底部使用 item-divider 類。

<div class="list card"> 

    <div class="item item-avatar"> 
        <img src="mcfly.jpg"> 
        <h2>Marty McFly</h2> 
        <p>November 05, 1955</p> 
    </div> 

    <div class="item item-body"> 
        <img class="full-image" src="delorean.jpg"> 
        <p> 
          菜鳥教程 -- 學的不僅是技術，更是夢想！<br>
          菜鳥教程 -- 學的不僅是技術，更是夢想！<br> 
          菜鳥教程 -- 學的不僅是技術，更是夢想！<br> 
          菜鳥教程 -- 學的不僅是技術，更是夢想！ 
        </p> 
        <p> 
          <a href="#" class="subdued">1 喜歡</a> 
          <a href="#" class="subdued">5 評論</a> 
        </p> 
    </div> 

    <div class="item tabs tabs-secondary tabs-icon-left"> 
        <a class="tab-item" href="#"> 
          <i class="icon ion-thumbsup"></i> 
          喜歡 
        </a> 
        <a class="tab-item" href="#"> 
          <i class="icon ion-chatbox"></i> 
          Comment 
        </a> 
        <a class="tab-item" href="#"> 
          <i class="icon ion-share"></i> 
          分享 
        </a> 
    </div>

</div>

嘗試一下 ?
運行效果如下：

最后編輯于：2017.12.05 02:06:40

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 230,048評論 6贊 542
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,414評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 178,169評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,722評論 1贊 317
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,465評論 6贊 412
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,823評論 1贊 328
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,813評論 3贊 446
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 43,000評論 0贊 290
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,554評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,295評論 3贊 358
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,513評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,035評論 5贊 363
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,722評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,125評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,430評論 1贊 295
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,237評論 3贊 398
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,482評論 2贊 379

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

ionic頭(低)部+按鈕+列表+卡片

ionic頭(低)部+按鈕+列表+卡片

ionic 頭部與底部

Header(頭部)

Sub Header（副標題）

Footer(底部)

ionic 按鈕

不同大小的按鈕

無背景按鈕

無背景與邊框按鈕

圖標按鈕

頭部/底部添加按鈕

按鈕欄

ionic 列表

基本用法:

列表分隔符

帶圖標列表

按鈕列表

帶頭像列表

縮略圖列表

內嵌列表(inset list)

ionic 卡片

卡片的頭部與底部

卡片列表

帶圖片卡片

卡片展現

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

ionic頭(低)部+按鈕+列表+卡片

ionic 頭部與底部

Header(頭部)

Sub Header（副標題）

Footer(底部)

ionic 按鈕

不同大小的按鈕

無背景按鈕

無背景與邊框按鈕

圖標按鈕

頭部/底部添加按鈕

按鈕欄

ionic 列表

基本用法:

列表分隔符

帶圖標列表

按鈕列表

帶頭像列表

縮略圖列表

內嵌列表(inset list)

ionic 卡片

卡片的頭部與底部

卡片列表

帶圖片卡片

卡片展現

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频