web-dev-qa-db-fra.com

AMP: moyen facile de basculer une classe CSS?

Je construis un modèle de page mobile accélérée (AMP) et je me demandais s'il y avait un moyen facile de basculer une classe CSS sur l'onglet.

Je connais des trucs comme:

<h2 
  class="headline"
  on="tap:list.toggleVisibility"
>
<ul id="list"></ul>

Mais cela écrit des styles en ligne - je préfère basculer une classe CSS personnalisée mais je n'ai pas pu trouver d'exemple sur la page AMP.

AMP.setState avec des liaisons comme <h2 [class]="myclasses"> ressemblait à la voie à suivre, mais manipuler l'état est assez difficile avec les outils qu'ils vous donnent ...

cssamp-html
13
pkyeck

Cela peut être fait via amp-bind . Vous pouvez utiliser une variable d'état implicite, par exemple visible, pour suivre l'état actuel. Voici un exemple qui bascule deux classes show et hide:

  <button [text]="visible ? 'Show Less' : 'Show More'" 
           on="tap:AMP.setState({visible: !visible})">
    Show More
  </button>
  <p [class]="visible ? 'show' : 'hide'" class="hide">
    Some more content.
  </p>

échantillon complet sur JSBIN

23
Sebastian Benz

Il existe également une action spécifique à l'élément avec AMP Bind toggleClass(class=STRING, force=BOOLEAN)

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<h2 
class="headline"
on="tap:list.toggleClass(class='my-custom-class')">
<ul id="list"></ul>
1
Bill