Angular+ionic 접 기 전개 효 과 를 실현 하 는 예제 코드

2816 단어 Angularionic3벌리다수축 하 다.
1,html 중

 <ion-item>
  <div class="middle-content-order">
   <div class="middle-order-icon">
    <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isShow=!isShow">
    </ion-icon>
    <ion-icon name="chevron-down-outline" class="down-gray" item-right *ngIf="isShow" (click)="isShow=!isShow">
    </ion-icon>
   </div>
   <div class="middle-order-title"><span>   </span></div>
   <div class="middle-order-null"></div>
   <div class="middle-order-detail"><span>    </span></div>
 </div>
 </ion-item>
  <ion-list *ngIf="!isShow">
   <div class="order-alert">
    <div class='item-small'>
    <span> A3   </span>
    </div>
    <div class='item-small'>
     <span> A3   </span>
    </div>
    <div class='item-small'>
     <span> A3   </span>
    </div>

    <div class='item-small'>
     <span> A3   </span>
    </div>
    <div class='item-small'>
     <span> A3   </span>
    </div>
    <div class='item-small'>
     <span> A3   </span>
    </div>
    
   </div>
  </ion-list>
효과 도
在这里插入图片描述
아래 ionic 3 시 뮬 레이 션 드 롭 다운 전개/수축 효과

<ion-header>
 <ion-navbar>
 <ion-title>user</ion-title>
 </ion-navbar>
</ion-header>
<ion-content>
 
<ion-item>
     
<ion-icon name="ios-arrow-down" item-right *ngIf="isShow" (click)="isShow=!isShow"></ion-icon>
<ion-icon name="ios-arrow-forward" item-right *ngIf="!isShow" (click)="isShow=!isShow"></ion-icon>
 </ion-item>
 <ion-list *ngIf="isShow">
  <ion-item *ngFor="let item of items" >
     ：{{item.name}}   ：{{item.age}}
  </ion-item>
 </ion-list>
</ion-content>
Angular+ionic 접 기 전개 효과 에 관 한 예제 코드 에 관 한 글 은 여기까지 입 니 다.더 많은 Angular+ionic 접 기 전개 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
MySQL 이 어떻게 우아 하 게 큰 시 계 를 삭제 하 는 지 에 대해 서 말씀 드 리 겠 습 니 다.
MySQL 의 중복 색인 과 중복 색인 의 차이 점 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage