如何在 md-toolbar 中将元素定位到右侧？

Posted 2023-02-19

【中文标题】如何在 md-toolbar 中将元素定位到右侧？

【英文标题】：How to position elements to the right in md-toolbar?

【发布时间】：2015-11-30 14:03:08

【问题描述】：

我在工具栏中使用 FAB 快速拨号。但是我无法让它浮动到工具栏的右侧。我试过float: right 没有运气。另外，尝试了 flex offset="55"，但是在调整窗口大小时这不起作用。从本质上讲，无论窗口大小如何，我都希望按钮位于蓝色工具栏容器的最右侧。

请看下面的照片和代码：

<md-toolbar layout-fill layout-padding layout="row" style="background-color: #3F51B5;color:white;text-align:text-center;">
    <div layout="row">
        <i class="fa fa-users fa-2x" flex></i>
        <h1 class="md-title" style="color:white">Org Chart</h1>                                 
    </div>  
    <div class="lock-size" flex offset="55">
        <md-fab-speed-dial md-direction="left" ng-class="md-fling">
            <md-fab-trigger>
                <md-button aria-label="menu" class="md-fab md-accent">
                    <md-tooltip>
                      Actions
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon>
                </md-button>
            </md-fab-trigger>
            <md-fab-actions>
                <md-button aria-label="view" class="md-fab md-raised md-mini" >
                    <md-tooltip>
                      View Chart
                    </md-tooltip>                               
                    <md-icon md-svg-src="" style="color:black" ng-show="cDP.read" ng-click="paneShowFn('read')"></md-icon>
                </md-button>
                <md-button aria-label="add" class="md-fab md-raised md-mini" >
                    <md-tooltip>
                      Add Chart
                    </md-tooltip>                               
                    <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.insert" ng-click="paneShowFn('insert')"></md-icon>
                </md-button>
                <md-button aria-label="Settings" class="md-fab md-raised md-mini" >
                    <md-tooltip>
                      Security Access
                    </md-tooltip>                               
                    <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.permission" ng-click="paneShowFn('permission')"></md-icon>
                </md-button>                                
                <md-button aria-label="edit" class="md-fab md-raised md-mini" style="color:black" ng-show="cDP.update" ng-click="paneShowFn('update')">
                    <md-tooltip>
                      Edit Chart
                    </md-tooltip>                               
                    <md-icon md-svg-src="img/icons/ic_edit_48px.svg" style="color:black"></md-icon>
                </md-button>                                
            </md-fab-actions>
        </md-fab-speed-dial>
    </div>  
</md-toolbar>

【问题讨论】：

在你的 rmenu 中添加 md-position-mode="target-right target" 怎么样？

【参考方案1】：

或者你可以为此使用一个类：

.fill-space 
  // This fills the remaining space, by using flexbox.
  // Every toolbar row uses a flexbox row layout.
  flex: 1 1 auto;

<md-toolbar color="primary">
  <span>Application Title</span>

  <!-- This fills the remaining space of the current row -->
  <span class="fill-space"></span>

  <span>Right Aligned Text</span>
</md-toolbar>

此解决方案也取自规范。

【讨论】：

当<span flex></span> 工作得很好并且是推荐的做法时，为什么需要这样做？

@camden_kid 在我的情况下不起作用。可能是因为我使用的是较新版本的 Angular Material v2 而不是 Angular Material v1.x！

@camden_kid 我认为它可以留下来。我正在为材料 2 寻找这个问题，谷歌将我带到这里。该解决方案是通用的，并展示了它的一般工作原理，因此有助于在所有情况下更深入地理解问题。

This solution is also taken from a spec.: 能否提供个链接供参考？

@AlexanderAbakumov 我猜this 是您正在寻找的链接。如果我错了，请纠正我。

【参考方案2】：

此解决方案适用于 Angular Material v1.X，如果您需要通用/Angular Material v2 解决方案，请查看@experimenter 答案

如果你有一个md-toolbar，最简单的对齐正确内容的方法是这样的：

    <md-toolbar>
        <div class="md-toolbar-tools">
            <h3>You text</h3>
            <span flex></span>
            <ANY>your right content</ANY>
        </div>
    </md-toolbar>

span 中的flex 属性将覆盖内容之间的空间。这是文档中的官方方式。

在你的例子中，你只需要：

<md-toolbar>
    <div class="md-toolbar-tools">
        <div layout="row">
            <i class="fa fa-users fa-2x" flex></i>
            <h1 class="md-title" style="color:white">Org Chart</h1>
        </div>
        <span flex></span>
        <md-fab-speed-dial md-direction="left" ng-class="md-fling">
            <md-fab-trigger>
                <md-button aria-label="menu" class="md-fab md-accent">
                    <md-tooltip>
                        Actions
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_view_module_48px.svg"></md-icon>
                </md-button>
            </md-fab-trigger>
            <md-fab-actions>
                <md-button aria-label="view" class="md-fab md-raised md-mini">
                    <md-tooltip>
                        View Chart
                    </md-tooltip>
                    <md-icon md-svg-src="" style="color:black" ng-show="cDP.read" ng-click="paneShowFn('read')"></md-icon>
                </md-button>
                <md-button aria-label="add" class="md-fab md-raised md-mini">
                    <md-tooltip>
                        Add Chart
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.insert" ng-click="paneShowFn('insert')"></md-icon>
                </md-button>
                <md-button aria-label="Settings" class="md-fab md-raised md-mini">
                    <md-tooltip>
                        Security Access
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_add_48px.svg" style="color:black" ng-show="cDP.permission" ng-click="paneShowFn('permission')"></md-icon>
                </md-button>
                <md-button aria-label="edit" class="md-fab md-raised md-mini" style="color:black" ng-show="cDP.update" ng-click="paneShowFn('update')">
                    <md-tooltip>
                        Edit Chart
                    </md-tooltip>
                    <md-icon md-svg-src="img/icons/ic_edit_48px.svg" style="color:black"></md-icon>
                </md-button>
            </md-fab-actions>
        </md-fab-speed-dial>
    </div>
</md-toolbar>

【讨论】：

Np :) 您可以编辑标题以获得更通用的内容，例如“如何在 md-toolbar 的右侧放置元素”。但是有适当的英语xD

我尝试了您建议的解决方案，它只是将组件带到下一行。

@HimanshuChaudhary 你在使用角度材料 v1 吗？我认为这个解决方案不适用于 angular 2 版本

我正在使用 ng2，下面的答案解决了它。