Class
zebkit.ui.Tabs
mixed with <zebkit.ui.HostDecorativeViews> <zebkit.EventProducer> extends <zebkit.ui.Panel> |
<zebkit.ui> |
Tabs UI panel. The component is used to organize switching between number of pages where every page is an UI component.
Filling tabs component with pages is the same to how you add an UI component to a panel. For instance in the example below three pages with "Titl1", "Title2", "Title3" are added:
var tabs = new zebkit.ui.Tabs();
tabs.add("Title1", new zebkit.ui.Label("Label as a page"));
tabs.add("Title2", new zebkit.ui.Button("Button as a page"));
tabs.add("Title3", new zebkit.ui.TextArea("Text area as a page"));
You can access tabs pages UI component the same way like you access a panel children components
...
tabs.kids[0] // access the first page
And you can remove it with standard panel inherited API:
...
tabs.removeAt(0); // remove first tab page
To customize tab page caption and icon you should access tab object and do it with API it provides:
// update a tab caption
tabs.getTab(0).setCaption("Test");
// update a tab icon
tabs.getTab(0).setIcon("my.gif");
// set a particular font and color for the tab in selected state
tabs.getTab(0).setColor(true, "blue");
tabs.getTab(0).setFont(true, new zebkit.Font("Arial", "bold", 16));
// set other caption for the tab in not selected state
tabs.getTab(0).setCaption(false, "Test");
zebkit.ui.Tabs
([o]
)
Parameters:
-
[o]
<String>the tab panel orientation:
"top" "bottom" "left" "right"
public | void | drawMarker (g, r) |
public | void | enableTab (i, b) |
public | <zebkit.ui.Tabs.TabView> | getTab (pageIndex) |
public | <Integer> | getTabAt (x, y) |
protected
|
<Object> | getTabBounds (i) |
public | <Boolean> | isTabEnabled (index) |
public | void | keyPressed (e) |
public | <Integer> | next (page, d) |
public | void | paintTab (g, pageIndex) |
public | void | pointerClicked (e) |
public | void | pointerDragEnded (e) |
public | void | pointerExited (e) |
public | void | pointerMoved (e) |
public | void | recalc ( ) |
public | void | select (index) |
public | void | setAlignment (o) |
public | void | setPageGaps (vg, hg) |
public | void | setSideSpace (sideSpace) |
public | void | setViews (a) |
public
void
drawMarker (g, r )
Draw currently activate tab page marker. Parameters:
|
public
chainable
enableTab (i, b )
Set enabled state for the given tab page Parameters:
|
public
<zebkit.ui.Tabs.TabView>
getTab (pageIndex )
Get the given tab. Using the tab you can control tab caption, icon. Parameters:
Returns:
<zebkit.ui.Tabs.TabView>
|
public
<Integer>
getTabAt (x, y )
Get tab index located at the given location Parameters:
Returns:
<Integer>
an index of the tab that is detected at the given location. -1 if no any tab can be found |
public
void
keyPressed (e )
Define key pressed event handler Parameters:
|
public
<Integer>
next (page, d )
Navigate to a next tab page following the given direction starting from the given page Parameters:
Returns:
<Integer>
a new tab page index |
public
void
paintTab (g, pageIndex )
Paint the given tab page title Parameters:
|
public
void
pointerClicked (e )
Define pointer clicked event handler Parameters:
|
public
void
pointerDragEnded (e )
Define pointer drag ended event handler Parameters:
|
public
void
pointerExited (e )
Define pointer exited event handler Parameters:
|
public
void
pointerMoved (e )
Define pointer moved event handler Parameters:
|
@Override
zebkit.layout.Layoutable
public void recalc ( )
Define recalc method to compute the component metrical characteristics |
public
chainable
select (index )
Switch to the given tab page Parameters:
|
public
chainable
setAlignment (o )
Set the tab page element alignments Parameters:
|
public
chainable
setPageGaps (vg, hg )
Set tab page vertical and horizontal gaps Parameters:
|
public
chainable
setSideSpace (sideSpace )
Set tab side spaces. Parameters:
|
@Override
zebkit.ui.HostDecorativeViews
public void setViews (a )
Set number of views to render different Tab component elements Parameters:
|












public
![]() canHaveFocus
/* Overwritten from canHaveFocus */
Declare can have focus attribute to make the component focusable |
public
![]() selectedIndex
Selected tab page index |
public
![]() sideSpace
Sides gap |
selected
Fired when a new tab page has been selected
Parameters:
|