Skip to content

Commit 3fb79cf

Browse files
author
Dave Ackerman
committed
feat(): add toast component
1 parent 7263728 commit 3fb79cf

File tree

12 files changed

+496
-0
lines changed

12 files changed

+496
-0
lines changed

‎ionic/components.core.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"components/show-hide-when/show-hide-when",
2727
"components/slides/slides",
2828
"components/spinner/spinner",
29+
"components/toast/toast",
2930
"components/virtual-scroll/virtual-scroll";
3031

3132

‎ionic/components.ios.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"components/select/select.ios",
2828
"components/tabs/tabs.ios",
2929
"components/toggle/toggle.ios",
30+
"components/toast/toast.ios",
3031
"components/toolbar/toolbar.ios";
3132

3233

‎ionic/components.md.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"components/select/select.md",
2828
"components/tabs/tabs.md",
2929
"components/toggle/toggle.md",
30+
"components/toast/toast.md",
3031
"components/toolbar/toolbar.md";
3132

3233

‎ionic/components.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,5 +47,6 @@ export * from './components/tabs/tabs'
4747
export * from './components/tabs/tab'
4848
export * from './components/tap-click/tap-click'
4949
export * from './components/toggle/toggle'
50+
export * from './components/toast/toast'
5051
export * from './components/toolbar/toolbar'
5152
export * from './components/virtual-scroll/virtual-scroll'

‎ionic/components/toast/test/basic/e2e.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
it('should open action sheet', function() {
3+
element(by.css('.e2eOpenActionSheet')).click();
4+
});
5+
6+
it('should close with backdrop click', function() {
7+
element(by.css('.backdrop')).click();
8+
});

‎ionic/components/toast/test/basic/index.ts

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import {App, Page, Toast, NavController, Platform} from 'ionic-angular';
2+
3+
@Page({
4+
templateUrl: 'main.html'
5+
})
6+
class E2EPage {
7+
constructor(
8+
private nav: NavController,
9+
private platform: Platform)
10+
{}
11+
12+
showToast() {
13+
const toast = Toast.create({
14+
message: 'User was created successfully',
15+
});
16+
17+
this.nav.present(toast);
18+
}
19+
20+
showLongToast() {
21+
const toast = Toast.create({
22+
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.',
23+
});
24+
25+
this.nav.present(toast);
26+
}
27+
28+
showDismissDurationToast() {
29+
const toast = Toast.create({
30+
message: 'I am dismissed after 1.5 seconds',
31+
duration: 1500
32+
});
33+
34+
this.nav.present(toast);
35+
}
36+
37+
showToastWithCloseButton() {
38+
const toast = Toast.create({
39+
message: 'Your internet connection appears to be offline. Data integrity is not gauranteed.',
40+
showCloseButton: true,
41+
closeButtonText: 'Ok'
42+
});
43+
44+
this.nav.present(toast);
45+
}
46+
47+
}
48+
49+
@Page({
50+
template: `
51+
<ion-toolbar>
52+
<ion-buttons start>
53+
<button (click)="dismiss()">Close</button>
54+
</ion-buttons>
55+
<ion-title>Toast</ion-title>
56+
</ion-toolbar>
57+
<ion-content padding>
58+
Hi, I'm Bob, and I'm a modal.
59+
</ion-content>
60+
`
61+
})
62+
class ToastPage {
63+
constructor(private viewCtrl: ViewController) { }
64+
65+
dismiss() {
66+
this.viewCtrl.dismiss();
67+
}
68+
}
69+
70+
71+
@App({
72+
template: '<ion-nav [root]="root"></ion-nav>'
73+
})
74+
class E2EApp {
75+
constructor() {
76+
this.root = E2EPage;
77+
}
78+
}

‎ionic/components/toast/test/basic/main.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<ion-navbar *navbar>
2+
<ion-title>Toasts</ion-title>
3+
</ion-navbar>
4+
5+
<ion-content padding>
6+
<button block (click)="showToast()">Show Toast</button>
7+
<button block (click)="showLongToast()">Show Long Toast</button>
8+
<br />
9+
<button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
10+
<button block (click)="showToastWithCloseButton()">With closeButtonText</button>
11+
</ion-content>

