javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(popover): default alignment to 'center' for ios mode (#24815)

Browse Source
This commit is contained in:
Amanda Smith
2022-02-18 13:39:03 -06:00
committed by GitHub
parent 0a8f44359a
commit 243f67362f
4 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -877,7 +877,7 @@ ion-picker,css-prop,--min-width
ion-picker,css-prop,--width ion-picker,css-prop,--width
ion-popover,shadow ion-popover,shadow
ion-popover,prop,alignment,"center" | "end" | "start",'start',false,false ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false
ion-popover,prop,animated,boolean,true,false,false ion-popover,prop,animated,boolean,true,false,false
ion-popover,prop,arrow,boolean,true,false,false ion-popover,prop,arrow,boolean,true,false,false
ion-popover,prop,backdropDismiss,boolean,true,false,false ion-popover,prop,backdropDismiss,boolean,true,false,false

6
core/src/components.d.ts vendored
View File

@ -1848,9 +1848,9 @@ export namespace Components {
} }
interface IonPopover { interface IonPopover {
/** /**
* Describes how to align the popover content with the `reference` point. * Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.
*/ */
"alignment": PositionAlign; "alignment"?: PositionAlign;
/** /**
* If `true`, the popover will animate. * If `true`, the popover will animate.
*/ */
@ -5485,7 +5485,7 @@ declare namespace LocalJSX {
} }
interface IonPopover { interface IonPopover {
/** /**
* Describes how to align the popover content with the `reference` point. * Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.
*/ */
"alignment"?: PositionAlign; "alignment"?: PositionAlign;
/** /**

7
core/src/components/popover/popover.tsx
View File

@ -189,8 +189,9 @@ export class Popover implements ComponentInterface, PopoverInterface {
/** /**
* Describes how to align the popover content with the `reference` point. * Describes how to align the popover content with the `reference` point.
* Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode.
*/ */
@Prop() alignment: PositionAlign = 'start'; @Prop({ mutable: true }) alignment?: PositionAlign;
/** /**
* If `true`, the popover will display an arrow * If `true`, the popover will display an arrow
@ -292,6 +293,10 @@ export class Popover implements ComponentInterface, PopoverInterface {
this.popoverId = (this.el.hasAttribute('id')) ? this.el.getAttribute('id')! : `ion-popover-${this.popoverIndex}`; this.popoverId = (this.el.hasAttribute('id')) ? this.el.getAttribute('id')! : `ion-popover-${this.popoverIndex}`;
this.parentPopover = this.el.closest(`ion-popover:not(#${this.popoverId})`) as HTMLIonPopoverElement | null; this.parentPopover = this.el.closest(`ion-popover:not(#${this.popoverId})`) as HTMLIonPopoverElement | null;
if (this.alignment === undefined) {
this.alignment = getIonMode(this) === 'ios' ? 'center' : 'start';
}
} }
componentDidLoad() { componentDidLoad() {

2
core/src/components/popover/readme.md
View File

@ -953,7 +953,7 @@ export default {
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- | | ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- |
| `alignment` | `alignment` | Describes how to align the popover content with the `reference` point. | `"center" \| "end" \| "start"` | `'start'` | | `alignment` | `alignment` | Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode. | `"center" \| "end" \| "start" \| undefined` | `undefined` |
| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` | | `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` |
| `arrow` | `arrow` | If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode on mobile. Does not apply in `md` mode or on desktop. | `boolean` | `true` | | `arrow` | `arrow` | If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode on mobile. Does not apply in `md` mode or on desktop. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` | | `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` |