Results 1 to 8 of 8

Thread: Tab-Bar: How to style tabs in one Tab-Bar in different colors?

  1. #1

    Default Tab-Bar: How to style tabs in one Tab-Bar in different colors?

    I have created custom component UIs like described in the tutorial:
    https://docs.sencha.com/extjs/6.0/co..._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?

  2. #2
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    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

  3. #3

    Default

    I tried that. I made in the tab.scss another ui and integrated this ui in the two tabs, but there was no change.

  4. #4
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by ClaKasMSC View Post
    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

  5. #5

    Default

    /**
    * 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}'
    }
    }]
    });

  6. #6

    Default

    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);

  7. #7
    Sencha User
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    I believe you need to provide the ui for the tab button in the tabConfig:

    Code:
    tabConfig: {
        ui: 'default'
    }
    Thanks
    Joel

  8. #8

    Default

    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
    );

  9. #9

    Default

    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

Similar Threads

  1. What is the proper way to style tabs?
    By BillHubbard in forum Ext: Q&A
    Replies: 3
    Last Post: 2 Dec 2011, 4:18 PM
  2. style buttons to look like tabs
    By Kodo in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 2 Mar 2010, 2:45 PM
  3. [SOLVED]:Customize accordian tabs (change colors)
    By pokerking400 in forum Ext 2.x: Help & Discussion
    Replies: 9
    Last Post: 20 Jun 2008, 8:43 AM
  4. Style Tabs
    By thebra in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 1 Apr 2008, 9:49 AM
  5. tabs...just about it style
    By genius551v in forum Ext 1.x: Bugs
    Replies: 2
    Last Post: 26 Apr 2007, 2:39 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •