テーマベースのレンダリング

複数のテーマ (ios, md, aurora) を持つ複数のプラットフォーム向けに Framework7 アプリを開発する場合、iOS テーマと MD テーマで異なるアイコンを表示するように、どの要素が一方のテーマで表示されるかを制御する必要があります。

これを制御するための特別なクラスがあります。

• if-ios - iOS テーマでのみ要素が表示されます。
• if-not-ios - iOS 以外のテーマでは、要素が削除されたり、隠されたりします。
• if-md - MD テーマでのみ要素がレンダリングされます。
• if-not-md - MD 以外のテーマでは、要素が削除または非表示になります。
• if-aurora - Aurora テーマの場合にのみ、要素がレンダリングされます。
• if-not-aurora - Aurora 以外のテーマでは、要素が削除または非表示になります。

例えば、MDテーマの場合、ナビバーのバックボタンのテキストを隠す方法を紹介します。

<div class="navbar">
  <div class="navbar-bg"></div>
  <div class="navbar-inner sliding">
    <div class="left">
      <a href="#" class="link back">
        <i class="icon icon-back"></i>
        <!-- バックボタンのテキストは、iOS と Aurora テーマでのみ表示されます。 -->
        <span class="if-not-md">Back</span>
      </a>
    </div>
    ...
  </div>
</div>