Ionic 组件 ion-item-divider ion-item-group ion-item-sliding ion-label ion-note

news2024/9/19 10:46:45

1 ion-item-divider

Item dividers是块元素，可用于分隔列表中的items 。它们类似于列表标题，但它们不应该只放在列表的顶部，而应该放在items之间。

在这里插入图片描述

<ion-list>
  <ion-item-group>
    <ion-item-divider>
      <ion-label> Section A</ion-label>
    </ion-item-divider>

    <ion-item>
      <ion-label>A1</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>A2</ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-label>A3</ion-label>
    </ion-item>
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider>
      <ion-label> Section B</ion-label>
    </ion-item-divider>

    <ion-item>
      <ion-label>B1</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>B2</ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-label>B3</ion-label>
    </ion-item>
  </ion-item-group>
</ion-list>

1 Theming

在这里插入图片描述

<ion-item-divider>
  <ion-label>Default</ion-label>
</ion-item-divider>
<ion-item-divider color="primary">
  <ion-label>Primary</ion-label>
</ion-item-divider>
<ion-item-divider color="secondary">
  <ion-label>Secondary</ion-label>
</ion-item-divider>
<ion-item-divider color="tertiary">
  <ion-label>Tertiary</ion-label>
</ion-item-divider>
<ion-item-divider color="success">
  <ion-label>Success</ion-label>
</ion-item-divider>
<ion-item-divider color="warning">
  <ion-label>Warning</ion-label>
</ion-item-divider>
<ion-item-divider color="danger">
  <ion-label>Danger</ion-label>
</ion-item-divider>
<ion-item-divider color="light">
  <ion-label>Light</ion-label>
</ion-item-divider>
<ion-item-divider color="medium">
  <ion-label>Medium</ion-label>
</ion-item-divider>
<ion-item-divider color="dark">
  <ion-label>Dark</ion-label>
</ion-item-divider>

2 ion-item-group

Item groups是将类似items 织在一起的容器。它们可以包含 item dividers，将 items划分为多个部分。它们还可以用于对 sliding items进行分组。

在这里插入图片描述

<ion-item-group>
  <ion-item-divider>
    <ion-label>A</ion-label>
  </ion-item-divider>

  <ion-item>
    <ion-label>Angola</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Argentina</ion-label>
  </ion-item>
  <ion-item lines="none">
    <ion-label>Armenia</ion-label>
  </ion-item>
</ion-item-group>

1 Sliding Items

在这里插入图片描述

<ion-item-group>
  <ion-item-divider>
    <ion-label> Fruits </ion-label>
  </ion-item-divider>

  <ion-item-sliding>
    <ion-item>
      <ion-label> Grapes </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option> Favorite </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label> Apples </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option> Favorite </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item lines="none">
      <ion-label> Bananas </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option> Favorite </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-item-group>

3 ion-item-sliding

sliding item包含一个可以拖动以显示选项按钮的项目。它需要一个 item 作为子项。所有要显示的选项都应放置在item-options元素中。
在这里插入图片描述

<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Sliding Item with End Options</ion-label>
    </ion-item>

    <ion-item-options>
      <ion-item-option>Favorite</ion-item-option>
      <ion-item-option color="danger">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option color="success">Archive</ion-item-option>
    </ion-item-options>

    <ion-item>
      <ion-label>Sliding Item with Start Options</ion-label>
    </ion-item>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option color="success">Archive</ion-item-option>
    </ion-item-options>

    <ion-item>
      <ion-label>Sliding Item with Options on Both Sides</ion-label>
    </ion-item>

    <ion-item-options side="end">
      <ion-item-option>Favorite</ion-item-option>
      <ion-item-option color="danger">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

1 Icon Options

When an icon is placed alongside text in the item option, it will display the icon on top of the text by default. The slot on the icon can be changed to any of the available item option slots to change its position.

在这里插入图片描述

