angular – 如何更改使用ionic2的颜色

发布时间：2020-12-17 07:12:29 所属栏目：安全来源：网络整理

导读：我正在尝试将颜色更改为lightgray我使用的html代码如下： ion-card *ngFor="let details of checkOutAddr" round inset class="ion-card" ion-item ion-row ion-colion-icon ios="ios-create" md="md-create" item-right class="color1"/ion-icon b{{details

我正在尝试将颜色更改为lightgray我使用的html代码如下：

<ion-card *ngFor="let details of checkOutAddr" round inset class="ion-card">
    <ion-item>
      <ion-row>
        <ion-col><ion-icon ios="ios-create" md="md-create" item-right class="color1"></ion-icon>
          <b>{{details.name}}</b>
        </ion-col>
      </ion-row>

      <ion-row>
        {{details.stage}}
      </ion-row>

      <ion-row>
        {{details.main}}
      </ion-row>

      <ion-row>
        {{details.state}}
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-icon ios="ios-call" md="md-call" item-left></ion-icon>
            {{details.phone}} 
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-icon ios="ios-mail" md="md-mail" item-left></ion-icon> 
            {{details.mail}}
        </ion-col>
      </ion-row>
    </ion-item>
  </ion-card

我使用scss代码如下：

.ion-card {
        background-color: slategray !important;
    }

我如何获得img下面的外观和感觉：

enter image description here

解决方法

为了以更Ionic2的方式进行,您需要替换这些 sass variables的值：

$card-ios-background-color
$card-md-background-color
$card-wp-background-color

所以,你只需要在app / theme / app.variables.scss中添加新值,如下所示：

$card-ios-background-color: slategray;
$card-md-background-color: slategray;
$card-wp-background-color: slategray;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!