SCADE Version 1.0 - Update of this page in progrwess

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