<ion-list>
  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option color="success">
        <ion-icon slot="icon-only" name="archive"></ion-icon>
      </ion-item-option>
    </ion-item-options>

    <ion-item>
      <ion-label>Sliding Item with Icons Only</ion-label>
    </ion-item>

    <ion-item-options side="end">
      <ion-item-option>
        <ion-icon slot="icon-only" name="heart"></ion-icon>
      </ion-item-option>
      <ion-item-option color="danger">
        <ion-icon slot="icon-only" name="trash"></ion-icon>
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option color="success">
        <ion-icon slot="start" name="archive"></ion-icon>
        Archive
      </ion-item-option>
    </ion-item-options>

    <ion-item>
      <ion-label> Sliding Item with Start Icons </ion-label>
    </ion-item>

    <ion-item-options side="end">
      <ion-item-option>
        <ion-icon slot="start" name="heart"></ion-icon>
        Favorite
      </ion-item-option>
      <ion-item-option color="danger">
        <ion-icon slot="start" name="trash"></ion-icon>
        Delete
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option color="success">
        <ion-icon slot="end" name="archive"></ion-icon>
        Archive
      </ion-item-option>
    </ion-item-options>

    <ion-item>
      <ion-label> Sliding Item with End Icons </ion-label>
    </ion-item>

    <ion-item-options>
      <ion-item-option>
        <ion-icon slot="end" name="heart"></ion-icon>
        Favorite
      </ion-item-option>
      <ion-item-option color="danger">
        <ion-icon slot="end" name="trash"></ion-icon>
        Delete
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option color="success">
        <ion-icon slot="top" name="archive"></ion-icon>
        Archive
      </ion-item-option>
    </ion-item-options>

    <ion-item>
      <ion-label> Sliding Item with Top Icons </ion-label>
    </ion-item>

    <ion-item-options>
      <ion-item-option>
        <ion-icon slot="top" name="heart"></ion-icon>
        Favorite
      </ion-item-option>
      <ion-item-option color="danger">
        <ion-icon slot="top" name="trash"></ion-icon>
        Delete
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option color="success">
        <ion-icon slot="bottom" name="archive"></ion-icon>
        Archive
      </ion-item-option>
    </ion-item-options>

    <ion-item>
      <ion-label> Sliding Item with Bottom Icons </ion-label>
    </ion-item>

    <ion-item-options>
      <ion-item-option>
        <ion-icon slot="bottom" name="heart"></ion-icon>
        Favorite
      </ion-item-option>
      <ion-item-option color="danger">
        <ion-icon slot="bottom" name="trash"></ion-icon>
        Delete
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

2 Expandable Options

如果你滑过某个点，Options可以扩展到占据父ion-item的整个宽度。这可以与 item 选项上的ionSwipe事件相结合，以便在项目完全滑动时调用方法。

在这里插入图片描述

<ion-list>
  <ion-item-sliding>
    <ion-item-options side="start">
      <ion-item-option color="success" expandable>Archive</ion-item-option>
    </ion-item-options>

    <ion-item>
      <ion-label>Sliding Item with Expandable Options</ion-label>
    </ion-item>

    <ion-item-options side="end">
      <ion-item-option>Favorite</ion-item-option>
      <ion-item-option color="danger" expandable>Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

4 ion-label

Label是一个主要用于向Item组件添加文本内容的元素。指定可见标签时，标签也可以在表单控件组件（如Input或Radio）内部使用，但这不是必需的。
标签在项目内部的位置可以是内联的、固定的、堆叠的或浮动的。

在这里插入图片描述

<ion-label>Label</ion-label>

在这里插入图片描述

<ion-item>
  <ion-label>Default Label</ion-label>
</ion-item>

<ion-item>
  <ion-label>
    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit.
  </ion-label>
</ion-item>

<ion-item>
  <ion-label class="ion-text-wrap">
    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
    adipiscing elit.
  </ion-label>
</ion-item>

<ion-item>
  <ion-label>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </ion-label>
</ion-item>

1 Theming

在这里插入图片描述

<ion-label>Default</ion-label>
<ion-label color="primary">Primary</ion-label>
<ion-label color="secondary">Secondary</ion-label>
<ion-label color="tertiary">Tertiary</ion-label>
<ion-label color="success">Success</ion-label>
<ion-label color="warning">Warning</ion-label>
<ion-label color="danger">Danger</ion-label>
<ion-label color="light">Light</ion-label>
<ion-label color="medium">Medium</ion-label>
<ion-label color="dark">Dark</ion-label>

5 ion-note

注释是通常用作提供更多信息的字幕的文本元素。默认情况下，它们的样式显示为灰色。注释可以作为元数据文本在项目中使用。
在这里插入图片描述

