venant d'un fond de météore, j'utiliserais JQuery pour afficher / masquer un DIV, avec la case à cocher en papier, comme:
HTML: strong> p> <link rel="import" href="/bower_components/paper-checkbox/paper-checkbox.html">
<dom-module id="my-app">
<template>
<paper-checkbox name="remoteLocation" id="remote-chk" on-click="showMe" checked>Remote Location</paper-checkbox>
<div id="autoUpdate" class="autoUpdate" style="display: none;">content</div>
</template>
<script>
Polymer({
is: "my-app",
showMe: function () {
if (e.target.checked) {
$('#autoUpdate').fadeOut('slow');
} else {
$('#autoUpdate').fadeIn('slow');
}
}
});
</script>
</dom-module>
3 Réponses :
Je pense que les transitions de disparition sont encore expérimentales dans les laboratoires de polymère (je pourrais être mal durcissant) mais à un contenu de masquage simple / spectacle une bonne approche peut être:
dans vous index.html p> Vous avez donné ce composant le nom My-APP dans votre exemple P> Le dans votre My-APP.html P> class$="{{your-class}}"
Vous pouvez également supprimer l'attribut Comme ceci: p> caché code> de manière déclarative et tout simplement faire tout importoriement.
<div id="autoUpdate" class="autoUpdate">content</div>
...
if (e.target.checked) {
this.$.autoUpdate.hidden = true;
} else {
this.$.autoUpdate.hidden = false;
}
Eh bien, cette réponse est assez tardive, moins je pense que la cachette et la montrage des éléments en polymère devrait être faite comme ceci.
Un modèle spécifié comme un dom-si. Les éléments à l'intérieur, il sera affiché si la propriété SendinProgress est FALSE. P>
<template is="dom-if" if="{{!sendInProgress}}"> <paper-input id="replyInputField"></paper-input> </template> <paper-button class="reply-button" on-click="_handleReply">Send</paper-button> Polymer({ is: 'hide-elements', properties: { sendInProgress: {value: false, notify: true} }, _handleReply: function() { if (this.sendInProgress){ //Will display element #replyInputField this.set('sendInProgress', false); } else { //Will hide element #replyInputField this.set('sendInProgress', true); } } });