web-dev-qa-db-fra.com

Polymer 1.0 - Liaison des classes CSS

J'essaie d'inclure des classes basées sur les paramètres d'un json, donc si j'ai la couleur de la propriété, le $ = fait l'affaire pour le passer comme attribut de classe (basé sur le polymer - documentation )

<div class$="{{color}}"></div>

Le problème est lorsque j'essaie d'ajouter cette classe le long d'un ensemble existant de classes, par exemple:

<div class$="avatar {{color}}"></div>

Dans ce cas, $ = ne fait pas l'affaire. Est-il possible d'accomplir cela ou chaque fois que j'ajoute une classe conditionnellement, je dois inclure le reste des styles via les sélecteurs css à la place des classes? Je sais que dans cet exemple, la couleur pourrait simplement aller dans l'attribut style, c'est purement un exemple pour illustrer le problème.

Veuillez noter qu'il s'agit d'un problème uniquement dans Polymer 1.0.

polymerpolymer-1.0
21
fray88

À partir de Polymer 1.0, l'interpolation de chaînes n'est pas encore prise en charge (elle sera bientôt mentionnée dans la feuille de route). Cependant, vous pouvez également le faire avec des liaisons calculées. Exemple

<dom-module>
  <template>
    <div class$="{{classColor(color)}}"></div>
  </template>
</dom-module>
<script>
  Polymer({
    ...
    classColor: function(color) {
      return 'avatar '+color;
    }
  });
<script>

Modifier:

À partir de Polymer 1.2, vous pouvez utiliser la liaison composée. Donc

<div class$="avatar {{color}}"></div>

fonctionne maintenant.

34
Neil John Ramal

Mise à jour

Depuis Polymer 1.2. , vous pouvez maintenant utiliser Liaisons composées pour

combiner des littéraux de chaîne et des liaisons dans une liaison de propriété unique ou une liaison de contenu de texte

ainsi:

<img src$="https://www.example.com/profiles/{{userId}}.jpg">

<span>Name: {{lastname}}, {{firstname}}</span>

et votre exemple

<div class$="avatar {{color}}"></div>

donc ce n'est plus un problème.

La réponse ci-dessous ne concerne désormais que les versions de polymer antérieures à 1.2

Si vous faites cela souvent, jusqu'à ce que cette fonctionnalité soit disponible, ce qui est, espérons-le bientôt , vous pouvez simplement définir la fonction à un endroit comme une propriété de Polymer.Base qui a tout de ses propriétés héritées par tous les éléments polymer

//TODO remove this later then polymer has better template and binding features.
// make sure to find all instances of {{join( in polymer templates to fix them
Polymer.Base.join = function() { return [].join.call(arguments, '');}

puis appelez-le comme ceci:

<div class$="{{join('avatar', ' ', color)}}"></div>

puis quand il est introduit par polymer correctement, supprimez simplement cette ligne et remplacez

{{join('avatar', color)}}

avec

avatar {{color}}

J'utilise beaucoup cela en ce moment, non seulement pour combiner des classes en une seule, mais aussi pour des choses comme les noms de chemin, la jonction avec un '/', et juste le contenu général du texte, donc à la place j'utilise le premier argument comme colle.

Polymer.Base.join = function() {
    var glue = arguments[0];
    var strings = [].slice.call(arguments, 1);
    return [].join.call(strings, glue);
}

ou si vous pouvez utiliser les fonctionnalités es6 comme arguments rest

Polymer.base.join = (glue, ...strings) => strings.join(glue);

pour faire des trucs comme

<div class$="{{join(' ', 'avatar', color)}}"></div>
<img src="{{join('/', path, to, image.jpg)}}">
<span>{{join(' ', 'hi', name)}}</span>

juste de base

Polymer.Base.join = (...args) => args.join('');
<div class$="{{join('avatar', ' ', color)}}"></div>
12
Ryan White
        <template if="[[icon_img_src]]" is="dom-if">
            <img class$="{{echo_class(icon_class)}}" src="[[icon_img_src]]">
        </template>

        <span class$="{{echo_class(icon_class, 'center-center horizontal layout letter')}}" hidden="[[icon_img_src]]">[[icon_text]]</span>

        <iron-icon icon="check"></iron-icon>

    </div>
</template>

<script>
Polymer({

    echo_class: function(class_A, class_Z) {
        return class_A + (class_Z ? " " + class_Z : "");
    },
0
linto cheeran