<ion-item>
  <ion-label>Label</ion-label>
  <ion-note slot="end">Note (End)</ion-note>
</ion-item>

<ion-item lines="full">
  <ion-note slot="start">Note (Start)</ion-note>
  <ion-label>Label</ion-label>
</ion-item>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

javascript 操作mysql数据库

javascript 操作mysql数据库

目录 一&#xff1a;Javascript访问MYSQL 二&#xff1a;JavaScript中操作Mysql数据库实例 一&#xff1a;Javascript访问MYSQL 1、下载MYSQL的ODBC连接 2、在JS中建立ODBC连接如下&#xff1a; var con new ActiveXObject("ADODB.Connection"); con.Connection…
阅读更多...
Linux软件包（源码包和二进制包）

Linux软件包（源码包和二进制包）

Linux下的软件包众多&#xff0c;且几乎都是经 GPL 授权、免费开源&#xff08;无偿公开源代码&#xff09;的。这意味着如果你具备修改软件源代码的能力&#xff0c;只要你愿意&#xff0c;可以随意修改。 GPL&#xff0c;全称 General Public License&#xff0c;中文名称“通…
阅读更多...
jbase代码生成器(成型篇)

jbase代码生成器(成型篇)

上一篇说到通用码表可以解决百分之八十的基础维护功能&#xff0c;剩下的百分二十的需要级联维护的界面可以用代码生成器生成代码&#xff0c;基于生成的代码拷贝再组装界面&#xff0c;来解决这百分之二十的工作量里的百分之八十工作量。 首先实现代码生成器 Class Jbase.Ma…
阅读更多...
C语言实现给出一位数不大于7位的整型数字，取整数从右端开始的4～7位数字

C语言实现给出一位数不大于7位的整型数字，取整数从右端开始的4～7位数字

完整代码&#xff1a; // 给出一位数不大于7位的整型数字&#xff0c;取整数从右端开始的4&#xff5e;7位数字 //就是一个数为abcdefg&#xff0c;取它从右端开始的4&#xff5e;7位数字&#xff0c;就为dcba //如果位数不足7位时&#xff0c;会在数字高位补0 //例如一个数为…
阅读更多...
leetcode 62

leetcode 62

