carte ionique
Ces dernières années, l'application des cartes est devenue de plus en plus populaire. Les cartes fournissent un outil pour mieux organiser l'affichage des informations.
Pour les applications mobiles, la carte s'adaptera à la taille de l'écran.
Nous pouvons contrôler de manière flexible l'effet d'affichage de la carte et même réaliser des effets d'animation.
Les cartes sont généralement placées en haut de la page, mais bien sûr, elles peuvent également être interverties à gauche et à droite.
<div class="card"> <div class="item item-text-wrap"> 基本卡片，包含了文本信息。 </div> </div>
Le style par défaut de la carte a box-shadow Pour des raisons de performances, des éléments similaires comme list list-inset n'ont pas d'ombres.
Si vous avez beaucoup de cartes et que chaque carte comporte de nombreux sous-éléments, il est recommandé d'utiliser une liste en encart.
La tête et le bas de la carte
Nous pouvons ajouter la tête et le bas à la carte en ajoutant la classe item-divider :
<div class="card"> <div class="item item-divider"> 卡片头部！ </div> <div class="item item-text-wrap"> 基本卡片，包含了文本信息。 </div> <div class="item item-divider"> 卡片底部！ </div> </div>
Liste des cartes
Utilisez la classe list card pour définir la liste des cartes :
<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>
Carte avec image
Utilisez des images dans des cartes, l'effet sera meilleur, l'exemple est le suivant :
<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>
L'effet de course est le suivant :
Affichage des cartes
Les exemples suivants utilisent plusieurs options différentes pour l'affichage des cartes. J'ai commencé à utiliser l'élément list card et j'ai utilisé les éléments item-avatar, item-body pour afficher des images et des informations textuelles, ainsi que la classe item-divider en bas.
<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>
L'effet de l'opération est le suivant :
