Native Animations

Enhance content changes with native animations. No CSS involved, purely hardware accelerated.



supersonic.ui.animation("curlDown").perform();
        

Tabs

Native tabs can be set up declaratively in the app's configuration or by using the Supersonic JavaScript APIs during runtime.

Each of the tabs is pointed to an individual HTML document that continues running and executing JavaScript even when it is not active. Likewise, transitions between the native tabs are instant.



// Configuring native tabs during runtime'
supersonic.ui.tabs.replace([
  {
    title: "Web",
    location: "http://www.google.com"
  },
  {
    title: "Settings",
    location: "settings#index",
    badge: "1"
  }
]);

// Showing native tabs
supersonic.ui.tabs.show();

// Hiding native tabs
supersonic.ui.tabs.hide();
        

Side menu

The native side menu (or "drawer") can be set for either side of the screen, or both. Content for the native side menus comes from a separate HTML file, allowing for full customization.

Drawers can be opened and closed with touch gestures, or through the Supersonic JavaScript API.



supersonic.ui.drawers.init("drawers#left");

supersonic.ui.drawers.open();