Layout Containers
Layout containers allow you to position your components in a different ways to create both simple and complex views. Different container types can be stacked together to achieve even the most sophisticated layouts. Core containers are available in io.kvision.panel
package.
SimplePanel
This container puts its children components in a simple sequence, without any additional formatting or markup. It's the most basic container and is the base class for all other containers. It is internally rendered as a DIV
HTML element.
It will be rendered as:
StackPanel
This container displays only one of its children components at a time. You can use properties and methods of the StackPanel
class to manage its children visibility.
It will be initially rendered as:
You can change active child component by setting activeIndex
or activeChild
properties. After this:
the content in the browser will change to:
SplitPanel
This container divides the available space into two areas and provides a possibility to resize the panes by the user.
SplitPanel
container is required to have exactly two children. If there are more or less than two children nothing will be rendered at all.
TabPanel
This container creates a popular tabbed layout, with tabs on the top, left or right side of the content.
For tabs displayed on the left or right side of the content, you need to declare the ratio between the size of the tabs and the content. The sideTabSize
parameter of TabPanel
constructor takes one of six enumerated values (from SIZE_1
to SIZE_6
) which mean 1/11, 2/10, 3/9, 4/8, 5/7, and 6/6 ratios. The default ratio is 3/9.
Tabs can be made closable. A closable tab displays a cross icon on the tab bar. When the user clicks this icon, the removeTab
method is called and the tab is deleted from the container. Two events are sent - tabClosing
and tabClosed
with the tab index saved in detail.data
property. The first event is cancelable - you can call preventDefault()
method to cancel the action.
TabPanel
container implementation allows to:
dynamically add and remove tabs
get the list of tabs and dynamically modify tab properties (label, icon, image, closable)
find tab containing a given child component
dynamically reorder tabs
allow user to reorder tabs with drag & drop
DockPanel
This container can have up to five children, and it shows them in five distinct positions - CENTER, UP, DOWN, LEFT and RIGHT. The default add
method of the DockPanel
class (used also by the DSL builders) puts the given component in the CENTER position. Use the dedicated DSL builder functions to put your child components in the other four positions.
FlexPanel
HPanel, VPanel
BothHPanel
and VPanel
classes are direct subclasses of FlexPanel
and are convenient shortcuts for frequently used horizontal (left to right) and respectively vertical (top to bottom) flexbox layouts:
GridPanel
ResponsiveGridPanel
This container allows you to position children components inside Bootstrap's popular responsive 12-columns grid system. It's well suited for mobile websites and applications, but can also be used as an alternative to the CSS Grid. The ResponsiveGridPanel
class allows you to choose grid size (with SM, MD, LG, XL enum values) and automatically wraps children components into appropriate rows and cols elements. The number of rows and columns can be declared as parameters of the class constructor or calculated on the fly based on children added to the container. You use the dedicated add(child: Component, col: Int, row: Int, size: Int = 0, offset: Int = 0)
method of the ResponsiveGridPanel
class or options
DSL builder function to add children to selected positions in the grid:
Last updated