Question

我想使标签栏和动作栏在swipelayout或页面上透明。操作或标签栏必须像两层一样位于页面顶部

我尝试使用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>

页面上的透明操作栏

Example

Answer 1

样式页/根目录布局以及您选择的背景图片或颜色

.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

将ActionBar的{{1}}设置为backgroundColor
在transparent事件上调整loaded元素单位系统
```
Page
```
调整根布局的填充，使内容不会与ActionBar重叠

iOS

根据onLoaded(event: EventData) { const layout = <GridLayout>event.object, page = layout.page; if (page.android) { page.android.removeRowAt(0); } }事件调整ActionBar属性

loaded

Playground Sample（已针对v5.x验证兼容性）

透明的Tabbar和ActionBar使用针对Android和iOS的Angular NativeScript

1 个答案: