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>

在页面顶部设置菜单符号会有点奇怪。另一种可能性是将其更改为箭头，该箭头根据抽屉可见性以ngIf变化。

如何在Angular dart中点击角度组件实现Drawer面板扩展

1 个答案: