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

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