PDA

View Full Version : Tab-Bar: How to style tabs in one Tab-Bar in different colors?



ClaKasMSC
4 Feb 2016, 3:52 AM
I have created custom component UIs like described in the tutorial:
https://docs.sencha.com/extjs/6.0/core_concepts/theming.html#Creating_Custom_Component_UIs


I created a two files:
“my-classic-theme/sass/src/tab/Bar.scss”
“my-classic-theme/sass/src/tab/Tab.scss”
and added the ui in the:
“theme-demo-app/app/view/main/Main.js”

tabBar: {
ui: 'grey-tab',
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none'
}
},

So I got my design but I can't style it so that I can give the first two tabs another color.
For my design I wanted to change the colors of the navigation on the left side.
The background-color of the tabBar shoud be grey(#767070) and the frist tabs should have the same color.
The 3rd and 4th tab should have another color, for example blue (#255D8E).

Is this possible? How can I do this?

joel.watson
4 Feb 2016, 6:04 AM
Hi--

You should be able to provide a custom UI for the tabs themselves. So the first two tabs could have one ui, and the next two could have a different ui, and so on.

Thanks!
Joel

ClaKasMSC
4 Feb 2016, 6:35 AM
I tried that. I made in the tab.scss another ui and integrated this ui in the two tabs, but there was no change.

joel.watson
4 Feb 2016, 6:37 AM
I tried that. I made in the tab.scss another ui and integrated this ui in the two tabs, but there was no change.

Can you share the full config of your tabpanel, as well as the UIs which you created?

Thanks
Joel

ClaKasMSC
4 Feb 2016, 6:37 AM
/**
* This class is the main view for the application. It is specified in app.js as the
* "mainView" property. That setting automatically applies the "viewport"
* plugin causing this view to become the body element (i.e., the viewport).
*
* TODO - Replace this content of this view to suite the needs of your application.
*/
Ext.define('Theme.MSC.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',


requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',


'Theme.MSC.view.main.MainController',
'Theme.MSC.view.main.MainModel',
'Theme.MSC.view.main.List'
],


controller: 'main',
viewModel: 'main',


ui: 'navigation',

tabBarHeaderPosition: 1,
titleRotation: 0,
tabRotation: 0,


header: {
layout: {
align: 'stretchmax'
},
title: {
bind: {
text: '{name}'
},
flex: 0
},
//iconCls: 'fa-th-list'
},


tabBar: {
ui: 'grey-tab',
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none'
}
},


responsiveConfig: {
tall: {
headerPosition: 'top'
},
wide: {
headerPosition: 'left'
}
},


defaults: {
bodyPadding: 20,
tabConfig: {
plugins: 'responsive',
responsiveConfig: {
wide: {
iconAlign: 'left',
textAlign: 'left'
},
tall: {
iconAlign: 'top',
textAlign: 'center',
width: 120
}
}
}
},


items: [{
title: 'Home',
//iconCls: 'fa-home',
// The following grid shares a store with the classic version's grid as well!
items: [{
xtype: 'mainlist'
}]
}, {
title: 'Users',
//iconCls: 'fa-user',
items:
[
{
xtype: 'container',
layout: 'column',
defaultType: 'button',
defaults:
{
margin: 10
},
items:
[
{ text: 'Button1', scale: 'large', ui: 'grey-button' },
{ text: 'Button2', scale: 'medium', ui: 'green-button' },
{ text: 'Button3', scale: 'small', enableToggle: true},
{ text: 'Button34', scale: 'large', ui: 'orange-button'}
]
}
]
}, {
title: 'Groups',
ui: 'blue-tab',
//iconCls: 'fa-users',
bind: {
html: '{loremIpsum}'
}
}, {
title: 'Settings',
ui: 'blue-tab',
//iconCls: 'fa-cog',
bind: {
html: '{loremIpsum}'
}
}]
});

ClaKasMSC
4 Feb 2016, 6:41 AM
tab\Bar.scss:@include extjs-tab-bar-ui( $ui: 'grey-tab', $ui-background-color: #767070, $ui-padding: 0);tab\[email protected] extjs-tab-ui( $ui: 'grey-tab', $ui-background-color: #767070, $ui-background-color-active: #595454, $ui-background-color-over: #595454, $ui-border-color: transparent, $ui-border-color-active: transparent, $ui-color: #FFFFFF, $ui-color-active: #FFFFFF, $ui-margin: 0);@include extjs-tab-ui( $ui: 'grey-tab', $ui-background-color: #255D8E, $ui-background-color-active: #1F4E78, $ui-background-color-over: #1F4E78, $ui-border-color: transparent, $ui-border-color-active: transparent, $ui-color: #FFFFFF, $ui-color-active: #FFFFFF, $ui-margin: 0);

joel.watson
4 Feb 2016, 6:43 AM
I believe you need to provide the ui for the tab button in the tabConfig:


tabConfig: {
ui: 'default'
}


Thanks
Joel

ClaKasMSC
4 Feb 2016, 6:43 AM
tab\Bar.scss:
@include extjs-tab-bar-ui(
$ui: 'grey-tab',
$ui-background-color: #767070,
$ui-padding: 0
);

tab\Tab.scss
@include extjs-tab-ui(
$ui: 'grey-tab',
$ui-background-color: #767070,
$ui-background-color-active: #595454,
$ui-background-color-over: #595454,
$ui-border-color: transparent,
$ui-border-color-active: transparent,
$ui-color: #FFFFFF,
$ui-color-active: #FFFFFF,
$ui-margin: 0
);
@include extjs-tab-ui(
$ui: 'blue-tab',
$ui-background-color: #255D8E,
$ui-background-color-active: #1F4E78,
$ui-background-color-over: #1F4E78,
$ui-border-color: transparent,
$ui-border-color-active: transparent,
$ui-color: #FFFFFF,
$ui-color-active: #FFFFFF,
$ui-margin: 0
);

ClaKasMSC
4 Feb 2016, 6:58 AM
I made now this grey-tab in the tabconfig as you said. (in defaults{})
And I added a tabconfig in the tab is wantend in the different color. Now it's changed.

Thank you very much