详见: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>
代码二:www/css/style.css
/* 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
- text-overflow: ellipsis;
- white-space: nowrap;
这是h2标题栏的默认样式 如果标题过长末尾会被截断并显示成...,设置为white-space: normal后就能换行显示。 或者也可以直接在a上加上item-text-wrap
最终效果:
时间: 2024-10-25 15:30:53