The Appearance section holds settings which control the format and look and feel of your navigation panel, which you can customize to apply your own branding, change the navigation style, and provide some themed consistency across your apps. You can modify the style of individual sheet items and apply overall settings such as background color, height and border settings on the navigation bars.
Note: This settings in this article relate to Version 3.0.0 of Vizlib Sheet Menu and above. If you are using any version up to and including 2.10.3 please see our article here.
TABLE OF CONTENTS
- Alternate States
- Global Styles
- Top Menu
- Top Menu Items
- Top Menu Buttons
- Side Menu
- Custom Selection Colors
- Mobile View
In the General tab (Figure 1) you can choose to show or hide a title, add title details using the expression editors and show or hide sheet menu details.
Figure 1: General
Alternate States has settings related to adding the object to master visualizations (Figure 2). You can find more about alternate states here.
Figure 2: Alternate States
Global Styles contains settings which are applied to the buttons and navigation menu items inside the top menu bar. Note: Breadcrumbs, titles and other custom elements are styled separately.
There are several sections contained within Global Styles (Figure 3).
- State Styles allows you to customize the Background Color and Font Color for 3 different states -Default (the item default state), Active (an item is selected) and Hover (the cursor hovers over the item).
- Border Styles helps you apply and manage the global settings for Border Color, Border Style, Border Width and Border Radius.
Navigation Styles controls the presentation mode for top menu navigation menu items with Navigation Menu View.
- Other Styles sets the spacing between buttons and navigation menu items using Tab/Button Spacing.
- Styling Mode controls advanced customization settings for the top menu. When it's enabled menus for Top Menu Items and Top Menu Buttons appear in the property panel.
Figure 3: Global Styles
Top Menu contains settings which control the look and feel of the top menu (Figure 4). You can use the slider to set the Height of the top bar and select the background color with the Background color palette. You can also enable the Border settings to define a border with the Border Selector, and choose a Border Style, Border Color and Border Width.
Figure 4: Top Menu
Top Menu Items
In Top Menu Items (Figure 5) you can manage the color and font settings used for items in the Top Menu. In Menu Items you can choose the Font Family, Font Size, Font Style, Font Color and the Background Color. Active Item sets the Font Style, Font Color and Background Color used when an item is selected, and Hover Item lets you choose a distinctive Font Style, Font Color and Background Color for an item when the cursor hovers on it.
Figure 5: Top Menu Items
Top Menu Buttons
In Top Menu Buttons (Figure 6) you can manage the color and font settings used for Top Menu buttons. Button Size lets you pick from 3 button size settings, and Font lets you choose a default Font Size, Font Color and Hover Font Color. In Background you can choose a Background Color and Hover Background Color, while enabling Buttons Border allows you to set the Border Style, Border Color, Border Width and Border Radius for a button.
Figure 6: Top Menu Buttons
The Side Menu settings (Figure 7) control the look and feel of the Side Menu. By default, you display the side menu by clicking a button in the top right corner of the sheet. You can customize the Width, Font Size, and Position settings for the side menu, and also choose the Display option (Fixed means the side menu is always visible) and between an Auto or Manual Close Setting. The Background section lets you select a Background Color from the palette.
The Sheet, Text, and Group settings all have options to customize the Font Style, Font Color and Background Color, while Line has controls for the Background Color, Line Color, Line Thickness and Line Style, and you can also set the Background Color for a Master Item.
Figure 7: Side Menu
Custom Selection Colors
The Custom Selection Colors settings (Figure 8) are currently an experimental function. When the setting is enabled, you can choose a Selected Color, Alternative Color, Available Color and Excluded Color to define a selection status.
Figure 8: Custom Selection Colors
Mobile View (Figure 9) allows you to select particular settings for viewing the sheet menu on mobile devices. You can choose which elements (Top Menu or Side Menu) are displayed in Elements Displayed in Menu on mobile, customize Extension object sizing and display Custom mobile menu buttons, and set the Height and Width of non-native objects.
Figure 9: Mobile View