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

fix(popover): allow arrow on desktop (#25056)

Browse Source
This commit is contained in:
Amanda Smith
2022-04-04 13:23:07 -05:00
committed by GitHub
parent 6ecfa5738e
commit bcd00c7a6e
2 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -207,9 +207,8 @@ export class Popover implements ComponentInterface, PopoverInterface {
@Prop({ mutable: true }) alignment?: PositionAlign; @Prop({ mutable: true }) alignment?: PositionAlign;
/** /**
* If `true`, the popover will display an arrow * If `true`, the popover will display an arrow that points at the
* that points at the `reference` when running in `ios` mode * `reference` when running in `ios` mode. Does not apply in `md` mode.
* on mobile. Does not apply in `md` mode or on desktop.
*/ */
@Prop() arrow = true; @Prop() arrow = true;
@ -589,7 +588,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
const mode = getIonMode(this); const mode = getIonMode(this);
const { onLifecycle, popoverId, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this; const { onLifecycle, popoverId, parentPopover, dismissOnSelect, side, arrow, htmlAttributes } = this;
const desktop = isPlatform('desktop'); const desktop = isPlatform('desktop');
const enableArrow = arrow && !parentPopover && !desktop; const enableArrow = arrow && !parentPopover;
return ( return (
<Host <Host

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

@ -955,14 +955,14 @@ export default {
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- | | ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- |
| `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` | | `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. Does not apply in `md` mode. | `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` |
| `component` | `component` | The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`. | `Function \| HTMLElement \| null \| string \| undefined` | `undefined` | | `component` | `component` | The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`. | `Function \| HTMLElement \| null \| string \| undefined` | `undefined` |
| `componentProps` | -- | The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component. | `undefined \| { [key: string]: any; }` | `undefined` | | `componentProps` | -- | The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component. | `undefined \| { [key: string]: any; }` | `undefined` |
| `dismissOnSelect` | `dismiss-on-select` | If `true`, the popover will be automatically dismissed when the content has been clicked. | `boolean` | `false` | | `dismissOnSelect` | `dismiss-on-select` | If `true`, the popover will be automatically dismissed when the content has been clicked. | `boolean` | `false` |
| `enterAnimation` | -- | Animation to use when the popover is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the popover is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` | | `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` |
| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `PopoverAttributes \| undefined` | `undefined` | | `htmlAttributes` | -- | Additional attributes to pass to the popover. | `HTMLAttributes<HTMLElement> \| undefined` | `undefined` |
| `isOpen` | `is-open` | If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. | `boolean` | `false` | | `isOpen` | `is-open` | If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. | `boolean` | `false` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |