Ionic组件 ion-list ion-list-header

1 ion-list

列表由多行项目组成,这些项目可以包含 text, buttons, toggles, icons, thumbnails等。列表通常包含具有类似数据内容的项目,如 images and text。
列表支持多种交互,包括滑动项目以显示选项、拖动以重新排列列表中的项目以及删除项目。
在这里插入图片描述

<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模式下,它还会将圆角添加到列表中。

在这里插入图片描述

<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 属性,则该属性将优先于列表中的属性。
在这里插入图片描述

<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列表的顶部使用一次。
在这里插入图片描述

<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中的按钮可用于显示列表的一部分并使用该按钮重定向到完整列表。
在这里插入图片描述

<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”,分别显示全宽边框或带左填充的插入边框。
在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/127733.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GCC + Vscode 搭建 nRF52xxx 开发环境

在 Windows 下使用 GCC Vscode 搭建 nRF52xxx 开发环境 ...... by 矜辰所致前言 最近有遇到项目需求&#xff0c;需要使用到 Nordic 的 nRF52xxx 芯片&#xff0c;还记得当初刚开始写博文的时候的写的 nRF52832 学习笔记&#xff0c;现在看当时笔记毫无逻辑可言&#xff0c…

〔003〕虚幻 UE5 基础教程和蓝图入门

✨ 目录 ▷ 新建项目▷ 快捷操作▷ 镜头移动速度▷ 新建蓝图关卡▷ 打印字符串▷ 蓝图的快捷键▷ 场景中放置物体▷ 通过蓝图改变物体位置▷ 展现物体运动轨迹▷ 队列运行▷ 新建项目 打开虚幻启动程序,选择 引擎版本 后点击 启动选择 游戏 类型,默认设置中选择 蓝图,项目名…

聚铭国产化日志合规版 → 中小企事业单位等保建设的最优解

聚铭网络最新发布聚铭综合日志分析系统国产化合规版本 &#xff0c;相较于同类型同档次非国产化设备性能无衰减、功能无裁减、成本不提高&#xff0c;适用于信创替换以及等保日志建设等应用场景。 面对日趋复杂的外部环境&#xff0c;近年来&#xff0c;国家越来越重视关键技术…

鲁大师电动车智能化测评报告第二十三期:实测续航95km,九号Q90兼顾个性与实用

鲁大师第二十三期智能化电动车测评排行榜数据来源于鲁大师智慧实验室,测评的车型均为市面上主流品牌的主流车型。截止目前,鲁大师智能化电动车测评的车型高达130余台,且还在不断增加和丰富中。 一、测评依据 鲁大师电动车智能化测评体系包含车辆的状态采集与管理硬件系统、车辆…

归并排序之确定递归层数

题目 给定一维int型数组a[0,1,…,n-1], 使用归并排序方法, 对其进行从小到大排序, 请输出递归过程中自顶自下第三层的排序结果, 其中最顶层为第一层, 即最终的排序结果层. 归并排序划分请按a[0,mid(0n-1)/2], a[(0n-1)/21, n-1]进行划分子问题. Input 输入第1行有一个int型正…

OLED透明屏的应用场景有哪些

OLED透明屏在其他领域的应用包括&#xff1a; 商业展示&#xff1a;在商业展示中&#xff0c;OLED透明屏可以作为展示窗口&#xff0c;展示产品信息、广告宣传和品牌形象。通过将透明屏幕安装在展柜、货架或商业窗口中&#xff0c;可以吸引顾客的注意力并提供引人注目的展示效…

霍尔电流传感器如何进行可靠性测试?主要应用在哪些领域?

霍尔电流传感器广泛应用于航空航天、电源监测、飞行器状态监测、变速驱动设备、焊接设备供电电源、新能源汽车蓄电池管理系统等领域&#xff0c;在电流检测领域中有着重要地位和实用价值&#xff0c;在电驱系统中被称为新能源汽车的动力“心脏”。因此&#xff0c;霍尔电流传感…

QML9、输入元素

1、输入元素(Input Element) 我们已经使用过MouseArea(鼠标区域)作为鼠标输入元素。这里我们将更多的介绍关于键盘输入的一些东西。我们开始介绍文本编辑的元素:TextInput(文本输入)和TextEdit(文本编辑)。 2、文本输入(TextInput) 文本输入允许用户输入一行文本…

