이온 카드

최근 몇 년 동안, 카드 (카드) 카드가 더 제공되는 정보를 구성 할 수있는 도구를 제공, 더 많은 인기를 끌고있다.

적응 형 이동 단말기 애플리케이션 카드의 화면 사이즈의 크기에 따라.

우리는 매우 유연하게 제어 디스플레이 카드, 심지어 애니메이션 효과가 될 수 있습니다.

페이지의 상단에 일반 카드는 물론, 기능 전환에 대해 얻을 수 있습니다.

<div class="card">
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
</div>

»시도

성능상의 이유로, 목록 목록-삽입 등과 그림자없이 다른 유사한 요소 상자 그림자 (그림자), 카드 (카드) 기본 스타일.

당신이 카드를 많이가있는 경우, 각 카드는 우리가 포함 된 목록 (삽입 목록)을 사용하는 것이 좋습니다, 하위 요소를 많이 가지고있다.

헤드와 카드 하단

우리는 항목 분배기는 머리와 바닥 카드에 클래스를 추가 추가 할 수 있습니다 :

<div class="card">
  <div class="item item-divider">
    卡片头部！
  </div>
  <div class="item item-text-wrap">
    基本卡片，包含了文本信息。
  </div>
  <div class="item item-divider">
    卡片底部！
  </div>
</div>

»시도

카드 목록

카드의 목록을 설정하는 목록 카드 클래스를 사용 :

<div class="list card">

  <a href="#" class="item item-icon-left">
    <i class="icon ion-home"></i>
    Enter home address
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-ios-telephone"></i>
    Enter phone number
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-wifi"></i>
    Enter wireless password
  </a>

  <a href="#" class="item item-icon-left">
    <i class="icon ion-card"></i>
    Enter card information
  </a>

</div>

»시도

사진과 함께 카드

다음으로 카드 이미지의 사용은 그 효과가 더 좋을 것, 예이다 :

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg">
  </div>

  <a class="item item-icon-left assertive" href="#">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

»시도

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

카드 쇼

하기 실시 예는 여러 가지 다른 옵션 카드의 디스플레이 모드를 사용한다. 이리스트 카드 요소로 시작하고, 아바타 아이템의 사용은 아이템 몸체 요소는, 이미지 및 텍스트를 표시하는 클래스의 하단 항목 분배기를 사용하기 위해 사용된다.

<div class="list card">

  <div class="item item-avatar">
    <img src="mcfly.jpg">
    <h2>Marty McFly</h2>
    <p>November 05, 1955</p>
  </div>

  <div class="item item-body">
    <img class="full-image" src="delorean.jpg">
    <p>
      本教程 -- 学的不仅是技术，更是梦想！<br>
      本教程 -- 学的不仅是技术，更是梦想！<br>
      本教程 -- 学的不仅是技术，更是梦想！<br>
      本教程 -- 学的不仅是技术，更是梦想！
    </p>
    <p>
      <a href="#" class="subdued">1 喜欢</a>
      <a href="#" class="subdued">5 评论</a>
    </p>
  </div>

  <div class="item tabs tabs-secondary tabs-icon-left">
    <a class="tab-item" href="#">
      <i class="icon ion-thumbsup"></i>
      喜欢
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-chatbox"></i>
      Comment
    </a>
    <a class="tab-item" href="#">
      <i class="icon ion-share"></i>
      分享
    </a>
  </div>

</div>

»시도

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