Question

我已经基于此StackOverflow answer创建了一个工具栏菜单。

代码如下：

<md-content>
    <md-toolbar class="md-primary">
        <div class="md-toolbar-tools" layout="row" layout-padding>
            <div>
                <md-button class="md-icon-button" aria-label="Settings" ng-click="toggleRight()"
                               ng-hide="isOpenRight()">
                    <md-icon>menu</md-icon>
                </md-button>
            </div>
            <div>
                <h2>
                    <span>Title</span>
                </h2>
            </div>
            <section layout="row" layout-sm="column" layout-align="center center" layout-wrap flex">
                <md-autocomplete md-selected-item="selectedItem" md-no-cache="true" md-search-text="searchText" md-items="item in query(searchText)" md-item-text="item.value">
                    <md-progress-circular ng-show="working" md-mode="indeterminate"></md-progress-circular>
                    <md-item-template>
                        <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.value}}</span>
                        <span hidden id="SelectedId">{{item.value}}</span>
                    </md-item-template>
                    <md-not-found>
                        <span md-highlight-text="searchText"> Not Found</span>
                    </md-not-found>
                </md-autocomplete>
            </section>

            <section layout="row" layout-sm="column" layout-align="center center" layout-wrap >
                <md-button class="md-fab md-mini">
                    <md-icon>person</md-icon>
                </md-button>
                <md-button class="md-fab md-mini">
                    <md-icon>notifications</md-icon>
                </md-button>
                <md-button class="md-fab md-mini">
                    <md-icon>sync</md-icon>
                </md-button>
                <md-button class="md-fab md-mini">
                    <md-icon>apps</md-icon>
                </md-button>
            </section>

        </div>
    </md-toolbar>
</md-content>

<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">

    <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">Sidenav Right</h1>
    </md-toolbar>
    <md-content layout-padding>
        <form>
            <md-input-container>
                <label for="testInput">Test input</label>
                <input type="text" id="testInput"
                       ng-model="data" md-autofocus>
            </md-input-container>
        </form>
        <md-button ng-click="close()" class="md-primary">
            Close Sidenav Right
        </md-button>
    </md-content>
</md-sidenav>

但是，上面的代码存在一些问题：

我的代码没有响应。调整窗口大小时，所有md-button都会被拉伸。
输入的可键入区域小于其大小！
当我单击导航栏按钮时，该按钮的图标被隐藏，并且所有工具栏图标的位置都在更改。

有人可以解决我的代码问题吗？

Angular Material响应工具栏

0 个答案: