diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md index 2a181e442e..2809e61b87 100644 --- a/core/src/components/content/readme.md +++ b/core/src/components/content/readme.md @@ -6,6 +6,12 @@ view. Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). + +## Fixed Content + +In order to place elements outside of the scrollable area, `slot="fixed"` can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position). + + @@ -19,6 +25,11 @@ Content, along with many other Ionic components, can be customized to modify its (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)" (ionScrollEnd)="logScrollEnd()"> +

Main Content

+ +
+

Fixed Content

+
``` @@ -26,7 +37,13 @@ Content, along with many other Ionic components, can be customized to modify its ### Javascript ```html - + +

Main Content

+ +
+

Fixed Content

+
+
``` ```javascript @@ -50,6 +67,11 @@ const ContentExample: React.FC = () => ( onIonScrollStart={() => {}} onIonScroll={() => {}} onIonScrollEnd={() => {}}> +

Main Content

+ +
+

Fixed Content

+
); ``` @@ -64,6 +86,11 @@ const ContentExample: React.FC = () => ( @ionScrollStart="logScrollStart()" @ionScroll="logScrolling($event)" @ionScrollEnd="logScrollEnd()"> +

Main Content

+ +
+

Fixed Content

+
``` diff --git a/core/src/components/content/usage/angular.md b/core/src/components/content/usage/angular.md index 8ad00d381f..70e89fc787 100644 --- a/core/src/components/content/usage/angular.md +++ b/core/src/components/content/usage/angular.md @@ -4,6 +4,11 @@ (ionScrollStart)="logScrollStart()" (ionScroll)="logScrolling($event)" (ionScrollEnd)="logScrollEnd()"> +

Main Content

+ +
+

Fixed Content

+
``` diff --git a/core/src/components/content/usage/javascript.md b/core/src/components/content/usage/javascript.md index 0198784d38..a5bf238c15 100644 --- a/core/src/components/content/usage/javascript.md +++ b/core/src/components/content/usage/javascript.md @@ -1,5 +1,11 @@ ```html - + +

Main Content

+ +
+

Fixed Content

+
+
``` ```javascript diff --git a/core/src/components/content/usage/react.md b/core/src/components/content/usage/react.md index e2fe63d266..f023254a34 100644 --- a/core/src/components/content/usage/react.md +++ b/core/src/components/content/usage/react.md @@ -8,6 +8,11 @@ const ContentExample: React.FC = () => ( onIonScrollStart={() => {}} onIonScroll={() => {}} onIonScrollEnd={() => {}}> +

Main Content

+ +
+

Fixed Content

+
); ``` diff --git a/core/src/components/content/usage/vue.md b/core/src/components/content/usage/vue.md index 91de7bcc70..5d4a934416 100644 --- a/core/src/components/content/usage/vue.md +++ b/core/src/components/content/usage/vue.md @@ -5,6 +5,11 @@ @ionScrollStart="logScrollStart()" @ionScroll="logScrolling($event)" @ionScrollEnd="logScrollEnd()"> +

Main Content

+ +
+

Fixed Content

+
```