Container Grid Properties
Use the Vizlib Container Grid properties panel to configure container objects, layout settings, appearance, templates, interactivity, and alternate states.
Container Objects
Vizlib Container Grid supports an unlimited number of master items. These master items are added using the Container Objects settings.
Container Objects
The Container Objects header displays how many objects have currently been added to the sheet and lists all the container objects which have been currently added. You can click Add Container Object to add a new object, and select the chart displayed when the sheet opens for the first time by selecting an option from the Active Chart in Container drop-down.
Container Objects
Container Object Master Items
To add a new item, you choose between a single and a grid View Type, then select a Master Item from the drop-down. Each item represents a Master Item of your choice. The Grid View Type allows you to display several master items together with a grid layout, choosing from a list of pre-set definitions. You can also enter a Title, add a Label, and add a custom Icon, setting the icon Size and Icon position.
Container Object
You can choose to display the chart when a condition is met with Conditional Show, and also set an Active Condition to display the master item. The container object can also be used with Vizlib Actions, by clicking Add Action, then making a selection from Pick Action and entering the data you need.
Conditional Show, Actions
Container Settings
Container Settings contain the basic configuration for the layout of the container object.
Container Mode
Vizlib Container Grid supports five types of Container Mode: Tabs, Accordion, Dropdown, Carousel and Hidden. Once you've selected a container mode you'll be able to see the layout and visibility settings. You'll be able to alter the look and feel in the Appearance section of the property panel. Each type of container has different Appearance settings, so we've included those in separate articles for Accordion, Carousel, Dropdown and Tabs.
Container Mode
Tabs
Tabs settings allow you to choose Responsive Mode, where you can select then size where the re-sized object converts to accordion. You can also select the Position for the layout, customize the Width of the object, and add a condition for displaying the object with Conditional Container Show.
Tabs
Accordion
Accordion layout settings allow you to choose the Accordion Position, the Space-between size, and add a condition for displaying the object with Conditional Container Show.
Accordion
Dropdown
Dropdown settings allow you to select the Position for the layout, customize the Width of the object, and add a condition for displaying the object with Conditional Container Show.
Dropdown
Carousel
Carousel settings let you choose a layout Position and a Horizontal Alignment, as well as and add a condition for displaying the object with Conditional Container Show.
Carousel
Hidden Mode
With Hidden mode, you won't display any of the container mode options, although you can add a condition for displaying the object with Conditional Container Show.
Hidden
Example
The following figure shows an example of a Vizlib Container Grid object in analysis mode, moving between the different container modes in a navigation menu on the left.
Example
Appearance
Appearance settings control the look and feel of your container object. The settings you'll display in Appearance depend on the type of container object you select (e.g. an Accordion object will have different settings to a Carousel object).
General
The Appearance settings for each container object all have a General section, you can add a Title, Subtitle and Footnote and Toggle off hover menu. You can also choose to Show details, which will display information about the data in the chart (dimensions, measures, descriptions).
General
Appearance - Accordion Settings
Each container mode has its own set of Appearance settings, so the settings in this section will only be displayed when you select Accordion as your Container Mode in Container Settings. For more information about container modes, please see our article here.
Inactive Tab
With Inactive Tab settings you can apply changes to the inactive (unselected) tab, setting the Font Color, Background Color, Background Opacity, Font Size, Font Style, and Border Color Properties.
Inactive Tab
Active Tab
The Active Tab settings control the appearance of the active (selected) tab. You can set the Active Font Color, Active Background Color, Active Background Opacity, Active Font Size and Active Font Style.
Active Tab
You can also select the Active Border Style, the Active Tab Indicator, Indicator Position, Indicator Border Width and Indicator Color.
Border, Indicator
Tabs Settings
Tabs Settings allow you to choose the Text Alignment, enable text wrapping with Overflow Text, and set the Hover Color and Hover Opacity.
Tabs Settings
Appearance - Tabs
Each container mode has its own set of Appearance settings, so the settings in this section will only be displayed when you select Tabs as your Container Mode in Container Settings. For more information about container modes, please see our article here.
Inactive Tab
With Inactive Tab settings you can apply changes to the inactive (unselected) tab, setting the Font Color, Background Color, Background Opacity, Font Size, Font Style, and Border Color Properties.
Inactive Tab
Active Tab
The Active Tab settings control the appearance of the active (selected) tab. You can set the Active Font Color, Active Background Color, Active Background Opacity, Active Font Size and Active Font Style.
Active Tab
You can also select the Active Border Style, the Active Tab Indicator, Indicator Position, Indicator Border Width and Indicator Color.
Active Border, Indicator
Navigation Bar
The Navigation Bar is the area behind the container tabs. You can set the Navigation Background Color, Navigation Background Opacity, Navigation Border Style, Navigation Border Color, Navigation Border Width, Navigation Border Radius and the distance between tab in Separation with Tabs Space Between.
Navigation Bar
Tabs Settings
Tabs Settings allow you to choose the Text Alignment, enable text wrapping with Overflow Text, and set the Hover Color and Hover Opacity.
Tabs Settings
Appearance - Carousel Settings, Dropdown Styling
Each container mode has its own set of Appearance settings, so the settings in this section will only be displayed when you select the correct container mode. To display the settings for Carousel container mode, select Tabs as your Container Mode in Container Settings. To display the Dropdown Styling settings, select the Dropdown container mode. For more information about container modes, please see our article here.
Carousel Arrows
With Carousel Arrows settings you can enable arrows to highlight data in the chart. You can embed Arrows inside the container, set the Arrows Margin, choose a custom Arrows Icon, and Arrow Bottom.
Carousel Arrows
You can also set the Arrows Color, Hover Arrows Color, the Arrows Opacity and the Arrows Size.
Arrows Color, Size
Carousel Indicators
When you enable carousel Indicators, you can choose a custom Indicators Icon, Indicator Color, Active Indicator Color, Indicator Opacity, and Indicator Size.
Carousel Indicators
Carousel Slide Show
When you enable the carousel Slide Show, you can set the Switch Time for each slide.
Carousel Slide Show
Dropdown Styling
When you choose a dropdown container mode, you'll open the Dropdown Styling settings, where you can choose the style of Background Color (this example uses Gradient styling), Gradient Color (Start), Gradient Color (End), Font Color, Font Size and Font Style.
Dropdown Styling
You can also choose a Border Style, choose a Border Color and Border Thickness.
Border
Templates
Vizlib Container Grid supports Vizlib Templates now, so you can pick the look and feel you want and apply it with one click.
Using Templates
You can find template settings in the property panel under Templates.
Templates
To use templates, click on View Templates to open the template screen. You'll see a list of available themes, so you can choose the theme you want and it'll be applied right away. If you need to change the template theme, select one and apply the changes with one click.
Templates Example
Managing Templates
If you find you need to make more changes to the template theme, you can use the settings in the Appearance tab to set the look and feel you want.
If you'd like to know more about managing or working with Vizlib Templates, please see our article on creating and saving templates here.
Interactivity and Alternate States
These settings control how users interact with the container grid object and allow you to assign it to an alternate selection state.
Interactivity
Interactivity settings control how the user interacts with the container grid object. You can choose to show a Full screen Icon to maximise objects when in analysis mode.
Interactivity
Alternate State
Alternate State permits you to assign the Vizlib Container Grid to an alternate selection state, enable to Alternate States Manager and Show Alternate State Icon. You can find more information about working with alternate states here.
Alternate State