s202226701017/tailor-app/myapp/src/app/me/me.page.html

<ion-header [translucent]="true">
  <ion-toolbar color="success">
    <ion-title>me</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

    <!-- GPT组件 -->
    <h1>GPT组件</h1>
     <ion-input type="" [(ngModel)]="inputValue"  ></ion-input>
    <ion-button (click)="printInputValue()">提交</ion-button>
   {{gptre}}


  <h1>页面跳转和组件使用</h1>
  <!-- 页面跳转和组件使用 -->
  <ion-button [routerLink]="[ '/yiyun' ]">
    跳转到yiyun
  </ion-button>

  <app-slide></app-slide>
  <h1>button组件调用</h1>
  <!-- button组件调用 -->
  <ion-button [routerLink]="[ '/yiyun' ]" color="warning">
    修改按钮颜色
  </ion-button>
 
  <ion-buttons slot="start">
    <ion-back-button>返回i按钮</ion-back-button>
  </ion-buttons>

  <ion-button expand="block">
    按钮可以block
  </ion-button>

  <ion-button expand="full">
    按钮可以直角
  </ion-button>

  <ion-button fill="clear" expand="block">
    按钮可以透明背景填充
  </ion-button>

  <ion-button>
    <ion-icon slot="icon-only" name="add"></ion-icon>
  </ion-button>
  <ion-button fill="clear">
    <ion-icon slot="icon-only" name="add"></ion-icon>
  </ion-button>

  <ion-button size="small">
    小按钮
  </ion-button>
  <ion-button size="large">
    大按钮
  </ion-button>

  <ion-button mode="ios" color="primary">
    ios按钮
  </ion-button>
  <ion-button mode="md" color="primary">
    android按钮
  </ion-button>

  <ion-button>
    <ion-icon name="add" slot="start"></ion-icon>
    图片在左侧文字在右侧按钮
  </ion-button>
  <ion-button>
    <ion-icon name="add" slot="end"></ion-icon>
    图片在右侧文字在右侧按钮
  </ion-button>

  <!-- List组件调用 -->
  <h1>List组件调用 </h1>
  <ion-list lines="full">
    <ion-item *ngFor="let item of list" [routerLink]="[ '/yiyun' ]">
      {{item}}
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item-divider>
      <ion-label>分组列表A</ion-label>
    </ion-item-divider>
    <ion-item>
      a
    </ion-item>
    <ion-item>
      aaa
    </ion-item>

    <ion-item-divider>
      <ion-label>B</ion-label>
    </ion-item-divider>
    <ion-item>
      b
    </ion-item>
    <ion-item>
      bbb
    </ion-item>
  </ion-list>

  <ion-list lines="full">
    <ion-item *ngFor="let item of list">
      <ion-icon slot="start" name="add"></ion-icon>
      带图标列表{{item}}
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item *ngFor="let item of list">
      <ion-avatar item-left>
        <img src="assets/shapes.svg">
      </ion-avatar>
      <ion-label>列表中的头像</ion-label>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item *ngFor="let item of list">
      <ion-thumbnail item-left>
        <img src="assets/shapes.svg">
      </ion-thumbnail>
      <div>
        <h2>我是标题</h2>
        <p>我是新闻</p>
      </div>
      <button ion-button clear item-right></button>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item-sliding>
      <ion-item>
        <ion-label>滑动列表1</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option>Favorite</ion-item-option>
        <ion-item-option color="primary">Share</ion-item-option>
      </ion-item-options>

      <ion-item-options side="end">
        <ion-item-option>Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding>
      <ion-item>
        <ion-label>滑动列表2</ion-label>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option>Favorite</ion-item-option>
        <ion-item-option color="primary">Share</ion-item-option>
      </ion-item-options>

      <ion-item-options side="end">
        <ion-item-option>Unread</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
  <!-- 表单组件 -->
  <h1>表单组件</h1>

  <ion-list>
    <ion-item>
      <ion-label>用户名</ion-label>
      <ion-input [(ngModel)]="peopleInfo.username"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>是否本科</ion-label>
      <ion-toggle slot="end" [(ngModel)]="peopleInfo.flag"></ion-toggle>
    </ion-item>

    <ion-radio-group [(ngModel)]="peopleInfo.payType">
      <ion-item>
        <ion-avatar item-left>
          <img src="assets/shapes.svg">
        </ion-avatar>
        <ion-label>支付宝支付</ion-label>
        <ion-radio value="1"></ion-radio>
      </ion-item>

      <ion-item>
        <ion-avatar item-left>
          <img src="assets/shapes.svg">
        </ion-avatar>
        <ion-label>微信支付</ion-label>
        <ion-radio value="2"></ion-radio>
      </ion-item>

    </ion-radio-group>

    <ion-item>
      <ion-label>checkbox</ion-label>
      <ion-checkbox></ion-checkbox>
    </ion-item>
  </ion-list>
  {{peopleInfo|json}}

  <!-- 搜索框 -->
  <h1>搜索框</h1>
  <ion-searchbar animated="true" placeholder="Animated"></ion-searchbar>
  <ion-searchbar placeholder="Filter Pizza" (ionInput)="onSearchInput($event)" animated></ion-searchbar>

  <!-- segment演示 -->
  <h1>segment演示</h1>
  <ion-segment [(ngModel)]="tab">
    <ion-segment-button value="tab1">
      <ion-label>详情</ion-label>
    </ion-segment-button>
    <ion-segment-button value="tab2">
      <ion-label>评论</ion-label>
    </ion-segment-button>

    <div class="info" [ngSwitch]="tab">
      <div *ngSwitchCase="'tab1'">商品简介</div>
      <div *ngSwitchCase="'tab2'">商品评论</div>

    </div>


    {{tab}}

    <!-- 日期组件 -->
    <h1>日期组件</h1>
    <ion-list>

      <ion-item>
        <ion-label>Date</ion-label>
        <ion-datetime display-format="DD.MM.YYYY HH:mm"></ion-datetime>
      </ion-item>
    </ion-list>
  </ion-segment>


</ion-content>