Theme Based Rendering

When we develop Framework7 app for multiple platforms with mutliple themes (ios, md, aurora) we need to control which elements will appear for one or another theme, like showing different icon for iOS and MD themes.

There are special classes that allow to control this:

• if-ios - element will be rendered only for iOS theme
• if-not-ios - element will be removed/hidden for theme other than iOS
• if-md - element will be rendered only for MD theme
• if-not-md - element will be removed/hidden for theme other than MD
• if-aurora - element will be rendered only for Aurora theme
• if-not-aurora - element will be removed/hidden for theme other than Aurora

This is, for example how we hide Navbar’s back button text for MD theme:

<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>
        <!-- back button text will be visible only in iOS and Aurora themes -->
        <span class="if-not-md">Back</span>
      </a>
    </div>
    ...
  </div>
</div>

← Touch Ripple

Request / Ajax →