码迷,mamicode.com
首页 > 其他好文 > 详细

ionic list component

时间:2015-11-01 06:58:40      阅读:434      评论:0      收藏:0      [点我收藏+]

标签:

详见: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


  1. text-overflowellipsis;
  2. white-spacenowrap;
这是h2标题栏的默认样式 如果标题过长末尾会被截断并显示成...,设置为white-space: normal后就能换行显示。 或者也可以直接在a上加上item-text-wrap

最终效果:
技术分享



ionic list component

标签:

原文地址:http://my.oschina.net/uniquejava/blog/524462

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!