Ionic-탭

Ionic tabs대부분의 경우 모바일 내비게이션에 사용됩니다. 스타일링은 다양한 플랫폼에 최적화되어 있습니다. 즉, Android 기기에서는 탭이 화면 상단에 배치되고 IOS에서는 하단에 배치됩니다. 탭을 만드는 방법에는 여러 가지가 있습니다. 이 장에서는 탭을 만드는 방법에 대해 자세히 설명합니다.

간단한 탭

간단한 탭 메뉴는 tabs수업. 이 클래스를 사용하는 내부 요소의 경우 다음을 추가해야합니다.tab-item집단. 탭은 일반적으로 탐색에 사용되므로<a>탭 항목에 대한 태그. 다음 예제는 4 개의 탭이있는 메뉴를 보여줍니다.

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

위의 코드는 다음 화면을 생성합니다.

아이콘 추가

Ionic은 탭에 아이콘을 추가하기위한 클래스를 제공합니다. 탭에 텍스트없이 아이콘이 포함되도록하려면tabs-icon-only 클래스는 tabs수업. 물론 표시 할 아이콘을 추가해야합니다.

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

위의 코드는 다음 화면을 생성합니다.

아이콘과 텍스트를 함께 추가 할 수도 있습니다. 그만큼tabs-icon-top 과 tabs-icon-left아이콘을 각각 위 또는 왼쪽에 배치하는 클래스입니다. 구현은 위에 주어진 예제와 동일합니다. 사용하려는 새 클래스와 텍스트를 추가하기 만하면됩니다. 다음 예제는 텍스트 위에 배치 된 아이콘을 보여줍니다.

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

위의 코드는 다음 화면을 생성합니다.

스트라이프 탭

스트라이프 탭은 탭 주위에 컨테이너를 추가하여 만들 수 있습니다. tabs-striped수업. 이 클래스는tabs-background 그리고 tabs-color 탭 메뉴에 일부 Ionic 색상을 추가하기위한 접두사.

다음 예에서는 tabs-background-positive (파란색) 클래스는 메뉴의 배경 스타일을 지정하고 tabs-color-light(흰색) 클래스는 탭 아이콘의 스타일을 지정합니다. 활성 상태 인 두 번째 탭과 그렇지 않은 두 번째 탭의 차이점을 확인하십시오.

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

위의 코드는 다음 화면을 생성합니다.