Question

我正在尝试在Github中仅包含材料组件回购中的snackbar组件：

https://github.com/material-components/material-components-web

Answer 1

您可以尝试https://material.angular.io

HTML

<button md-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
  Pizza party
</button>

TS

import {Component} from '@angular/core';
import {MdSnackBar} from '@angular/material';


@Component({
  selector: 'snack-bar-component-example',
  templateUrl: './snack-bar-component-example.html',
})
export class SnackBarComponentExample {
constructor(public snackBar: MdSnackBar) {}

openSnackBar() {
 this.snackBar.openFromComponent(PizzaPartyComponent, {
   duration: 500,
  });
}
 }


@Component({
selector: 'snack-bar-component-example-snack',
templateUrl: './snack-bar-component-example-snack.html',
styleUrls: ['./snack-bar-component-example-snack.css'],
})
 export class PizzaPartyComponent {}

来自实际文档https://material.angular.io/components/component/snack-bar

的示例

Answer 2

Blox Material库提供了Web和Angular的Material Components之间的集成。它还具有您要使用的材料组件零食栏组件的绑定。

这里有一个入门指南：https://blox.src.zone/material#/guides/gettingstarted

有关小吃店消息的文档和代码示例，请访问：https://blox.src.zone/material#/directives/snackbar

简而言之，您必须安装@blox/material库并在Angular应用程序中导入其MaterialModule。这将注册一个MdcSnackBarService，可用于创建小吃栏消息。 mdc-snackbar的所有选项，设置和主题可能性都可用。

如果您按照“使用入门”指南操作并仅使用MdcSnackBarService，则生产版本将仅包含快餐栏组件的代码。

如果您想在没有现有集成库的情况下执行此操作，可以查看Blox Material的源代码以获取灵感。

Angular的材料成分2

2 个答案: