Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(content): add shadow parts #20929

Merged
merged 7 commits into from Apr 27, 2020
Merged

feat(content): add shadow parts #20929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b097b80
add shadow parts
liamdebeasi Mar 31, 2020
3c17fc4
build
liamdebeasi Apr 22, 2020
40febd1
build
liamdebeasi Apr 22, 2020
0e1291d
build
liamdebeasi Apr 22, 2020
41270dc
Merge remote-tracking branch 'origin/master' into content-parts
liamdebeasi Apr 22, 2020
4b01cb5
build
liamdebeasi Apr 22, 2020
22bbe40
remove transition parts
liamdebeasi Apr 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions core/api.txt
View file
Open in desktop
Expand Up @@ -300,6 +300,8 @@ ion-content,css-prop,--padding-bottom
ion-content,css-prop,--padding-end
ion-content,css-prop,--padding-start
ion-content,css-prop,--padding-top
ion-content,part,background
ion-content,part,scroll

ion-datetime,shadow
ion-datetime,prop,cancelText,string,'Cancel',false,false
Expand Down
6 changes: 5 additions & 1 deletion core/src/components/content/content.tsx
View file
Open in desktop
Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand All @@ -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>
Expand Down
8 changes: 8 additions & 0 deletions core/src/components/content/readme.md
View file
Open in desktop
Expand Up @@ -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 |
Expand Down
8 changes: 6 additions & 2 deletions core/src/components/content/test/basic/index.html
View file
Open in desktop
Expand Up @@ -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>
Expand Down Expand Up @@ -150,8 +150,12 @@
background: yellow;
}

ion-content#content-part::part(background) {
background: #eee;
}

</style>
</ion-app>
</body>

</html>
</html>