大学时期老师讲过的Ionic相关组件复习

文章目录1.ionic页面2.ion-list3.ion-card4.复选框5.单选框6.下拉选择7.ion-button8.ion-chip9.圆形组件10.输入组件11.ion-grid栅格化12.ion-icon参考官网:https://ionicframework.com/docs/components1.ionic页面一个ionic页面一般由头部（header）、内容（content）

雨云21

611人浏览 · 2020-05-23 17:51:48

雨云21 · 2020-05-23 17:51:48 发布

文章目录

参考官网:https://ionicframework.com/docs/components

1.ionic页面

一个ionic页面一般由 头部（header）、内容（content） 和 页脚（footer） 组成

<ion-header>
  <ion-toolbar>
      <ion-title>ionic头部</ion-title>
      <ion-button slot="end" size="small">浏览</ion-button>
  </ion-toolbar>
</ion-header>
<ion-content>
  内容
</ion-content>
<ion-footer>
  页脚区
</ion-footer>

运行效果
在这里插入图片描述

2.ion-list

  <ion-list>

  <ion-item>

  <ion-label> 元素1</ion-label>

  <ion-icon name="arrow-forward-circle-outline"></ion-icon>
  </ion-item>

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

  <ion-icon name="body-outline"></ion-icon>
  </ion-item>

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

  <ion-button>加入</ion-button>
  </ion-item>

  </ion-list>

在这里插入图片描述

3.ion-card

<ion-card>
  <ion-card-header>
  <ion-card-title>主标题</ion-card-title>
  <ion-card-subtitle>副标题</ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    我还是个孩子我还是个孩子我还是个孩子我还是个孩子我还是个孩子我还是个孩子我还是个孩子我还是个孩子
  </ion-card-content>
</ion-card>

在这里插入图片描述

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

在这里插入图片描述

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>

在这里插入图片描述

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-option value="pepperoni">Pepperoni</ion-select-option>
      	<ion-select-option value="pineapple">Pineapple</ion-select-option>
      	<ion-select-option value="sausage">Sausage</ion-select-option>
      	<ion-select-option value="Spinach">Spinach</ion-select-option>
      </ion-select>
    </ion-item>
</ion-list>

在这里插入图片描述

7.ion-button

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

在这里插入图片描述

8.ion-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>

在这里插入图片描述

9.圆形组件

<ion-avatar>
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629668646,2513692460&fm=26&gp=0.jpg">
  </ion-avatar>

  <ion-chip>
    <ion-avatar>
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629668646,2513692460&fm=26&gp=0.jpg">
    </ion-avatar>
    <ion-label>Chip Avatar</ion-label>
  </ion-chip>

  <ion-item>
    <ion-avatar slot="start">
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629668646,2513692460&fm=26&gp=0.jpg">
    </ion-avatar>
    <ion-label>Item Avatar</ion-label>
  </ion-item>

在这里插入图片描述

10.输入组件

文本输入组件：
<ion-text>
<ion-textarea>
日期选择组件：
<ion-datetime>

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

在这里插入图片描述

11.ion-grid栅格化

将屏幕分成12份，等比例显示
表格
行
列

  <ion-grid>
    <ion-row>
      <ion-col size="4">
        <ion-avatar>
          <ion-img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629668646,2513692460&fm=26&gp=0.jpg">

          </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>1.68</ion-col>
        </ion-row>
        <ion-row>
          <ion-col>体重</ion-col>
          <ion-col>60</ion-col>
        </ion-row>

      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-button expand="full" color="danger">加为好友</ion-button>
      </ion-col>
    </ion-row>

  </ion-grid>