.item : 嵌入头像很多社交App中,一个相当固定的UI模式是包含用户头像的信息列表: 在ionic中,头像被设置为40x40固定大小。和插入图标类似,向.item 中插入头像需要满足两个条件:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <link rel="stylesheet" type="text/css" href="ionic.min.css"> </head> <body> <div class="bar bar-header bar-dark"> <h1 class="title">Header</h1> <button class="button icon ion-plus"></button> </div> <div class="scroll-content has-header"> <div class="list"> <div class="item item-avatar"> <img src="img/a-1.jpg"> <h2>Venkman</h2> <p>我们周末去爬山吧!</p> </div> <div class="item item-avatar"> <img src="img/a-2.jpg"> <h2>Ray</h2> <p>真的好好吃啊...</p> </div> <div class="item item-avatar"> <img src="img/a-3.jpg"> <h2>Egon</h2> <p>什么时候去看演唱会啊,...</p> </div> <div class="item item-avatar"> <img src="img/a-4.jpg"> <h2>Winston</h2> <p>I love this game!</p> </div> </div> </div> <div class="bar bar-footer bar-dark"> <div class="button-bar"> <a class="button button-clear icon ion-ios-chatbubble-outline">Chat</a> <a class="button button-clear icon ion-ios-list-outline">Address</a> <a class="button button-clear icon ion-ios-eye-outline">Discovery</a> <a class="button button-clear icon ion-ios-person-outline">Profile</a> </div> </div> </body> </html> |
Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )
GMT+8, 2024-3-29 12:50 , Processed in 0.033441 second(s), 22 queries .
Powered by Discuz! X3.2
© 2001-2013 Comsenz Inc.