docs(content): add information on fixed slots (#20324)

closes ionic-team/ionic-docs#731

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).
+
+
 <!-- Auto Generated Below -->
 
 
@@ -19,6 +25,11 @@ Content, along with many other Ionic components, can be customized to modify its
   (ionScrollStart)="logScrollStart()"
   (ionScroll)="logScrolling($event)"
   (ionScrollEnd)="logScrollEnd()">
+    <h1>Main Content</h1>
+
+    <div slot="fixed">
+      <h1>Fixed Content</h1>
+    </div>
 </ion-content>
 ```
 
@@ -26,7 +37,13 @@ Content, along with many other Ionic components, can be customized to modify its
 ### Javascript
 
 ```html
-<ion-content></ion-content>
+<ion-content>
+  <h1>Main Content</h1>
+
+  <div slot="fixed">
+    <h1>Fixed Content</h1>
+  </div>
+</ion-content>
 ```
 
 ```javascript
@@ -50,6 +67,11 @@ const ContentExample: React.FC = () => (
     onIonScrollStart={() => {}}
     onIonScroll={() => {}}
     onIonScrollEnd={() => {}}>
+      <h1>Main Content</h1>
+
+      <div slot="fixed">
+        <h1>Fixed Content</h1>
+      </div>
   </IonContent>
 );
 ```
@@ -64,6 +86,11 @@ const ContentExample: React.FC = () => (
     @ionScrollStart="logScrollStart()"
     @ionScroll="logScrolling($event)"
     @ionScrollEnd="logScrollEnd()">
+      <h1>Main Content</h1>
+
+      <div slot="fixed">
+        <h1>Fixed Content</h1>
+      </div>
   </ion-content>
 </template>
 ```

core/src/components/content/usage/angular.md

@@ -4,6 +4,11 @@
   (ionScrollStart)="logScrollStart()"
   (ionScroll)="logScrolling($event)"
   (ionScrollEnd)="logScrollEnd()">
+    <h1>Main Content</h1>
+
+    <div slot="fixed">
+      <h1>Fixed Content</h1>
+    </div>
 </ion-content>
 ```
 

core/src/components/content/usage/javascript.md

@@ -1,5 +1,11 @@
 ```html
-<ion-content></ion-content>
+<ion-content>
+  <h1>Main Content</h1>
+
+  <div slot="fixed">
+    <h1>Fixed Content</h1>
+  </div>
+</ion-content>
 ```
 
 ```javascript

core/src/components/content/usage/react.md

@@ -8,6 +8,11 @@ const ContentExample: React.FC = () => (
     onIonScrollStart={() => {}}
     onIonScroll={() => {}}
     onIonScrollEnd={() => {}}>
+      <h1>Main Content</h1>
+
+      <div slot="fixed">
+        <h1>Fixed Content</h1>
+      </div>
   </IonContent>
 );
 ```

core/src/components/content/usage/vue.md

@@ -5,6 +5,11 @@
     @ionScrollStart="logScrollStart()"
     @ionScroll="logScrolling($event)"
     @ionScrollEnd="logScrollEnd()">
+      <h1>Main Content</h1>
+
+      <div slot="fixed">
+        <h1>Fixed Content</h1>
+      </div>
   </ion-content>
 </template>
 ```