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

feat(content): add parts support for background, scroll (#20929)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-04-27 16:01:39 -04:00
committed by GitHub
parent 64144960b0
commit 578ab93d29
4 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/content/content.tsx
View File

@ -9,6 +9,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
/**
* @slot - Content is placed in the scrollable area if provided without a slot.
* @slot fixed - Should be used for fixed content that should not scroll.
*
* @part background - The background of the content.
* @part scroll - The scrollable container of the content.
*/
@Component({
tag: 'ion-content',
@ -321,7 +324,7 @@ export class Content implements ComponentInterface {
'--offset-bottom': `${this.cBottom}px`,
}}
>
<div id="background-content"></div>
<div id="background-content" part="background"></div>
<main
class={{
'inner-scroll': true,
@ -331,6 +334,7 @@ export class Content implements ComponentInterface {
}}
ref={el => this.scrollEl = el!}
onScroll={(this.scrollEvents) ? ev => this.onScroll(ev) : undefined}
part="scroll"
>
<slot></slot>
</main>

8
core/src/components/content/readme.md
View File

@ -184,6 +184,14 @@ Type: `Promise<void>`
| `"fixed"` | Should be used for fixed content that should not scroll. |
## Shadow Parts
| Part | Description |
| -------------- | ---------------------------------------- |
| `"background"` | The background of the content. |
| `"scroll"` | The scrollable container of the content. |
## CSS Custom Properties
| Name | Description |

8
core/src/components/content/test/basic/index.html
View File

@ -25,7 +25,7 @@
<div style="display: flex; flex: 1">
<ion-content class="ion-padding" style="text-align: center; flex: 2" id="content">
<ion-content>
<ion-content id="content-part">
<f style="height: 50%"></f>
<ion-button onclick="toggleFullscreen()">Toggle content.fullscreen</ion-button>
<p>
@ -150,8 +150,12 @@
background: yellow;
}
ion-content#content-part::part(background) {
background: #eee;
}
</style>
</ion-app>
</body>
</html>
</html>