Overview
A TabStrip control is made up of a hierarchical structure of tab items. It
inherits from BaseNavigator and shares the same concept of Menu control.
Below is a picture of the built-in Simple_Gray tabstrip:
The basic concept of MenuItem and MenuGroup also applies to TabStrip. In order
to design the appearance setting, you need to understand the difference between
an item and a group so that you can decide proper CSS style settings
on item and group.
Tab Group
Shown as above picture, a tab group contains several tab items. TabStrip
control can also have hierarchical structure like a Menu. For example, the
following shows a TabStrip with two levels:
Different levels may have different "look" thus may need to apply different CSS
style. In the above sample, TopGroup does not have the left and right
border as the 2nd level group.
Navigation Group topic contains more details on
how to configure a navigation item group and use databinding on a group. Those
powerful functions also apply to a tab group.
Tab Item
Similar to a MenuItem, you can create three kinds of tab items:
-
An image only tab item
-
A tab item with LeftIcon, Text and RightIcon. For example:
-
A tab item with embedded ASP.NET controls
Navigation Item topic gives more details on the
above three types of items.
Tab Item States
Refer to Item Styles, Image
and Icons, Look for more details.
Using TabStrip and MultiPage
To associate a TabStrip with MultiPage to create a tab control, simply specify
the MultiPageID property
for the TabStrip. By default, tab item automatically associates with the page
view.
For example, setting TabStrip1.MultiPageID to "MultiPage1" tells the TabStrip
to switch PageViews on MultiPage1. When user clicks on the first tab item, the
first PageView of the MultiPage appears.
To explicitly associate a tab item with a PageView, set
PageViewID to the ID of the PageView.
Scrolling features
Unlike Menu and SlideMenu, a TabStrip does not have pop-up sub menus. Hence,
automatically scrolling feature which only applies to a popup submenu is
not applied to TabStrip. TabStrip only supports forced-scrolling
feature. You must set the following two properties to enable forced-scrolling
feature:
-
Set the TabStrip's EnableScrolling
property Forced scrolling - if enabled, submenu will automatically scroll if
the submenu to true.
-
Set the TabStrip's Width property to a fixed value. When the actual size of the
TabStrip exceeds this value, the scroller will appear.
To change the appearnce of the scrolling items, set TabStrip's
ScrollUpLookID and
ScrollDownLookID .
Other tab item features
Tab item and tab group inherit from NavigationItem and NavigationItemGroup object. All the
powerful features that apply to navigation item and navigation item group also apply to tab item
and group.