标签:
详见:http://ionicframework.com/docs/css/components
代码一:www/index.html
<body ng-app="myreddit" ng-controller="RedditCtrl"> <ion-pane> <ion-header-bar class="bar-positive"> <h1 class="title">My Reddit</h1> </ion-header-bar> <ion-content> <div class="list"> <a href="{{story.url}}" target="_blank" class="item item-thumbnail-left" ng-repeat="story in stories"> <img ng-src="{{story.thumbnail}}" ng-if="story.thumbnail.startsWith(‘http‘)"/> <h2 class="story-title">{{story.title}}</h2> <p> {{story.domain}} </p> </a> </div> </ion-content> </ion-pane> </body>
/* Empty. Add your own CSS if you like */ h2.story-title { white-space: normal; height: 3.6em; }
设置3.6em后。标题栏大概会占据三行的高度,这样domain一行能靠近底部, 看起来更美观。
ionic list component 最基本用法<ul class="list"><li class="item">xxx</li></ul>
其中图片可以设置为item-avatar-left或item-thumbnail-left
标签:
原文地址:http://my.oschina.net/uniquejava/blog/524462