Advanced User Interface Controls and Components
Specifies an object that contains all style settings for the TabStrip.
An Object which contains all style settings in TabStrip directive.
controlStyle = {
general: 'iui-tabstrip',
navigation: {
general: 'iui-tabstrip-navigation',
button: {
disabled: 'iui-tabstrip-navigation-button-disabled',
normal: 'iui-tabstrip-navigation-button',
hovered: 'iui-tabstrip-navigation-button-hovered',
selected: 'iui-tabstrip-navigation-button-selected'
}
},
tab: {
general: 'iui-tab',
header: {
content: 'iui-tab-header-content',
disabled: 'iui-tab-header-disabled',
focused: 'iui-tab-header-focused',
normal: 'iui-tab-header',
hovered: 'iui-tab-header-hovered',
selected: 'iui-tab-header-selected'
},
content: {
disabled: 'iui-tab-content-disabled',
focused: 'iui-tab-content-focused',
normal: 'iui-tab-content',
hovered: 'iui-tab-content-hovered',
selected: 'iui-tab-content-selected'
}
}
}
An object that holds all style settings for the TabStrip directive.
This property is accessed through 'control-style' attribute of TabStrip directive.
You can use this property to change the appearance of the TabStrip dynamically from code. By simply setting custom CSS classes in your app code and apply the name of the class to some of above style fields, you can override the default appearance of the TabStrip.
Supported in: v1.0.