diff --git a/src/components/toast/demoBasicUsage/script.js b/src/components/toast/demoBasicUsage/script.js index 7bae5887577..0f39479932c 100644 --- a/src/components/toast/demoBasicUsage/script.js +++ b/src/components/toast/demoBasicUsage/script.js @@ -44,14 +44,15 @@ angular.module('toastDemo1', ['ngMaterial']) $scope.showActionToast = function() { var pinTo = $scope.getToastPosition(); var toast = $mdToast.simple() - .textContent('Action Toast!') - .action('OK') - .highlightAction(false) - .position(pinTo); + .textContent('Marked as read') + .action('UNDO') + .highlightAction(true) + .highlightClass('md-accent')// Accent is used by default, this just demonstrates the usage. + .position(pinTo); $mdToast.show(toast).then(function(response) { if ( response == 'ok' ) { - alert('You clicked \'OK\'.'); + alert('You clicked the \'UNDO\' action.'); } }); }; diff --git a/src/components/toast/toast-theme.scss b/src/components/toast/toast-theme.scss index 486c70f334d..0435f5c6831 100644 --- a/src/components/toast/toast-theme.scss +++ b/src/components/toast/toast-theme.scss @@ -1,15 +1,20 @@ md-toast.md-THEME_NAME-theme { + .md-toast-content { background-color: #323232; color: '{{background-50}}'; .md-button { color: '{{background-50}}'; + &.md-highlight { - color: '{{primary-A200}}'; - &.md-accent { - color: '{{accent-A200}}'; + // By default the toast should use the accent color as the primary highlight color + color: '{{accent-A200}}'; + + &.md-primary { + color: '{{primary-A200}}'; } + &.md-warn { color: '{{warn-A200}}'; } diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js index d77be068783..f4861ee104c 100644 --- a/src/components/toast/toast.js +++ b/src/components/toast/toast.js @@ -105,22 +105,57 @@ function MdToastDirective($mdToast) { * @returns {obj} a `$mdToastPreset` with the following chainable configuration methods. * * _**Note:** These configuration methods are provided in addition to the methods provided by - * the `build()` and `show()` methods below._ + * the `build()` and `show()` methods below._ + * + *
Method | + *Description | + *
---|---|
`.textContent(string)` | + *Sets the toast content to the specified string | + *
`.action(string)` | + *
+ * Adds an action button. + * If clicked, the promise (returned from `show()`) + * will resolve with the value `'ok'`; otherwise, it is resolved with `true` after a `hideDelay` + * timeout + * |
+ *
`.highlightAction(boolean)` | + *
+ * Whether or not the action button will have an additional highlight class. + * By default the `accent` color will be applied to the action button. + * |
+ *
`.highlightClass(string)` | + *
+ * If set, the given class will be applied to the highlighted action button. + * This allows you to specify the highlight color easily. Highlight classes are `md-primary`, `md-warn` + * and `md-accent` + * |
+ *
`.capsule(boolean)` | + *Whether or not to add the `md-capsule` class to the toast to provide rounded corners | + *
`.theme(string)` | + *+ * Sets the theme on the toast to the requested theme. Default is `$mdThemingProvider`'s default. + * | + *