WorkPlus定制化的沟通协作平台,助您实现企业级完全掌控

在企业沟通协作的领域&#xff0c;一种高度定制化的平台是至关重要的。WorkPlus作为一款领先的沟通协作平台&#xff0c;具备高度定制化的特点&#xff0c;能够满足企业各项需求。通过平台级定制扩展和上下游完全掌控&#xff0c;WorkPlus成为了企业实现定制化和完全掌控的理想…

excel如何加密(excel加密的三种方法)

Excel是一款广泛使用的办公软件&#xff0c;有时候我们需要对一些重要的Excel文件进行加密&#xff0c;以保证文件的安全性。下面将介绍3种常用的Excel加密方法。 方法一&#xff1a;通过路径文件-另存为-工具-常规选项-设置打开或修改权限密码&#xff08;密码只可以使数字、字…

虚幻引擎:如何进行关卡切换?

一丶非无缝切换 在切换的时候会先断开连接,等创建好后才会链接,造成体验差 蓝图中用到的节点是 Execute Console Command 二丶无缝切换 链接的时候不会断开连接,中间不会出现卡顿,携带数据转换地图 1.需要在gamemode里面开启无缝漫游,开启之后使用上面的切换方式就可以做到无缝…

矩阵起源加入 OpenCloudOS 操作系统开源社区,完成技术兼容互认证

近日&#xff0c;超融合异构云原生数据库 MatrixOne企业版软件 V1.0 完成了与 OpenCloudOS 的相互兼容认证&#xff0c;测试期间&#xff0c;整体运行稳定&#xff0c;在功能、性能及兼容性方面表现良好。 一、产品简介 矩阵起源 MatrixOrigin 致力于建设开放的技术开源社区和…

企业安全—三保一评

0x00 前言 本篇主要是讲解三保一评的基础知识&#xff0c;以及对为什么要进行这些内容的原因进行总结。 0x01 整体 1.概述 三保分别是&#xff0c;分保&#xff0c;等保&#xff0c;关保。 分保就是指涉密信息系统的建设使用单位根据分级保护管理办法和有关标准&#xff0c…

LeetCode【78. 子集】

78. 子集 中等 2.2K 相关企业 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&…

Vue框架项目,给容器添加水印watermark

1、在/utils下新增一个名为waterMark.js的脚本 具体水印样式可以在代码里自行调节style 参数 - 水印内容, 加水印的容器, 是否显示时间 let watermark {};function getCurrentDateTime() {const now new Date();const year now.getFullYear();const month String(now.ge…

Flink之SQL查询操作

SQL查询 基本SELECT查询生成测试数据WITHWHEREDISTINCTORDER BYLIMIT 窗口函数概述创建数据表滚动窗口 TUMBLE滑动窗口 HOP累积窗口 CUMULATE窗口偏移 聚合窗口聚合分组聚合OVER聚合 TOP-N普通Top-N窗口Top-N 联结Join查询内部等连接外部等连接间隔联结 集合操作UNION 和 UNION…

界面控件DevExtreme图表和仪表(v23.1) - 新功能(Angular,React,Vue,jQuery)

本文将为大家总结下DevExtreme在v23.1版本中发布的一些与图表和仪表盘相关的功能。 DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#…

数据结构(c语言版) 队列

链队列 要求&#xff1a;实现链队列的创建、初始化、入队、出队 &#xff08;先进先出&#xff09; 代码 // // Created by My.cy on 2023/10/19. // //链队列 创建、初始化、入队、出队 先进先出#include <stdio.h> #include <malloc.h>//定义结构体 struct…

“探秘!根据关键词搜索商品列表的虾皮API大揭露!“

要使用虾皮API根据关键词获取商品列表&#xff0c;您需要使用虾皮API的搜索功能。以下是使用Python和虾皮API根据关键词获取商品列表的基本步骤&#xff1a; 注册虾皮API账号并获取API凭证&#xff08;访问虾皮开放平台并创建应用以获取API凭证&#xff09;。安装必要的Python…

SPRINGBOOT整合CXF发布WEB SERVICE和客户端调用(用户和密码验证)

主要分为客户端和服务端 服务端 pom配置 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.4.3</version><relativePath/> <!-- lookup parent fro…