javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(header): translucent toolbars now work with collapsible headers (#19774)

Browse Source 
fixes #19773
This commit is contained in:
Liam DeBeasi
2019-10-29 15:43:26 -04:00
committed by GitHub
parent 0a7aae28a7
commit b642b532e8
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/header/header.utils.ts
View File

@ -60,7 +60,7 @@ export const handleContentScroll = (scrollEl: HTMLElement, scrollHeaderIndex: He
}); });
}; };
export const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity: number | undefined) => { export const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity?: number) => {
if (opacity === undefined) { if (opacity === undefined) {
toolbar.background.style.removeProperty('--opacity'); toolbar.background.style.removeProperty('--opacity');
} else { } else {
@ -117,7 +117,7 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
if (hasValidIntersection) { if (hasValidIntersection) {
setHeaderActive(mainHeaderIndex); setHeaderActive(mainHeaderIndex);
setHeaderActive(scrollHeaderIndex, false); setHeaderActive(scrollHeaderIndex, false);
setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], 1); setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0]);
} }
} }
}); });

10
core/src/components/toolbar/test/title/index.html
View File

@ -30,6 +30,10 @@
.create ion-icon { .create ion-icon {
transform: scale(0.9); transform: scale(0.9);
} }
.main-toolbar {
--background: rgba(0, 0, 0, 0.05);
}
</style> </style>
</head> </head>
@ -77,8 +81,8 @@
connectedCallback() { connectedCallback() {
this.innerHTML = ` this.innerHTML = `
<ion-header class="main-header"> <ion-header class="main-header" translucent>
<ion-toolbar> <ion-toolbar class="main-toolbar">
<ion-buttons collapse> <ion-buttons collapse>
<ion-back-button default-href="/"></ion-back-button> <ion-back-button default-href="/"></ion-back-button>
</ion-buttons> </ion-buttons>
@ -89,7 +93,7 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content id="content" class="main-content"> <ion-content id="content" class="main-content" fullscreen>
<ion-header collapse="condense"> <ion-header collapse="condense">
<ion-toolbar> <ion-toolbar>
<ion-title size="large">Page Two</ion-title> <ion-title size="large">Page Two</ion-title>