Skip to content
Permalink
Browse files

feat(toast): add variables to change position start/end of toast (#17961

)

closes #17854
  • Loading branch information...
entom authored and brandyscarney committed Apr 16, 2019
1 parent e5c8c10 commit 07e739a364a41fd02bcec969d742df7237294dc0
@@ -1165,11 +1165,13 @@ ion-toast,css-prop,--border-width
ion-toast,css-prop,--box-shadow
ion-toast,css-prop,--button-color
ion-toast,css-prop,--color
ion-toast,css-prop,--end
ion-toast,css-prop,--height
ion-toast,css-prop,--max-height
ion-toast,css-prop,--max-width
ion-toast,css-prop,--min-height
ion-toast,css-prop,--min-width
ion-toast,css-prop,--start
ion-toast,css-prop,--width

ion-toggle,shadow
@@ -271,11 +271,13 @@ Type: `Promise<void>`
| `--box-shadow` | Box shadow of the toast |
| `--button-color` | Color of the button text |
| `--color` | Color of the toast text |
| `--end` | Position from the end |
| `--height` | Height of the toast |
| `--max-height` | Maximum height of the toast |
| `--max-width` | Maximum width of the toast |
| `--min-height` | Minimum height of the toast |
| `--min-width` | Minimum width of the toast |
| `--start` | Position from the start |
| `--width` | Width of the toast |


@@ -42,6 +42,10 @@ test('toast: basic, custom class', async () => {
await testToast(DIRECTORY, '#custom-class-toast');
});

test('toast: start end position', async () => {
await testToast(DIRECTORY, '#toast-start-and-end');
});

/**
* RTL Tests
*/
@@ -85,3 +89,7 @@ test('toast:rtl: basic, color', async () => {
test('toast:rtl: basic, custom class', async () => {
await testToast(DIRECTORY, '#custom-class-toast', true);
});

test('toast:rtl: start end position', async () => {
await testToast(DIRECTORY, '#toast-start-and-end', true);
});
@@ -68,6 +68,10 @@
Custom Class
</ion-button>

<ion-button expand="block" id="toast-start-and-end" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'toast-start-and-end'})">
Show Toast with start-end position
</ion-button>

<ion-toast-controller></ion-toast-controller>

<ion-grid>
@@ -210,6 +214,12 @@
.orange {
background-color: #f69234;
}
.toast-start-and-end {
--start: 0;
--end: 0;
--max-width: 100%;
}
</style>
</body>

@@ -10,12 +10,13 @@
--button-color: #{$toast-ios-button-color};
--color: #{$toast-ios-title-color};
--max-width: #{$toast-max-width};
--start: 10px;
--end: 10px;

font-size: $toast-ios-content-font-size;
}

.toast-wrapper {
@include position-horizontal(10px, 10px);
@include margin(auto);

display: block;
@@ -11,12 +11,13 @@
--button-color: #{ion-color(primary, base)};
--color: #{$toast-md-color};
--max-width: #{$toast-max-width};
--start: 8px;
--end: 8px;

font-size: #{$toast-md-font-size};
}

.toast-wrapper {
@include position-horizontal(8px, 8px);
@include margin(auto);

display: block;
@@ -24,6 +24,9 @@
* @prop --max-height: Maximum height of the toast
*
* @prop --button-color: Color of the button text
*
* @prop --start: Position from the start
* @prop --end: Position from the end
*/
--border-width: 0;
--border-style: none;
@@ -68,6 +71,7 @@

.toast-wrapper {
@include border-radius(var(--border-radius));
@include position-horizontal(var(--start), var(--end));

width: var(--width);
min-width: var(--min-width);

0 comments on commit 07e739a

Please sign in to comment.
You can’t perform that action at this time.