How to use css in ion-list, ion-item?

Question

How to use css in ion-list, ion-item?

Navigation

#1 by (1 votes)
#2 by (1 votes)

4

Hello, I'm developing an app and on this screen I'm getting data from a json, so I have to use ng-repeat, but this way I can not use the css styles because it does not accept div or other mode (at least as I've tried).

    <ion-list>  
        <ion-item>

           <a class="item item-avatar" ng-repeat="x in names|orderBy:'Name'"  href="#">
              <img ng-src="{{x.Image}}">
              <h2>{{x.Name}}</h2>
              <p>  {{x.Local}}</p>
            </a>

        </ion-item>
    </ion-list>

javascript html ionic

asked by anonymous 04.03.2016 / 18:22

2 answers

Where to implement Facade in MVC? List calculated dates per month based on parameters

score 1 · Answer 1

1

The code without json and with css working is this:

<a class="item item-avatar" id="palestrantes" href="#">
  <img src="Fiona.jpg">
  <h2>Fiona Doohan</h2>
  <p> UDC, Dublin, Ireland </p>
</a>

04.03.2016 / 18:29

score 1 · Answer 2

To use css in Ionic you can create a direct class in the ion-list, and control the style of the component, in this case you can avoid using html tags and using the framework components.

ion-list.custom ion-item {
  background: green;
}

ion-list.custom ion-label {
  background: red;
  color: #FFF;
  padding:20px;
}

<ion-list class="custom">
 <ion-item>
    <ion-label>asddsd</ion-label>
 </ion-item>
</ion-list>