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

Posted on

Question :

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> 

    

Answer :

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>

    

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>

    

Leave a Reply

Your email address will not be published. Required fields are marked *