CODEWITHSUNDEEP
cssionic-framework
user5013616
user5013616

Reputation:

put buttons on a list as pictured in ionic

I have a list, how I can do to put 2 buttons to the right and one on the left?

enter image description here

This is my code, I tried many things but not working.

        <ion-content>
                  <ion-refresher
                        pulling-text="Pull to refresh..."
                        on-refresh="refrescarNuevosPosts()">
                  </ion-refresher>
                  <div class='list'>
                      <a  class='item item-avatar-left' ng-repeat="post in posts" ng-click='openLink(post.url)'>

                          <img ng-src='{{ post.thumbnail}}' ng-if="post.thumbnail.indexOf('http') === 0"/>
                          <h2 class='post-title'>{{ post.title}}</h2>
                          <p><span am-time-ago="post.created_utc" am-preprocess="unix">{{ post.domain}}
                          </p>
                      </a>  
                  </div>
                  <ion-infinite-scroll
                     on-infinite="cargarNuevosPosts()"
                    distance="1%">
                  </ion-infinite-scroll>
        </ion-content>

Upvotes: 0

Views: 1173

Answers (1)

AdsHan
AdsHan

Reputation: 465

Try this

        <ion-list>
        <ion-item collection-repeat="c in clientes | filter:pesquisa" ng-click="getCliente(c)" class="item-button-right item-button-left">
            <!-- 1 button -->
            <button class="button button-positive">
                <i class="icon ion-ios-telephone"></i>
            </button>                                

            <p>{{c.email}}</p>

            <!-- 2 buttons -->
            <div class="buttons">
                <button class="button button-energized">
                    <i class="icon ion-android-locate"></i>
                </button>
                <button class="button button-dark">
                    <i class="icon ion-android-arrow-forward"></i>
                </button>
            </div>                                            
        </ion-item>
    </ion-list>

The result of ion-list

enter image description here

See http://pointdeveloper.com/add-multiple-buttons-to-list-item-for-ionic-framework-apps/

I hope that I have helped in some way

Upvotes: 2

Related Questions