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

Asked

Viewed 945 times

4

Hello, I’m developing an app and on this screen I’m picking up data from a json, so I have to use ng-repeat, only this way I can’t use the css styles, because it doesn’t accept div or other way(at least as I 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

2 answers

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>

1

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

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>

Browser other questions tagged javascript html ionic

You are not signed in. Login or sign up in order to post.