Comment puis-je montrer deux icônes aligné à droite dans un ioniques liste?

Je suis tenté de mettre une liste de deux icônes de bouton qui peut être cliqué. J'ai essayé de faire quelque chose comme ça, mais les icônes de chevauchement:

<ion-list>
    <ion-item ng-repeat="item in items" class="item-button-right">
        {{ item.Info }}
        &nbsp;

        <button class="button button-positive" ng-click="Accept(item)">
            <i class="icon ion-checkmark"></i>
        </button>
        <button class="button button-assertive" ng-click="Reject(item)">
            <i class="icon ion-close"></i>
        </button>
    </ion-item>
</ion-list>

Le comportement souhaité que j'essaie de faire est de montrer quelques petit texte de présentation de l'info sur la gauche et présente deux options sur la droite.

J'ai un Simple Autonome Corriger Exemple ici: http://codepen.io/anon/pen/vzLob

Pouvez-vous vous montrer css cours en lien avec le problème?
Les classes que j'ai énumérés ci-dessus sont tous des Ionique classes du framework. Je ne suis pas reproduire ces ici à cause de cela.
tous les boutons sont positioned absolute de sorte qu'ils se chevauchent pour sûr, parce qu'ils ont la même position définie de sorte que vous pouvez ovewrite la bonne position de l'un des boutons codepen.io/anon/pen/DGCew

OriginalL'auteur Mike Bailey | 2014-10-15

J'ai récemment rencontré ce problème et a découvert que les Ionique fournit une classe appelée .buttons qui quand enroulé autour de plusieurs bouton éléments postes côte à côte.

Cela évite d'avoir à utiliser !important qui en général est considéré comme une mauvaise pratique en CSS.

Voici un exemple de code qui a fonctionné pour moi:

<div class="item item-button-right">
                List item 1  
                <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>
            </div>

Également remarqué que votre code stylo pièce jointe, donc je pensais que je serais mise à jour de trop à démontrer.

http://codepen.io/anon/pen/bNjypG

OriginalL'auteur Will.Harris

Voici un exemple

<ion-view ng-controller="inspectorsCtrl as vm">
    <ion-content class="has-header">
        <ion-list>
            <ion-item ng-repeat=" item in vm.items" class="item-icon-right">
                {{item.info}}
                <i class="icon ion-chevron-right icon-accessory"></i>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

cette solution est la meilleure pour moi!!
merci..waslooking pour ce genre de solution et l'a trouvé.

OriginalL'auteur Jose Armando Romero Bonilla

Essayer comme ceci:

D'abord prendre un div de classe et ensuite prendre 2 boutons à l'intérieur de la balise div.

<div class="buttons" > 
    <button class="button button-icon" >
        <i class = "icon ion-funnel"></i>
    </button>
    <button class="button button-icon" >
        <i class = "icon ion-android-document"> </i>
    </button>   
</div>

OriginalL'auteur sagar potdar

La solution à l'aide .les boutons ne fonctionne que si le texte n'est pas long, ou si il y a seulement deux icônes.

Avec flexbox il fonctionne dans n'importe quelle situation.

<ion-list>
  <ion-item 
    ng-repeat="item in items"
    class='item-multiple-buttons'
  >
    <div class="buttons buttons-left">
      <button class="button button-icon ion-checkmark-circled"></button>
      <button class="button button-icon ion-information-circled"></button>
    </div>

    <div class="item-content" >
          {{$index + 1}}. Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </div>

    <div class="buttons buttons-right">
      <button class="button button-icon ion-close-circled"></button>
      <button class="button button-icon ion-help-circled"></button>
      <button class="button button-icon ion-minus-circled"></button>
      <button class="button button-icon ion-plus-circled"></button>
    </div>
  </ion-item>
</ion-list>

SCSS:

/* Variable values from ionic */
$item-padding: 16px;
$item-icon-font-size: 32px;

//From _button.scss, hardcoded value
$button-icon-padding: 6px;

.item {     
  &.item-multiple-buttons{
    display: flex;
    padding: 0 $item-padding;

    .item-content{
      flex: 1;
      padding: $item-padding 0;
    }

    .buttons{
      display: flex;

      &.buttons-left{
        margin-right: $item-padding - $button-icon-padding;
      }

      &.buttons-right{
        margin-left: $item-padding - $button-icon-padding;
      }

      .button{
        font-size: $item-icon-font-size;
      }
    }
  }
}

Codepen: http://codepen.io/M1k3l/pen/PWBdOB

OriginalL'auteur Mikel

Vous devez vous connecter pour publier un commentaire.