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>
相关推荐
qq_390161778 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test38 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js