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 >

      

運作效果

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>

      

運作效果

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>

      

運作效果

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>

      

運作效果

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>
  </ion-item>
  </ion-list>

      

運作效果

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>

      

運作效果

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>

      

運作效果

9、圖形元件

示範代碼

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

      

運作效果

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>


      

運作效果

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>

      

運作效果