Skip to content

Commit a4181eb

Browse files
averyjohnstonaveryjohnston
authored
docs(popover): add nested playground (#2347)
1 parent 034f6d9 commit a4181eb

30 files changed

+772
-2
lines changed

‎docs/api/popover.md

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,13 @@ import ControllerExample from '@site/static/usage/popover/presenting/controller/
106106
Popovers are presented at the root of your application so they overlay your entire app. This behavior applies to both inline popovers and popovers presented from a controller. As a result, custom popover styles can not be scoped to a particular component as they will not apply to the popover. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient.
107107

108108
:::note
109-
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
109+
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
110110
:::
111111

112+
import Styling from '@site/static/usage/popover/customization/styling/index.md';
113+
114+
<Styling />
115+
112116

113117
## Positioning
114118

@@ -124,13 +128,25 @@ Regardless of what you choose for your reference point, you can position a popov
124128

125129
The `alignment` property allows you to line up an edge of your popover with a corresponding edge on your trigger element. The exact edge that is used depends on the value of the `side` property.
126130

131+
### Side and Alignment Demo
132+
133+
import Positioning from '@site/static/usage/popover/customization/positioning/index.md';
134+
135+
<Positioning />
136+
127137
### Offsets
128138

129139
If you need finer grained control over the positioning of your popover you can use the `--offset-x` and `--offset-y` CSS Variables. For example, `--offset-x: 10px` will move your popover content to the right by `10px`.
130140

131141
## Sizing
132142

133-
When making dropdown menus, you may want to have the width of the popover match the width of the trigger element. Doing this without knowing the trigger width ahead of time is tricky. You can set the `size` property to `'cover'` and Ionic Framework will ensure that the width of the popover matches the width of your trigger element. If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element.
143+
When making dropdown menus, you may want to have the width of the popover match the width of the trigger element. Doing this without knowing the trigger width ahead of time is tricky. You can set the `size` property to `'cover'` and Ionic Framework will ensure that the width of the popover matches the width of your trigger element.
144+
145+
If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element. See the [controller demo](#controller-popovers) for an example of this pattern.
146+
147+
import Sizing from '@site/static/usage/popover/customization/sizing/index.md';
148+
149+
<Sizing />
134150

135151
## Nested Popovers
136152

@@ -142,6 +158,10 @@ You can use the `dismissOnSelect` property to automatically close the popover wh
142158
Nested popovers cannot be created when using the `popoverController` because the popover is automatically added to the root of your application when the `create` method is called.
143159
:::
144160

161+
import NestedPopover from '@site/static/usage/popover/nested/index.md';
162+
163+
<NestedPopover />
164+
145165

146166
## Interfaces
147167

‎static/usage/popover/customization/positioning/angular/angular_css.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```css
2+
ion-popover {
3+
--width: 80px;
4+
}
5+
6+
.container {
7+
align-items: center;
8+
display: flex;
9+
flex-direction: column;
10+
padding: 80px;
11+
}
12+
```

‎static/usage/popover/customization/positioning/angular/angular_html.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```html
2+
<div class="container">
3+
<ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
4+
<ion-popover trigger="top-center" side="top" alignment="center">
5+
<ng-template>
6+
<ion-content class="ion-padding">Hello World!</ion-content>
7+
</ng-template>
8+
</ion-popover>
9+
10+
<ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
11+
<ion-popover trigger="bottom-start" side="bottom" alignment="start">
12+
<ng-template>
13+
<ion-content class="ion-padding">Hello World!</ion-content>
14+
</ng-template>
15+
</ion-popover>
16+
17+
<ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
18+
<ion-popover trigger="left-start" side="left" alignment="start">
19+
<ng-template>
20+
<ion-content class="ion-padding">Hello World!</ion-content>
21+
</ng-template>
22+
</ion-popover>
23+
24+
<ion-button id="right-end">Side=Right, Alignment=End</ion-button>
25+
<ion-popover trigger="right-end" side="right" alignment="end">
26+
<ng-template>
27+
<ion-content class="ion-padding">Hello World!</ion-content>
28+
</ng-template>
29+
</ion-popover>
30+
</div>
31+
```

‎static/usage/popover/customization/positioning/angular/angular_ts.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-root',
6+
templateUrl: 'app.component.html',
7+
styleUrls: ['app.component.css']
8+
})
9+
export class AppComponent { }
10+
11+
```

‎static/usage/popover/customization/positioning/demo.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Popover</title>
8+
<link rel="stylesheet" href="../../../common.css" />
9+
<script src="../../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
13+
<style>
14+
.container {
15+
flex-direction: column;
16+
}
17+
18+
ion-popover {
19+
--width: 80px;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<ion-app>
26+
<ion-content>
27+
<div class="container">
28+
<ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
29+
<ion-popover trigger="top-center" side="top" alignment="center">
30+
<ion-content class="ion-padding">Hello World!</ion-content>
31+
</ion-popover>
32+
33+
<ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
34+
<ion-popover trigger="bottom-start" side="bottom" alignment="start">
35+
<ion-content class="ion-padding">Hello World!</ion-content>
36+
</ion-popover>
37+
38+
<ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
39+
<ion-popover trigger="left-start" side="left" alignment="start">
40+
<ion-content class="ion-padding">Hello World!</ion-content>
41+
</ion-popover>
42+
43+
<ion-button id="right-end">Side=Right, Alignment=End</ion-button>
44+
<ion-popover trigger="right-end" side="right" alignment="end">
45+
<ion-content class="ion-padding">Hello World!</ion-content>
46+
</ion-popover>
47+
</div>
48+
</ion-content>
49+
</ion-app>
50+
</body>
51+
52+
</html>

‎static/usage/popover/customization/positioning/index.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import vue from './vue.md';
5+
6+
import reactTS from './react/react_ts.md';
7+
import reactCSS from './react/react_css.md';
8+
9+
import angularHTML from './angular/angular_html.md';
10+
import angularCSS from './angular/angular_css.md';
11+
import angularTS from './angular/angular_ts.md';
12+
13+
<Playground
14+
size="400px"
15+
code={{
16+
javascript,
17+
react: {
18+
files: {
19+
'src/main.tsx': reactTS,
20+
'src/main.css': reactCSS
21+
}
22+
},
23+
vue,
24+
angular: {
25+
files: {
26+
'src/app/app.component.html': angularHTML,
27+
'src/app/app.component.css': angularCSS,
28+
'src/app/app.component.ts': angularTS
29+
}
30+
}
31+
}}
32+
src="usage/popover/customization/positioning/demo.html"
33+
/>

‎static/usage/popover/customization/positioning/javascript.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
```html
2+
<div class="container">
3+
<ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
4+
<ion-popover trigger="top-center" side="top" alignment="center">
5+
<ion-content class="ion-padding">Hello World!</ion-content>
6+
</ion-popover>
7+
8+
<ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
9+
<ion-popover trigger="bottom-start" side="bottom" alignment="start">
10+
<ion-content class="ion-padding">Hello World!</ion-content>
11+
</ion-popover>
12+
13+
<ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
14+
<ion-popover trigger="left-start" side="left" alignment="start">
15+
<ion-content class="ion-padding">Hello World!</ion-content>
16+
</ion-popover>
17+
18+
<ion-button id="right-end">Side=Right, Alignment=End</ion-button>
19+
<ion-popover trigger="right-end" side="right" alignment="end">
20+
<ion-content class="ion-padding">Hello World!</ion-content>
21+
</ion-popover>
22+
</div>
23+
24+
<style>
25+
ion-popover {
26+
--width: 80px;
27+
}
28+
29+
.container {
30+
align-items: center;
31+
display: flex;
32+
flex-direction: column;
33+
padding: 80px;
34+
}
35+
</style>
36+
```

‎static/usage/popover/customization/positioning/react/react_css.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```css
2+
ion-popover {
3+
--width: 80px;
4+
}
5+
6+
.container {
7+
align-items: center;
8+
display: flex;
9+
flex-direction: column;
10+
padding: 80px;
11+
}
12+
```

‎static/usage/popover/customization/positioning/react/react_ts.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonButton, IonContent, IonPopover } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return (
9+
<div className="container">
10+
<IonButton id="top-center">Side=Top, Alignment=Center</IonButton>
11+
<IonPopover trigger="top-center" side="top" alignment="center">
12+
<IonContent class="ion-padding">Hello World!</IonContent>
13+
</IonPopover>
14+
15+
<IonButton id="bottom-start">Side=Bottom, Alignment=Start</IonButton>
16+
<IonPopover trigger="bottom-start" side="bottom" alignment="start">
17+
<IonContent class="ion-padding">Hello World!</IonContent>
18+
</IonPopover>
19+
20+
<IonButton id="left-start">Side=Left, Alignment=Start</IonButton>
21+
<IonPopover trigger="left-start" side="left" alignment="start">
22+
<IonContent class="ion-padding">Hello World!</IonContent>
23+
</IonPopover>
24+
25+
<IonButton id="right-end">Side=Right, Alignment=End</IonButton>
26+
<IonPopover trigger="right-end" side="right" alignment="end">
27+
<IonContent class="ion-padding">Hello World!</IonContent>
28+
</IonPopover>
29+
</div>
30+
);
31+
}
32+
export default Example;
33+
```

