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

docs(popover): add the popover-example-page to core and event to react (#22231)

Browse Source 
closes ionic-team/ionic-docs#1517
This commit is contained in:
Brandy Carney
2020-10-01 19:04:18 -04:00
committed by GitHub
parent f42c688f46
commit 2373ff0d39
3 changed files with 69 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -76,6 +76,28 @@ In Angular, the CSS of a specific page is scoped only to elements of that page.
### Javascript
```javascript
class PopoverExamplePage extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<ion-content>
<ion-list>
<ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
<ion-item button><ion-label>Item 0</ion-label></ion-item>
<ion-item button><ion-label>Item 1</ion-label></ion-item>
<ion-item button><ion-label>Item 2</ion-label></ion-item>
<ion-item button><ion-label>Item 3</ion-label></ion-item>
</ion-list>
</ion-content>
`;
}
}
customElements.define('popover-example-page', PopoverExamplePage);
function presentPopover(ev) {
const popover = Object.assign(document.createElement('ion-popover'), {
component: 'popover-example-page',
@@ -96,18 +118,26 @@ import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';
export const PopoverExample: React.FC = () => {
const [showPopover, setShowPopover] = useState(false);
const [popoverState, setShowPopover] = useState({ showPopover: false, event: undefined });
return (
<>
<IonPopover
isOpen={showPopover}
cssClass='my-custom-class'
onDidDismiss={e => setShowPopover(false)}
event={popoverState.event}
isOpen={popoverState.showPopover}
onDidDismiss={() => setShowPopover({ showPopover: false, event: undefined })}
>
<p>This is popover content</p>
</IonPopover>
<IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
<IonButton onClick={
(e: any) => {
e.persist();
setShowPopover({ showPopover: true, event: e })
}}
>
Show Popover
</IonButton>
</>
);
};

22
core/src/components/popover/usage/javascript.md
View File

@@ -1,4 +1,26 @@
```javascript
class PopoverExamplePage extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<ion-content>
<ion-list>
<ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
<ion-item button><ion-label>Item 0</ion-label></ion-item>
<ion-item button><ion-label>Item 1</ion-label></ion-item>
<ion-item button><ion-label>Item 2</ion-label></ion-item>
<ion-item button><ion-label>Item 3</ion-label></ion-item>
</ion-list>
</ion-content>
`;
}
}
customElements.define('popover-example-page', PopoverExamplePage);
function presentPopover(ev) {
const popover = Object.assign(document.createElement('ion-popover'), {
component: 'popover-example-page',

18
core/src/components/popover/usage/react.md
View File

@@ -3,19 +3,27 @@ import React, { useState } from 'react';
import { IonPopover, IonButton } from '@ionic/react';
export const PopoverExample: React.FC = () => {
const [showPopover, setShowPopover] = useState(false);
const [popoverState, setShowPopover] = useState({ showPopover: false, event: undefined });
return (
<>
<IonPopover
isOpen={showPopover}
cssClass='my-custom-class'
onDidDismiss={e => setShowPopover(false)}
event={popoverState.event}
isOpen={popoverState.showPopover}
onDidDismiss={() => setShowPopover({ showPopover: false, event: undefined })}
>
<p>This is popover content</p>
</IonPopover>
<IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
<IonButton onClick={
(e: any) => {
e.persist();
setShowPopover({ showPopover: true, event: e })
}}
>
Show Popover
</IonButton>
</>
);
};
```
```