web-dev-qa-db-ja.com

ionic2を使用して<ion-card>の色を変更する方法

の色をライトグレーに変更しようとしています。次のように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;
    }

以下の画像のようなルックアンドフィールを取得するにはどうすればよいですか。

enter image description here

angulartypescriptionic2ionic3
6
Lavanya Parvathi

より多くのIonic2の方法でそれを行うには、これらの値を置き換える必要があります sass変数 ：

$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;
5
sebaferreras

あなたがしていることは正しいです。マークアップに独自の背景を持つオーバーレイion-itemがあるため、効果を確認することはできませんが。

したがって、ここでは、イオンアイテムの背景を透明に設定できます。

ion-item{
    background-color: transparent;
}

または、ion-cardの背景を変更するのではなく、イオンアイテムの背景を変更します。

3
Adrian