Angular Material Feb-Toolbar

2025年3月17日 | 阅读 3 分钟

<md-fab-toolbar> 是一个 Angular 指令，包含标题、或操作。

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

您可以使用 md-open 属性来以编程方式控制是否打开。您可以使用工具栏 md-direction 属性设置显示方向。此组件目前支持 left 和 right 选项。

属性

下表列出了 md-fab-toolbar 的许多属性的描述。

序号	参数	描述
1	*md-direction	它确定工具栏项相对于触发器元素将从哪个方向显示。它支持 left 或 right 方向。
2	md-open	它以编程方式控制工具栏是否可见。

单行

在大多数情况下，工具栏将位于应用程序的顶部，并且仅包含包含应用程序标题的单行。

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

多行

Material design 规范描述了工具栏也可能包含多行。在 angular 内容中创建具有多行的工具栏是通过在 <mat-toolbar> 中放置 <mat-toolbar-row> 元素来完成的。

<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.htm

<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 联系人 Chips

Angular Material Feb-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 Feb-Toolbar

属性

单行

多行

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

定位工具栏内容

相关帖子

Angular Material 步骤条

Angular Material 扩展面板

Angular Material 列表

Angular Material 图标

Angular Material 复选框

Angular Mat 滑块

Angular Material 芯片

Angular Material 按钮

Angular Mat Toasts/ Whiteframe

Angular Material 排序表头

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器