‎static/usage/popover/customization/positioning/vue.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
```html
2+
<template>
3+
<div class="container">
4+
<ion-button id="top-center">Side=Top, Alignment=Center</ion-button>
5+
<ion-popover trigger="top-center" side="top" alignment="center">
6+
<ion-content class="ion-padding">Hello World!</ion-content>
7+
</ion-popover>
8+
9+
<ion-button id="bottom-start">Side=Bottom, Alignment=Start</ion-button>
10+
<ion-popover trigger="bottom-start" side="bottom" alignment="start">
11+
<ion-content class="ion-padding">Hello World!</ion-content>
12+
</ion-popover>
13+
14+
<ion-button id="left-start">Side=Left, Alignment=Start</ion-button>
15+
<ion-popover trigger="left-start" side="left" alignment="start">
16+
<ion-content class="ion-padding">Hello World!</ion-content>
17+
</ion-popover>
18+
19+
<ion-button id="right-end">Side=Right, Alignment=End</ion-button>
20+
<ion-popover trigger="right-end" side="right" alignment="end">
21+
<ion-content class="ion-padding">Hello World!</ion-content>
22+
</ion-popover>
23+
</div>
24+
</template>
25+
26+
<script lang="ts">
27+
import { IonButton, IonContent, IonPopover } from '@ionic/vue';
28+
import { defineComponent } from 'vue';
29+
30+
export default defineComponent({
31+
components: { IonButton, IonContent, IonPopover },
32+
});
33+
</script>
34+
35+
<style>
36+
ion-popover {
37+
--width: 80px;
38+
}
39+
40+
.container {
41+
align-items: center;
42+
display: flex;
43+
flex-direction: column;
44+
padding: 80px;
45+
}
46+
</style>
47+
```

