Ionic에서 세그먼트 탭 만들기

세그먼트, 우리는 어디에서나 볼 수 있습니다. 예를 들어 Twitter 앱 알림 탭에는 두 개의 세그먼트(전체/멘션)가 있습니다.

오늘은 Ionic 앱에서 이것을 만드는 방법을 보여드리겠습니다.

다음과 같이 표시됩니다.

Ionic 앱에 세그먼트 탭 추가

다시 Ionic starter부터 시작하겠습니다. GitHub에서 코드를 찾을 수 있습니다.
tab1.page.html 에 세그먼트를 추가합니다.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Tab 1 </ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-segment [(ngModel)]="type">
      <ion-segment-button value="all">
        <ion-label>All</ion-label>
      </ion-segment-button>
      <ion-segment-button value="mentions">
        <ion-label>Mentions</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

헤더에 두 번째 도구 모음을 추가합니다. 두 번째 도구 모음은 제목 페이지 아래에 표시되며 두 개의 세그먼트를 포함합니다.
이러한 세그먼트는 올바른 콘텐츠를 표시할 ngModel(유형)에 연결됩니다.

현재로서는 다음과 같은 결과를 얻습니다.



꽤 멋지지만 아직 아무것도 하지 않습니다.tab1.page.ts를 열고 몇 가지 기술적 기능을 추가해 보겠습니다.

export class Tab1Page {
  type: string = 'all';
}

초기에 type 변수를 "all"로 설정하고 세그먼트 간에 전환하면 type 변수가 변경됩니다.

이제 tab1.page.html로 돌아가 일부 콘텐츠 섹션을 추가할 수 있습니다.

<ion-content [fullscreen]="true">
  <ng-container [ngSwitch]="type">
    <ion-list *ngSwitchCase="'all'">
      <ion-item>Nathan liked your message</ion-item>
      <ion-item>Hashnode retweeted yuor article</ion-item>
      <ion-item>Marcus liked a message you're mentioned in</ion-item>
    </ion-list>
    <ion-list *ngSwitchCase="'mentions'">
      <ion-item>Paul mentioned you in this article</ion-item>
      <ion-item>Adrian mentioned you in a comment</ion-item>
    </ion-list>
  </ng-container>
</ion-content>

이렇게 하면 컨테이너를 사용하여 유형이 전환됩니다. 컨테이너는 렌더링되지 않으므로 이와 같은 스위치 케이스를 만드는 데 이상적입니다.

내부에는 각 항목을 표시하는 두 개의 이온 목록이 있습니다.
그리고 그게 다야. 이제 큰 데이터 세트를 표시하는 데 매우 유용한 세그먼트화된 페이지가 있습니다.

오늘의 코드는 GitHub 에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나