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阅读 199,636评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,890评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,680评论 0赞 330
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,766评论 1赞 271
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,665评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,045评论 1赞 276
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,515评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,182评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,334评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,274评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,319评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,002评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,599评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,675评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,917评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,309评论 2赞 345
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,885评论 2赞 341

ionic头(低)部+按钮+列表+卡片

ionic 头部与底部

Header(头部)

Sub Header（副标题）

Footer(底部)

ionic 按钮

不同大小的按钮

无背景按钮

无背景与边框按钮

图标按钮

头部/底部添加按钮

按钮栏

ionic 列表

基本用法:

列表分隔符

带图标列表

按钮列表

带头像列表

缩略图列表

内嵌列表(inset list)

ionic 卡片

卡片的头部与底部

卡片列表

带图片卡片

卡片展现

推荐阅读更多精彩内容