test(many): replace ionic buttons in e2e tests with native html buttons (#29422)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? The `ion-button` component is used in several tests to navigate or show overlays. This causes screenshot diffs in unrelated tests any time the UI of the `ion-button` is updated. ## What is the new behavior? Removes the `ion-button` elements from unrelated tests. Did not remove the `ion-button`s from the following tests: - All `ion-button`s in an `ion-buttons` component - An `ion-button` inside of a menu - breadcrumbs/test/basic (uses a clear button in a list header, needs to be moved) - input/test/slot - item/test/buttons - item/test/colors - item/test/dividers - item/test/inputs - item/test/media - list-header/test/basic - ripple-effect/test/basic - router/test/basic - router/test/guards - router-outlet/test/basic - select/test/slot - textarea/test/slot Updates the icon/basic test to use the right icon names by comparing against the v3 names: https://ionicframework.com/docs/v3/ionicons/ ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: ionitron <hi@ionicframework.com>
Brandy Carney
@ -8,17 +8,18 @@
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<script type="module">
|
||||
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||
window.toastController = toastController;
|
||||
</script>
|
||||
</head>
|
||||
<script type="module">
|
||||
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||
window.toastController = toastController;
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<main>
|
||||
<h1 style="background-color: white">Toast - a11y</h1>
|
||||
|
||||
<ion-button id="inline-toast-trigger">Present Inline Toast</ion-button>
|
||||
<button id="inline-toast-trigger">Present Inline Toast</button>
|
||||
<ion-toast
|
||||
id="inline-toast"
|
||||
trigger="inline-toast-trigger"
|
||||
@ -27,14 +28,14 @@
|
||||
message="Inline Toast Message"
|
||||
></ion-toast>
|
||||
|
||||
<ion-button
|
||||
<button
|
||||
id="controller-toast-trigger"
|
||||
onclick="presentToast({ icon: 'person', header: 'Controller Toast Header', message: 'Controller Toast Message', buttons: ['Ok'] })"
|
||||
>
|
||||
Present Controller Toast
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button id="aria-label-toast-trigger">Present Aria Label Toast</ion-button>
|
||||
<button id="aria-label-toast-trigger">Present Aria Label Toast</button>
|
||||
<ion-toast
|
||||
id="aria-label-toast"
|
||||
trigger="aria-label-toast-trigger"
|
||||
@ -42,7 +43,7 @@
|
||||
message="Aria Label Toast Message"
|
||||
></ion-toast>
|
||||
|
||||
<ion-button onclick="updateContent()">Update Inner Content</ion-button>
|
||||
<button onclick="updateContent()">Update Inner Content</button>
|
||||
</main>
|
||||
</ion-app>
|
||||
<script>
|
||||
|
||||
@ -26,151 +26,148 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding" id="content">
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="show-bottom-toast"
|
||||
onclick="openToast({ message: 'Hellooo', position: 'bottom', duration: 2000, htmlAttributes: { 'data-testid': 'basic-toast' } })"
|
||||
>
|
||||
Position Bottom
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="show-top-toast"
|
||||
onclick="openToast({ message: 'Hellooo', position: 'top', duration: 2000 })"
|
||||
>
|
||||
Position Top
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="show-middle-toast"
|
||||
onclick="openToast({ message: 'Hellooo', position: 'middle', duration: 2000 })"
|
||||
>
|
||||
Position Middle
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
onclick="openToast({header: 'Toast header', message: 'Toast message', duration: 2000})"
|
||||
>
|
||||
<button class="expand" onclick="openToast({header: 'Toast header', message: 'Toast message', duration: 2000})">
|
||||
Header Toast
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
onclick="openToast({header: 'Toast header', message: 'Really long message that should go all of the way to the button', buttons: ['Action'] })"
|
||||
>
|
||||
Header + Action Toast
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="two-line-toast"
|
||||
onclick="openToast({message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in elit varius, maximus sem in, bibendum justo.', buttons: ['Action'] })"
|
||||
>
|
||||
Long Message
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="close-button-toast"
|
||||
onclick="openToast({message: 'click to close', buttons: ['Close'] })"
|
||||
>
|
||||
Close Button
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="custom-close-text-toast"
|
||||
onclick="openToast({message: 'click to close', buttons: ['closing time'] })"
|
||||
>
|
||||
Custom Close Button
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button expand="block" id="custom-action-buttons-toast" onclick="openToastWithButtonOptions()">
|
||||
<button class="expand" id="custom-action-buttons-toast" onclick="openToastWithButtonOptions()">
|
||||
Custom Buttons
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="translucent-toast"
|
||||
onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true})"
|
||||
>
|
||||
Translucent Toast
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="color-toast"
|
||||
onclick="openToast({message: 'click to close', buttons: [{text: 'Close'}, {icon: 'close', role: 'cancel'}], color: 'danger'})"
|
||||
>
|
||||
Color Toast
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="light-color-toast"
|
||||
onclick="openToast({message: 'click to close', buttons: [{text: 'Close'}, {icon: 'close', role: 'cancel'}], color: 'light'})"
|
||||
>
|
||||
Light Color Toast
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="translucent-color-toast"
|
||||
onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true, color: 'success'})"
|
||||
>
|
||||
Translucent Color Toast
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="custom-class-toast"
|
||||
onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'my-custom-class'})"
|
||||
>
|
||||
Custom Class
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="toast-start-and-end"
|
||||
onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'toast-start-and-end'})"
|
||||
>
|
||||
Show Toast with start-end position
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="toast-html"
|
||||
onclick="openToast({message: '<ion-button>Button in a Toast!</ion-button>', buttons: ['Close'] })"
|
||||
onclick="openToast({message: '<button>Button in a Toast!</button>', buttons: ['Close'] })"
|
||||
>
|
||||
Show HTML Toast
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="toast-with-icon"
|
||||
onclick="openToast({ header: 'Bluetooth', message: 'Device connected.', icon: 'bluetooth', duration: 2000 })"
|
||||
>
|
||||
Toast with Icon
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="toast-with-icon-2"
|
||||
onclick="openToast({ message: 'An error has occurred!', icon: 'warning', color: 'danger', duration: 2000 })"
|
||||
>
|
||||
Toast with Icon 2
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button
|
||||
expand="block"
|
||||
<button
|
||||
class="expand"
|
||||
id="toast-with-icon-3"
|
||||
onclick="openToast({ message: 'Debug me...', icon: 'bug', buttons: ['Close'] })"
|
||||
>
|
||||
Toast with Icon 3
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
|
||||
@ -96,6 +96,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
|
||||
await toastFixture.screenshot('translucent', screenshot, container);
|
||||
});
|
||||
|
||||
// TODO(FW-6220): investigate why backdrop filter is not being captured in screenshot
|
||||
test('should set translucency correctly when color is provided', async ({ page }) => {
|
||||
const toastFixture = new ToastFixture(page);
|
||||
await toastFixture.goto(config);
|
||||
|
||||
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 7.3 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 4.2 KiB |
@ -27,17 +27,15 @@
|
||||
|
||||
<ion-content class="ion-padding" id="content">
|
||||
<!-- New way using array of buttons -->
|
||||
<ion-button id="closeArray" expand="block" onclick="presentCloseArrayToast()"> Close Button Array </ion-button>
|
||||
<button id="closeArray" class="expand" onclick="presentCloseArrayToast()">Close Button Array</button>
|
||||
|
||||
<ion-button id="twoButtons" expand="block" onclick="presentToastWithTwoButtons()"> Two Buttons </ion-button>
|
||||
<button id="twoButtons" class="expand" onclick="presentToastWithTwoButtons()">Two Buttons</button>
|
||||
|
||||
<ion-button id="multipleButtons" expand="block" onclick="presentToastWithMultipleButtons()">
|
||||
<button id="multipleButtons" class="expand" onclick="presentToastWithMultipleButtons()">
|
||||
Multiple Buttons
|
||||
</ion-button>
|
||||
</button>
|
||||
|
||||
<ion-button id="longButton" expand="block" onclick="presentToastWithLongButton()">
|
||||
Really Long Button
|
||||
</ion-button>
|
||||
<button id="longButton" class="expand" onclick="presentToastWithLongButton()">Really Long Button</button>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button id="default" onclick="openToast()">Open Toast, 2s Duration</ion-button>
|
||||
<ion-button id="timeout" onclick="openToast(500)">Open Toast, Close Manually After 500ms</ion-button>
|
||||
<button id="default" onclick="openToast()">Open Toast, 2s Duration</button>
|
||||
<button id="timeout" onclick="openToast(500)">Open Toast, Close Manually After 500ms</button>
|
||||
|
||||
<ion-toast message="Hello World" duration="2000"></ion-toast>
|
||||
</ion-content>
|
||||
|
||||
@ -12,11 +12,12 @@
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<script type="module">
|
||||
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||
window.toastController = toastController;
|
||||
</script>
|
||||
</head>
|
||||
<script type="module">
|
||||
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||
window.toastController = toastController;
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
@ -26,8 +27,8 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button id="baseline" onclick="openToast(baselineConfig)">Open Baseline Layout Toast</ion-button>
|
||||
<ion-button id="stacked" onclick="openToast(stackedConfig)">Open Stacked Layout Toast</ion-button>
|
||||
<button id="baseline" onclick="openToast(baselineConfig)">Open Baseline Layout Toast</button>
|
||||
<button id="stacked" onclick="openToast(stackedConfig)">Open Stacked Layout Toast</button>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
|
||||
<style>
|
||||
html {
|
||||
:root {
|
||||
--ion-safe-area-top: 30px;
|
||||
--ion-safe-area-bottom: 30px;
|
||||
}
|
||||
@ -29,11 +29,11 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button id="headerAnchor">Anchor to Header</ion-button>
|
||||
<ion-button id="footerAnchor">Anchor to Footer</ion-button>
|
||||
<ion-button id="middleAnchor">Anchor to Header (Middle Position)</ion-button>
|
||||
<ion-button id="headerElAnchor">Anchor to Header (Element Ref)</ion-button>
|
||||
<ion-button id="hiddenElAnchor">Anchor to Hidden Element</ion-button>
|
||||
<button id="headerAnchor">Anchor to Header</button>
|
||||
<button id="footerAnchor">Anchor to Footer</button>
|
||||
<button id="middleAnchor">Anchor to Header (Middle Position)</button>
|
||||
<button id="headerElAnchor">Anchor to Header (Element Ref)</button>
|
||||
<button id="hiddenElAnchor">Anchor to Hidden Element</button>
|
||||
|
||||
<ion-toast
|
||||
id="headerToast"
|
||||
|
||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 18 KiB |
@ -12,51 +12,43 @@
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
<script type="module">
|
||||
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||
window.toastController = toastController;
|
||||
</script>
|
||||
<body>
|
||||
<button id="basic-toast" onclick="openToast({ message: 'Hellooo', position: 'bottom', duration: 2000 })">
|
||||
Show Toast Bottom
|
||||
</button>
|
||||
<button onclick="openToast({ message: 'Hellooo', position: 'top', duration: 2000 })">Show Toast Top</button>
|
||||
<button onclick="openToast({ message: 'Hellooo', position: 'middle', duration: 2000 })">Show Toast Middle</button>
|
||||
<button
|
||||
onclick="openToast({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})"
|
||||
>
|
||||
Show Toast with long message
|
||||
</button>
|
||||
<button onclick="openToast({message: 'click to close', buttons: ['Close'] })">Show Toast with Close Button</button>
|
||||
<button onclick="openToast({message: 'click to close', buttons: ['closing time'] })">
|
||||
Show Toast with Custom Close Button Text
|
||||
</button>
|
||||
<button onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true})">
|
||||
Show Translucent Toast
|
||||
</button>
|
||||
<button onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'custom'})">
|
||||
Show Toast with Custom Properties
|
||||
</button>
|
||||
<style>
|
||||
body > button {
|
||||
display: block;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
padding: 12px 8px;
|
||||
font-size: 1em;
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.custom {
|
||||
--background: papayawhip;
|
||||
--button-color: blue;
|
||||
--color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<script type="module">
|
||||
import { toastController } from '../../../../dist/ionic/index.esm.js';
|
||||
window.toastController = toastController;
|
||||
</script>
|
||||
<body>
|
||||
<main>
|
||||
<button id="basic-toast" onclick="openToast({ message: 'Hellooo', position: 'bottom', duration: 2000 })">
|
||||
Show Toast Bottom
|
||||
</button>
|
||||
<button onclick="openToast({ message: 'Hellooo', position: 'top', duration: 2000 })">Show Toast Top</button>
|
||||
<button onclick="openToast({ message: 'Hellooo', position: 'middle', duration: 2000 })">Show Toast Middle</button>
|
||||
<button
|
||||
onclick="openToast({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})"
|
||||
>
|
||||
Show Toast with long message
|
||||
</button>
|
||||
<button onclick="openToast({message: 'click to close', buttons: ['Close'] })">
|
||||
Show Toast with Close Button
|
||||
</button>
|
||||
<button onclick="openToast({message: 'click to close', buttons: ['closing time'] })">
|
||||
Show Toast with Custom Close Button Text
|
||||
</button>
|
||||
<button onclick="openToast({message: 'click to close', buttons: ['Close'], translucent: true})">
|
||||
Show Translucent Toast
|
||||
</button>
|
||||
<button onclick="openToast({message: 'click to close', buttons: ['Close'], cssClass: 'custom'})">
|
||||
Show Toast with Custom Properties
|
||||
</button>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
window.addEventListener('ionToastDidDismiss', function (e) {
|
||||
|
||||
@ -16,12 +16,12 @@
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button id="top">Open Top Toast</ion-button>
|
||||
<ion-button id="middle">Open Middle Toast</ion-button>
|
||||
<ion-button id="bottom">Open Bottom Toast</ion-button>
|
||||
<button id="top">Open Top Toast</button>
|
||||
<button id="middle">Open Middle Toast</button>
|
||||
<button id="bottom">Open Bottom Toast</button>
|
||||
|
||||
<ion-button id="top-anchor">Open Top Toast with Anchor</ion-button>
|
||||
<ion-button id="bottom-anchor">Open Bottom Toast with Anchor</ion-button>
|
||||
<button id="top-anchor">Open Top Toast with Anchor</button>
|
||||
<button id="bottom-anchor">Open Bottom Toast with Anchor</button>
|
||||
|
||||
<ion-fab id="bottom-fab" horizontal="end" vertical="bottom">
|
||||
<ion-fab-button>
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button id="default">Open Toast, 2s Duration</ion-button>
|
||||
<ion-button id="timeout">Open Toast, Close Manually After 500ms</ion-button>
|
||||
<button id="default">Open Toast, 2s Duration</button>
|
||||
<button id="timeout">Open Toast, Close Manually After 500ms</button>
|
||||
|
||||
<ion-toast id="default-toast" trigger="default" message="Hello World" duration="2000"></ion-toast>
|
||||
<ion-toast id="timeout-toast" trigger="timeout" message="Hello World" duration="2000"></ion-toast>
|
||||
|
||||