Ionic 5의 이온 탭 스타일 지정

몇 주 전에 고객으로부터 탭 UI가 잘 알려진 기본 모양ion-tabs과 상당히 다른 디자인을 받았습니다.

디자인을 보았을 때 내 첫 번째 생각은 "오 이런, 또 간다... position:absolute와 border-radius 속성의 달콤한 설탕을 추가하면 해결될 또 다른 UI 문제였습니다.

일부 사용자가 알고 있듯이 ion-tabs는 Ionic Framework에서 구축된 가장 복잡한 구성 요소 중 하나입니다. 이 웹 구성 요소는 템플릿과 라우팅 모듈에 선언된 각 탭에 대해 서로 다른 스택 탐색을 관리할 만큼 똑똑합니다.

좋은 소식은 일부 사용자 정의 스타일로 모양을 사용자 정의할 수 있을 만큼 충분히 유연하다는 것입니다.

그래서 몇 가지 이상한 CSS 실험 후 🌝 최종 결과는 다음과 같이 끝났습니다.



이 디자인을 얻기 위해 다음 마크업이 사용되었습니다.

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home" layout="icon-top">
      <ion-icon name="search"></ion-icon>
      <ion-label>Explore</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="wishlists" layout="icon-top">
      <ion-icon name="gift"></ion-icon>
      <ion-label>Wishlists</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="groups" layout="icon-top">
      <ion-icon name="people-circle"></ion-icon>
      <ion-label>Groups</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="account" layout="icon-top">
      <ion-icon name="person"></ion-icon>
      <ion-label>Account</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

여기에 멋진 것은 없습니다. 이 구조는 이미 Ionic에서 탭으로 작업한 경험이 있다면 매우 친숙할 것입니다.

진정한 마술은 구성 요소 스타일 파일에서 발생합니다.

먼저 ion-tab-bar 요소를 대상으로 지정했습니다. 아래쪽에서 약간 이동하는 데만 필요했기 때문에 position 및 bottom 속성을 각각 relative 및 20px 로 설정했습니다.

또한 탭이 전체 너비를 채우지 않아야 하므로 width 속성을 92%로 수정하고 margin: 0 auto를 추가하여 요소를 가로로 정렬했습니다. 마지막으로 멋진 모서리를 얻기 위해 border-radius: 16px도 설정했습니다.

마지막으로 선택한 탭 바로 위에 선 표시기를 추가했습니다. 운 좋게도 .tab-selected 클래스는 Ionic에서 자동으로 가져오므로 의사 선택기::before를 사용하는 것만으로 원하는 표시기를 추가할 수 있었습니다.

기본적으로 라인 표시기는 ion-tab-button 클래스가 있는 것을 제외하고 모든 .tab-selected 에 대해 투명합니다.

ion-tab-bar {
  bottom: 20px;
  position: relative;
  border-radius: 16px;
  width: 92%;
  margin: 0 auto;
}

ion-tab-button {
  --color: var(--ion-color-medium);
  --color-selected: var(--ion-color-primary);

  &::before {
    background-color: transparent;
    display: block;
    content: "";
    margin: 0 auto;
    width: 20px;
    height: 2px;
  }

  &.tab-selected::before {
    background-color: var(--ion-color-primary);
  }
}

데모: