mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-24 06:22:45 +08:00
02678f3652
Issue number: resolves #27470 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Passing multiple elements in to an inline modal causes `.ion-page` to not get set. This causes content to get pushed off the bottom of the modal equal to the height of the header. React has some special CSS that prevents this:eb2772c0ce/packages/react/src/components/createInlineOverlayComponent.tsx (L137-L140)However, I think this should be delegated to `.ion-page` instead so the behavior is consistent across frameworks. For example, Angular uses `.ion-page`:eb2772c0ce/angular/src/directives/overlays/modal.ts (L82)## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Inline overlays in Ionic React and Ionic Vue wrap child content in `.ion-delegate-host.ion-page`. - Removed the custom flex styles from Ionic React as `.ion-page` has its own styles. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Revised Design Doc: https://github.com/ionic-team/ionic-framework-design-documents/pull/84
70 lines
2.8 KiB
TypeScript
70 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { Route } from 'react-router-dom';
|
|
import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
|
|
import { IonReactRouter } from '@ionic/react-router';
|
|
|
|
/* Core CSS required for Ionic components to work properly */
|
|
import '@ionic/react/css/core.css';
|
|
|
|
/* Basic CSS for apps built with Ionic */
|
|
import '@ionic/react/css/normalize.css';
|
|
import '@ionic/react/css/structure.css';
|
|
import '@ionic/react/css/typography.css';
|
|
|
|
/* Optional CSS utils that can be commented out */
|
|
import '@ionic/react/css/padding.css';
|
|
import '@ionic/react/css/float-elements.css';
|
|
import '@ionic/react/css/text-alignment.css';
|
|
import '@ionic/react/css/text-transformation.css';
|
|
import '@ionic/react/css/flex-utils.css';
|
|
import '@ionic/react/css/display.css';
|
|
|
|
/* Theme variables */
|
|
import './theme/variables.css';
|
|
import Main from './pages/Main';
|
|
import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
|
|
import OverlayComponents from './pages/overlay-components/OverlayComponents';
|
|
import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted';
|
|
import Tabs from './pages/Tabs';
|
|
import Icons from './pages/Icons';
|
|
import NavComponent from './pages/navigation/NavComponent';
|
|
import IonModalConditionalSibling from './pages/overlay-components/IonModalConditionalSibling';
|
|
import IonModalConditional from './pages/overlay-components/IonModalConditional';
|
|
import IonModalDatetimeButton from './pages/overlay-components/IonModalDatetimeButton';
|
|
import IonPopoverNested from './pages/overlay-components/IonPopoverNested';
|
|
import IonModalMultipleChildren from './pages/overlay-components/IonModalMultipleChildren';
|
|
|
|
setupIonicReact();
|
|
|
|
const App: React.FC = () => (
|
|
<IonApp>
|
|
<IonReactRouter>
|
|
<IonRouterOutlet>
|
|
<Route path="/" component={Main} />
|
|
<Route path="/overlay-hooks" component={OverlayHooks} />
|
|
<Route path="/overlay-components" component={OverlayComponents} />
|
|
<Route path="/overlay-components/nested-popover" component={IonPopoverNested} />
|
|
<Route
|
|
path="/overlay-components/modal-conditional-sibling"
|
|
component={IonModalConditionalSibling}
|
|
/>
|
|
<Route path="/overlay-components/modal-conditional" component={IonModalConditional} />
|
|
<Route
|
|
path="/overlay-components/modal-datetime-button"
|
|
component={IonModalDatetimeButton}
|
|
/>
|
|
<Route
|
|
path="/overlay-components/modal-multiple-children"
|
|
component={IonModalMultipleChildren}
|
|
/>
|
|
<Route path="/keep-contents-mounted" component={KeepContentsMounted} />
|
|
<Route path="/navigation" component={NavComponent} />
|
|
<Route path="/tabs" component={Tabs} />
|
|
<Route path="/icons" component={Icons} />
|
|
</IonRouterOutlet>
|
|
</IonReactRouter>
|
|
</IonApp>
|
|
);
|
|
|
|
export default App;
|