Creating navigation buttons

This section describes how to create navigation buttons in a widget to navigate between sheets. A button to activate edit is included.

Creating the button group container

Create a button group container for the buttons.

<div class="lui-buttongroup">
</div>

Creating the buttons

Populate the button group with the buttons. In this example we are creating buttons to:

• Navigate to the next sheet.
• Navigate to the previous sheet.
• Activate edit.

<div class="lui-buttongroup">
	<lui-button>Next sheet</lui-button>
	<lui-button>Previous sheet</lui-button>
	<lui-button>Edit mode</lui-button>
</div>

Adding actions using the Navigation API

Add the actions to execute when the buttons are clicked. Use methods from the Navigation API for the actions.

<div class="lui-buttongroup">
	<lui-button ng-click="navigation.nextSheet()">Next sheet</lui-button>
	<lui-button ng-click="navigation.prevSheet()">Previous sheet</lui-button>
	<lui-button ng-click="navigation.setMode('edit')">Edit mode</lui-button>
</div>

Result

This is what the preview looks like when an app has been selected.