ионная карта

В последние годы карта (карта) становятся все более популярными, карта предоставляет инструмент, чтобы лучше организовать информацию, представленную.

На основании размера от размера экрана для адаптивных мобильных терминалов карт приложений.

Мы можем быть очень гибкой карты дисплей управления, даже анимационные эффекты.

Общие карты в верхней части страницы, конечно, может достигнуть о функции переключения.

<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>

Попробуйте »

Операционные результаты следующие: