ionic list component

时间 2019-11-18

标签 ionic list component 繁體版

原文原文链接

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

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

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

代码一：www/index.html app

<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(来源）一行能靠近底部，看起来更美观。 dom

标题过长末尾会被截断并显示成...，这是由于默认h2有以下样式。 ionic

text-overflow: ellipsis;
white-space: nowrap;

将white-space从nowrap改为normal后就能换行显示。或者也能够给item再加上item-text-wrap

最终效果：