Does Angular material have predefined text fields (ala bootstrap alert)

Question

Played with angular material and absolutely loved it. But I discovered one rather surprising thing, and almost certainly I skipped the page in the manual, or well, on many pages, including this one.

I think I would add warning text in the “Thats not your password” lines for a failed login. And from bootstrap, I could easily do this with a warning window.

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

However, I cannot find a similar set for angular material. Yes, there is dialogue and toasts, but I wanted something simpler.

And yes, I could write my own class, but it looks like there must be a certain predefined class for it?

Answer 1

, angular , bootstrap

css role bootstrap

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

Angular , Alert Dialog,

$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)
         );
       };

showAlert() html

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

Answer 3

I also looked for such a function. The closest I can find is md-whiteframe. You can make a warning of type Angular type of material as follows:

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

However, the md-warn class does not work with this directive.