web-dev-qa-db-ja.com

Toastの色を変更するには、Angular material $ mdToast？

$mdToast.simple().content("some test")の使用中は、トーストが黒い色で表示されています。その色を赤、黄などに変更するにはどうすればよいですか、エラー、警告、成功などのエラーメッセージの種類によって異なります。

this と同様の質問。

angularjsmaterial-designtoastangular-material
53
Rafiu

編集：
正しい実装のために、 rlay3ssolution below :)を使用してください！

期限切れ：
jhblacklocksソリューションでカスタムテキストを表示する際に問題が発生したため、「テンプレート」を使用してこのようにすることにしました。

var displayToast = function(type, msg) {

    $mdToast.show({
        template: '<md-toast class="md-toast ' + type +'">' + msg + '</md-toast>',
        hideDelay: 6000,
        position: 'bottom right'
    });
};

また、さまざまなタイプを.cssファイルに追加しました。

.md-toast.error {
    background-color: red;
}

.md-toast.success {
    background-color: green;
}

これが最も美しいアプローチであるかどうかはわかりませんが、各ダイアログタイプのテンプレートファイルは必要なく、カスタムテキストの表示は本当に簡単です。

32
error1337

テーマを指定する簡単な方法があります：

_$mdToast.simple().content("some test").theme("success-toast")
_

そして、あなたのCSSで：

_md-toast.md-success-toast-theme {
    background-color: green;
    ...
}
_

メッセージタイプを組み込んで、テーマを動的に選択できます。

Update：Charlie Ngが指摘したように、未登録のカスタムテーマの使用に関する警告を避けるために、テーマプロバイダーを使用してモジュールに登録します：$mdThemingProvider.theme("success-toast")

別の更新：2015年12月2日（v1.0.0 +）に breaking change が作成されました。次を指定する必要があります。

_md-toast.md-success-toast-theme {
    .md-toast-content {
        background-color: green;
        ...
    }
}
_
82
rlay3

テーマを登録する：

$mdThemingProvider.theme("success-toast");
$mdThemingProvider.theme("error-toast");

cssを追加します。

md-toast.md-error-toast-theme div.md-toast-content{
    color: white !important;
    background-color: red !important;
}

md-toast.md-success-toast-theme div.md-toast-content{
    color: white !important;
    background-color: green !important;
}

つかいます：

$mdToast.show(
    $mdToast.simple()
        .content(message)
        .hideDelay(2000)
        .position('bottom right')
        .theme(type + "-toast")
);
11
mattatwork

このリンクで、要素の背景色を変更できないことがわかります。これは常に修正されます。

https://github.com/angular/material/blob/master/src/components/toast/toast-theme.scss

これは、トーストのマテリアルデザインガイドラインに、背景は常に同じであると記載されているためです。

https://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-specs

Specsリストのbackground項目に注意してください。

各状況でのテキストの色については何も言われていません。GitHubリンクのそのCSSで宣言された '50'色相回転のbackgroundPaletteに従うことを暗示しています。

warnトースト、またはaccent- tedトーストをデフォルトと区別し、それぞれ適切なクラス（action toastを使用するアクションボタンでmd-warnを呼び出す方法またはmd-accent）。

$mdToast.show({
    template: '<md-toast>\
        {{ toast.content }}\
        <md-button ng-click="toast.resolve()" class="md-warn">\
            Ok\
        </md-button>\
    </md-toast>',
    controller: [function () {
        this.content = 'Toast Content';
    }],
    controllerAs: 'toast'
});

トースト自体、そのdefault形式はアクションレポートを意味し、成功を意味します。さらに注意が必要な場合は、 アクションボタンを設定して強制的に閉じる 「再試行」、「問題の報告」、「詳細」などのアクションを追加します。これらのクリックを使用して、技術情報などを記録できます。例は必要なものとは異なります。

8
Mateus Leon

Rlay3の答えへのもう1つのステップ。

0.7.1のAngular Materialは、未登録のテーマに警告を追加しました。 https://github.com/angular/material/blob/master/CHANGELOG.md#071--2015-01-

テーマが登録されていない場合、トーストが表示されるたびに、コンソールに次のような警告メッセージが表示されます。

attempted to use unregistered theme 'custom-toast'
angular.js:12416 Attempted to use unregistered theme 'custom-toast'. 
Register it with $mdThemingProvider.theme().

警告を取り除くには、angularアプリでテーマ 'custom-toast'を設定する必要があります。

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('custom-toast')
});

