×
ionic 教程ionic 安装ionic 创建 APP

ionic CSS

ionic 头部与底部ionic 按钮ionic 列表ionic 卡片ionic 表单和输入框ionic toggleionic checkboxionic 单选框ionic rangeionic selectionic tab(选项卡)ionic 网格(Grid)ionic 颜色ionic icon(图标)

ionic JavaScript

ionic 上拉菜单ionic 背景层ionic 下拉刷新ionic 复选框ionic 单选框操作ionic 切换开关操作ionic 手势事件ionic 头部和底部ionic 列表操作ionic 加载动作ionic 模态窗口ionic 导航ionic 平台ionic 浮动框ionic 对话框ionic 滚动条ionic 侧栏菜单ionic 滑动框ionic 加载动画ionic 选项卡栏操作

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>

尝试一下 »


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)