ionic移动开发常用的HTML组件总结

news/2024/7/3 5:57:58

ionic常用的11个组件

  • header组件
  • list组件
  • 卡片组件
  • 复选框组件
  • 单选框组件
  • 下拉选择组件
  • 按钮组件
  • chip组件
  • 图形组件
  • 输入组件
  • 栅格化组件

1、header组件

演示代码

<ion-header >
  <ion-toolbar>
    <ion-title>ionic组件header部分</ion-title>
    <ion-button slot="end" size="small">浏览</ion-button>
  </ion-toolbar>
</ion-header>
<ion-content >

运行效果

image

2、list组件

演示代码

<ion-list>
  <ion-item>
  <ion-label> 元素1</ion-label>
    <ion-button>元素1</ion-button>
  </ion-item>

  <ion-item>
  <ion-label> 元素2</ion-label>
    <ion-button>元素2</ion-button>
  </ion-item>

  <ion-item>
  <ion-label> 元素3</ion-label>
  <ion-button>元素3</ion-button>
  </ion-item>

    <ion-item>
      <ion-label> 元素4</ion-label>
      <ion-button>元素4</ion-button>
    </ion-item>

    <ion-item>
      <ion-label> 元素5</ion-label>
      <ion-button>元素5</ion-button>
    </ion-item>

    <ion-item>
      <ion-label> 元素6</ion-label>
      <ion-button>元素6</ion-button>
    </ion-item>

  </ion-list>

运行效果

image

3、卡片组件

演示代码

<ion-card>
  <ion-card-header>
  <ion-card-title>主标题</ion-card-title>
  <ion-card-subtitle>副标题</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    Keep close to Nature's heart... and break clear away, once in awhile,
    and climb a mountain or spend a week in the woods. Wash your spirit clean.
  </ion-card-content>
  </ion-card>

运行效果

image

4、复选框组件

演示代码

<ion-list>
  <ion-item >
  <ion-label>选项1</ion-label>
  <ion-checkbox slot="end" ></ion-checkbox>
  </ion-item>

  <ion-item >
  <ion-label>选项2</ion-label>
  <ion-checkbox slot="end" ></ion-checkbox>
  </ion-item>

  <ion-item >
  <ion-label>选项3</ion-label>
  <ion-checkbox slot="end" ></ion-checkbox>
  </ion-item>

    <ion-item >
      <ion-label>选项4</ion-label>
      <ion-checkbox slot="end" ></ion-checkbox>
    </ion-item>

    <ion-item >
      <ion-label>选项5</ion-label>
      <ion-checkbox slot="end" ></ion-checkbox>
    </ion-item>

    <ion-item >
      <ion-label>选项6</ion-label>
      <ion-checkbox slot="end" ></ion-checkbox>
    </ion-item>

  </ion-list>

运行效果

image

5、单选框组件

演示代码

<ion-list>
  <ion-radio-group value="biff">
  <ion-list-header>
  <ion-label>你中午想吃什么</ion-label>
  </ion-list-header>

  <ion-item>
  <ion-label>米线</ion-label>
  <ion-radio slot="start" value="biff"></ion-radio>
  </ion-item>

  <ion-item>
  <ion-label>面条</ion-label>
  <ion-radio slot="start" value="griff"></ion-radio>
  </ion-item>

  <ion-item>
  <ion-label>炒饭</ion-label>
  <ion-radio slot="start" value="buford"></ion-radio>
  </ion-item>

    <ion-item>
      <ion-label>盖饭</ion-label>
      <ion-radio slot="start" value="fan"></ion-radio>
    </ion-item>
  </ion-radio-group>
  </ion-list>

运行效果

image

6、下拉选择组件

演示代码(去掉multiple="true"属性变为单选框)

 <ion-list>
  <ion-item>
  <ion-label>Gender</ion-label>
  <ion-select placeholder="Select One" multiple="true" cancelText="取消" okText="确定">
  <ion-select-option value="f">Female</ion-select-option>
  <ion-select-option value="m">Male</ion-select-option>
  </ion-select>
  </ion-item>
  </ion-list>

运行效果

image

7、按钮组件

演示代码

<ion-list>
  <ion-item>
  <ion-label>按钮组件1</ion-label>
  <ion-button color="danger" expand="block" shape="round" size="large">按钮组件</ion-button>
  </ion-item>

    <ion-item>
      <ion-label>按钮组件2</ion-label>
      <ion-button color="success" expand="block" shape="round" size="large">按钮组件</ion-button>
    </ion-item>

    <ion-item>
      <ion-label>按钮组件3</ion-label>
      <ion-button color="warning" expand="block" shape="round" size="large">按钮组件</ion-button>
    </ion-item>

  </ion-list>

运行效果

image

8、chip组件

演示代码

<ion-chip color="danger">
  <ion-label>用户名</ion-label>
  <ion-icon name="person-outline"></ion-icon>
  </ion-chip>

  <ion-chip>
    <ion-label>Default</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-label color="secondary">Secondary Label</ion-label>
  </ion-chip>

  <ion-chip color="secondary">
    <ion-label color="dark">Secondary w/ Dark label</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-icon name="pin"></ion-icon>
    <ion-label>Default</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-icon name="heart" color="dark"></ion-icon>
    <ion-label>Default</ion-label>
  </ion-chip>

  <ion-chip>
    <ion-label>Button Chip</ion-label>
    <ion-icon name="close-circle"></ion-icon>
  </ion-chip>

  <ion-chip>
    <ion-icon name="pin" color="primary"></ion-icon>
    <ion-label>Icon Chip</ion-label>
    <ion-icon name="close"></ion-icon>
  </ion-chip>

  <ion-chip>
    <ion-avatar>
      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
    </ion-avatar>
    <ion-label>Avatar Chip</ion-label>
    <ion-icon name="close-circle"></ion-icon>
  </ion-chip>

