I love me transitions and animations, so I will take one more day to explore Paper Elements in Polymer.dart. Paper are the Polymer spin on Google's Material Design. Although I still worry that Material tends to look too Googly, I cannot argue with the concepts and emphasis that Material has for design. So I keep playing and learning.
Last night, I created a fairly simple paper-dialog in Polymer.dart:
What is most remarkable to me is that it worked so easily. A while back, I could barely get Core Elements to work in Polymer.dart. Now both Core and Paper work with ease. The team behind Polymer.dart has been active (thanks folks!).
One of the core tenants of Material Design is “Motion with meaning.” There is no motion in my paper-dialog and I can't help but notice that there is a paper-dialog-transition element. As if that were not enough to tempt me to investigate, the documentation on the JavaScript version is currently empty. So really, I can't help but investigate.
My first thought is to use the
<paper-dialog-transition> as a drop-in replacement for last night's <paper-dialog>: <paper-dialog-transition heading="Title for dialog" opened="true">
<p>Lorem ipsum ....</p>
<p>Id qui scripta ...</p>
<paper-button label="More Info..." dismissive></paper-button>
<paper-button label="Decline" affirmative></paper-button>
<paper-button label="Accept" affirmative autofocus></paper-button>
</paper-dialog-transition>I also add the appropriate <link> import of paper-dialog-transition to the document <head>: <head>
<!-- Load platform polyfills -->
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<!-- Load component(s) -->
<link rel="import"
href="packages/paper_elements/paper_dialog_transition.html">
<link rel="import"
href="packages/paper_elements/paper_dialog.html">
<link rel="import"
href="packages/paper_elements/paper_button.html">
<!-- Start Polymer -->
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
</head>paper-dialog-transition elements, I find not one, but three:
The first two are added by the Polymer transformer in Dart Pub. The last is the real one that I added. And it does not behave like a
<polymer-dialog>:> d = document.querySelectorAll('paper-dialog-transition')[2]
<paper-dialog-transition heading="Title for dialog" opened="true" hidden>…</paper-dialog-transition>
> d.toggle()
TypeError: undefined is not a functionIt seems like <paper-dialog-transition> is adding those first two copies of itself for a reason. I am ultimately unable to figure out why by reading the code. Or rather, I stumble across some demo code that seems to do use the element.The key seems to be using the IDs of the extra
<paper-dialog-transition> elements in transition attributes of <paper-dialog> elements: <paper-dialog heading="Bottom Dialog" transition="paper-dialog-transition-bottom">
<p>Lorem ipsum ....</p>
<p>Id qui scripta ...</p>
<paper-button label="More Info..." dismissive></paper-button>
<paper-button label="Decline" affirmative></paper-button>
<paper-button label="Accept" affirmative autofocus></paper-button>
</paper-dialog><paper-dialog> with a transition of paper-dialog-transition-center.The final piece of the puzzle comes directly from the demo page. I add two buttons that invoked the
toggle() method on the appropriate dialog: <paper-button label="Bottom" onclick="toggleDialog('paper-dialog-transition-bottom')"></paper-button>
<paper-button label="Center" onclick="toggleDialog('paper-dialog-transition-center')"></paper-button>
<script>
function toggleDialog(transition) {
var dialog = document.
querySelector('paper-dialog[transition=' + transition + ']');
dialog.toggle();
}
</script>The
<paper-dialog-transition> transitions work nicely with the <paper-dialog> elements. Toggling the dialog, clicking elsewhere, clicking decline, even hitting escape all result in the transition reversing itself. All I needed to make this work was the addition of transition attributes and the import of paper_dialog_transition.html (removing this import disables the transitions).I have to admit that the usage of
<paper-dialog-transition> was not obvious to me. By extension, I have the feeling that I am a little weak on core-transition-css (which paper-dialog-transition extends). This may be worth a little more exploration. Tomorrow. Day #159
No comments:
Post a Comment