ionic list component

详见:http://ionicframework.com/docs/css/components

ionic list component 最基本用法<ul class="list"><li class="item">xxx</li></ul>

其中还可以给item添加额外的item-avatar-left或item-thumbnail-left, 这会让item中的图片浮在文字的左侧,带avatar的图片会显示成圆形,thumbnail图片会显示成矩形。

代码一: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;
}

对title所给样式的解释:
设置height: 3.6em后。标题栏大概会占据三行的高度,这样domain(来源)一行能靠近底部, 看起来更美观。

标题过长末尾会被截断并显示成...,这是因为默认h2有如下样式。

  1. text-overflowellipsis;
  2. white-spacenowrap;
将white-space从nowrap改成normal后就能换行显示。 或者也可以给item再加上item-text-wrap

最终效果:
ionic list component



你可能感兴趣的:(ionic list component)