Ionic List Example

We have fetch data from Reddit.com, displayed titles. Let’s improve UI using Ionic components.

go to ionic website - doc, css components,

e.g. under header

See what happens when you change bar-stable to bar-positive?

<div class="bar bar-header bar-positive">
  <h1 class="title">bar-positive</h1>
</div>

Commonly used List

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

index.html 

<ion-content>      
  <div class="list">  
    <div class="item" ng-repeat="story in stories">
      <a href="{{story.url}}" target="_blank">{{story.title}}</a> - {{story.domain}}
    </div>
  </div>

</ion-content>

But still truncated.

      <ion-content>      
        <div class="list">            
          <a class="item item-thumbnail-left" ng-repeat="story in stories" href="{{story.url}" target="_blank">
            <img ng-src="{{story.thumbnail}}">
            <h2>{{story.title}}</h2>
            <p>{{story.domain}}</p>
          </a>          
        </div>
      </ion-content>
ss

Some images are broken.

<img ng-src="{{story.thumbnail}}" 

ng-if="story.thumbnail.indexOf('http') === 0">

To wrap text. Declare new css style.

index.html

<img ng-src="{{story.thumbnail}}" ng-if="story.thumbnail.indexOf('http') === 0">

<h2 class="story-title">{{story.title}}</h2>

style.css

h2.story-title{

white-space: normal;

height: 3.6em; 

}

height: 3.6em; html link will also be 3 lines down