-
Notifications
You must be signed in to change notification settings - Fork 10
Sidenav
From servoy-extra-components v1.0.4
Sidenav is a 4-levels depth navigation component. It can be used as side menu having selectable and collapsible menu items. The user can select or expand one menu item per time; a selected menu item is automatically expanded. The developer can control the sidenav component programmatically by editing the element's runtime properties and using the element's API. The sidenav can slide in/out to the left side or to the right side. The component is fully stylable with CSS3.
Use the api setRootMenuItems to populate the sidenav with menuItems. You can nest Menu Items up to 4 levels depth.
var menu = [{ id: 1, text: "Sample Item #1", styleClass : "sn-large", iconStyleClass: "glyphicon glyphicon-search", data: { description: "This is sample information that can be added to a menuItem" }, menuItems: [{ id: 5, text: "Sub Item #1" }, { id: 6, text: "Sub Item #2"}] }, { id: 2, text: "Sample Item #2" },{ isDivider: true },{ id: 3, text: "Sample Item #3", enabled: false }]; elements.sideNavigation.setRootMenuItems(menu);
The method setRootMenuItems requires an Array of Menu Item object.
The menu item is a JSON object representing an item in the sidenav. A menu item may nest other menu items. A menu item may be also used as divider, which is nothing else then a line separating the menu item above and below, in this case all other properties of the menu item are ignored.
Property | Type | Required | Description |
---|---|---|---|
String, Number | id | yes | uniquely identifies the menuItem in the menu object. |
String | text | no | The menu text, optional, default is empty. |
String | styleClass | no | add style classes to the menuItem, optional,. Separate multiple value with a SPACE char. example 'nav-large nav-primary'. |
String | iconStyleClass | no | use style classes to display icons as Font Icons, optional. example 'glyphicon glyphicon-search'. |
Boolean | enabled | no | menuItem cannot be selected or expanded if disabled, optional. Default true. |
Object | data | no | data object can be used to add custom properties to the menuItem, optional. For example you may set the formName to be shown when the menuItem is selected { formName: "aFormName", description: "This menu item will open the given form" }. |
Array | menuItems | no | an array of nested menuItems, optional. |
Boolean | isDivider | no | if true render a divider into the menu instead of a menuItem, optional. All other properties are ignored. Default false. |