louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update floating tab bar,

Browse Source
This commit is contained in:
louiscklaw
2025-06-06 13:09:59 +08:00
parent 7cfbcc1573
commit 8f75226763
12 changed files with 318 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.css Normal file
View File

@@ -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;
}

12
03_source/mobile/src/pages/DemoFloatingTabs/components/ExploreContainer.tsx Normal file
View File

@@ -0,0 +1,12 @@
import './ExploreContainer.css';
const ExploreContainer = ({ name }) => {
return (
<div className="container">
<strong>{name}</strong>
<p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
</div>
);
};
export default ExploreContainer;

38
03_source/mobile/src/pages/DemoFloatingTabs/index.tsx
View File

@@ -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 (
<IonTabs>
<IonRouterOutlet>
{/*
<Route exact path="/demo-floating-tabs/tab1">
<Tab1 />
</Route>
<Route exact path="/demo-floating-tabs/tab2">
<Tab2 />
</Route>
*/}
<Route exact path="/demo-floating-tabs/tab1">
<Tab1 />
</Route>
<Route exact path="/demo-floating-tabs/tab2">
<Tab2 />
</Route>
<Route path="/demo-floating-tabs/tab3">
<Tab3 />
</Route>
<Redirect exact path="/demo-floating-tabs" to="/demo-floating-tabs/tab1" />
</IonRouterOutlet>
{/* */}
<IonTabBar slot="bottom">
{/*
<IonTabButton tab="tab1" href="/demo-floating-tabs/tab1">
<IonIcon icon={cloudOutline} />
<IonLabel>Dashboard</IonLabel>
@@ -32,6 +48,20 @@ function DemoFloatingTabs() {
<IonIcon icon={searchOutline} />
<IonLabel>Search</IonLabel>
</IonTabButton>
*/}
{/* */}
<IonTabButton tab="tab1" href="/demo-floating-tabs/tab1">
<IonIcon icon={homeOutline} />
{/* <IonLabel>Tab 1</IonLabel> */}
</IonTabButton>
<IonTabButton tab="tab2" href="/demo-floating-tabs/tab2">
<IonIcon icon={listOutline} />
{/* <IonLabel>Tab 2</IonLabel> */}
</IonTabButton>
<IonTabButton tab="tab3" href="/demo-floating-tabs/tab3">
<IonIcon icon={cogOutline} />
{/* <IonLabel>Tab 3</IonLabel> */}
</IonTabButton>{' '}
</IonTabBar>
</IonTabs>
);

0
03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.css Normal file
View File

26
03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab1.tsx Normal file
View File

@@ -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 (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Floating Tab Bar</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Floating Tab Bar</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 1 page" />
</IonContent>
</IonPage>
);
};
export default Tab1;

0
03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.css Normal file
View File

25
03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab2.tsx Normal file
View File

@@ -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 (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Floating Tab Bar</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Floating Tab Bar</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 2 page" />
</IonContent>
</IonPage>
);
};
export default Tab2;

0
03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.css Normal file
View File

25
03_source/mobile/src/pages/DemoFloatingTabs/pages/Tab3.tsx Normal file
View File

@@ -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 (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Floating Tab Bar</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Floating Tab Bar</IonTitle>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 3 page" />
</IonContent>
</IonPage>
);
};
export default Tab3;

161
03_source/mobile/src/pages/DemoFloatingTabs/style.scss
View File

@@ -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;
}

25
03_source/mobile/src/pages/DemoFloatingTabs/theme/floating-tab-bar.css Normal file
View File

@@ -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;
}

77
03_source/mobile/src/pages/DemoFloatingTabs/theme/variables.css Normal file
View File

@@ -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;
}