首页 > 其他 > 详细

ionic list component

时间:2015-11-01 06:57:25      阅读:514      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!