运行效果

image

9、图形组件

演示代码


<ion-img src="https://www.cztcms.cn/wp-content/uploads/2020/01/logo4.png"></ion-img>

运行效果

image

10、输入组件

演示代码

<ion-item>
  <ion-label position="stacked">用户名</ion-label>
  <ion-input placeholder="在这里输入用户名"></ion-input>
  </ion-item>


  <ion-item>
  <ion-label position="stacked">留言内容</ion-label>
  <ion-textarea placeholder="在这里输入留言内容" rows="4"></ion-textarea>
  </ion-item>

  <ion-item>
  <ion-label position="stacked">出生日期</ion-label>
  <ion-datetime displayFormat="YYYY-MM-DD" value="2012-12-15T13:47:20.789"></ion-datetime>

  </ion-item>

运行效果

image

11、栅格化组件

演示代码

<ion-grid>
    <ion-row>
      <ion-col size="4">
        <ion-avatar>
          <ion-img src="https://www.cztcms.cn/img/login_logo.png">

          </ion-img>
        </ion-avatar>

      </ion-col >
      <ion-col size="8">
        <ion-row>
          <ion-col>姓名</ion-col>
          <ion-col>微笑涛声</ion-col>
        </ion-row>

        <ion-row>
          <ion-col>身高</ion-col>
          <ion-col>保密</ion-col>
        </ion-row>
        <ion-row>
          <ion-col>体重</ion-col>
          <ion-col>保密</ion-col>
        </ion-row>


      </ion-col>

    </ion-row>

运行效果

image


http://www.niftyadmin.cn/n/3649680.html

相关文章

[JavaME]手机是否能够申请到动态IP?

[JavaME]手机是否能够申请到动态IP?

[JavaME]手机是否能够申请到动态IP?用ServerSocketConnection&#xff1f;http://www.j2medev.com/bbs/dispbbs.asp?boardid21&id4099&star1#2083 &#xff0c;这里是原始讨论贴。这里我们给出一个思路&#xff1a;可以先这样&#xff0c;手机先访问一个固定的网址&a…
阅读更多...
给数学的孩子们推荐的十部经典电影~

给数学的孩子们推荐的十部经典电影~

0) 中文名称&#xff1a;死亡密码 英文名称&#xff1a;π 别 名&#xff1a;3.14159265358(USA) 发行时间&#xff1a;1998年07月10日 科幻惊栗手法描写一名天才数学家触目惊心的经历。才华盖世的数学家马斯在过去十年来&#xff0c;发现股票市场在混乱波动背后…
阅读更多...
移动端开发——ionic集成toast消息提示插件

移动端开发——ionic集成toast消息提示插件

新建toast.service文件进行方法封装 1、新建文件命令 ionic g service service/toast2、toast.service完整代码 import { Injectable } from angular/core; import {ToastController} from "ionic/angular";Injectable({providedIn: root }) export class ToastSe…
阅读更多...
如何创建Laravel雄辩的API资源以将模型转换为JSON

如何创建Laravel雄辩的API资源以将模型转换为JSON

介绍 (Introduction) When creating APIs, we often need to work with database results to filter, interpret or format values that will be returned in the API response. API resource classes allow you to convert your models and model collections into JSON, work…
阅读更多...
[JavaME]手机玩点对点MSN传情动漫之补充说明

[JavaME]手机玩点对点MSN传情动漫之补充说明

代码将陆续上传。1&#xff1a;发送特定端口短信的MIDlet源代码可以从http://www.cnblogs.com/Files/zhengyun_ustc/MIMESMSSender.rar下载。其实实现的技术很简单&#xff0c;只要下载了 这两个例子程序&#xff0c;跑一遍&#xff0c;想想就能做出来了&#xff0c;呵呵。希望…
阅读更多...
C/C++ 常见误区

C/C++ 常见误区

1. C虽然主要是以C的基础发展起来的一门新语言&#xff0c;但她不是C的替代品&#xff0c;不是C的升级&#xff0c;C和C是兄弟关系。没有谁比谁先进的说法&#xff0c;更重要 的一点是C和C各自的标准委员会是独立的&#xff0c;最新的C标准是C98&#xff0c;最新的C标准是C99.因…
阅读更多...
[JavaME]手机也能玩转点对点的MSN传情动漫

[JavaME]手机也能玩转点对点的MSN传情动漫

郑昀ultrapower产品名称产品版本Keyword: Mobile 传情动漫 Wink MSN Messenger Media 媒体播放 j2me midp2.0WMA PushRegistryPopupWinksMobile0.0.1 BETA手机也能玩转MSN传情动漫&#xff01; J2ME实作摘要&#xff1a;本文档并不是一个关于PopupWinks On Mobile 之Kjava版本…
阅读更多...
移动端开发：ionic如何与服务端进行数据交互

移动端开发：ionic如何与服务端进行数据交互

一、查看数据库表内容&#xff08;以新闻表为例&#xff09; 二、使用postman检查服务端接口是否可以正常获取数据 1、getNewsList方法用于新闻表多个数据查询 2、getSingleNewsById方法用于新闻表单个个数据查询 三、编写移动端代码 1、建立模型类News 新建model包用于存放…
阅读更多...
最新文章

Copyright @ 2022~2023