이온카드

최근 몇 년 동안 카드를 활용하는 방법이 점점 더 대중화되고 있습니다. 카드는 정보 표시를 더 잘 정리하는 도구를 제공합니다.

모바일 애플리케이션의 경우 카드가 화면 크기에 맞춰 조정됩니다.

카드의 표시 효과를 유연하게 제어하고 애니메이션 효과도 얻을 수 있습니다.

카드는 일반적으로 페이지 상단에 배치됩니다. 물론 좌우 전환 기능도 구현할 수 있습니다.

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

카드의 기본 스타일에는 상자 그림자가 있습니다. 성능상의 이유로 list list-inset과 같은 유사한 요소에는 그림자가 없습니다.

카드가 많고 각 카드에 하위 요소가 많은 경우 삽입 목록을 사용하는 것이 좋습니다.

카드의 머리와 바닥

항목 구분자 클래스를 추가하여 카드에 머리와 바닥을 추가할 수 있습니다.

<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="../style/images/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>

실행 효과는 다음과 같습니다.

카드 표시

다음 예에서는 옵션이 카드에 표시되는 방식에 여러 가지 다른 항목이 사용됩니다. 목록 카드 요소를 사용하기 시작했고, 이미지와 텍스트 정보를 표시하기 위해 item-avatar, item-body 요소를 사용했고, 하단에는 item-divider 클래스를 사용했습니다.

<div class="list card">

  <div class="item item-avatar">
    <img src="../style/images/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>
      php中文网 -- 学的不仅是技术，更新梦想！<br>
      php中文网 -- 学的不仅是技术，更新梦想！<br>
      php中文网 -- 学的不仅是技术，更新梦想！<br>
      php中文网 -- 学的不仅是技术，更新梦想！
    </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>

작동 효과는 다음과 같습니다.