update floating action button,
This commit is contained in:
louiscklaw
@@ -1,24 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.floating-tab-bar {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,19 @@
|
||||
import './ExploreContainer.css';
|
||||
import './ExploreContainer.scss';
|
||||
|
||||
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>
|
||||
<p>
|
||||
Explore{' '}
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://ionicframework.com/docs/components"
|
||||
>
|
||||
UI Components
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,30 +1,19 @@
|
||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
||||
import { IonIcon, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
||||
|
||||
import { cloudOutline, cogOutline, homeOutline, listOutline, searchOutline } from 'ionicons/icons';
|
||||
import { cogOutline, homeOutline, listOutline } from 'ionicons/icons';
|
||||
import { Route, Redirect } from 'react-router';
|
||||
|
||||
// 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';
|
||||
import './theme/style.scss';
|
||||
import './theme/floating-tab-bar.scss';
|
||||
|
||||
function DemoFloatingTabs() {
|
||||
return (
|
||||
<IonTabs>
|
||||
<IonTabs className="demo-floating-tabs">
|
||||
<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>
|
||||
@@ -37,31 +26,18 @@ function DemoFloatingTabs() {
|
||||
<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>
|
||||
</IonTabButton>
|
||||
<IonTabButton tab="tab2" href="/demo-floating-tabs/tab2">
|
||||
<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>{' '}
|
||||
</IonTabButton>
|
||||
</IonTabBar>
|
||||
</IonTabs>
|
||||
);
|
||||
|
||||
@@ -1,14 +1,37 @@
|
||||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import {
|
||||
IonButton,
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonIcon,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
useIonRouter,
|
||||
} from '@ionic/react';
|
||||
import ExploreContainer from '../components/ExploreContainer';
|
||||
import './Tab1.css';
|
||||
import React from 'react';
|
||||
import { chevronBackOutline } from 'ionicons/icons';
|
||||
|
||||
const Tab1 = (): React.JSX.Element => {
|
||||
const router = useIonRouter();
|
||||
|
||||
function handleBackClick() {
|
||||
router.goBack();
|
||||
}
|
||||
|
||||
return (
|
||||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Floating Tab Bar</IonTitle>
|
||||
|
||||
<IonButtons slot="start">
|
||||
<IonButton onClick={() => handleBackClick()}>
|
||||
<IonIcon icon={chevronBackOutline} color="primary" />
|
||||
</IonButton>
|
||||
</IonButtons>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
: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;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
.demo-floating-tabs {
|
||||
* {
|
||||
--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;
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user