次のように使用します：

$mdToast.simple().content("some test").theme("custom-toast");

参照： https://material.angularjs.org/latest/#/Theming/04_multiple_themes

7
Charlie Ng

単純なトーストコールの使用について尋ねました。カスタムトーストショー デモのような を試してクラスをテンプレートに追加してみませんか？

JS

$mdToast.show(
  controller: 'ToastCtrl',
  templateUrl: 'views/shared/toast.html',
  hideDelay: 6000,
  position: $scope.getToastPosition()
)

テンプレート

<md-toast class="flash">
  <span flex>Custom toast!</span>
  <md-button ng-click="closeToast()">
   Close
  </md-button>
</md-toast>

CSS

md-toast.flash {
  background-color: red;
  color: white;
}

コントローラー（コーヒー）

'use strict'

###*
 # @ngdoc function
 # @name angularApp.controller:ToastCtrl
 # @description
 # # ToastCtrl
 # Controller of the angularApp
###
angular.module('angularApp')
  .controller 'ToastCtrl', ($scope) ->
    $scope.closeToast = ()->
      $mdToast.hide()
2
jhblacklock

別のオプションを与えるために、$mdToastは、この方法で簡単にインスタンス化できるトーストプリセットを定義できますが、テキストコンテンツの変更方法を理解するのに苦労していますが、 ？

$mdToast.show(
  $mdToast.error()
);

presetsは https://material.angularjs.org/latest/api/service/ $ mdToastで説明されているように定義されています：

$mdToastProvider.addPreset('error', {
  options: function() {
    return {
      template:
        '<md-toast>' +
          '<div class="md-toast-content">' +
          '</div>' +
        '</md-toast>',
      position: 'top left',
      hideDelay: 2000,
      toastClass: 'toast-error',
      controllerAs: 'toast',
      bindToController: true
    };
  }
});
1
Luca Faggianelli

私は最初にソリューションを支持しましたが、トーストのためだけにテーマプロバイダーでテーマを設定するのは好きではありません。それでは、このソリューションはどうでしょうか。

JS（コーヒー）

   if error
      message = ''

      if error.reason is 'Incorrect password'
        message = 'Email and password combination is incorrect'
      if error.reason is 'User not found'
        message = 'No account found with this email address'

      $mdToast.show(
        templateUrl:  'client/modules/toasts/toastError.html'
        hideDelay:    3000
        controller: ( $scope ) ->
          $scope.message    =  message
          $scope.class      = 'error'
          $scope.buttonLabel = 'close'
          $scope.closeToast = ->
            $mdToast.hide()
      ).then( ( result ) ->
        if result is 'ok'
          console.log('do action')
      )

次にHTML（JADE）

md-toast(ng-class="class")
  span(flex) {{message}}
  md-button.md-action(ng-click="closeToast()") {{buttonLabel}}

localsオプションを使用して変数をコントローラーに渡そうとしましたが、何らかの理由でそれらは挿入されません。（ https://material.angularjs.org/latest/#/api/material .components.toast/service / $ mdToast show関数の下のオプションのリストをチェック）

最後にCSS（STYLUS）

md-toast.success
  background-color    green

md-toast.error
  background-color    red

概要：この場合、テンプレートにあり、コントローラーに事前入力するカスタムプレースホルダーを指定できます。この解決策は私にとっては有効です。

0
Mattijs

Factoryといくつかのcssでそれを行うことができます。

(function () {
  'use strict';

  angular
    .module('app.core')
    .factory('ToastService', ToastService);

  /** @ngInject */
  function ToastService($mdToast) {

    var service = {
      error: error,
      success: success,
      info : info
    };

    return service;

    //////////

    function success(text) {
      $mdToast.show(
        $mdToast.simple()
          .toastClass("toast-success")
          .textContent(text)
      );
    }

    function info(text) {
      $mdToast.show(
        $mdToast.simple()
          .toastClass("toast-info")
          .textContent(text)
      );
    }

    function error(text) {
      $mdToast.show(
        $mdToast.simple()
          .toastClass("toast-error")
          .textContent(text)
      );
    }
  }
}());

そしてCSS。

.toast-error .md-toast-content{
  background-color: rgb(102,187,106) !important;
}

.toast-info .md-toast-content{
  background-color: rgb(41,182,246) !important;
}

.toast-error .md-toast-content{
  background-color: rgb(239,83,80) !important;
}
0
hurricane