【Ionic】 Cards Component의 우측 상단에 라벨을 붙이고 싶었다

만든 것

Todo 앱 등에서 자주 보는 오른쪽 상단에 라벨이있는 카드를 사용하고 싶었기 때문에 만들어 보았습니다.

아티팩트는 이런 느낌입니다.

ios


md

코드

Ionic의 테마가 가지는 컬러맵 「theme/variables.scss」의 「$colors」와 사이좋게 할 수 있는 것을 의식했습니다.

@import url('../../theme/variables.scss');

$primary-color: color($colors, primary);
$secondary-color: color($colors, secondary);
$danger-color: color($colors, danger);
$dark-gray: color($colors, dark);


.custom-card {
  border: 1px solid $dark-gray;

  .custom-card-label {
    border-color: transparent $dark-gray transparent transparent;
    border-color: rgba(255,255,255,0) $dark-gray rgba(255,255,255,0) rgba(255,255,255,0);
  }

  &.primary {
    border-color: $primary-color;

    .custom-card-label {
      border-color: transparent $primary-color transparent transparent;
      border-color: rgba(255,255,255,0) $primary-color rgba(255,255,255,0) rgba(255,255,255,0);
    }
  }

  &.secondary {
    border-color: $secondary-color;

    .custom-card-label {
      border-color: transparent $secondary-color transparent transparent;
      border-color: rgba(255,255,255,0) $secondary-color rgba(255,255,255,0) rgba(255,255,255,0);
    }
  }

  &.danger {
    border-color: $danger-color;

    .custom-card-label {
      border-color: transparent $danger-color transparent transparent;
      border-color: rgba(255,255,255,0) $danger-color rgba(255,255,255,0) rgba(255,255,255,0);
    }
  }

  .custom-card-label {
    border-style: solid;
    border-width: 0 8.5rem 3.3rem 0;
    float: right;
    height: 0px;
    width: 0px;
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
  }

  .custom-card-label-text {
    color: color($colors, light);
    font-size: 1rem;
    font-weight: bold;
    position: relative;
    right: -2.5rem;
    top: -2px;
    white-space: nowrap;
    -webkit-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
            transform: rotate(20deg);
  }
}

사용법

「primary」 「secondary」 「danger」를 지정하는 것으로 외형의 구분을 할 수 있습니다.

<ion-card class="custom-card primary">
  <div class="custom-card-label">
      <div class="custom-card-label-text">
        Card Label
      </div>
    </div>
  <ion-card-header>
    Card Header
  </ion-card-header>
  <ion-card-content>
      <ion-card-title>
          Card Title
      </ion-card-title>
      <p>I love Ionic and Angular</p>
  </ion-card-content>
</ion-card>

<ion-card class="custom-card secondary">
  <div class="custom-card-label">
      <div class="custom-card-label-text">
        Card Label
      </div>
    </div>
  <ion-card-header>
    Card Header
  </ion-card-header>
  <ion-card-content>
      <ion-card-title>
          Card Title
      </ion-card-title>
      <p>I love Ionic and Angular</p>
  </ion-card-content>
</ion-card>


<ion-card class="custom-card danger">
  <div class="custom-card-label">
      <div class="custom-card-label-text">
        Card Label
      </div>
    </div>
  <ion-card-header>
    Card Header
  </ion-card-header>
  <ion-card-content>
      <ion-card-title>
          Card Title
      </ion-card-title>
      <p>I love Ionic and Angular</p>
  </ion-card-content>
</ion-card>

끝에

평소 스스로 css/scss 만지지 않기 때문에 여러가지 조사하거나 예상 이상으로 시간이 걸렸습니다.
더 좋은 방법이나 세련된 방법이 있으면 가르쳐 주시면 기쁩니다.