update DemoStickyBottomSheetExample,
This commit is contained in:
@@ -1,12 +1,12 @@
|
|||||||
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
import { IonRouterOutlet, IonTabs } from '@ionic/react';
|
||||||
|
|
||||||
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
|
||||||
import { Route, Redirect } from 'react-router';
|
import { Route, Redirect } from 'react-router';
|
||||||
|
|
||||||
import './theme/variables.scss';
|
import './theme/variables.scss';
|
||||||
import Home from './pages/Home';
|
import Home from './pages/Home';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
function DemoStickyBottomSheetExample() {
|
function DemoStickyBottomSheetExample(): React.JSX.Element {
|
||||||
return (
|
return (
|
||||||
<IonTabs className="demo-sticky-bottom-sheet-example">
|
<IonTabs className="demo-sticky-bottom-sheet-example">
|
||||||
<IonRouterOutlet>
|
<IonRouterOutlet>
|
||||||
@@ -20,18 +20,6 @@ function DemoStickyBottomSheetExample() {
|
|||||||
to="/demo-sticky-bottom-sheet-example/home"
|
to="/demo-sticky-bottom-sheet-example/home"
|
||||||
/>
|
/>
|
||||||
</IonRouterOutlet>
|
</IonRouterOutlet>
|
||||||
|
|
||||||
{/* */}
|
|
||||||
<IonTabBar slot="bottom">
|
|
||||||
<IonTabButton tab="tab1" href="/demo-sticky-bottom-sheet-example/tab1">
|
|
||||||
<IonIcon icon={cloudOutline} />
|
|
||||||
<IonLabel>Dashboard</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
<IonTabButton tab="tab2" href="/demo-sticky-bottom-sheet-example/tab2">
|
|
||||||
<IonIcon icon={searchOutline} />
|
|
||||||
<IonLabel>Search</IonLabel>
|
|
||||||
</IonTabButton>
|
|
||||||
</IonTabBar>
|
|
||||||
</IonTabs>
|
</IonTabs>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@@ -9,12 +9,12 @@ import {
|
|||||||
IonToolbar,
|
IonToolbar,
|
||||||
useIonRouter,
|
useIonRouter,
|
||||||
} from '@ionic/react';
|
} from '@ionic/react';
|
||||||
import { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { BottomSheet } from '../components/BottomSheet';
|
import { BottomSheet } from '../components/BottomSheet';
|
||||||
import './Home.scss';
|
import './Home.scss';
|
||||||
import { chevronBackOutline } from 'ionicons/icons';
|
import { chevronBackOutline } from 'ionicons/icons';
|
||||||
|
|
||||||
const Home: React.FC = () => {
|
const Home = (): React.JSX.Element => {
|
||||||
const [showBottomSheet, setShowBottomSheet] = useState<boolean>(true);
|
const [showBottomSheet, setShowBottomSheet] = useState<boolean>(true);
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
@@ -31,7 +31,7 @@ const Home: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<IonPage>
|
<IonPage>
|
||||||
<IonHeader>
|
<IonHeader className="ion-no-border">
|
||||||
<IonToolbar>
|
<IonToolbar>
|
||||||
<IonTitle>Ionic Sticky Bottom Sheet</IonTitle>
|
<IonTitle>Ionic Sticky Bottom Sheet</IonTitle>
|
||||||
|
|
||||||
|
@@ -3,7 +3,6 @@
|
|||||||
http://ionicframework.com/docs/theming/ */
|
http://ionicframework.com/docs/theming/ */
|
||||||
|
|
||||||
/** Ionic CSS Variables **/
|
/** Ionic CSS Variables **/
|
||||||
:root {
|
|
||||||
/** primary **/
|
/** primary **/
|
||||||
--ion-color-primary: #3880ff;
|
--ion-color-primary: #3880ff;
|
||||||
--ion-color-primary-rgb: 56, 128, 255;
|
--ion-color-primary-rgb: 56, 128, 255;
|
||||||
@@ -75,7 +74,6 @@ http://ionicframework.com/docs/theming/ */
|
|||||||
--ion-color-light-contrast-rgb: 0, 0, 0;
|
--ion-color-light-contrast-rgb: 0, 0, 0;
|
||||||
--ion-color-light-shade: #d7d8da;
|
--ion-color-light-shade: #d7d8da;
|
||||||
--ion-color-light-tint: #f5f6f9;
|
--ion-color-light-tint: #f5f6f9;
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
/*
|
/*
|
||||||
|
Reference in New Issue
Block a user