move via prop on content

core/src/components.d.ts

@@ -768,6 +768,7 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        "fixedSlotPlacement": 'afterContent' | 'beforeContent';
         /**
           * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
          */
@@ -5475,6 +5476,7 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        "fixedSlotPlacement"?: 'afterContent' | 'beforeContent';
         /**
           * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, this does not disable the system bounce on iOS. That is an OS level setting.
          */

core/src/components/content/content.scss

@@ -238,7 +238,6 @@
   transform: scaleX(-1);
 }
 
-
 // Content: Fixed
 // --------------------------------------------------
 

core/src/components/content/content.tsx

@@ -75,6 +75,8 @@ export class Content implements ComponentInterface {
    */
   @Prop() fullscreen = false;
 
+  @Prop() fixedSlotPlacement: 'afterContent' | 'beforeContent' = 'afterContent';
+
   /**
    * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
    * If the content exceeds the bounds of ionContent, nothing will change.
@@ -423,7 +425,7 @@ export class Content implements ComponentInterface {
   }
 
   render() {
-    const { isMainContent, scrollX, scrollY, el } = this;
+    const { fixedSlotPlacement, isMainContent, scrollX, scrollY, el } = this;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
     const mode = getIonMode(this);
     const forceOverscroll = this.shouldForceOverscroll();
@@ -446,6 +448,9 @@ export class Content implements ComponentInterface {
         }}
       >
         <div ref={(el) => (this.backgroundContentEl = el)} id="background-content" part="background"></div>
+
+        {fixedSlotPlacement === 'beforeContent' ? <slot name="fixed"></slot> : null}
+
         <TagType
           class={{
             'inner-scroll': true,
@@ -467,7 +472,7 @@ export class Content implements ComponentInterface {
           </div>
         ) : null}
 
-        <slot name="fixed"></slot>
+        {fixedSlotPlacement !== 'beforeContent' ? <slot name="fixed"></slot> : null}
       </Host>
     );
   }

core/src/components/fab/test/basic/index.html

@@ -22,127 +22,66 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content class="ion-padding" id="content" fullscreen>
+      <ion-content class="ion-padding" fixed-slot-placement="beforeContent">
-        <f></f>
+        <ion-fab slot="fixed" vertical="top" horizontal="start">
-        <f></f>
+          <ion-fab-button>fixed<br />slot </ion-fab-button>
-
-        <ion-button>Test</ion-button>
-        <ion-fab-button disabled href="#path" onclick="throw 'no clickable'">FAB</ion-fab-button>
-
-        <ion-fab vertical="top" horizontal="end" edge id="fab1" slot="fixed">
-          <ion-fab-button size="small" class="e2eFabTopRight">
-            <ion-icon name="add"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list>
-            <ion-fab-button>
-              <ion-icon name="logo-facebook"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-twitter"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-vimeo"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-instagram"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
         </ion-fab>
 
-        <ion-fab vertical="bottom" horizontal="start" edge id="fab2" slot="fixed">
+        <ion-list>
-          <ion-fab-button color="dark" class="e2eFabBottomRight" disabled>
+          <ion-item button>List</ion-item>
-            <ion-icon name="arrow-up-circle"></ion-icon>
+          <ion-item button>List</ion-item>
-          </ion-fab-button>
+          <ion-item button>List</ion-item>
-          <ion-fab-list side="start">
+        </ion-list>
-            <ion-fab-button>
-              <ion-icon name="logo-facebook"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-twitter"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-vimeo"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-instagram"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
 
-        <ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
+        <ion-button id="fixed-button" slot="fixed">Fixed Button</ion-button>
-          <ion-fab-button color="secondary" class="e2eFabTopLeft">
-            <ion-icon name="arrow-forward-circle"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-list side="end">
-            <ion-fab-button>
-              <ion-icon name="logo-facebook"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-twitter"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-vimeo"></ion-icon>
-            </ion-fab-button>
-            <ion-fab-button>
-              <ion-icon name="logo-instagram"></ion-icon>
-            </ion-fab-button>
-          </ion-fab-list>
-        </ion-fab>
 
-        <ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
+        <p>
-          <ion-fab-button class="e2eFabCenter">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim
-            <ion-icon name="share"></ion-icon>
+          fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce
-          </ion-fab-button>
+          augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada
-          <ion-fab-list side="top">
+          mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia
-            <ion-fab-button color="primary">
+          mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere
-              <ion-icon name="logo-vimeo"></ion-icon>
+          pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut,
-            </ion-fab-button>
+          aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut,
-            <ion-fab-button color="light">
+          pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida
-              <ion-icon name="logo-instagram"></ion-icon>
+          malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla.
-            </ion-fab-button>
+        </p>
-          </ion-fab-list>
+        <p>
-          <ion-fab-list side="bottom">
+          Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus.
-            <ion-fab-button color="secondary">
+          Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero
-              <ion-icon name="logo-facebook"></ion-icon>
+          odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est,
-            </ion-fab-button>
+          vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in
-            <ion-fab-button color="dark">
+          odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor.
-              <ion-icon name="logo-twitter"></ion-icon>
+          Etiam lobortis tristique maximus.
-            </ion-fab-button>
+        </p>
-          </ion-fab-list>
+        <p>
-          <ion-fab-list side="start">
+          Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo
-            <ion-fab-button color="light">
+          tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum
-              <ion-icon name="logo-instagram"></ion-icon>
+          et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue
-            </ion-fab-button>
+          faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis
-            <ion-fab-button color="primary">
+          venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean
-              <ion-icon name="logo-vimeo"></ion-icon>
+          sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id
-            </ion-fab-button>
+          molestie sed, pretium vitae turpis.
-          </ion-fab-list>
+        </p>
-          <ion-fab-list side="end">
+        <p>
-            <ion-fab-button color="dark">
+          Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et
-              <ion-icon name="logo-twitter"></ion-icon>
+          sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit
-            </ion-fab-button>
+          amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus.
-            <ion-fab-button color="secondary">
+          Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan
-              <ion-icon name="logo-facebook"></ion-icon>
+          condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt
-            </ion-fab-button>
+          libero finibus at. Mauris condimentum fermentum rutrum.
-          </ion-fab-list>
+        </p>
-        </ion-fab>
+        <p>
-
+          Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce
-        <ion-fab horizontal="end" vertical="bottom" slot="fixed">
+          mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse
-          <ion-fab-button color="danger" onclick="add()">
+          enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin
-            <ion-icon name="add"></ion-icon>
+          justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur
-          </ion-fab-button>
+          libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum,
-        </ion-fab>
+          vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam
+          neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum.
+        </p>
       </ion-content>
 
-      <ion-footer>
-        <ion-toolbar>
-          <ion-buttons slot="secondary">
-            <ion-button onclick="closeLists()">Close</ion-button>
-          </ion-buttons>
-          <ion-title>Footer</ion-title>
-        </ion-toolbar>
-      </ion-footer>
-
       <script>
         function insertAfter(el, referenceNode) {
           referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
@@ -164,16 +103,9 @@
       </script>
 
       <style>
-        f {
+        #fixed-button {
-          display: block;
+          right: 0px;
-          margin: 15px auto;
+          top: 50%;
-          max-width: 150px;
-          height: 150px;
-          background: blue;
-        }
-
-        f:last-of-type {
-          background: yellow;
         }
       </style>
     </ion-app>

core/src/components/refresher/test/basic/index.html

@@ -22,7 +22,7 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-content>
+      <ion-content fixed-slot-placement="beforeContent">
         <ion-refresher id="refresher" slot="fixed">
           <ion-refresher-content
             pulling-icon="arrow-down-outline"