Question

我想在inline-block

内显示<ion-item-sliding>图像和其他项目

喜欢文档： https://ionicframework.com/docs/api/components/item/ItemSliding/

你可以看到虚拟手机了解我的意思

我的代码在这里：

<ion-list *ngFor="let dev of developers" >
    <ion-item  hidden > <!--this is hidden -->

        <ion-input [(ngModel)]="developer.favid" value="{{ dev.favid }}"  ></ion-input>
  </ion-item>
  <ion-item-sliding>
      <!--     -->
      <ion-grid>      
      <ion-row>

            <ion-col col-3 >
       
               <ion-item style="float:left;">
                  <ion-thumbnail item-left>
                    <img src="{{dev.img}}" width="10%" height="10%" />
                  </ion-thumbnail>
               </ion-item>   
           <!--  -->    
              </ion-col>
           

            <ion-col col-9 >
          
             
                    <ion-item>
                      <h2>{{ dev.title }} </h2>
                  
                    <p>{{ dev.categorie }} </p>

                    <p>{{ dev.favid }} </p>
                  </ion-item> 
         
    <!-- --> </ion-col>

      </ion-row>
      </ion-grid>
  
  
        <ion-item-options >
          <button ion-button (click)="deleteDeveloper(developer.favid)"><ion-icon name="trash"></ion-icon> Delete</button>
        </ion-item-options>

</ion-item-sliding>
</ion-list>

Answer 1

我有一个解决方案，但我不知道世界上是否更好。...XD

所以

<ion-item color="secondary" style="margin-bottom: 5px; width: 20%; display: inline-block">
    <ion-label color="black" floating>Valor de la cuota:</ion-label>
    <ion-input content type="text" [(ngModel)]="loan.loanFinalFeesPayment" readonly></ion-input>
    <ion-icon item-end name="logo-usd"></ion-icon>
  </ion-item>
  <ion-item color="secondary" style="margin-bottom: 5px; width: 20%; display: inline-block">
    <ion-label color="black" floating>Tipo de documento:</ion-label>
    <ion-select [selectOptions]="selectConfig" (ionChange)="calculateDates()"
      okText="Seleccionar" cancelText="Cancelar" [(ngModel)]="loan.loanDocumentType">
      <ion-option value="Ningúno">Ningúno</ion-option>
      <ion-option value="Pagaré">Pagaré</ion-option>
      <ion-option value="Letra">Letra</ion-option>
      <ion-option value="Otro">Otro</ion-option>
    </ion-select>
    <ion-icon item-end name="ios-arrow-down"></ion-icon>
  </ion-item>

这是窍门

<ion-item color="secondary" style="margin-bottom: 5px; width: 20%; display: inline-block">
<ion-item color="secondary" style="margin-bottom: 5px; width: 20%; display: inline-block">

如何显示内联项离子3

1 个答案: