Question

一直在玩角质材料，绝对喜欢它。但是发现了一个相当令人惊讶的事情，几乎可以肯定我错过了手册中的一个页面，或者很多页面，包括那个页面。

以为我会在＆＃34;这不是你的密码＆＃34;中添加警告文字。登录失败。从bootstrap我可以轻松地使用和警告框。

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

但是，我找不到类似角度材料的设置。是的，有对话和祝酒词，但我想要更简单的东西。

是的，我可以编写自己的类，但感觉应该有一些预定义的类吗？

Answer 1

我一直在寻找这样的功能。我能找到的最接近的东西是md-whiteframe。你可以像这样做一个Angular Material类型的警告：

<div layout="row" layout-padding layout-wrap layout-fill>
    <div md-whiteframe="3" class="padded">
        Some text here
    </div>
</div>

但是，md-warn类不适用于该指令。

Answer 2

到目前为止我可以看到，像bootstrap

这样的角度材料中没有警告框

所以我只从bootstrap中提取警报css角色

.alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 5px; }

.alert-heading {
  color: inherit; }

.alert-link {
  font-weight: bold; }

.alert-dismissible {
  padding-right: 2rem; }
  .alert-dismissible .close {
    position: relative;
    top: -.125rem;
    right: -1rem;
    color: inherit; }

.alert-success {
  background-color: #dff0d8;
  border-color: #d0e9c6;
  color: #3c763d; }
  .alert-success hr {
    border-top-color: #c1e2b3; }
  .alert-success .alert-link {
    color: #2b542c; }

.alert-info {
  background-color: #d9edf7;
  border-color: #bcdff1;
  color: #31708f; }
  .alert-info hr {
    border-top-color: #a6d5ec; }
  .alert-info .alert-link {
    color: #245269; }

.alert-warning {
  background-color: #fcf8e3;
  border-color: #faf2cc;
  color: #8a6d3b; }
  .alert-warning hr {
    border-top-color: #f7ecb5; }
  .alert-warning .alert-link {
    color: #66512c; }

.alert-danger {
  background-color: #f2dede;
  border-color: #ebcccc;
  color: #a94442; }
  .alert-danger hr {
    border-top-color: #e4b9b9; }
  .alert-danger .alert-link {
    color: #843534; }

Answer 3

是Angular Material有对话框，您可以使用Alert Dialog，文档here

将$ mdDialog作为依赖项添加到控制器并自定义代码。

    $scope.showAlert = function(ev) {
       $mdDialog.show(
           $mdDialog.alert()
             .parent(angular.element(document.querySelector('#popupContainer')))
             .clickOutsideToClose(true)
             .title('This is an alert title')
             .textContent('You can specify some description text in here.')
             .ariaLabel('Alert Dialog Demo')
             .ok('Got it!')
             .targetEvent(ev)
         );
       };

从你的html调用showAlert（）

   <md-button class="md-primary md-raised" ng-click="showAlert($event)"   flex="100"  flex-gt-md="auto">
      Alert Dialog
    </md-button>

Angular Material是否具有预定的文本框（ala bootstrap alert）

3 个答案: