| OLD | NEW |
|---|
| (Empty) | |
| 1 <!-- |
| 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --><html><head><link rel="import" href="../polymer/polymer.html"> |
| 10 <link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html"> |
| 11 <link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html"> |
| 12 |
| 13 <!-- |
| 14 Material design: [Snackbars & toasts](https://www.google.com/design/spec/compone
nts/snackbars-toasts.html) |
| 15 |
| 16 `paper-toast` provides a subtle notification toast. Only one `paper-toast` will |
| 17 be visible on screen. |
| 18 |
| 19 Use `opened` to show the toast: |
| 20 |
| 21 Example: |
| 22 |
| 23 <paper-toast text="Hello world!" opened></paper-toast> |
| 24 |
| 25 Also `open()` or `show()` can be used to show the toast: |
| 26 |
| 27 Example: |
| 28 |
| 29 <paper-button on-click="openToast">Open Toast</paper-button> |
| 30 <paper-toast id="toast" text="Hello world!"></paper-toast> |
| 31 |
| 32 ... |
| 33 |
| 34 openToast: function() { |
| 35 this.$.toast.open(); |
| 36 } |
| 37 |
| 38 Set `duration` to 0, a negative number or Infinity to persist the toast on scree
n: |
| 39 |
| 40 Example: |
| 41 |
| 42 <paper-toast text="Terms and conditions" opened duration="0"> |
| 43 <a href="#">Show more</a> |
| 44 </paper-toast> |
| 45 |
| 46 |
| 47 ### Styling |
| 48 The following custom properties and mixins are available for styling: |
| 49 |
| 50 Custom property | Description | Default |
| 51 ----------------|-------------|---------- |
| 52 `--paper-toast-background-color` | The paper-toast background-color | `#323232` |
| 53 `--paper-toast-color` | The paper-toast color | `#f1f1f1` |
| 54 |
| 55 This element applies the mixin `--paper-font-common-base` but does not import `p
aper-styles/typography.html`. |
| 56 In order to apply the `Roboto` font to this element, make sure you've imported `
paper-styles/typography.html`. |
| 57 |
| 58 @group Paper Elements |
| 59 @element paper-toast |
| 60 @demo demo/index.html |
| 61 @hero hero.svg |
| 62 --> |
| 63 |
| 64 </head><body><dom-module id="paper-toast"> |
| 65 <template> |
| 66 <style> |
| 67 :host { |
| 68 display: block; |
| 69 position: fixed; |
| 70 background-color: var(--paper-toast-background-color, #323232); |
| 71 color: var(--paper-toast-color, #f1f1f1); |
| 72 min-height: 48px; |
| 73 min-width: 288px; |
| 74 padding: 16px 24px; |
| 75 box-sizing: border-box; |
| 76 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); |
| 77 border-radius: 2px; |
| 78 margin: 12px; |
| 79 font-size: 14px; |
| 80 cursor: default; |
| 81 -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; |
| 82 transition: transform 0.3s, opacity 0.3s; |
| 83 opacity: 0; |
| 84 -webkit-transform: translateY(100px); |
| 85 transform: translateY(100px); |
| 86 @apply --paper-font-common-base; |
| 87 } |
| 88 |
| 89 :host(.capsule) { |
| 90 border-radius: 24px; |
| 91 } |
| 92 |
| 93 :host(.fit-bottom) { |
| 94 width: 100%; |
| 95 min-width: 0; |
| 96 border-radius: 0; |
| 97 margin: 0; |
| 98 } |
| 99 |
| 100 :host(.paper-toast-open) { |
| 101 opacity: 1; |
| 102 -webkit-transform: translateY(0px); |
| 103 transform: translateY(0px); |
| 104 } |
| 105 </style> |
| 106 |
| 107 <span id="label">{{text}}</span> |
| 108 <slot></slot> |
| 109 </template> |
| 110 |
| 111 </dom-module> |
| 112 <script src="paper-toast-extracted.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2898303004:
[MD Bookmarks] Add toasts. (Closed)
