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

最終效果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。