‎static/usage/popover/customization/sizing/angular.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```html
2+
<ion-button id="auto-trigger">Size=Auto</ion-button>
3+
<ion-popover trigger="auto-trigger" size="auto">
4+
<ng-template>
5+
<ion-content class="ion-padding">Hello!</ion-content>
6+
</ng-template>
7+
</ion-popover>
8+
9+
<ion-button id="cover-trigger">Size=Cover</ion-button>
10+
<ion-popover trigger="cover-trigger" size="cover">
11+
<ng-template>
12+
<ion-content class="ion-padding">Hello!</ion-content>
13+
</ng-template>
14+
</ion-popover>
15+
```

‎static/usage/popover/customization/sizing/demo.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Popover</title>
8+
<link rel="stylesheet" href="../../../common.css" />
9+
<script src="../../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
12+
</head>
13+
14+
<body>
15+
<ion-app>
16+
<ion-content>
17+
<div class="container">
18+
<ion-button id="auto-trigger">Size=Auto</ion-button>
19+
<ion-popover trigger="auto-trigger" size="auto">
20+
<ion-content class="ion-padding">Hello!</ion-content>
21+
</ion-popover>
22+
23+
<ion-button id="cover-trigger">Size=Cover</ion-button>
24+
<ion-popover trigger="cover-trigger" size="cover">
25+
<ion-content class="ion-padding">Hello!</ion-content>
26+
</ion-popover>
27+
</div>
28+
</ion-content>
29+
</ion-app>
30+
</body>
31+
32+
</html>

‎static/usage/popover/customization/sizing/index.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground
9+
size="300px"
10+
code={{ javascript, react, vue, angular }}
11+
src="usage/popover/customization/sizing/demo.html"
12+
/>

0 commit comments

Comments
 (0)