私はAccelerated Mobile Page(AMP)テンプレートを作成していて、タブでCSSクラスを切り替える簡単な方法があるかどうか疑問に思っていました。
私は次のようなことを知っています:
<h2
class="headline"
on="tap:list.toggleVisibility"
>
<ul id="list"></ul>
しかし、これはインラインスタイルを記述します。カスタムCSSクラスを切り替えたいのですが、AMPページに例が見つかりませんでした。
AMP.setState
のようなバインディングを使用した<h2 [class]="myclasses">
のように見えましたが、状態の操作は、それらが提供するツールではかなり困難です...
これは 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>
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>