Прозрачная вкладка и панель действий с использованием углового nativescript для Android и IOS - PullRequest
Новая
       4

Прозрачная вкладка и панель действий с использованием углового nativescript для Android и IOS

1 голос
/ 06 июня 2019

Я хочу, чтобы панель вкладок была прозрачной, а панель действий - прозрачной для пролистывания или страницы. Действие или панель вкладок должны располагаться сверху страницы, как в двух слоях

Я пытался использовать css, чтобы сделать прозрачным, но он не стал прозрачным на странице. 

<ActionBar title="Name" backgroundColor="#00000000"></ActionBar>

<TabView androidTabsPosition="bottom" selectedTabTextColor="white">
   <page-router-outlet
      *tabItem="{iconSource: getIconSource('test')}"
       name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{iconSource: getIconSource('test2')}"
        name="locationTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{iconSource: getIconSource('test3')}"
        name="searchTab">
    </page-router-outlet>
</TabView>

прозрачная панель действий над страницей

Пример

1 Ответ

0 голосов
/ 06 июня 2019

Стиль страницы / корневой макет с фоновым изображением или цветом на ваш выбор 

.page {
       background: url(https://cdn.pixabay.com/photo/2017/08/12/10/13/background-2633962__340.jpg);
       background-repeat: no-repeat;
       background-size: cover;
    }

Android

  • Set ActionBar 's backgroundColor до transparent

  • После события loaded настроить Page элементы системы элементов 

    onLoaded(event: EventData) {
    const layout = <GridLayout>event.object,
       page = layout.page;

    if (page.android) {
       page.android.removeRowAt(0);
    }
}
  • Отрегулировать заполнение корневого макета, чтобы содержимое не перекрывалось сActionBar

iOS

Настройка ActionBar атрибутов на loaded событие 

onActionBarLoaded(event: EventData) {
    const actionBar = <ActionBar>event.object;
    if (actionBar.ios) {
        (<any>actionBar).updateFlatness = function (navBar) {
            actionBar.ios.setBackgroundImageForBarMetrics(UIImage.new(), UIBarMetrics.Default);
            actionBar.ios.translucent = true;
        };
    }
}

Образец игровой площадки (Проверена совместимость с v5.x)

...