mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +08:00
docs(popover): add docs, usage, fix styling to guide
This commit is contained in:
Brandy Carney
12
packages/core/src/components.d.ts
vendored
12
packages/core/src/components.d.ts
vendored
@ -4,9 +4,6 @@
|
||||
* and imports for stencil collections that might be configured in your stencil.config.js file
|
||||
*/
|
||||
|
||||
import {
|
||||
ActionSheetButton,
|
||||
} from './components/action-sheet/action-sheet';
|
||||
import {
|
||||
AnimationBuilder,
|
||||
FrameworkDelegate,
|
||||
@ -14,6 +11,9 @@ import {
|
||||
PickerOptions,
|
||||
RouterDelegate,
|
||||
} from './index';
|
||||
import {
|
||||
ActionSheetButton,
|
||||
} from './components/action-sheet/action-sheet';
|
||||
import {
|
||||
AlertButton,
|
||||
AlertInput,
|
||||
@ -1600,6 +1600,7 @@ declare global {
|
||||
cssClass?: string;
|
||||
dismissOnPageChange?: boolean;
|
||||
duration?: number;
|
||||
enableBackdropDismiss?: boolean;
|
||||
enterAnimation?: AnimationBuilder;
|
||||
leaveAnimation?: AnimationBuilder;
|
||||
showBackdrop?: boolean;
|
||||
@ -2057,14 +2058,11 @@ declare global {
|
||||
export interface IonPickerAttributes extends HTMLAttributes {
|
||||
buttons?: PickerButton[];
|
||||
columns?: PickerColumn[];
|
||||
content?: string;
|
||||
cssClass?: string;
|
||||
dismissOnPageChange?: boolean;
|
||||
duration?: number;
|
||||
enableBackdropDismiss?: boolean;
|
||||
enterAnimation?: AnimationBuilder;
|
||||
leaveAnimation?: AnimationBuilder;
|
||||
pickerId?: number;
|
||||
showBackdrop?: boolean;
|
||||
willAnimate?: boolean;
|
||||
}
|
||||
@ -2166,7 +2164,6 @@ declare global {
|
||||
ev?: Event;
|
||||
leaveAnimation?: AnimationBuilder;
|
||||
mode?: 'ios' | 'md';
|
||||
popoverId?: number;
|
||||
showBackdrop?: boolean;
|
||||
translucent?: boolean;
|
||||
willAnimate?: boolean;
|
||||
@ -3411,7 +3408,6 @@ declare global {
|
||||
message?: string;
|
||||
position?: string;
|
||||
showCloseButton?: boolean;
|
||||
toastId?: number;
|
||||
translucent?: boolean;
|
||||
willAnimate?: boolean;
|
||||
}
|
||||
|
||||
@ -1,13 +1,5 @@
|
||||
import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
|
||||
import {
|
||||
Animation,
|
||||
AnimationBuilder,
|
||||
AnimationController,
|
||||
Config,
|
||||
DomController,
|
||||
OverlayDismissEvent,
|
||||
OverlayDismissEventDetail
|
||||
} from '../../index';
|
||||
import { Animation, AnimationBuilder, AnimationController, Config, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
|
||||
|
||||
import { domControllerAsync, isDef, playAnimationAsync } from '../../utils/helpers';
|
||||
import { createThemedClasses, getClassMap } from '../../utils/theme';
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
|
||||
An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `title`, `subTitle` and `message`.
|
||||
|
||||
Alerts can be programmatically opened using an [Alert Controller](../../alert-controller/AlertController). They can be customized by passing alert options in the first argument of the alert controller's create method.
|
||||
|
||||
### Creating
|
||||
|
||||
Alerts can be created using a [Alert Controller](../../alert-controller/AlertController). They can be customized by passing alert options in the first argument of the alert controller's create method.
|
||||
|
||||
|
||||
### Alert Buttons
|
||||
|
||||
@ -2,12 +2,10 @@
|
||||
|
||||
An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation.
|
||||
|
||||
Loading indicators can be programmatically opened using a [Loading Controller](../../loading-controller/LoadingController). They can be customized by passing loading options in the first argument of the loading controller's create method.
|
||||
|
||||
|
||||
### Creating
|
||||
|
||||
You can pass all of the loading options in the first argument of the create method. The spinner name should be passed in the `spinner` property, and any optional HTML can be passed in the `content` property. If a value is not passed to `spinner` the loading indicator will use the spinner specified by the platform.
|
||||
Loading indicators can be created using a [Loading Controller](../../loading-controller/LoadingController). They can be customized by passing loading options in the first argument of the loading controller's create method. The spinner name should be passed in the `spinner` property, and any optional HTML can be passed in the `content` property. If a value is not passed to `spinner` the loading indicator will use the spinner specified by the platform.
|
||||
|
||||
|
||||
### Dismissing
|
||||
|
||||
@ -1,17 +1,7 @@
|
||||
import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
|
||||
|
||||
import {
|
||||
Animation,
|
||||
AnimationBuilder,
|
||||
AnimationController,
|
||||
Config,
|
||||
DomController,
|
||||
OverlayDismissEvent,
|
||||
OverlayDismissEventDetail
|
||||
} from '../../index';
|
||||
import { Animation, AnimationBuilder, AnimationController, Config, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
|
||||
import { domControllerAsync, playAnimationAsync } from '../../utils/helpers';
|
||||
|
||||
|
||||
import iosEnterAnimation from './animations/ios.enter';
|
||||
import iosLeaveAnimation from './animations/ios.leave';
|
||||
import { getClassMap } from '../../utils/theme';
|
||||
|
||||
@ -1,25 +1,19 @@
|
||||
# ion-popover-controller
|
||||
|
||||
A Popover is a dialog that appears on top of the current page.
|
||||
It can be used for anything, but generally it is used for overflow
|
||||
actions that don't fit in the navigation bar.
|
||||
|
||||
### Creating
|
||||
A popover can be created by calling the `create` method. The view
|
||||
to display in the popover should be passed as the first argument.
|
||||
Any data to pass to the popover view can optionally be passed in
|
||||
the second argument. Options for the popover can optionally be
|
||||
passed in the third argument. See the [create](#create) method
|
||||
below for all available options.
|
||||
|
||||
### Presenting
|
||||
To present a popover, call the `present` method on a PopoverController instance.
|
||||
In order to position the popover relative to the element clicked, a click event
|
||||
needs to be passed into the options of the the `present` method. If the event
|
||||
is not passed, the popover will be positioned in the center of the current
|
||||
view. See the [usage](#usage) section for an example of passing this event.
|
||||
Popover controllers programmatically control the popover component. Popovers can be created and dismissed from the popover controller. View the [Popover](../../popover/Popover) documentation for a full list of options to pass upon creation.
|
||||
|
||||
```javascript
|
||||
async function presentPopover() {
|
||||
const popoverController = document.querySelector('ion-popover-controller');
|
||||
await popoverController.componentOnReady();
|
||||
|
||||
const popoverElement = await popoverController.create({
|
||||
component: 'profile-page',
|
||||
ev: event
|
||||
});
|
||||
return await popoverElement.present();
|
||||
}
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
@ -1,14 +1,5 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
|
||||
import {
|
||||
Animation,
|
||||
AnimationBuilder,
|
||||
AnimationController,
|
||||
Config,
|
||||
DomController,
|
||||
FrameworkDelegate,
|
||||
OverlayDismissEvent,
|
||||
OverlayDismissEventDetail
|
||||
} from '../../index';
|
||||
import { Animation, AnimationBuilder, AnimationController, Config, DomController, FrameworkDelegate, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
|
||||
|
||||
import { DomFrameworkDelegate } from '../../utils/dom-framework-delegate';
|
||||
import { domControllerAsync, playAnimationAsync } from '../../utils/helpers';
|
||||
@ -30,9 +21,83 @@ import mdLeaveAnimation from './animations/md.leave';
|
||||
}
|
||||
})
|
||||
export class Popover {
|
||||
popoverId: number;
|
||||
|
||||
private animation: Animation;
|
||||
private usersComponentElement: HTMLElement;
|
||||
|
||||
@Element() private el: HTMLElement;
|
||||
|
||||
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop({ context: 'dom' }) dom: DomController;
|
||||
@Prop({ mutable: true }) delegate: FrameworkDelegate;
|
||||
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md';
|
||||
|
||||
/**
|
||||
* Animation to use when the popover is presented.
|
||||
*/
|
||||
@Prop() enterAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* Animation to use when the popover is dismissed.
|
||||
*/
|
||||
@Prop() leaveAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* The component to display inside of the popover.
|
||||
*/
|
||||
@Prop() component: string;
|
||||
|
||||
/**
|
||||
* The data to pass to the popover component.
|
||||
*/
|
||||
@Prop() data: any = {};
|
||||
|
||||
/**
|
||||
* Additional classes to apply for custom CSS. If multiple classes are
|
||||
* provided they should be separated by spaces.
|
||||
*/
|
||||
@Prop() cssClass: string;
|
||||
|
||||
/**
|
||||
* If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
*/
|
||||
@Prop() enableBackdropDismiss = true;
|
||||
|
||||
/**
|
||||
* The event to pass to the popover animation.
|
||||
*/
|
||||
@Prop() ev: Event;
|
||||
|
||||
/**
|
||||
* If true, a backdrop will be displayed behind the popover. Defaults to `true`.
|
||||
*/
|
||||
@Prop() showBackdrop = true;
|
||||
|
||||
/**
|
||||
* If true, the popover will be translucent. Defaults to `false`.
|
||||
*/
|
||||
@Prop() translucent = false;
|
||||
|
||||
/**
|
||||
* If true, the popover will animate. Defaults to `true`.
|
||||
*/
|
||||
@Prop() willAnimate = true;
|
||||
|
||||
/**
|
||||
* Emitted after the popover has loaded.
|
||||
*/
|
||||
@ -63,40 +128,9 @@ export class Popover {
|
||||
*/
|
||||
@Event() ionPopoverDidUnload: EventEmitter<PopoverEventDetail>;
|
||||
|
||||
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop({ context: 'dom' }) dom: DomController;
|
||||
|
||||
/**
|
||||
* The color to use from your Sass `$colors` map.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
|
||||
* For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
* Present the popover overlay after it has been created.
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md';
|
||||
|
||||
@Prop() component: string;
|
||||
@Prop() data: any = {};
|
||||
@Prop() cssClass: string;
|
||||
@Prop() enableBackdropDismiss = true;
|
||||
@Prop() enterAnimation: AnimationBuilder;
|
||||
@Prop() leaveAnimation: AnimationBuilder;
|
||||
@Prop() ev: Event;
|
||||
@Prop() popoverId: number;
|
||||
@Prop() showBackdrop = true;
|
||||
@Prop() translucent = false;
|
||||
@Prop() willAnimate = true;
|
||||
@Prop({ mutable: true }) delegate: FrameworkDelegate;
|
||||
|
||||
private animation: Animation;
|
||||
private usersComponentElement: HTMLElement;
|
||||
|
||||
@Method()
|
||||
present() {
|
||||
if (this.animation) {
|
||||
@ -141,6 +175,9 @@ export class Popover {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss the popover overlay after it has been presented.
|
||||
*/
|
||||
@Method()
|
||||
dismiss(data?: any, role?: string) {
|
||||
if (this.animation) {
|
||||
@ -224,8 +261,7 @@ export class Popover {
|
||||
onClick={this.backdropClick.bind(this)}
|
||||
class={{
|
||||
...backdropClasses
|
||||
}}
|
||||
/>,
|
||||
}}></ion-backdrop>,
|
||||
<div class={wrapperClasses}>
|
||||
<div class='popover-arrow' />
|
||||
<div class='popover-content'>
|
||||
|
||||
@ -1,6 +1,27 @@
|
||||
# ion-popover
|
||||
|
||||
A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar.
|
||||
|
||||
### Creating
|
||||
|
||||
Popovers can be created using a [Popover Controller](../../popover-controller/PopoverController). They can be customized by passing popover options in the first argument of the popover controller's create method.
|
||||
|
||||
### Presenting
|
||||
|
||||
To present a popover, call the `present` method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the `present` method. If the event is not passed, the popover will be positioned in the center of the viewport.
|
||||
|
||||
```javascript
|
||||
async function presentPopover() {
|
||||
const popoverController = document.querySelector('ion-popover-controller');
|
||||
await popoverController.componentOnReady();
|
||||
|
||||
const popoverElement = await popoverController.create({
|
||||
component: 'profile-page',
|
||||
ev: event
|
||||
});
|
||||
return await popoverElement.present();
|
||||
}
|
||||
```
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
@ -20,16 +41,23 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
string
|
||||
|
||||
The component to display inside of the popover.
|
||||
|
||||
|
||||
#### cssClass
|
||||
|
||||
string
|
||||
|
||||
Additional classes to apply for custom CSS. If multiple classes are
|
||||
provided they should be separated by spaces.
|
||||
|
||||
|
||||
#### data
|
||||
|
||||
any
|
||||
|
||||
The data to pass to the popover component.
|
||||
|
||||
|
||||
#### delegate
|
||||
|
||||
@ -40,21 +68,29 @@ any
|
||||
|
||||
boolean
|
||||
|
||||
If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
|
||||
|
||||
#### enterAnimation
|
||||
|
||||
|
||||
|
||||
Animation to use when the popover is presented.
|
||||
|
||||
|
||||
#### ev
|
||||
|
||||
|
||||
|
||||
The event to pass to the popover animation.
|
||||
|
||||
|
||||
#### leaveAnimation
|
||||
|
||||
|
||||
|
||||
Animation to use when the popover is dismissed.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
@ -65,25 +101,26 @@ Possible values are: `"ios"` or `"md"`.
|
||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
|
||||
|
||||
#### popoverId
|
||||
|
||||
number
|
||||
|
||||
|
||||
#### showBackdrop
|
||||
|
||||
boolean
|
||||
|
||||
If true, a backdrop will be displayed behind the popover. Defaults to `true`.
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
|
||||
If true, the popover will be translucent. Defaults to `false`.
|
||||
|
||||
|
||||
#### willAnimate
|
||||
|
||||
boolean
|
||||
|
||||
If true, the popover will animate. Defaults to `true`.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
@ -100,16 +137,23 @@ For more information, see [Theming your App](/docs/theming/theming-your-app).
|
||||
|
||||
string
|
||||
|
||||
The component to display inside of the popover.
|
||||
|
||||
|
||||
#### css-class
|
||||
|
||||
string
|
||||
|
||||
Additional classes to apply for custom CSS. If multiple classes are
|
||||
provided they should be separated by spaces.
|
||||
|
||||
|
||||
#### data
|
||||
|
||||
any
|
||||
|
||||
The data to pass to the popover component.
|
||||
|
||||
|
||||
#### delegate
|
||||
|
||||
@ -120,21 +164,29 @@ any
|
||||
|
||||
boolean
|
||||
|
||||
If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
|
||||
|
||||
#### enter-animation
|
||||
|
||||
|
||||
|
||||
Animation to use when the popover is presented.
|
||||
|
||||
|
||||
#### ev
|
||||
|
||||
|
||||
|
||||
The event to pass to the popover animation.
|
||||
|
||||
|
||||
#### leave-animation
|
||||
|
||||
|
||||
|
||||
Animation to use when the popover is dismissed.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
@ -145,25 +197,26 @@ Possible values are: `"ios"` or `"md"`.
|
||||
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
|
||||
|
||||
|
||||
#### popover-id
|
||||
|
||||
number
|
||||
|
||||
|
||||
#### show-backdrop
|
||||
|
||||
boolean
|
||||
|
||||
If true, a backdrop will be displayed behind the popover. Defaults to `true`.
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
|
||||
If true, the popover will be translucent. Defaults to `false`.
|
||||
|
||||
|
||||
#### will-animate
|
||||
|
||||
boolean
|
||||
|
||||
If true, the popover will animate. Defaults to `true`.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
@ -201,9 +254,13 @@ Emitted before the popover has presented.
|
||||
|
||||
#### dismiss()
|
||||
|
||||
Dismiss the popover overlay after it has been presented.
|
||||
|
||||
|
||||
#### present()
|
||||
|
||||
Present the popover overlay after it has been created.
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user