9
votes

Polymère - Afficher / Masquer Div par Cochez la case Paper

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>

javascript jquery html polymer polymer-1.0

0 commentaires

3 Réponses :

13
votes

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> xxx PRE>

Vous avez donné ce composant le nom My-APP dans votre exemple P>

Le dans votre My-APP.html P>

class$="{{your-class}}"

0 commentaires

2
votes

Vous pouvez également supprimer l'attribut caché code> de manière déclarative et tout simplement faire tout importoriement.

Comme ceci: p>

<div id="autoUpdate" class="autoUpdate">content</div>
...
if (e.target.checked) {
  this.$.autoUpdate.hidden = true;
} else {
  this.$.autoUpdate.hidden = false;
}

0 commentaires

4
votes

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);
    }
  }


});

0 commentaires