Question

我正在尝试获得像这样的离子视图

我需要更改或添加什么才能获得此布局，或者此设计主题只是android操作系统的一部分，而不是离子应用程序的一部分？

如果有人知道如何解决此问题，或者我需要做些什么才能更改ion-select和ion-options菜单的外观，我将不胜感激。

SCSS

page-home {
.center {
display: block;
margin: auto;
padding-top: 5px;
padding-bottom: 10px;
}
.margins {
margin-left: 5%;
margin-right: 5%;
}
.ilb {
display: flex;
margin: 5px;
}
.curved {
margin-bottom: 10px;
border-radius: 10px;
}
.curvedButton {
margin-left:10px;
margin-right: 10PX;
border-radius: 10px;
}

}

HTML

<div class="margins">
<form [formGroup]="todo" (ngSubmit)="CreateUser()" novalidate>
  <ion-item class="curved">
    <ion-label>Name</ion-label>
    <ion-input type="text" formControlName="name"></ion-input>
    <p color="danger" ion-text *ngIf="todo.get('name').hasError('required')">*Required</p>
  </ion-item>
  <ion-item class="curved">
    <ion-label>Company</ion-label>
    <ion-input type="text" formControlName="company"></ion-input>
  </ion-item>
  <ion-item class="curved">
    <ion-label>Room</ion-label>
    <ion-select #C (ionChange)="onChange(C.value)" id="roomFilter" formControlName="room">
      <ion-option *ngFor="let lab of labs" value="{{lab}}" type="string">{{lab}}</ion-option>
    </ion-select>
  </ion-item>
  <ion-item  class="curved" *ngIf="todo.get('room').errors && todo.get('room').dirty">
    <p color="danger" ion-text *ngIf="todo.get('room').hasError('required')">*Required</p>
  </ion-item>
  <ion-item class="curved">
    <ion-label>PassID</ion-label>
      <ion-select formControlName="passID" multiple="true" id="passesID">
        <ion-option *ngFor="let pass of passes" value="{{pass}}">{{pass}}</ion-option>
      </ion-select>
  </ion-item>
  <ion-item  class="curved" *ngIf="todo.get('passID').errors && todo.get('passID').dirty">
    <p color="danger" ion-text *ngIf="todo.get('passID').hasError('required')">*Required</p>
  </ion-item>
  <ion-item class="curved">
    <ion-label>Pass Return Date</ion-label>
    <ion-datetime displayFormat="DD MMM YYYY " min="2018" max="2030" formControlName="date" multiple="true">
    </ion-datetime>
  </ion-item>
  <div class="ilb">
    <button class="curvedButton" ion-button block type="Reset">Reset Form</button>
    <button class="curvedButton" ion-button block type="submit" [disabled]="!todo.valid">Create</button>
  </div>
<ion-row style="height: 100px"></ion-row>
  <img alt="CC Logo" src="assets/imgs/Global Solutions Center_white.png" class="center" width="100%">

Answer 1

这就是在iOS中的外观，您可以通过打开chrome开发工具并选择“ iOS手机”来检查外观。我看了看离子选择文档，并没有说什么例如关于模式属性，并将其更改为iOS，所以我不知道如果不手动更改所有样式是否真的可行。

如何自定义离子选择和离子选择菜单（离子）

1 个答案: