SCADE

Sidebar control

The sidebar container control is available in versions BETA4 and higher

Introduction

The sidebar container allows the addition of a sidebar to your mobile app. It features are clean and simple

  • expanding using the native scrolling effects (for instance spring animation on iOS)
  • collapsing using the native scrolling effects
  • containing any kind of content or other controls
  • API for expanding and collapsing

📘

Sourcecode

Please see the UgSidebarDemo project for the source code created in this chapter. See Installing examples for information on how to download the examples.

Using the sidebar

The sidebar control has two different areas. The sidebar panel and the main area that the sidebar overlaps. A control button is used to toggle between the different areas and easily design them:

Follow these steps

  1. Drop sidebar on main page
  2. Expand the sidebar pressing the sandwich button
  3. Add any contents
  4. Collapse the sidebar
  5. Work on your main content

Referencing content on the sidebar panel

Please make sure to use the panel property to reference any control with the sidebar panel. Here the code for linking up the first menu button

import ScadeKit

class MainPageAdapter: SCDLatticePageAdapter {

    // page adapter initialization
    override func load(_ path: String) {        
        super.load(path)
        
        let sidebar = self.page!.getWidgetByName("sidebar1") as! SCDWidgetsSidebar
        
        // to access sidebar panel controls, use the panel child
        let menu1 = sidebar.panel.getWidgetByName("button1") as! SCDWidgetsClickable
        menu1.onClick.append(SCDWidgetsEventHandler{_ in print("Menu1 clicked")})
        
    }
}

Programmatically collapsing the sidebar

Use the isHidden attribute of the sidebar to collapse and expand the sidebar

// Expand by setting to true, collapse by setting to false
sidebar.isHidden = true

Setting width of sidebar

Use the bounds settings in the Layout section to set the width of the sidebar

Updated 3 years ago

Sidebar control


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.