Ionic组件 ion-list ion-list-header

1 ion-list

列表由多行项目组成,这些项目可以包含 text, buttons, toggles, icons, thumbnails等。列表通常包含具有类似数据内容的项目,如 images and text。

列表支持多种交互,包括滑动项目以显示选项、拖动以重新排列列表中的项目以及删除项目。

java 复制代码
<ion-list>
  <ion-item>
    <ion-label>Pokémon Yellow</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>The Legend of Zelda</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Pac-Man</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Super Mario World</ion-label>
  </ion-item>
</ion-list>

1.1 Inset List

将inset 属性添加到列表将在列表周围应用边距。在ios模式下,它还会将圆角添加到列表中。

java 复制代码
<ion-content color="light">
  <ion-list [inset]="true">
    <ion-item>
      <ion-label>Pokémon Yellow</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Mega Man X</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>The Legend of Zelda</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Pac-Man</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Super Mario World</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

1.2 List Lines

将lines 属性添加到列表将调整列表中所有 items 的底部边框。将其设置为"full"将显示全宽边框,"inset"将显示用左填充调整的边框,"none"将不显示边框。如果在列表中的某个item 设置了 lines 属性,则该属性将优先于列表中的属性。

java 复制代码
<ion-list lines="full">
  <ion-item>
    <ion-label>Full Lines</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Full Lines</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Full Lines</ion-label>
  </ion-item>
</ion-list>

<ion-list lines="inset">
  <ion-item>
    <ion-label>Inset Lines</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Inset Lines</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Inset Lines</ion-label>
  </ion-item>
</ion-list>

<ion-list lines="none">
  <ion-item>
    <ion-label>No Lines</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>No Lines</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>No Lines</ion-label>
  </ion-item>
</ion-list>

2 ion-list-header

List headers 是用于描述列表内容的块元素。与item dividers不同,list headers只能在items列表的顶部使用一次。

java 复制代码
<ion-list>
  <ion-list-header>
    <ion-label>Video Games</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label>Pokémon Yellow</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>The Legend of Zelda</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Pac-Man</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Super Mario World</ion-label>
  </ion-item>
</ion-list>

2.1 Buttons in List Headers

放置在list header中的按钮可用于显示列表的一部分并使用该按钮重定向到完整列表。

java 复制代码
<ion-list>
  <ion-list-header>
    <ion-label>Video Games</ion-label>
    <ion-button>See All</ion-button>
  </ion-list-header>
  <ion-item>
    <ion-label>Pokémon Yellow</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>The Legend of Zelda</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Pac-Man</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Super Mario World</ion-label>
  </ion-item>
</ion-list>

2.2 List Header Lines

默认情况下,列表标题不显示底部边框。lines属性可以修改为"full"或"inset",分别显示全宽边框或带左填充的插入边框。

java 复制代码
<ion-list>
  <ion-list-header>
    <ion-label>Default</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
</ion-list>

<ion-list>
  <ion-list-header lines="inset">
    <ion-label>Inset</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
</ion-list>

<ion-list>
  <ion-list-header lines="full">
    <ion-label>Full</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
</ion-list>
相关推荐
虾球xz28 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇34 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒37 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐1 小时前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express