From 8f752267635f0e2b41aabb965ebe2c045e39317d Mon Sep 17 00:00:00 2001 From: louiscklaw Date: Fri, 6 Jun 2025 13:09:59 +0800 Subject: [PATCH] update floating tab bar, --- .../components/ExploreContainer.css | 24 +++ .../components/ExploreContainer.tsx | 12 ++ .../src/pages/DemoFloatingTabs/index.tsx | 38 ++++- .../src/pages/DemoFloatingTabs/pages/Tab1.css | 0 .../src/pages/DemoFloatingTabs/pages/Tab1.tsx | 26 +++ .../src/pages/DemoFloatingTabs/pages/Tab2.css | 0 .../src/pages/DemoFloatingTabs/pages/Tab2.tsx | 25 +++ .../src/pages/DemoFloatingTabs/pages/Tab3.css | 0 .../src/pages/DemoFloatingTabs/pages/Tab3.tsx | 25 +++ .../src/pages/DemoFloatingTabs/style.scss | 161 ++++++++---------- .../theme/floating-tab-bar.css | 25 +++ .../DemoFloatingTabs/theme/variables.css | 77 +++++++++ 12 files changed, 318 insertions(+), 95 deletions(-) create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.css create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.css create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.tsx create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.css create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.tsx create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.css create mode 100644 03_source/mobile/src/pages/DemoFloatingTabs/theme/variables.css diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css b/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css new file mode 100644 index 0000000..e99f514 --- /dev/null +++ b/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css @@ -0,0 +1,24 @@ +.container { + text-align: center; + position: absolute; + left: 0; + right: 0; + top: 50%; + transform: translateY(-50%); +} + +.container strong { + font-size: 20px; + line-height: 26px; +} + +.container p { + font-size: 16px; + line-height: 22px; + color: #8c8c8c; + margin: 0; +} + +.container a { + text-decoration: none; +} \ No newline at end of file diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx new file mode 100644 index 0000000..093861b --- /dev/null +++ b/03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx @@ -0,0 +1,12 @@ +import './ExploreContainer.css'; + +const ExploreContainer = ({ name }) => { + return ( +
+ {name} +

Explore UI Components

+
+ ); +}; + +export default ExploreContainer; diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/index.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/index.tsx index 8509111..4408f97 100644 --- a/03_source/mobile/src/pages/DemoFloatingTabs/index.tsx +++ b/03_source/mobile/src/pages/DemoFloatingTabs/index.tsx @@ -1,29 +1,45 @@ import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react'; -import { cloudOutline, searchOutline } from 'ionicons/icons'; +import { cloudOutline, cogOutline, homeOutline, listOutline, searchOutline } from 'ionicons/icons'; import { Route, Redirect } from 'react-router'; -import Tab1 from './AppPages/Tab1'; -import Tab2 from './AppPages/Tab2'; +// import Tab1 from './AppPages/Tab1'; +// import Tab2 from './AppPages/Tab2'; + +import Tab1 from './pages/Tab1'; +import Tab2 from './pages/Tab2'; +import Tab3 from './pages/Tab3'; import './style.scss'; +import './theme/floating-tab-bar.css'; function DemoFloatingTabs() { return ( + {/* - + */} + + + + + + + + + {/* */} + {/* Dashboard @@ -32,6 +48,20 @@ function DemoFloatingTabs() { Search + */} + {/* */} + + + {/* Tab 1 */} + + + + {/* Tab 2 */} + + + + {/* Tab 3 */} + {' '} ); diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.css b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.css new file mode 100644 index 0000000..e69de29 diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx new file mode 100644 index 0000000..ef9aa18 --- /dev/null +++ b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx @@ -0,0 +1,26 @@ +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import ExploreContainer from '../components/ExploreContainer'; +import './Tab1.css'; +import React from 'react'; + +const Tab1 = (): React.JSX.Element => { + return ( + + + + Floating Tab Bar + + + + + + Floating Tab Bar + + + + + + ); +}; + +export default Tab1; diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.css b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.css new file mode 100644 index 0000000..e69de29 diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.tsx new file mode 100644 index 0000000..048ff80 --- /dev/null +++ b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.tsx @@ -0,0 +1,25 @@ +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import ExploreContainer from '../components/ExploreContainer'; +import './Tab2.css'; + +const Tab2 = (): React.JSX.Element => { + return ( + + + + Floating Tab Bar + + + + + + Floating Tab Bar + + + + + + ); +}; + +export default Tab2; diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.css b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.css new file mode 100644 index 0000000..e69de29 diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.tsx b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.tsx new file mode 100644 index 0000000..54cfd9e --- /dev/null +++ b/03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.tsx @@ -0,0 +1,25 @@ +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import ExploreContainer from '../components/ExploreContainer'; +import './Tab3.css'; + +const Tab3 = (): React.JSX.Element => { + return ( + + + + Floating Tab Bar + + + + + + Floating Tab Bar + + + + + + ); +}; + +export default Tab3; diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/style.scss b/03_source/mobile/src/pages/DemoFloatingTabs/style.scss index 37c1e1a..d202499 100644 --- a/03_source/mobile/src/pages/DemoFloatingTabs/style.scss +++ b/03_source/mobile/src/pages/DemoFloatingTabs/style.scss @@ -1,103 +1,82 @@ -#about-page { - ion-toolbar { - position: absolute; +/* +Ionic Variables and Theming. For more info, please see: +http://ionicframework.com/docs/theming/ +*/ - top: 0; - left: 0; - right: 0; +/** Ionic CSS Variables **/ - --background: transparent; - --color: white; - } +.floating-tab-bar { + * { + /** primary **/ + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; - ion-toolbar ion-back-button, - ion-toolbar ion-button, - ion-toolbar ion-menu-button { - --color: white; - } + /** secondary **/ + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; - .about-header { - position: relative; + /** tertiary **/ + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; - width: 100%; - height: 30%; - } + /** success **/ + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; - .about-header .about-image { - position: absolute; + /** warning **/ + --ion-color-warning: #ffc409; + --ion-color-warning-rgb: 255, 196, 9; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0ac08; + --ion-color-warning-tint: #ffca22; - top: 0; - left: 0; - bottom: 0; - right: 0; + /** danger **/ + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; - background-position: center; - background-size: cover; - background-repeat: no-repeat; + /** dark **/ + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; - opacity: 0; + /** medium **/ + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; - transition: opacity 500ms ease-in-out; - } - - .about-header .madison { - background-image: url('/assets/WeatherDemo/img/about/madison.jpg'); - } - - .about-header .austin { - background-image: url('/assets/WeatherDemo/img/about/austin.jpg'); - } - - .about-header .chicago { - background-image: url('/assets/WeatherDemo/img/about/chicago.jpg'); - } - - .about-header .seattle { - background-image: url('/assets/WeatherDemo/img/about/seattle.jpg'); - } - - .about-info { - position: relative; - margin-top: -10px; - border-radius: 10px; - background: var(--ion-background-color, #fff); - z-index: 2; // display rounded border above header image - } - - .about-info h3 { - margin-top: 0; - } - - .about-info ion-list { - padding-top: 0; - } - - .about-info p { - line-height: 130%; - - color: var(--ion-color-dark); - } - - .about-info ion-icon { - margin-inline-end: 32px; - } - - /* - * iOS Only - */ - - .ios .about-info { - --ion-padding: 19px; - } - - .ios .about-info h3 { - font-weight: 700; + /** light **/ + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; } } - -#date-input-popover { - --offset-y: -var(--ion-safe-area-bottom); - - --max-width: 90%; - --width: 336px; -} diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.css b/03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.css new file mode 100644 index 0000000..2c3e05e --- /dev/null +++ b/03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.css @@ -0,0 +1,25 @@ +:root { + --ion-background-color: white; + --ion-tab-bar-color: rgb(92, 123, 207); + --ion-tab-bar-color-selected: rgb(255, 255, 255); +} + +ion-tab-bar { + --background: rgb(44, 83, 192); + box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.4); + border-radius: 16px !important; + + height: 50px; + width: 90%; + padding-top: 5px; + padding-bottom: 5px; + + bottom: 20px; + position: relative; + margin: 0 auto !important; + border-top: none; +} + +ion-tab-button { + border-radius: 16px !important; +} diff --git a/03_source/mobile/src/pages/DemoFloatingTabs/theme/variables.css b/03_source/mobile/src/pages/DemoFloatingTabs/theme/variables.css new file mode 100644 index 0000000..088e83c --- /dev/null +++ b/03_source/mobile/src/pages/DemoFloatingTabs/theme/variables.css @@ -0,0 +1,77 @@ +/* Ionic Variables and Theming. For more info, please see: +http://ionicframework.com/docs/theming/ */ + +/** Ionic CSS Variables **/ +:root { + /** primary **/ + --ion-color-primary: #3880ff; + --ion-color-primary-rgb: 56, 128, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3171e0; + --ion-color-primary-tint: #4c8dff; + + /** secondary **/ + --ion-color-secondary: #3dc2ff; + --ion-color-secondary-rgb: 61, 194, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #36abe0; + --ion-color-secondary-tint: #50c8ff; + + /** tertiary **/ + --ion-color-tertiary: #5260ff; + --ion-color-tertiary-rgb: 82, 96, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #4854e0; + --ion-color-tertiary-tint: #6370ff; + + /** success **/ + --ion-color-success: #2dd36f; + --ion-color-success-rgb: 45, 211, 111; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #28ba62; + --ion-color-success-tint: #42d77d; + + /** warning **/ + --ion-color-warning: #ffc409; + --ion-color-warning-rgb: 255, 196, 9; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0ac08; + --ion-color-warning-tint: #ffca22; + + /** danger **/ + --ion-color-danger: #eb445a; + --ion-color-danger-rgb: 235, 68, 90; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #cf3c4f; + --ion-color-danger-tint: #ed576b; + + /** dark **/ + --ion-color-dark: #222428; + --ion-color-dark-rgb: 34, 36, 40; + --ion-color-dark-contrast: #ffffff; + --ion-color-dark-contrast-rgb: 255, 255, 255; + --ion-color-dark-shade: #1e2023; + --ion-color-dark-tint: #383a3e; + + /** medium **/ + --ion-color-medium: #92949c; + --ion-color-medium-rgb: 146, 148, 156; + --ion-color-medium-contrast: #ffffff; + --ion-color-medium-contrast-rgb: 255, 255, 255; + --ion-color-medium-shade: #808289; + --ion-color-medium-tint: #9d9fa6; + + /** light **/ + --ion-color-light: #f4f5f8; + --ion-color-light-rgb: 244, 245, 248; + --ion-color-light-contrast: #000000; + --ion-color-light-contrast-rgb: 0, 0, 0; + --ion-color-light-shade: #d7d8da; + --ion-color-light-tint: #f5f6f9; +} \ No newline at end of file