leetcode 62 题目 解题思路 class Solution { public:int uniquePaths(int m, int n) {vector<vector<int>> f(m, vector<int>(n));for(int i0; i<m; i){f[i][0] 1;}for(int j0; j<n; j){f[0][j] 1;}for(int i1; i<m; i){for(int j1; j<n; j){…
阅读更多...
如何记录血压的波动情况

如何记录血压的波动情况

import pandas as pd from plotnine import * import matplotlib.pyplot as plt plt.rcParams[font.sans-serif] [Microsoft YaHei] 记录时间(time)、收缩压(SBP)、舒张压(DBP)&#xff1a; df pd.DataFrame({ time: [2023-11-01 08:30, 2023-11-02 21:00, 2023-11-0…
阅读更多...
【星海随笔】SDN neutron (一)

【星海随笔】SDN neutron (一)

一、SDN的原理&#xff1a; 控制平面与数据平面分离&#xff1a;传统网络中&#xff0c;网络设备同时承担控制和数据转发功能&#xff0c;而SDN将这两个功能分离&#xff0c;使得网络控制集中在一个中心控制器上。 中心控制器&#xff1a;SDN架构中的中心控制器负责网络的全局…
阅读更多...
【小黑送书—第五期】＞＞《MATLAB科学计算从入门到精通》

【小黑送书—第五期】＞＞《MATLAB科学计算从入门到精通》

从代码到函数&#xff0c;从算法到实战&#xff0c;从问题到应用&#xff0c;由浅入深掌握科学计算方法&#xff0c;高效解决实际问题。 从代码到函数&#xff0c;掌握多种经典算法 跨越多个领域&#xff0c;精通各类科学计算 多种应用实例&#xff0c;高效解决实际问题 今天给…
阅读更多...
【数据结构】Lambda

【数据结构】Lambda

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈数据结构 &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; Lambda表达式 1. 背景1.1 语法1.2 函…
阅读更多...
零基础必知的Python简介！

零基础必知的Python简介！

文章目录 前言1.Python 简介2.Python 发展历史3.Python 特点3.为什么是Python而不是其他语言&#xff1f;4.Python的种类总结关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python…
阅读更多...
sqli-bypass wp

sqli-bypass wp

sqli-bypass靶场 level 1 尝试注入点 1 ,1&#xff0c;1,1",1"" 》存在字符型单引号注入 id1and(1)-- >提示存在sql注入 bypass and、()、--都可能存在被屏蔽掉 尝试#代替-- id1and(1)%23 》 正常回显&#xff0c;说明–被屏蔽了&#xff0c;and&#xf…
阅读更多...
相机标定：张正友标定原理

相机标定：张正友标定原理

本文来自公众号“AI大道理” —————— 计算机视觉的源头是相机&#xff0c;因此我们有必要对相机有所了解。 原始相机拍摄的图像一般都会有所畸变&#xff0c;导致画面和实际观测的有所排查&#xff0c;为了让相机拍摄的图像和肉眼观察的一致&#xff0c;就需要进行相机标…
阅读更多...
双网卡多网卡时win11如何设置网卡优先级

双网卡多网卡时win11如何设置网卡优先级

背景&#xff1a; 电脑需要同时使用多个网卡&#xff0c;一个用于被远程、另一个用于打开网页。 电脑打开网页时&#xff0c;走的是哪个网卡&#xff0c;是根据网卡优先级来的。 打开控制面板、网络和Internet、网络和共享中心 点击左侧 更改适配器设置。我这里可见两个网卡…
阅读更多...
C语言—统计从键盘输入的一行英文句子的字符个数

C语言—统计从键盘输入的一行英文句子的字符个数

流程图 代码 #include <stdio.h>int main() {int count0;printf("请输入英文字符&#xff0c;回车确认&#xff1a;");while (getchar()!\n){count count 1;}printf("共输入%d个字符\n", count);system("pause");return 0; }请输入英文字…
阅读更多...
Git的安装，简介以及常用命令【超详细】

Git的安装，简介以及常用命令【超详细】

目录 一. Git简介 分布式特点 优缺点 Git 与 SVN 区别 二. Git安装 三. Git常用命令 四. Git的文件状态 1.文件状态 2.工作区域 一. Git简介 Git 是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。 也是Linus Torvalds…
阅读更多...
粘性定位-最下面怎么出现留白

粘性定位-最下面怎么出现留白

问题&#xff1a;出现了留白 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Document</title…
阅读更多...
网格变形算法

网格变形算法

网格变形 需求分析技术分析 需求分析 根据几何模型上的几个特征点&#xff0c;对几何模型进行变形。比如 技术分析 把几何模型使用三角面片表示&#xff0c;然后通过网格映射变形进行实现。关于网格这块有本经典的书可以参考&#xff0c;《ploygon mesh processing》。上面…
阅读更多...
海外跨境电商商城源码，开启多语言多货币多商家入驻的电商新时代！

海外跨境电商商城源码，开启多语言多货币多商家入驻的电商新时代！

尊敬的CSDN用户们&#xff0c;你们好!我们很高兴地向您介绍一款引领未来电商潮流的全新产品——海外跨境电商商城源码!这款源码将为您打开多语言、多货币、多商家入驻的电商新时代&#xff0c;让您轻松打造出属于自己的跨境电商平台! 一、多语言支持&#xff0c;轻松拓展全球市…
阅读更多...
创建一个小表表空间A。一个大表表空间B.并创建一个用户B1默认表空间为B。

创建一个小表表空间A。一个大表表空间B.并创建一个用户B1默认表空间为B。

目录 ​编辑 1、创建小表表空间 A 2、创建大表表空间 B 3、创建用户 B1 并将其默认表空间设置为 B 4、授权给用户 B1 的权限 1、创建小表表空间 A CREATE TABLESPACE A DATAFILE /u01/app/oracle/oradata/orcl/datafile_A.dbf SIZE 10M; 2、创建大表表空间 B 这个时间会略…
阅读更多...
数据库-MySQL之数据库必知必会1-9章

数据库-MySQL之数据库必知必会1-9章

检索数据 1.检索不重复的行 从 Customers 表中检索所有的 ID select DISTINCT cust_id from Customers;DISTINCT表示去掉重复的行 2.限制结果-分页 SELECT语句返回所有匹配的行&#xff0c;它们可能是指定表中的每个行。为了返回第一行或前几行&#xff0c;可使用LIMIT子句。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023