Прозрачная панель вкладок в Sencha Touch 2

Question

Мне было интересно, что лучший способ сделать полупрозрачный лабиринт (стиль iOS7) и прокрутить содержимое под ним. Я использую панель вкладок. Мысли?

Я попытался установить панель вкладок с плавающим: верно, но: 1. TabBar, кажется, предназначен для частного использования и не могу найти плавающую недвижимость на нем 2. На выполнив следующие действия на закладке панели:

tabBar: {    
    floating: true 
}, 
tabBarPosition: 'bottom' 

Я просто получаю панель вкладок, которую нужно состыковать сверху. Мысли?

Спасибо!

Answer 1

На данный момент вы не можете добиться прозрачности с помощью CSS и динамического содержание внизу. Если бы это было статическое изображение, вы могли бы это сделать.

Вы можете аппроксимировать эффект прозрачностью. Вам в основном нужно использовать контейнер в качестве панели вкладок и стилизовать его с помощью «position: absolute»; и установите нижнюю часть: 0. Контейнер панели вкладок не должен быть элементом списка, а не элементом контейнера, который также имеет список.

Вот краткий пример: https://fiddle.sencha.com/#fiddle/26i

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 

     var toolbar = { 
      xtype: 'container', 
      bottom: 0, 
      alias: 'bottomtoolbar', 
      layout: 'hbox', 
      items: [ 

       { 
        xtype: 'button', 
        text: 'Option 1', 
        style: 'background: transparent;', 
        iconAlign: 'top', 
        width: 80, 
        height: 60, 
        margin: '0 10 0 10' 
       }, 
       { 
        xtype: 'button', 
        text: 'Option 2', 
        style: 'background: transparent;', 
        iconAlign: 'top', 
        width: 80, 
        height: 60, 
        margin: '0 10 0 10' 
       }, 
       { 
        xtype: 'button', 
        text: 'Option 3', 
        style: 'background: transparent;', 
        iconAlign: 'top', 
        width: 80, 
        height: 60, 
        margin: '0 10 0 10' 
       } 
      ], 
      width: '100%', 
      height: 80, 
      style: 'position: absolute; background: rgba(255,255,255,0.9);' 
     }; 

     var list = { 
      xtype: 'list', 
      itemTpl: '{title}', 
      items: [ 
       { 
        // Spacer so end of list is selectable 
        xtype: 'container', 
        height: 80, 
        scrollDock: 'bottom' 
       } 
      ], 
      data: [ 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 1' }, 
       { title: 'Item 2' }, 
       { title: 'Item 3' }, 
       { title: 'Item 4' } 
      ] 
     }; 

     Ext.Viewport.add(toolbar); 
     Ext.Viewport.add(list); 
    } 
}); 

Конечно, это не стиль очень хорошо, но вы получите идею. Надеюсь, это поможет.

Answer 2

Tabbar состыкован по умолчанию в нижней части экрана, поэтому, даже если вы сделаете его полупрозрачным, все содержимое будет над ним, вы не сможете достичь того, что хотите. Вместо этого вы можете установить нижнюю часть панели вкладок, чтобы поместить ее ниже, затем добавить некоторую непрозрачность, например .75 или .8, чтобы попробовать & получить то, что вы хотите