이온 성 탭 (탭)

이온 성 탭 (탭) 수평으로 페이지가 전환 사이를 이동하는 버튼이나 링크를 정렬된다. 그것은 모바일 장치에 텍스트와 아이콘의 조합이 내비게이션의 인기있는 방법입니다 포함 할 수 있습니다.

다음 탭 탭 컨테이너 클래스 탭 항목 클래스를 사용하여 각 탭을 사용합니다. 기본적으로 탭은 텍스트와 아이콘 없음입니다.

예

<div class="tabs">
  <a class="tab-item">
    主页
  </a>
  <a class="tab-item">
    收藏
  </a>
  <a class="tab-item">
    设置
  </a>
</div>

»시도

탭 기본, 탭 라이트, 탭 안정, 탭 양성, 탭 - 진정, 탭 균형, 탭 전원 차단, 탭 - 독단적, 탭 : 기본적으로, 탭 색상은 기본, 당신은 다음과 같은 서로 다른 색상 스타일을 설정할 수 있습니다 로얄, 탭 어두운.

탭 표시 줄을 숨기려면 탭 항목 숨기기 클래스를 사용할 수 있습니다.

아이콘 탭

클래스 탭 추가 한 후 탭 - 아이콘을 전용 클래스는 아이콘 만 탭을 표시하도록 설정할 수 있습니다.

<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-gear-a"></i>
  </a>
</div>

»시도

최고 아이콘 + 텍스트 탭

클래스가 탭을 추가 한 후 탭 - 아이콘 탑 클래스 아이콘 + 텍스트는 탭의 상단에 설정할 수 있습니다.

<div class="tabs tabs-icon-top">
  <a class="tab-item" href="#">
    <i class="icon ion-home"></i>
    主页
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-star"></i>
    收藏
  </a>
  <a class="tab-item" href="#">
    <i class="icon ion-gear-a"></i>
    设置
  </a>
</div>

»시도

아이콘 + 텍스트 탭의 왼쪽

클래스 왼쪽의 클래스 탭 추가 후 - 탭 아이콘 왼쪽 아이콘 + 텍스트 탭을 설정할 수있다.

<div class="tabs tabs-icon-left">
  <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-gear-a"></i>
    设置
  </a>
</div>

»시도

스트라이프 스타일 탭

당신은 안드로이드 스타일의 탭을 달성하기 위해 탭이 요소 이름에 탭 줄무늬 패턴을 추가 할 수 있습니다. 또한 페이지의 상단에있는 탭을 달성하기 위해 탭 - 가기를 추가 할 수 있습니다.

줄무늬 탭 색상 탭 - 배경 - {색상} 및 탭 - 색상 - {색상}에 의해 제어 될 수에게, {색상} 값이 될 수 있습니다 : 기본, 빛, 안정, 긍정적 인, 진정, 균형, 격려, 주장, 왕실, 또는 어두운.

참고 : 다시 탭의 제목의 머리, 당신은이 탭이 탑 클래스를 사용해야하는 경우.

<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>
  <div class="tabs-striped tabs-color-assertive">
    <div class="tabs">
      <a class="tab-item active" href="#">
        <i class="icon ion-home"></i>
        Test
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-star"></i>
        Favorites
      </a>
      <a class="tab-item" href="#">
        <i class="icon ion-gear-a"></i>
        Settings
      </a>
    </div>
  </div>

»시도

다음과 같이 영업 실적은 다음과 같습니다 :