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

ionic 头部与底部

Header(头部)

<small>Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。
ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。
</small>
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（副标题）

<small>Sub Header同样是固定在顶部，只是是在Header的下面，就算没有写Header这个，Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header 。</small>

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

尝试一下 »

---

Footer(底部)

<small>Footer 是在屏幕的最下方，可以包含多种内容类型。</small>

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

尝试一下 »

<small>Footer 同上面的 Header，只是把样式名 bar-header 换做 bar-footer 。</small>

<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>

尝试一下 »

<small>此外，如果底部没有标题，但是又需要右边的按钮，你需要在右侧按钮添加 pull-right如:</small>

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

尝试一下 »

---

---

ionic 按钮

<small>按钮是移动app不可或缺的一部分，不同风格的app，需要的不同按钮的样式。
默认情况下，按钮显示样式为：display: inline-block。</small>

<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>

尝试一下 »

<small>button-block 样式按钮显示为：display: block，它将完全填充父元素的宽度，包含了内边距属性padding。</small>

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

尝试一下 »

<small>使用 button-full 类，可以让按钮显示完全宽度，且不包含内边距padding。</small>

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

尝试一下 »

---

不同大小的按钮

<small>button-large 设置为大按钮，button-small 设置为小按钮。</small>

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

尝试一下 »

---

无背景按钮

<small>button-outline 设置背景为透明。</small>

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

尝试一下 »

---

无背景与边框按钮

<small>button-clear 设置按钮背景为透明，且无边框。</small>

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

尝试一下 »

---

图标按钮

<small>我们可以在按钮上添加图标。</small>

<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>

尝试一下 »

---

头部/底部添加按钮

<small>头部/底部可以添加按钮，按钮的样式根据头部/底部来设定，所以你不需要为按钮添加额外的样式。</small>

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

尝试一下 »

<small>button-clear 类可以设置无背景和边框的头部/底部按钮。</small>

<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>

尝试一下 »

---

按钮栏

<small>我们可以使用 button-bar 类来设置按钮栏。以下实例中，我们在头部和内容中添加了按钮栏。</small>

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

尝试一下 »

---

---

ionic 列表

<small>列表是一个应用广泛的界面元素，在所有移动app中几乎都会使用到。
列表可以是基本文字、按钮，开关，图标和缩略图等。
列表项可以是任何的HTML元素。容器元素需要list类，每个列表项需要使用item类。
ionList和ionItem可以很容易的支持各种交互方式，比如，滑动编辑，拖动排序，以及删除项。</small>

基本用法:

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

尝试一下 »

列表分隔符

<small>我们可以使用 item-divider 类来为列表创建分隔符，默认情况下，列表项以不同的背景颜色和字体加粗来区分，但你也可以很容易的定制他。</small>

<div class="list"> 

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

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

    ...

</div>

尝试一下 »

---

带图标列表

<small>我们可以在列表项的左侧或右侧指定图标。
使用 item-icon-left 图标在左侧， item-icon-right 设置图标在右侧。如果你需要在两边都有图标，则两个类都添加上即可。
以下实例中，我们在列表项中使用了 < a> 标签，使得每个列表项可点击。
列表项在使用 < a>或<button> 元素时，如果右侧未添加图标，则会自动添加上箭头号。
实例中，第一项只有左侧图标，第二项左右均有图标，第三项有右侧图标（还有注释 item-note），第四项有badge（标记）元素。</small>

<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>

尝试一下 »

---

按钮列表

<small>使用 item-button-right 或 item-button-left 类将按钮放在列表项中。</small>

<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>

尝试一下 »

---

带头像列表

<small>使用 item-avatar 来创建一个带头像的列表：</small>

<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>

尝试一下 »

---

缩略图列表

<small>item-thumbnail-left 类用于添加左侧对齐的缩略图， item-thumbnail-right 类用于添加右侧对齐的缩略图。</small>

<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)

<small>我们可以在容器当中内嵌列表，列表不会显示完整的宽度。
内嵌列表的样式为：list list-inset，与常规列表区别是，它设置了外边距（marign）,类似于选项卡。
内嵌列表是没有阴影效果的，滚动时效果会更好。</small>

<div class="list list-inset"> 

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

    ...

</div>

尝试一下 »

---

---

ionic 卡片

<small>近年来卡片(card)的应用越来越流行，卡片提供了一个更好组织信息展示的工具。
针对移动端的应用，卡片会根据屏幕大小自适应大小。
我们可以很灵活的控制卡片的显示效果，甚至实现动画效果。
卡片一般放在页面顶部，当然也可以实现左右切换的功能。</small>

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

尝试一下 »
<small>卡片(card)默认样式带有box-shadow(阴影)，由于性能的原因，和他类似的元素像 list list-inset 并没有阴影。
如果你有很多的卡片，每个卡片都有很多子元素，建议使用内嵌列表（inset list）。</small>

---

卡片的头部与底部

<small>我们可以通过添加 item-divider 类为卡片添加头部与底部：</small>

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

尝试一下 »

---

卡片列表

<small>使用 list card 类来设置卡片列表：</small>

<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>

尝试一下 »

---

带图片卡片

<small>卡片中使用图片，效果会更好，实例如下：</small>

<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>

尝试一下 »
<small>运行效果如下：</small>

---

卡片展现

<small>以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示图片和文本信息，底部使用 item-divider 类。</small>

<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>

尝试一下 »
<small>运行效果如下：</small>