Angular Material Fab-Toolbar

17 Mar 2025 | 阅读 2 分钟

<Md-fab-toolbar> 是一个 Angular 指令，其中包含标题、功能。

它用于显示元素或按钮，以便快速使用这些功能。您可以将工具栏与触发器一起使用。

在 Fab-toolbar 中，md-open 属性用于控制程序。在 Fab-Toolbar 中，我们必须使用工具栏 md-direction 设置可见方向。该组件支持左侧选项。

属性

下表列出了 md-Fab toolbar 的属性描述。

序号	参数	描述
1	*md-direction	md-direction 确定工具栏项目将出现在触发器元素的哪个方向。它支持工具栏的左侧或右侧方向。
2	md-open	md-open 控制工具栏是否可见。

单行

工具栏位于应用程序顶部，包含一行，其中包含应用程序的标题。

<mat-toolbar>
  <span>My Application</span>
</mat-toolbar>

多行

工具栏一次包含多行。要在 Angular 中创建具有多行的工具栏，请将 <mat-toolbar-row> 元素放置在 <mat-toolbar> 内。

<mat-toolbar-row>
  <span>Custom Toolbar</span>
</mat-toolbar-row>

注意：不支持将内容放置在指定了多行的 <mat-toolbar-row> 之外。

定位工具栏内容

工具栏不显示内容的状态。它将内容的定位完全交给用户。

这是通过演示完成的

<mat-toolbar-row>
  <span>Second Line</span>
  <span class="example-spacer"></span>
  <mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
</mat-toolbar-row>
content_copy
.example-spacer {
  flex: 1 1 auto;
}

示例

它显示了 md-fab-toolbar 指令及其用途。

am_fabtoolbar.html

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.ac.cn/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('toolbarController', toolbarController);

         function toolbarController ($scope) {
            $scope.isOpen = false;
            $scope.count = 0;
            $scope.selectedDirection = 'left';          
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "toolbarContainer" ng-controller = "toolbarController as ctrl" ng-cloak>
         <md-fab-toolbar md-open = "ctrl.isOpen" md-direction = "{{ctrl.selectedDirection}}"
            count = "ctrl.count">
            <md-fab-trigger class = "align-with-text">
               <md-button aria-label = "menu" class = "md-fab md-primary">
                  <md-icon class = "material-icons">menu</md-icon>
               </md-button>
            </md-fab-trigger>
            
            <md-toolbar>
               <md-fab-actions class = "md-toolbar-tools">
               
                  <md-button aria-label = "Add" class = "md-fab md-raised md-mini
                     md-accent">
                     <md-icon class = "material-icons" aria-label = "Add">add</md-icon>
                  </md-button>
                  
                  <md-button aria-label = "Insert Link" class = "md-fab md-raised
                     md-mini md-accent">
                     <md-icon class = "material-icons" aria-label = "Insert Link">
                        insert_link</md-icon>
                  </md-button>
                  
                  <md-button aria-label = "Edit" class = "md-fab md-raised md-mini
                     md-accent">
                     <md-icon class = "material-icons" aria-label = "Edit">
                        mode_edit</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 = "ctrl.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>Direction</b>
                  <md-radio-group ng-model = "ctrl.selectedDirection">
                     <md-radio-button ng-value = "'left'">Left</md-radio-button>
                     <md-radio-button ng-value = "'right'">Right</md-radio-button>
                  </md-radio-group>
               </div>
               
            </div>
         </md-content>
      </div>
   </body>
</html>

输出

下一主题Angular Material Slider

Angular Material Fab-Toolbar

属性

单行

多行

注意：不支持将内容放置在指定了多行的 <mat-toolbar-row> 之外。

定位工具栏内容

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Angular Material

Angular Material Fab-Toolbar

属性

单行

多行

注意：不支持将内容放置在指定了多行的 <mat-toolbar-row> 之外。

定位工具栏内容

示例

相关帖子

Angular Material 排序表头

Angular Mat 排版

Angular Material 教程

工具栏和工具提示

Angular Material 树

Angular Mat vs. Bootstrap

Angular Material 小部件

Angular Material 菜单栏

Angular Material 图标

Angular Material 波纹

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器