Estoy tratando de poner en una lista de dos iconos de botón que se puede hacer clic. He intentado hacer algo como esto, pero los iconos se superponen:

<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>

El comportamiento deseado estoy tratando de hacer es mostrar algunos pequeños propaganda de información sobre la izquierda y presenta dos opciones, a la derecha.

Tengo un Simple Autónomo Ejemplo Correcto aquí: http://codepen.io/anon/pen/vzLob

  • Se puede mostrar que las clases css relacionadas con el problema?
  • Las clases que he mencionado son todos nativos de Ionic framework de clases. Yo no soy la reproducción de estos aquí a causa de esto.
  • todos los botones son positioned absolute para que se superponen, porque tienen la misma posición definida, de modo que usted puede ovewrite la derecha de la posición de cualquiera de los botones codepen.io/anon/pen/DGCew
InformationsquelleAutor Mike Bailey | 2014-10-15

4 Comentarios

  1. 29

    Hace poco me encontré con este problema y descubrió que Iónica proporciona una clase llamada .buttons que cuando se envuelve alrededor de varios botones de los elementos de las posiciones de lado a lado.

    Esto evita tener que utilizar !important que en general se considera de mala práctica en el CSS.

    He aquí un ejemplo del código que funcionó para mí:

    <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>

    También notó el código de la pluma de apego por lo que pensé que había actualización que demasiado para demostrar.

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

  2. 7

    Aquí es un ejemplo

    <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>
    • gracias..waslooking para este tipo de solución y la encontré.
  3. 1

    Tratar como este:

    Primero tomar un div con la clase y luego tomar 2 botones dentro de la etiqueta 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>
  4. 0

    La solución usando .los botones sólo funciona si el texto no es largo o si sólo hay dos iconos.

    Junto con flexbox funciona en cualquier situación.

    <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>

    SECS:

    /* 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

Dejar respuesta

Please enter your comment!
Please enter your name here