Browsed by
分类:弹出框 & 模态框

Bottom Sheet

Bottom Sheet

[toc] 概述 OVERVIEW MatBottomSheet可用于在屏幕底部打开Material Design面板。此面板主要用于移动设备的交互,可当作对话框或者菜单的备选方案。 The MatBottomSheet service can be used to open Material Design panels to the bottom of the screen. These panels are intended primarily as an interaction on mobile devices where they can be used as an alternative to dialogs and menus. 你可以通过调用open方法来打开一个底部菜单,加载一个组件与一个可选的配置对象。open方法将返回一个MatBottomSheetRef实例: You can open a bottom sheet by calling the open method with a component to be loaded and an optional config object. The open method will return an instance of MatBottomSheetRef: const bottomSheetRef = bottomSheet.open(SocialShareComponent, { ariaLabel: ‘Share on…

阅读全文 Read More

Snackbar

Snackbar

[toc] 概述 OVERVIEW MatSnackBar是一个用于展示snack-bar通知的服务。 MatSnackBar is a service for displaying snack-bar notifications. 打开snack-bar Opening a snack-bar 一个snack-bar中可以包含任意字符串信息或者一个指定的组件。 A snack-bar can contain either a string message or a given component. // Simple message. let snackBarRef = snackBar.open(‘Message archived’); // Simple message with an action. let snackBarRef = snackBar.open(‘Message archived’, ‘Undo’); // Load the given component into the snack-bar. let snackBarRef = snackbar.openFromComponent(MessageArchivedComponent); 无论使用哪种方式,都会返回一个MatSnackBarRef。此对象可用于撤回snack-bar或者接收snack-bar撤回时的通知。对于包含一个操作的简单消息,MatSnackBarRef暴露了一个操作触发时的observable。如果想…

阅读全文 Read More

Tooltip

Tooltip

[toc] 概述 OVERVIEW Angular Material提示框是一个当用户悬停或长按一个元素时会显示出来的文本标签。 The Angular Material tooltip provides a text label that is displayed with the user hovers over or longpresses an element. 位置 Positioning 提示框默认展示在元素的下方,但可以通过matTooltipPosition来设置其位置。提示框可以展示在元素的上、下、左、右。默认在下方。如果提示框在RTL布局方向中需要切换左右,则需要用before和after来替代left和right。 The tooltip will be displayed below the element but this can be configured using the matTooltipPosition input. The tooltip can be displayed above, below, left, or right of the element. By default the position will be below. If the tooltip should switch left/right positions in an RTL layout direction, then the positions before and after…

阅读全文 Read More

Dialog

Dialog

[toc] 概述 OVERVIEW 使用MatDialog服务,可以打开包含Material Design样式与动画的对话框。 The MatDialog service can be used to open modal dialogs with Material Design styling and animations. 传入一个需要加载的组件和可选配置对象,调用open方法可以打开对话框。open方法将返回一个MatDialogRef实例。 A dialog is opened by calling the open method with a component to be loaded and an optional config object. The open method will return an instance of MatDialogRef: let dialogRef = dialog.open(UserProfileComponent, { height: ‘400px’, width: ‘600px’, }); MatDialogRef提供了对已打开对话框的操作。可以用来关闭对话框,并在关闭后接收通知。 The MatDialogRef provides a handle on the opened dialog. It can be used to close the dialog and to receive notification when the dial…

阅读全文 Read More