Ionic 5로 아바타 카드를 만드는 방법

최근에 저는 새로운 앱을 작업하고 있었고 진행 상황을 소셜 미디어에 공유하기로 결정했습니다. 아래는 원래 트윗이며, 이 라인은 거의 2K 조회수를 기록합니다.

















페르난도 멘도사










더 재미있는 프로그래밍 😋이 UI를 단 3시간 만에 코딩했습니다 😲👀힌트:


오후 17:50 - 2020년 10월 15일





15

111



아이오닉 개발 관련 유명 페이스북 그룹에서도 좋은 반응을 얻었다. 그래서 저는 개발자 커뮤니티와 더 많은 기술적인 내용을 공유하는 것이 좋을 것이라고 생각했습니다.

어떤 사람들은 주로 아바타 카드를 얻는 방법과 ion-segment-button를 클릭할 때 보기를 애니메이션하는 방법에 대해 질문했습니다.

이 게시물에서는 멋진 아바타 카드 디자인을 만드는 방법을 살펴보겠습니다.

카드 아바타

시작하기 전에 Ionic 5를 사용하고 있는지 확인하세요. 일부 클래스와 아이콘은 이전 버전에서 작동하지 않습니다.

아래 코드에서 볼 수 있듯이 카드 템플릿은 매우 간단합니다. 이미지와 카메라 버튼의 컨테이너 역할을 하는 div를 추가했습니다. 컨테이너와 해당 자식의 스타일을 쉽게 지정하기 위해 클래스img-wrapper도 적용하고 있습니다.


주형

<ion-card color="light">
  <div class="img-wrapper">
    <img src="./assets/imgs/lady_3.jpg" />
    <ion-button color="light">
      <ion-icon slot="icon-only" name="camera-outline" color="medium">
      </ion-icon>
    </ion-button>
  </div>
  <ion-card-content class="ion-text-center">
    <h2>Zahra Zamin</h2>
    <ion-text color="medium">
      <div style="display: flex;" class="ion-justify-content-center">
        <ion-icon name="location-outline" color="medium">
        </ion-icon>
        <p>2345 Street, Ohio, USA.</p>
      </div>
    </ion-text>
  </ion-card-content>
</ion-card>

스타일

아바타를 상단 중앙에 배치하기 위해 img-wrapper 위치를 absolute 로 설정합니다. 이렇게 하면 top 및 left 속성을 사용하여 컨테이너를 상대 위치에서 이동할 수 있습니다.

컨테이너를 수평으로 중앙에 맞추려면 left 속성이 50%와 같아야 하고 약간의 transform 마법을 사용하면 img-wrapper가 좋아야 합니다.

다음 속성을 ion-card에도 추가하는 것이 중요합니다: position: relative 및 overflow: visible . 그렇지 않으면 img-wrapper가 잘못 표시됩니다.

또한 padding-top: 60px가 ion-card-content 아래에 표시되지 않도록 img-wrapper를 추가했습니다.

이온 버튼을 오른쪽 하단에 표시하기 위해 위치를 absolute로 설정하고 CSS 변수로 모양을 수정했습니다. 원형으로 만들려면 CSS 변수--border-radius: 50%를 설정하고 너비와 높이를 같은 값(이 경우에는 26px)으로 설정하는 것이 핵심입니다.

ion-card {
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  overflow: visible;
  margin: 16px 0 24px;
  position: relative;
  padding-top: 60px;

  .img-wrapper {
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    img {
      border-radius: 10px;
      width: 80px;
      height: 80px;
    }

    ion-button {
      --border-width: 1px;
      --border-color: var(--ion-color-light-shade);
      --border-style: solid;
      --padding-start: 0;
      --padding-end: 0;
      --padding-bottom: 0;
      --padding-top: 0;

      --border-radius: 50%;
      height: 26px;
      width: 26px;

      position: absolute;
      right: -10px;
      bottom: -10px;

      ion-icon {
        width: 14px;
        height: 14px;
      }
    }
  }
}

그리고 그게 다야! 😅 이 게시물을 즐기고 새로운 것을 배웠기를 바랍니다. 일반적인 웹 개발 및 프로그래밍에 대한 팁을 공유하는 곳에서도 저를 팔로우할 수 있습니다.

보기 애니메이션으로 ion-segment를 코딩하는 방법을 검토할 것이므로 다음 기사 👀를 기대해 주세요! 🔥