fab -工具栏看起来不对

Fab-toolbar does not look right

本文关键字：看起来 工具栏 fab      更新时间：2023-09-26

Fab-toolbar在这里的主演示中看起来很好。

但是如果你试图在自己的例子中使用它，它会变得比它应该的高，如图所示。

<div ng-controller="AppCtrl" class="fabToolbardemoBasicUsage" ng-app="MyApp">
  <md-content class="md-padding">
    <p>
      You can use the fabToolbar with a trigger and regular toolbar.
    </p>
    <p>
      You may use the <code>md-open</code> attribute to programmatically
      control whether or not the control is open, and you may add a class
      of <code>md-left</code> or <code>md-right</code> to control the
      position of the trigger and toolbar tools.
    </p>
  </md-content>
  <md-fab-toolbar md-open="demo.isOpen" count="demo.count" ng-class="demo.selectedAlignment">
    <md-fab-trigger class="align-with-text">
      <md-button aria-label="menu" class="md-fab md-primary">
        <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
      </md-button>
    </md-fab-trigger>
    <md-toolbar>
      <md-fab-actions class="md-toolbar-tools">
        <md-button aria-label="comment" class="md-icon-button">
          <md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
        </md-button>
        <md-button aria-label="label" class="md-icon-button">
          <md-icon md-svg-src="img/icons/ic_label_24px.svg"></md-icon>
        </md-button>
        <md-button aria-label="photo" class="md-icon-button">
          <md-icon md-svg-src="img/icons/ic_photo_24px.svg"></md-icon>
        </md-button>
      </md-fab-actions>
    </md-toolbar>
  </md-fab-toolbar>
  <md-content class="md-padding" layout="column">
    <div layout="row" layout-align="space-around">
      <div layout="column">
        <b>Open/Closed</b>
        <md-radio-group ng-model="demo.isOpen">
          <md-radio-button ng-value="true">Open</md-radio-button>
          <md-radio-button ng-value="false">Closed</md-radio-button>
        </md-radio-group>
      </div>
      <div layout="column">
        <b>Alignment</b>
        <md-radio-group ng-model="demo.selectedAlignment">
          <md-radio-button ng-value="'md-left'">Left</md-radio-button>
          <md-radio-button ng-value="'md-right'">Right</md-radio-button>
        </md-radio-group>
      </div>
    </div>
  </md-content>
</div>

.fabToolbardemoBasicUsage md-fab-toolbar.md-left md-fab-trigger.align-with-text {
  left: 7px; }

(function() {
  'use strict';
  angular.module('MyApp')
    .controller('AppCtrl', function($scope) {
      $scope.isOpen = false;
      $scope.demo = {
        isOpen: false,
        count: 0,
        selectedAlignment: 'md-left'
      };
    });
})();

如何修复此问题并使工具栏具有正常高度?

您可以将默认的硬编码height:6.8 rem值更改为height:100%，如下所示:-

md-fab-toolbar .md-fab-toolbar-wrapper {
    height: 100%;
}
相关文章：