web-dev-qa-db-ja.com

AMP：CSSクラスを切り替える簡単な方法？

私はAccelerated Mobile Page（AMP）テンプレートを作成していて、タブでCSSクラスを切り替える簡単な方法があるかどうか疑問に思っていました。

私は次のようなことを知っています：

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

しかし、これはインラインスタイルを記述します。カスタムCSSクラスを切り替えたいのですが、AMPページに例が見つかりませんでした。

AMP.setStateのようなバインディングを使用した<h2 [class]="myclasses">のように見えましたが、状態の操作は、それらが提供するツールではかなり困難です...

cssamp-html
13
pkyeck

これは amp-bind 。暗黙の状態変数を使用できます。 visible、現在の状態を追跡します。以下は、2つのクラスshowと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>

JSBINの完全なサンプル

23
Sebastian Benz

AMPバインド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