Изменить цвет Sencha Touch Ext.TabPanel - PullRequest
Новая
       12

Изменить цвет Sencha Touch Ext.TabPanel

4 голосов
/ 28 мая 2011 
new Ext.TabPanel({
            fullscreen: true,
            cardSwitchAnimation: 'slide',
            ui: 'dark',
            items: [home, about]
        });

Для ui могу ли я указать цвет вместо темного и светлого? Как я могу сделать это конкретным цветом или фоновым изображением по нашему выбору?

Спасибо.

Ответы [ 3 ]

6 голосов
/ 28 мая 2011

Что вам нужно сделать, это определить новый тип пользовательского интерфейса, используя SASS и COMPASS.Итак, вы должны быть знакомы с этими структурами.Если вы уже установили их, и вы уже знаете, как создать свою тему приложения CSS, то вы можете добавить следующую строку в файл темы .sass, чтобы определить пользовательский интерфейс 

@include sencha-tabbar-ui('myUI', $tabs-myUI, $tabs-bar-gradient, $tabs-myUI-active);

Как видите, яЯ использую некоторые переменные, чтобы установить нужный стиль.Подробно:

  • $ tabs-myUI: базовый цвет для вкладок пользовательского интерфейса "myUI".
  • $ tabs-bar-градиент: стиль градиента фона для панелей вкладок.
  • $ tabs-myUI-active: является активным цветом для «светлых» вкладок пользовательского интерфейса.

Вы можете определить, сколько различных пользовательских интерфейсов вы хотите, и использовать их в своем коде вследующим образом: 

new Ext.TabPanel({
        fullscreen: true,
        cardSwitchAnimation: 'slide',
        ui: 'myUI',
        items: [home, about]
    });

Это официальный способ Сенчи сделать это.

Надеюсь, это поможет.

2 голосов
/ 28 мая 2011

Дайте вашей tabPanel или ее дочерним элементам атрибут cls.Это дает html-тегу класс, так что вы можете использовать его для стилизации в своем CSS.

Очевидно, что после этого вы будете стилизовать его, используя что-то вроде: 

background-image: url(...);
background-color: pink;
1 голос
/ 08 февраля 2013

@ AndreaCammarata

Я могу изменить цвет вкладки, используя ваш вышеупомянутый sass.Но я должен изменить активный цвет вкладок.Пожалуйста, найдите ниже мой код 

@include sencha-tabbar-ui('tabcolour', #333333,'glossy',#0088CC);

Просмотр: 

config : {
style: "background-color: white",
     ui: 'tabcolour',
    tabBar : {

    ui: 'tabcolour',
        layout : {
            pack : 'center'
        }
    },
    layout : {
        type : 'card',
        animation : {
            type : 'fade'
        }
    },

    items : [{
            title : 'Descrption',
            xtype : 'item_description'
        },{
            title : 'Photos',
            xtype : 'Item_Photos',
        },  {
            title : 'Comments',
            xtype : 'item_add_viewcomment'
        }, {
            title : 'Videoes',
            xtype : 'item_video'
        }
    ]
}
...