‎ionic/components/toast/toast.ios.scss

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// iOS Toast
2+
// --------------------------------------------------
3+
$toast-ios-text-align: left !default;
4+
$toast-ios-background: rgba(0, 0, 0, 0.70) !default;
5+
$toast-ios-border-radius: 0.65rem !default;
6+
7+
$toast-ios-title-color: #fff !default;
8+
$toast-ios-title-font-size: 1.4rem !default;
9+
$toast-ios-title-padding: 1.5rem !default;
10+
11+
ion-toast {
12+
display: block;
13+
height: $toast-width;
14+
left: 0;
15+
position: absolute;
16+
top: 0;
17+
width: $toast-width;
18+
z-index: $z-index-overlay;
19+
}
20+
21+
.toast-wrapper {
22+
background: $toast-ios-background;
23+
border-radius: $toast-ios-border-radius;
24+
bottom: 10px;
25+
display: block;
26+
left: 10px;
27+
margin: auto;
28+
max-width: $toast-max-width;
29+
position: absolute;
30+
right: 10px;
31+
transform: translate3d(0, 100%, 0);
32+
z-index: $z-index-overlay-wrapper;
33+
}
34+
35+
.toast-message {
36+
color: $toast-ios-title-color;
37+
font-size: $toast-ios-title-font-size;
38+
padding: $toast-ios-title-padding;
39+
}

‎ionic/components/toast/toast.md.scss

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@import "../../globals.md";
2+
3+
// Material Design Toast
4+
// --------------------------------------------------
5+
$toast-md-text-align: left !default;
6+
$toast-md-background: #333333 !default;
7+
$toast-md-group-margin-bottom: 8px !default;
8+
9+
$toast-md-title-color: #fff !default;
10+
$toast-md-title-font-size: 1.5rem !default;
11+
$toast-md-title-padding: 19px 16px 17px !default;
12+
13+
ion-toast {
14+
display: block;
15+
height: $toast-width;
16+
left: 0;
17+
position: absolute;
18+
top: 0;
19+
width: $toast-width;
20+
z-index: $z-index-overlay;
21+
}
22+
23+
.toast-wrapper {
24+
background: $toast-md-background;
25+
bottom: 0;
26+
display: block;
27+
left: 0;
28+
margin: auto;
29+
max-width: $toast-max-width;
30+
position: absolute;
31+
right: 0;
32+
transform: translate3d(0, 100%, 0);
33+
width: $toast-width;
34+
z-index: $z-index-overlay-wrapper;
35+
}
36+
37+
.toast-message {
38+
color: $toast-md-title-color;
39+
font-size: $toast-md-title-font-size;
40+
padding: $toast-md-title-padding;
41+
}

‎ionic/components/toast/toast.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@import "../../globals.ios";
2+
3+
// Action Sheet
4+
// --------------------------------------------------
5+
6+
$toast-width: 100% !default;
7+
$toast-max-width: 700px !default;
8+
9+
ion-toast {
10+
position: absolute;
11+
top: 0;
12+
left: 0;
13+
z-index: $z-index-overlay;
14+
display: block;
15+
width: $toast-width;
16+
height: $toast-width;
17+
}
18+
19+
.toast-container {
20+
display: flex;
21+
align-items: center;
22+
23+
button {
24+
font-size: 1.5rem;
25+
padding: 19px 16px 17px;
26+
}
27+
}
28+
29+
.toast-message {
30+
flex: 1;
31+
}
32+
33+
.toast-wrapper {
34+
bottom: 0;
35+
display: block;
36+
left: 0;
37+
margin: auto;
38+
max-width: $toast-max-width;
39+
position: absolute;
40+
right: 0;
41+
transform: translate3d(0, 100%, 0);
42+
z-index: $z-index-overlay-wrapper;
43+
}

0 commit comments

Comments
 (0)