Question

我试图从角度材料网站中提供一些设计示例。我使用Angular Material 1.0.0RC5。

我想将FAB Speedial放在工具栏中，就像他们的例子一样 https://material.angularjs.org/latest/demo/fabSpeedDial

但是当我应用我在页面上看到的代码时，我也得到了一个奇怪的偏移，我只能用margin-top:-23px来纠正，但我认为我做错了。

如果超出某个尺寸codepen example

，我还可以看到网站

中的偏移量存在相同的错误

那么我做错了什么？

下面我附上屏幕代码

<body ng-app="starterApp" layout="column" ng-controller="AppController as ac" ng-cloak>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>
                <span>Toolbar with Icon Buttons</span>
            </h2>
            <span flex></span>
        </div>
    </md-toolbar>
    <md-fab-speed-dial md-open="isOpen" md-direction="down" class="md-scale md-fab-top-right">
        <md-fab-trigger>
            <md-button aria-label="menu" class="md-fab md-warn">
                <md-icon md-svg-src="menu"></md-icon>
            </md-button>
        </md-fab-trigger>
        <md-fab-actions>
            <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
                <md-icon md-svg-src="android" aria-label="Twitter"></md-icon>
            </md-button>
            <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
                <md-icon md-svg-src="windows" aria-label="Facebook"></md-icon>
            </md-button>
        </md-fab-actions>
    </md-fab-speed-dial>
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-4dp" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
            <md-button class="md-accent">Button 1</md-button>
            <md-button class="md-accent">Button 2</md-button>
        </md-sidenav>
        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                This Starter Application consists of a Toolbar, SideNav (with two buttons), and Content area.
                <p>This is the content area! </p>
            </md-content>
        </div>
    </div>

Answer 1

Take a look at this pen

我所做的就是将margin-top属性从89更改为16，如果我明白你的意思，一切正常，

Answer 2

他们工作的原因，但你的原因并不是因为他们的菜单栏上方有另一个元素，所以他们添加了＆＃34; margin-top：89px;＆＃34;和＆＃34; top：16px;＆＃34;补偿。

您需要做的就是调整他们设置的保证金最高值。

public static boolean hasNavBar(Context context) {
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Point realPoint = new Point();
        Display display = wm.getDefaultDisplay();
        display.getRealSize(realPoint);
        DisplayMetrics metrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(metrics);
        return metrics.heightPixels + metrics.widthPixels != realPoint.y + realPoint.x;
    }

    public static boolean isSystemBarOnBottom(Context context) {
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Point realPoint = new Point();
        Display display = wm.getDefaultDisplay();
        display.getRealSize(realPoint);
        DisplayMetrics metrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(metrics);
        Configuration cfg = context.getResources().getConfiguration();
        boolean canMove = (metrics.widthPixels != metrics.heightPixels &&
                cfg.smallestScreenWidthDp < 600);

        return (!canMove || metrics.widthPixels < metrics.heightPixels);
    }

See here

角度材料FAB快速拨号在工具栏中具有偏移量

2 个答案: