54

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

thisと同様の質問。

4

9 に答える 9

85

テーマを指定することにより、より簡単な方法があります。

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

そしてあなたのCSSで：

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

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

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

別の更新: 2015 年 12 月 2 日に重大な変更が行われました (v1.0.0+)。次を指定する必要があります。

md-toast.md-success-toast-theme {
    .md-toast-content {
        background-color: green;
        ...
    }
}
于 2015-06-23T03:57:04.427 に答える
8

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

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

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

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

warnトーストまたはaccent-ted をデフォルトと区別する方法。 を呼び出して、それぞれに適切なクラス (または)action toastを使用するアクション ボタンを付けます。md-warnmd-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形式がアクション レポートを意味し、成功を暗示しています。さらに注意が必要な場合は、「再試行」、「問題の報告」、「詳細」などのアクションを追加するアクション ボタンを設定して強制的に閉じます。これを使用して、このクリックをキャッチし、技術情報を記録することができます。 .. 例は必要なものとは異なります。

于 2015-09-05T05:43:04.283 に答える
2

シンプルなトースト コールの使用について質問されました。デモのようなカスタム トースト ショーを試して、テンプレートにクラスを追加していただけませんか?

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()
于 2015-02-26T21:19:56.560 に答える
0

私は最初はこのソリューションを気に入っていましたが、乾杯のためだけにテーマ プロバイダーでテーマを設定するのは好きではありません。では、このソリューションはどうでしょうか。

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（ジェイド）

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/show関数の下のオプションのリスト)

最後に CSS (STYLUS)

md-toast.success
  background-color    green

md-toast.error
  background-color    red

要約: この場合、コントローラーに事前に入力したカスタム プレースホルダーを指定できるテンプレートがあります。このソリューションは私にとってはうまくいきます。

于 2015-08-27T05:38:26.703 に答える