feat(tab-bar): Adding hide-on-scroll prop for ionic theme

Author: joselrio

core/api.txt

@@ -2400,6 +2400,7 @@ ion-tab,method,setActive,setActive() => Promise<void>
 ion-tab-bar,shadow
 ion-tab-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-tab-bar,prop,expand,"compact" | "full",'full',false,false
+ion-tab-bar,prop,hideOnScroll,boolean,false,false,false
 ion-tab-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-tab-bar,prop,selectedTab,string | undefined,undefined,false,false
 ion-tab-bar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false

core/src/components.d.ts

@@ -3970,6 +3970,11 @@ export namespace Components {
           * @default 'full'
          */
         "expand": 'compact' | 'full';
+        /**
+          * If `true`, the tab bar will be hidden when the user scrolls down and shown when the user scrolls up. Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+          * @default false
+         */
+        "hideOnScroll": boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -10057,6 +10062,11 @@ declare namespace LocalJSX {
           * @default 'full'
          */
         "expand"?: 'compact' | 'full';
+        /**
+          * If `true`, the tab bar will be hidden when the user scrolls down and shown when the user scrolls up. Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+          * @default false
+         */
+        "hideOnScroll"?: boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -11298,6 +11308,7 @@ declare namespace LocalJSX {
     interface IonTabBarAttributes {
         "color": Color;
         "selectedTab": string;
+        "hideOnScroll": boolean;
         "translucent": boolean;
         "expand": 'compact' | 'full';
         "shape": 'soft' | 'round' | 'rectangular';

core/src/components/tab-bar/tab-bar.ionic.scss

@@ -70,10 +70,15 @@
 
   position: absolute;
 
+  // stylelint-disable-next-line property-disallowed-list
+  left: 50%;
+
   align-self: center;
 
   width: fit-content;
 
+  transform: translateX(calc(-50%));
+
   contain: content;
 }
 
@@ -85,6 +90,25 @@
   bottom: calc(globals.$ion-space-400 + var(--ion-safe-area-bottom, 0));
 }
 
+// Tab Bar Hide on Scroll
+// --------------------------------------------------
+
+:host(.tab-bar-hide-on-scroll) {
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+:host(.tab-bar-scroll-hidden) {
+  transform: translateY(calc(100% + var(--ion-safe-area-bottom, 0))) translateX(calc(-50%));
+
+  transition: transform 0.3s cubic-bezier(0.3, 1, 0.1, 1), opacity 0.3s cubic-bezier(0.3, 1, 0.1, 1);
+
+  opacity: 0;
+}
+
+:host([slot="top"].tab-bar-scroll-hidden) {
+  transform: translateY(-100%) translateX(calc(-50%));
+}
+
 // Tab Bar Translucent
 // --------------------------------------------------
 

core/src/components/tab-bar/tab-bar.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
+import { findIonContent, getScrollElement } from '@utils/content';
 import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
 import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
 import { createColorClasses } from '@utils/theme';
@@ -26,11 +27,17 @@ export class TabBar implements ComponentInterface {
   private keyboardCtrl: KeyboardController | null = null;
   private keyboardCtrlPromise: Promise<KeyboardController> | null = null;
   private didLoad = false;
+  private scrollEl?: HTMLElement;
+  private contentScrollCallback?: () => void;
+  private lastScrollTop = 0;
+  private scrollDirectionChangeTop = 0;
 
   @Element() el!: HTMLElement;
 
   @State() keyboardVisible = false;
 
+  @State() scrollHidden = false;
+
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -57,6 +64,13 @@ export class TabBar implements ComponentInterface {
     }
   }
 
+  /**
+   * If `true`, the tab bar will be hidden when the user scrolls down
+   * and shown when the user scrolls up.
+   * Only applies when the theme is `"ionic"` and `expand` is `"compact"`.
+   */
+  @Prop() hideOnScroll = false;
+
   /**
    * If `true`, the tab bar will be translucent.
    * Only applies when the theme is `"ios"` and the device supports
@@ -108,6 +122,8 @@ export class TabBar implements ComponentInterface {
         tab: this.selectedTab,
       });
     }
+
+    this.setupHideOnScroll();
   }
 
   async connectedCallback() {
@@ -150,6 +166,64 @@ export class TabBar implements ComponentInterface {
       this.keyboardCtrl.destroy();
       this.keyboardCtrl = null;
     }
+
+    this.destroyHideOnScroll();
+  }
+
+  private setupHideOnScroll() {
+    const theme = getIonTheme(this);
+    if (theme !== 'ionic' || !this.hideOnScroll || this.expand !== 'compact') {
+      return;
+    }
+
+    const footerEl = this.el.closest('ion-footer');
+    const pageEl = footerEl?.closest('ion-page, .ion-page') ?? this.el.closest('ion-page, .ion-page');
+    const contentEl = pageEl ? findIonContent(pageEl) : null;
+
+    if (!contentEl) {
+      return;
+    }
+
+    this.initScrollListener(contentEl);
+  }
+
+  private async initScrollListener(contentEl: HTMLElement) {
+    const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+
+    const scrollThreshold = 10;
+
+    this.contentScrollCallback = () => {
+      readTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        const isScrollingDown = scrollTop > this.lastScrollTop;
+
+        if (isScrollingDown !== this.lastScrollTop > this.scrollDirectionChangeTop) {
+          this.scrollDirectionChangeTop = this.lastScrollTop;
+        }
+
+        const delta = Math.abs(scrollTop - this.scrollDirectionChangeTop);
+
+        if (delta >= scrollThreshold) {
+          const shouldHide = isScrollingDown && scrollTop > 0;
+          if (shouldHide !== this.scrollHidden) {
+            writeTask(() => {
+              this.scrollHidden = shouldHide;
+            });
+          }
+        }
+
+        this.lastScrollTop = scrollTop;
+      });
+    };
+
+    scrollEl.addEventListener('scroll', this.contentScrollCallback, { passive: true });
+  }
+
+  private destroyHideOnScroll() {
+    if (this.scrollEl && this.contentScrollCallback) {
+      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+      this.contentScrollCallback = undefined;
+    }
   }
 
   private getShape(): string | undefined {
@@ -169,7 +243,7 @@ export class TabBar implements ComponentInterface {
   }
 
   render() {
-    const { color, translucent, keyboardVisible, expand } = this;
+    const { color, translucent, keyboardVisible, scrollHidden, expand, hideOnScroll } = this;
     const theme = getIonTheme(this);
     const shape = this.getShape();
     const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
@@ -182,6 +256,8 @@ export class TabBar implements ComponentInterface {
           [theme]: true,
           'tab-bar-translucent': translucent,
           'tab-bar-hidden': shouldHide,
+          'tab-bar-hide-on-scroll': hideOnScroll,
+          'tab-bar-scroll-hidden': scrollHidden,
           [`tab-bar-${expand}`]: true,
           [`tab-bar-${shape}`]: shape !== undefined,
         })}

packages/angular/src/directives/proxies.ts

@@ -2370,14 +2370,14 @@ export declare interface IonTab extends Components.IonTab {}
 
 
 @ProxyCmp({
-  inputs: ['color', 'expand', 'mode', 'selectedTab', 'shape', 'theme', 'translucent']
+  inputs: ['color', 'expand', 'hideOnScroll', 'mode', 'selectedTab', 'shape', 'theme', 'translucent']
 })
 @Component({
   selector: 'ion-tab-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'expand', 'mode', 'selectedTab', 'shape', 'theme', 'translucent'],
+  inputs: ['color', 'expand', 'hideOnScroll', 'mode', 'selectedTab', 'shape', 'theme', 'translucent'],
 })
 export class IonTabBar {
   protected el: HTMLIonTabBarElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -2113,14 +2113,14 @@ export declare interface IonTab extends Components.IonTab {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonTabBar,
-  inputs: ['color', 'expand', 'mode', 'selectedTab', 'shape', 'theme', 'translucent']
+  inputs: ['color', 'expand', 'hideOnScroll', 'mode', 'selectedTab', 'shape', 'theme', 'translucent']
 })
 @Component({
   selector: 'ion-tab-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'expand', 'mode', 'selectedTab', 'shape', 'theme', 'translucent'],
+  inputs: ['color', 'expand', 'hideOnScroll', 'mode', 'selectedTab', 'shape', 'theme', 'translucent'],
   standalone: true
 })
 export class IonTabBar {