앵귤러 다트의 각진 클릭으로 드로어 패널 확장을 구현하는 방법

Question

내 AngularDart 프로젝트에서 앵귤러 컴포넌트의 미니 서랍 구성 요소를 가지고 있으며, 드로어 패널 너비를 오른쪽으로 회전하는 기능을 구현하려고합니다. 서랍 바닥에 위치한 버튼을 클릭하는 동안 180도까지 화살표 아이콘.

app_component.html

<material-content> 
    <header class="material-header shadow"> 
     <div class="material-header-row"> 
      <material-button icon 
          class="material-drawer-button" (trigger)="drawer.toggle()"> 
       <material-icon icon="menu"></material-icon> 
      </material-button> 
      <span class="material-header-title">Tushar Rai</span> 
      <div class="material-spacer"></div> 
      <nav class="material-navigation" id="twitter"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/twitter-white.png"> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="google-plus"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/google-plus-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="facebook"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/facebook-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="pinterest"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/pinterest-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="instagram"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/instagram-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="youtube"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/youtube-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="quora"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/quora-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="linkedin"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/linkedin-white.png"/> 
       </a> 
      </nav> 
      <nav class="material-navigation" id="github"> 
       <a href="" target="_blank"> 
        <img class="social-icon-image" src="images/github-white.png"/> 
       </a> 
      </nav> 
     </div> 
    </header> 

    <material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null"> 
     <material-list *deferredContent> 
      <div group class="mat-drawer-spacer"></div> 
      <div group> 
       <material-list-item> 
        <material-icon icon="home"></material-icon>Home 
       </material-list-item> 
       <material-list-item> 
        <material-icon icon="work"></material-icon>Work 
       </material-list-item> 
       <material-list-item> 
        <material-icon icon="account_circle"></material-icon>About 
       </material-list-item> 
       <material-list-item> 
        <material-icon icon="contact_mail"></material-icon>Contact 
       </material-list-item> 
      </div> 

      <div group class="navigation-resize"> 
       <material-button icon> 
        <material-icon icon="arrow_right"></material-icon> 
       </material-button> 
      </div> 
     </material-list> 


    </material-drawer> 

    <div class="app-layout"> 
     <p>Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 
      et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 
      veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 
      legere iriure blandit. Veri iisque accusamus an pri. 
     </p> 
    </div> 
    <footer-layout></footer-layout>[![enter image description here][1]][1] 
</material-content> 

app_component.css

material-content material-drawer { 
    position: fixed; 
} 

material-content header { 
    position: fixed; 
} 

material-drawer { 
    max-width: 56px; 
} 

.social-icon-image { 
    width: 16px; 
    height: 16px; 
} 

.material-navigation:hover { 
    width: 24px; 
    height: 24px; 
    padding: 8px; 
    text-align: center; 
    border-radius: 24px; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition: .5s; 
} 

#twitter:hover {background-color: #00aced;} 
#facebook:hover {background-color: #3b5998;} 
#google-plus:hover {background-color: #dd4b39;} 
#pinterest:hover {background-color: #cb2027;} 
#instagram:hover {background-color: #bc2a8d;} 
#linkedin:hover {background-color: #007bb6;} 
#youtube:hover {background-color: #bb0000;} 
#quora:hover {background-color: #a82400;} 
#tumblr:hover {background-color: #32506d;} 
#flickr:hover {background-color: #ff0084;} 
#dribbble:hover {background-color: #ea4c89;} 
#foursquare:hover {background-color: #0072b1;} 
#medium:hover {background-color: #00ab6c;} 
#github:hover {background-color:#767676;} 

.app-layout { 
    padding-top: 72px; 
    padding-left: 72px; 
    padding-bottom: 16px; 

} 

.navigation-resize { 
    width: 56px; 
    position: absolute; 
    bottom: 0; 
    margin-bottom: 8px; 
} 

.navigation-resize material-button { 
    float: right; 
} 

Answer 1

템플릿 코드는 다음과 같이 할 수 있습니다

<div group class="navigation-resize"> 
    <material-button icon (trigger)="drawer.toggle()"> 
    <material-icon icon="arrow_right"></material-icon> 
    </material-button> 
</div> 

하는 오픈 화살표의 외출해야 서랍은 닫을 때 표시되기를 원하기 때문에 서랍 디. 서랍이 보이지 않을 때 내용의 흐름을 엉망으로 만들지 않도록 숨길 수 있도록 페이지 맨 아래에 배치해야합니다.

<material-button icon *ngIf="drawer.visible == false" (trigger)="drawer.toggle()"> 
    <material-icon icon="arrow_left"></material-icon> 
    </material-button> 

페이지 상단의 메뉴 기호도 약간 이상합니다. 또 다른 가능성은 서랍 표시 여부에 따라 변경되는 화살표로 변경하는 것입니다.