| Index: third_party/polymer/components-chromium/paper-toast/paper-toast.html
|
| diff --git a/third_party/polymer/components-chromium/paper-toast/paper-toast.html b/third_party/polymer/components-chromium/paper-toast/paper-toast.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..c1378b2fab6148205839d9840c7aa1cfcf55e911
|
| --- /dev/null
|
| +++ b/third_party/polymer/components-chromium/paper-toast/paper-toast.html
|
| @@ -0,0 +1,90 @@
|
| +<!--
|
| +Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
| +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| +Code distributed by Google as part of the polymer project is also
|
| +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| +-->
|
| +
|
| +<!--
|
| +`paper-toast` provides lightweight feedback about an operation in a small popup
|
| +at the base of the screen on mobile and at the lower left on desktop. Toasts are
|
| +above all other elements on screen, including the FAB.
|
| +
|
| +Toasts automatically disappear after a timeout or after user interaction
|
| +elsewhere on the screen, whichever comes first. Toasts can be swiped off
|
| +screen. There can be only one on the screen at a time.
|
| +
|
| +Example:
|
| +
|
| + <paper-toast text="Your draft has been discarded." onclick="discardDraft(el)"></paper-toast>
|
| +
|
| + <script>
|
| + function discardDraft(el) {
|
| + el.show();
|
| + }
|
| + </script>
|
| +
|
| +An action button can be presented in the toast.
|
| +
|
| +Example (using Polymer's data-binding features):
|
| +
|
| + <paper-toast id="toast2" text="Connection timed out. Showing limited messages.">
|
| + <div style="color: blue;" on-tap="{{retry}}">Retry</div>
|
| + </paper-toast>
|
| +
|
| +Positioning toast:
|
| +
|
| +A standard toast appears near the lower left of the screen. You can change the
|
| +position by overriding bottom and left positions.
|
| +
|
| + paper-toast {
|
| + bottom: 40px;
|
| + left: 10px;
|
| + }
|
| +
|
| +To make it fit at the bottom of the screen:
|
| +
|
| + paper-toast {
|
| + bottom: 0;
|
| + left: 0;
|
| + width: 100%;
|
| + }
|
| +
|
| +When the screen size is smaller than the `responsiveWidth` (default to 480px),
|
| +the toast will automatically fits at the bottom of the screen.
|
| +
|
| +@group Paper Elements
|
| +@element paper-toast
|
| +@homepage github.io
|
| +-->
|
| +
|
| +<link rel="import" href="../core-overlay/core-overlay.html">
|
| +<link rel="import" href="../core-transition/core-transition-css.html">
|
| +<link rel="import" href="../core-media-query/core-media-query.html">
|
| +
|
| +<polymer-element name="paper-toast" attributes="text duration opened responsiveWidth swipeDisabled" role="status" assetpath="">
|
| +
|
| +<template>
|
| +
|
| + <link rel="stylesheet" href="paper-toast.css">
|
| +
|
| + <core-overlay opened="{{opened}}" target="{{}}" sizingtarget="{{$.container}}" transition="core-transition-bottom"></core-overlay>
|
| +
|
| + <div class="toast-container" horizontal="" layout="">
|
| +
|
| + <div class="toast-text" flex="">{{text}}</div>
|
| +
|
| + <div class="toast-text toast-action" on-tap="{{dismiss}}">
|
| + <content></content>
|
| + </div>
|
| +
|
| + </div>
|
| +
|
| + <core-media-query query="max-width: {{responsiveWidth}}" querymatches="{{narrowMode}}"></core-media-query>
|
| +
|
| +</template>
|
| +
|
| +</polymer-element>
|
| +<script src="paper-toast-extracted.js"></script>
|
|
|