|
@@ -3,9 +3,14 @@
|
|
|
<ion-buttons slot="start">
|
|
|
<ion-button routerLink="/lesson/me/userFollow" fill="clear" color="dark">
|
|
|
<ion-icon name="chevron-back-outline" size="small"></ion-icon>
|
|
|
- <ion-note>返回</ion-note>
|
|
|
+ <ion-note>取消</ion-note>
|
|
|
</ion-button>
|
|
|
</ion-buttons>
|
|
|
+ <ion-buttons slot="end">
|
|
|
+
|
|
|
+ <ion-button (click)="saveAdd()" color="dark">完成</ion-button>
|
|
|
+ <ion-icon name="albums-outline"></ion-icon>
|
|
|
+ </ion-buttons>
|
|
|
</ion-toolbar>
|
|
|
</ion-header>
|
|
|
|
|
@@ -24,39 +29,132 @@
|
|
|
<ion-card>
|
|
|
<ion-list>
|
|
|
<ion-item>
|
|
|
- <ion-input placeholder="姓名*"></ion-input>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name" placeholder="姓名*"></ion-input>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name"></ion-input>
|
|
|
</ion-item>
|
|
|
<ion-item>
|
|
|
- <ion-label position="stacked" style="width: 30%; font-size: 1.2em; ">生日:</ion-label>
|
|
|
- <ion-datetime-button datetime="datetime" style="width: 130%;"></ion-datetime-button><ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
|
|
|
+ <ion-input placeholder="生日*"></ion-input>
|
|
|
+ <ion-icon slot="end" id="open-modal" name="chevron-forward-outline" size="small"></ion-icon>
|
|
|
</ion-item>
|
|
|
- <ion-modal [keepContentsMounted]="true">
|
|
|
+ <ion-modal #modal trigger="open-modal">
|
|
|
<ng-template>
|
|
|
- <ion-datetime id="datetime"></ion-datetime>
|
|
|
+ <ion-content>
|
|
|
+ <ion-toolbar>
|
|
|
+ <ion-title>请选择</ion-title>
|
|
|
+ <ion-buttons slot="end">
|
|
|
+ <ion-button color="black" (click)="modal.dismiss()">完成</ion-button>
|
|
|
+ </ion-buttons>
|
|
|
+ </ion-toolbar>
|
|
|
+ <ion-datetime-button datetime="datetime" style="width: 100%;"></ion-datetime-button>
|
|
|
+ <ion-modal [keepContentsMounted]="true">
|
|
|
+ <ng-template>
|
|
|
+ <ion-datetime id="datetime"></ion-datetime>
|
|
|
+ </ng-template>
|
|
|
+ </ion-modal>
|
|
|
+ </ion-content>
|
|
|
</ng-template>
|
|
|
</ion-modal>
|
|
|
-
|
|
|
+
|
|
|
|
|
|
- <ion-item>
|
|
|
+ <!-- <ion-item>
|
|
|
<ion-label position="stacked">名字:</ion-label>
|
|
|
<ion-input [(ngModel)]="userAdd.name"></ion-input>
|
|
|
+ </ion-item> -->
|
|
|
+ <ion-item>
|
|
|
+ <ion-label id="open-custom-dialog" style="font-size: 14px;">选择关系</ion-label>
|
|
|
+
|
|
|
+ <!-- <ion-icon slot="end" id="open-custom-dialog" name="chevron-forward-outline" size="small"></ion-icon> -->
|
|
|
+ <ion-modal id="example-modal" #modal trigger="open-custom-dialog">
|
|
|
+ <ng-template>
|
|
|
+ <div class="wrapper">
|
|
|
+ <h1>Dialog header</h1>
|
|
|
+
|
|
|
+ <ion-list lines="none">
|
|
|
+ <ion-item button="true" detail="false" (click)="modal.dismiss()">
|
|
|
+ <ion-icon name="person-circle"></ion-icon>
|
|
|
+ <ion-label>家人</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item button="true" detail="false" (click)="modal.dismiss()">
|
|
|
+ <ion-icon name="person-circle"></ion-icon>
|
|
|
+ <ion-label>好朋友</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item button="true" detail="false" (click)="modal.dismiss()">
|
|
|
+ <ion-icon name="person-circle"></ion-icon>
|
|
|
+ <ion-label>同事</ion-label>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+ </div>
|
|
|
+ </ng-template>
|
|
|
+ </ion-modal>
|
|
|
</ion-item>
|
|
|
+
|
|
|
+
|
|
|
<ion-item>
|
|
|
- <ion-label position="stacked">性别:</ion-label>
|
|
|
+ <ion-label style="font-size: 14px;">性别:</ion-label>
|
|
|
<ion-select [(ngModel)]="userAdd.tag" cancelText="取消" okText="确定">
|
|
|
<ion-select-option value="male">男</ion-select-option>
|
|
|
<ion-select-option value="female">女</ion-select-option>
|
|
|
<ion-select-option value="unknown">未知</ion-select-option>
|
|
|
</ion-select>
|
|
|
</ion-item>
|
|
|
+
|
|
|
+
|
|
|
<ion-item>
|
|
|
- <ion-label position="stacked">手机:</ion-label>
|
|
|
+ <ion-label style="font-size: 14px;">联系方式:</ion-label>
|
|
|
<ion-input [(ngModel)]="userAdd.desc"></ion-input>
|
|
|
</ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name" placeholder="城市"></ion-input>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name"></ion-input>
|
|
|
+ </ion-item>
|
|
|
</ion-list>
|
|
|
|
|
|
</ion-card>
|
|
|
|
|
|
+<ion-card>
|
|
|
+ <ion-list [inset]="true">
|
|
|
+ <ion-item [button]="true">
|
|
|
+ <ion-icon color="danger" slot="start" name="heart-circle-outline" size="large"></ion-icon>
|
|
|
+ <ion-label>爱好</ion-label>
|
|
|
+ <ion-icon slot="end" name="chevron-forward-outline" size="small"></ion-icon>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item [button]="true">
|
|
|
+ <ion-icon color="success" slot="start" name="restaurant-outline" size="large"></ion-icon>
|
|
|
+ <ion-label>口味</ion-label>
|
|
|
+ <ion-icon slot="end" name="chevron-forward-outline" size="small"></ion-icon>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item [button]="true">
|
|
|
+ <ion-icon color="tertiary" slot="start" name="rose-outline" size="large"></ion-icon>
|
|
|
+ <ion-label>习惯</ion-label>
|
|
|
+ <ion-icon slot="end" name="chevron-forward-outline" size="small"></ion-icon>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item [button]="true">
|
|
|
+ <ion-icon color="warning" slot="start" name="heart-dislike-outline" size="large"></ion-icon>
|
|
|
+ <ion-label>讨厌</ion-label>
|
|
|
+ <ion-icon slot="end" name="chevron-forward-outline" size="small"></ion-icon>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
+</ion-card>
|
|
|
+
|
|
|
+<ion-card>
|
|
|
+ <ion-item>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name" placeholder="学校"></ion-input>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name"></ion-input>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name" placeholder="职业"></ion-input>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name"></ion-input>
|
|
|
+ </ion-item>
|
|
|
+ <ion-item>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name" placeholder="公司"></ion-input>
|
|
|
+ <ion-input [(ngModel)]="userAdd.name"></ion-input>
|
|
|
+ </ion-item>
|
|
|
+</ion-card>
|
|
|
+ <ion-list [inset]="true">
|
|
|
+ <ion-item>
|
|
|
+ <ion-textarea label="备注" labelPlacement="floating" rows="5"></ion-textarea>
|
|
|
+ </ion-item>
|
|
|
+ </ion-list>
|
|
|
<ion-list [inset]="true">
|
|
|
<ion-button expand="block" (click)="saveAdd()">保存</ion-button>
|
|
|
</ion-list>
|