Skip to content

Commit a26ba83

Browse files
averyjohnstonaveryjohnston
authored
docs(toast): add playground for positionAnchor (#3158)
1 parent ffb5380 commit a26ba83

File tree

7 files changed

+245
-0
lines changed

7 files changed

+245
-0
lines changed

‎docs/api/toast.md

+8
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,14 @@ import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md';
6464

6565
Toasts can be positioned at the top, bottom or middle of the viewport. The position can be passed upon creation. The possible values are `top`, `bottom` and `middle`. If the position is not specified, the toast will be displayed at the bottom of the viewport.
6666

67+
### Relative Positioning
68+
69+
If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.md), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored.
70+
71+
import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md';
72+
73+
<PositionAnchor />
74+
6775
## Layout
6876

6977
Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.

‎static/usage/v7/toast/position-anchor/angular.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
```html
2+
<ion-header id="header">
3+
<ion-toolbar>
4+
<ion-title>Header</ion-title>
5+
</ion-toolbar>
6+
</ion-header>
7+
8+
<ion-content class="ion-padding">
9+
<ion-button id="headerAnchor">Anchor to Header</ion-button>
10+
<ion-button id="footerAnchor">Anchor to Footer</ion-button>
11+
12+
<ion-toast
13+
trigger="headerAnchor"
14+
position="top"
15+
positionAnchor="header"
16+
message="Hello World!"
17+
duration="2000"
18+
></ion-toast>
19+
<ion-toast
20+
trigger="footerAnchor"
21+
position="bottom"
22+
positionAnchor="footer"
23+
message="Hello World!"
24+
duration="2000"
25+
></ion-toast>
26+
</ion-content>
27+
28+
<ion-footer id="footer">
29+
<ion-toolbar>
30+
<ion-title>Footer</ion-title>
31+
</ion-toolbar>
32+
</ion-footer>
33+
```

‎static/usage/v7/toast/position-anchor/demo.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Toast</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
12+
<style>
13+
.container {
14+
display: flex;
15+
flex-direction: column;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<ion-app>
22+
<ion-header id="header">
23+
<ion-toolbar>
24+
<ion-title>Header</ion-title>
25+
</ion-toolbar>
26+
</ion-header>
27+
28+
<ion-content class="ion-padding">
29+
<div class="container">
30+
<ion-button id="headerAnchor">Anchor to Header</ion-button>
31+
<ion-button id="footerAnchor">Anchor to Footer</ion-button>
32+
33+
<ion-toast
34+
trigger="headerAnchor"
35+
position="top"
36+
position-anchor="header"
37+
message="Hello World!"
38+
duration="2000"
39+
></ion-toast>
40+
<ion-toast
41+
trigger="footerAnchor"
42+
position="bottom"
43+
position-anchor="footer"
44+
message="Hello World!"
45+
duration="2000"
46+
></ion-toast>
47+
</div>
48+
</ion-content>
49+
50+
<ion-footer id="footer">
51+
<ion-toolbar>
52+
<ion-title>Footer</ion-title>
53+
</ion-toolbar>
54+
</ion-footer>
55+
</ion-app>
56+
</body>
57+
</html>

‎static/usage/v7/toast/position-anchor/index.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/toast/position-anchor/demo.html"
17+
devicePreview={true}
18+
includeIonContent={false}
19+
/>

‎static/usage/v7/toast/position-anchor/javascript.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
```html
2+
<ion-header id="header">
3+
<ion-toolbar>
4+
<ion-title>Header</ion-title>
5+
</ion-toolbar>
6+
</ion-header>
7+
8+
<ion-content class="ion-padding">
9+
<ion-button id="headerAnchor">Anchor to Header</ion-button>
10+
<ion-button id="footerAnchor">Anchor to Footer</ion-button>
11+
12+
<ion-toast
13+
trigger="headerAnchor"
14+
position="top"
15+
position-anchor="header"
16+
message="Hello World!"
17+
duration="2000"
18+
></ion-toast>
19+
<ion-toast
20+
trigger="footerAnchor"
21+
position="bottom"
22+
position-anchor="footer"
23+
message="Hello World!"
24+
duration="2000"
25+
></ion-toast>
26+
</ion-content>
27+
28+
<ion-footer id="footer">
29+
<ion-toolbar>
30+
<ion-title>Footer</ion-title>
31+
</ion-toolbar>
32+
</ion-footer>
33+
```

‎static/usage/v7/toast/position-anchor/react.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/react';
4+
5+
function Example() {
6+
return (
7+
<>
8+
<IonHeader id="header">
9+
<IonToolbar>
10+
<IonTitle>Header</IonTitle>
11+
</IonToolbar>
12+
</IonHeader>
13+
14+
<IonContent className="ion-padding">
15+
<IonButton id="headerAnchor">Anchor to Header</IonButton>
16+
<IonButton id="footerAnchor">Anchor to Footer</IonButton>
17+
18+
<IonToast
19+
trigger="headerAnchor"
20+
position="top"
21+
positionAnchor="header"
22+
message="Hello World!"
23+
duration={2000}
24+
></IonToast>
25+
<IonToast
26+
trigger="footerAnchor"
27+
position="bottom"
28+
positionAnchor="footer"
29+
message="Hello World!"
30+
duration={2000}
31+
></IonToast>
32+
</IonContent>
33+
34+
<IonFooter id="footer">
35+
<IonToolbar>
36+
<IonTitle>Footer</IonTitle>
37+
</IonToolbar>
38+
</IonFooter>
39+
</>
40+
);
41+
}
42+
export default Example;
43+
```

‎static/usage/v7/toast/position-anchor/vue.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
```html
2+
<template>
3+
<ion-header id="header">
4+
<ion-toolbar>
5+
<ion-title>Header</ion-title>
6+
</ion-toolbar>
7+
</ion-header>
8+
9+
<ion-content class="ion-padding">
10+
<ion-button id="headerAnchor">Anchor to Header</ion-button>
11+
<ion-button id="footerAnchor">Anchor to Footer</ion-button>
12+
13+
<ion-toast
14+
trigger="headerAnchor"
15+
position="top"
16+
position-anchor="header"
17+
message="Hello World!"
18+
:duration="2000"
19+
></ion-toast>
20+
<ion-toast
21+
trigger="footerAnchor"
22+
position="bottom"
23+
position-anchor="footer"
24+
message="Hello World!"
25+
:duration="2000"
26+
></ion-toast>
27+
</ion-content>
28+
29+
<ion-footer id="footer">
30+
<ion-toolbar>
31+
<ion-title>Footer</ion-title>
32+
</ion-toolbar>
33+
</ion-footer>
34+
</template>
35+
36+
<script lang="ts">
37+
import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/vue';
38+
import { defineComponent } from 'vue';
39+
40+
export default defineComponent({
41+
components: {
42+
IonButton,
43+
IonContent,
44+
IonFooter,
45+
IonHeader,
46+
IonTitle,
47+
IonToast,
48+
IonToolbar,
49+
},
50+
});
51+
</script>
52+
```

0 commit comments

Comments
 (0)