javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(toast): add "color" prop (#16100)

Browse Source 
This commit also refactors ion-toast, so it uses shadow-dom,
this is required since CSS variables
does not work well in non-shadow-dom components.

fixes #16099
This commit is contained in:
Manu MA
2018-10-26 18:53:02 +02:00
committed by GitHub
parent f0141817d4
commit c982856dba
14 changed files with 75 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components.d.ts vendored
View File

@ -4846,6 +4846,10 @@ export namespace Components {
*/
'closeButtonText'?: string;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
'color'?: Color;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string | string[];
@ -4913,6 +4917,10 @@ export namespace Components {
*/
'closeButtonText'?: string;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
*/
'color'?: Color;
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
'cssClass'?: string | string[];

4
core/src/components/action-sheet/action-sheet-interface.ts
View File

@ -1,4 +1,4 @@
import { AnimationBuilder } from '../../interface';
import { AnimationBuilder, Mode } from '../../interface';
export interface ActionSheetOptions {
header?: string;
@ -8,7 +8,7 @@ export interface ActionSheetOptions {
backdropDismiss?: boolean;
translucent?: boolean;
animated?: boolean;
mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

4
core/src/components/alert/alert-interface.ts
View File

@ -1,4 +1,4 @@
import { AnimationBuilder, TextFieldTypes } from '../../interface';
import { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
export interface AlertOptions {
header?: string;
@ -11,7 +11,7 @@ export interface AlertOptions {
translucent?: boolean;
animated?: boolean;
mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

4
core/src/components/loading/loading-interface.ts
View File

@ -1,4 +1,4 @@
import { AnimationBuilder, SpinnerTypes } from '../../interface';
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
export interface LoadingOptions {
spinner?: SpinnerTypes;
@ -9,7 +9,7 @@ export interface LoadingOptions {
translucent?: boolean;
animated?: boolean;
mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

4
core/src/components/modal/modal-interface.ts
View File

@ -1,4 +1,4 @@
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
export interface ModalOptions<T extends ComponentRef = ComponentRef> {
component: T;
@ -9,7 +9,7 @@ export interface ModalOptions<T extends ComponentRef = ComponentRef> {
delegate?: FrameworkDelegate;
animated?: boolean;
mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

4
core/src/components/picker/picker-interface.ts
View File

@ -1,4 +1,4 @@
import { AnimationBuilder } from '../../interface';
import { AnimationBuilder, Mode } from '../../interface';
export interface PickerOptions {
columns: PickerColumn[];
@ -7,7 +7,7 @@ export interface PickerOptions {
backdropDismiss?: boolean;
animated?: boolean;
mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

4
core/src/components/popover/popover-interface.ts
View File

@ -1,4 +1,4 @@
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
component: T;
@ -11,7 +11,7 @@ export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
delegate?: FrameworkDelegate;
animated?: boolean;
mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

31
core/src/components/toast/readme.md
View File

@ -20,21 +20,22 @@ The toast can be dismissed automatically after a specific amount of time by pass
## Properties
| Property | Attribute | Description | Type |
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `animated` | `animated` | If `true`, the toast will animate. Defaults to `true`. | `boolean` |
| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string \| undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` |
| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder \| undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder \| undefined` |
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `overlayIndex` | `overlay-index` | | `number` |
| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"bottom" \| "middle" \| "top"` |
| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. Defaults to `false`. | `boolean` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. Defaults to `false`. | `boolean` |
| Property | Attribute | Description | Type |
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `animated` | `animated` | If `true`, the toast will animate. Defaults to `true`. | `boolean` |
| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string \| undefined` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` |
| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder \| undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder \| undefined` |
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
| `overlayIndex` | `overlay-index` | | `number` |
| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"bottom" \| "middle" \| "top"` |
| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. Defaults to `false`. | `boolean` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. Defaults to `false`. | `boolean` |
## Events

1
core/src/components/toast/test/basic/index.html
View File

@ -27,6 +27,7 @@
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">Show Color Toast</ion-button>
<ion-toast-controller></ion-toast-controller>

5
core/src/components/toast/toast-interface.ts
View File

@ -1,4 +1,4 @@
import { AnimationBuilder } from '../../interface';
import { AnimationBuilder, Color, Mode } from '../../interface';
export interface ToastOptions {
message?: string;
@ -10,7 +10,8 @@ export interface ToastOptions {
translucent?: boolean;
animated?: boolean;
mode?: string;
color?: Color;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

14
core/src/components/toast/toast.ios.scss
View File

@ -4,7 +4,7 @@
// iOS Toast
// --------------------------------------------------
.toast-ios {
:host {
--background: #{$toast-ios-background-color};
--button-color: #{$toast-ios-button-color};
--color: #{$toast-ios-title-color};
@ -12,7 +12,7 @@
font-size: $toast-ios-title-font-size;
}
.toast-ios .toast-wrapper {
.toast-wrapper {
@include position-horizontal(10px, 10px);
@include margin(auto);
@include border-radius($toast-ios-border-radius);
@ -25,19 +25,15 @@
z-index: $z-index-overlay-wrapper;
}
.toast-translucent-ios .toast-wrapper {
:host(.toast-translucent) .toast-wrapper {
background: $toast-ios-translucent-background-color;
backdrop-filter: $toast-ios-translucent-filter;
}
.toast-ios .toast-wrapper.toast-middle {
.toast-wrapper.toast-middle {
opacity: .01;
}
.toast-ios .toast-message {
.toast-message {
@include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
}
.toast-ios .toast-button {
color: var(--button-color);
}

12
core/src/components/toast/toast.md.scss
View File

@ -4,14 +4,14 @@
// Material Design Toast
// --------------------------------------------------
.toast-md {
:host {
--background: #{$toast-md-background};
--color: #{$toast-md-title-color};
font-size: $toast-md-title-font-size;
}
.toast-md .toast-wrapper {
.toast-wrapper {
@include position-horizontal(0, 0);
@include margin(auto);
@ -24,18 +24,18 @@
z-index: $z-index-overlay-wrapper;
}
.toast-md .toast-wrapper.toast-top {
.toast-wrapper.toast-top {
padding-top: var(--ion-safe-area-top, 0);
}
.toast-md .toast-wrapper.toast-bottom {
.toast-wrapper.toast-bottom {
padding-bottom: var(--ion-safe-area-bottom, 0);
}
.toast-md .toast-wrapper.toast-middle {
.toast-wrapper.toast-middle {
opacity: .01;
}
.toast-md .toast-message {
.toast-message {
@include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start);
}

13
core/src/components/toast/toast.scss
View File

@ -3,7 +3,9 @@
// Toast
// --------------------------------------------------
ion-toast {
:host {
--button-color: inherit;
/**
* @prop --background: Background of the toast
* @prop --button-color: Color of the button text
@ -26,6 +28,12 @@ ion-toast {
pointer-events: none;
}
:host(.ion-color) {
--color: #{current-color(contrast)};
--background: #{current-color(base)};
--button-color: inherit;
}
.toast-wrapper {
background: var(--background);
}
@ -42,7 +50,6 @@ ion-toast {
bottom: 0;
}
.toast-container {
display: flex;
@ -53,7 +60,7 @@ ion-toast {
}
.toast-button {
--color: inherit;
color: var(--button-color);
font-size: $toast-button-font-size;
}

22
core/src/components/toast/toast.tsx
View File

@ -1,8 +1,8 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
import { Animation, AnimationBuilder, Color, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
import { dismiss, eventMethod, present } from '../../utils/overlays';
import { createThemedClasses, getClassMap } from '../../utils/theme';
import { createColorClasses, getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
@ -14,7 +14,8 @@ import { mdLeaveAnimation } from './animations/md.leave';
styleUrls: {
ios: 'toast.ios.scss',
md: 'toast.md.scss'
}
},
shadow: true
})
export class Toast implements ComponentInterface, OverlayInterface {
@ -38,6 +39,13 @@ export class Toast implements ComponentInterface, OverlayInterface {
*/
@Prop() mode!: Mode;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information on colors, see [theming](/docs/theming/basics).
*/
@Prop() color?: Color;
/**
* Animation to use when the toast is presented.
*/
@ -173,16 +181,14 @@ export class Toast implements ComponentInterface, OverlayInterface {
}
hostData() {
const themedClasses = this.translucent ? createThemedClasses(this.mode, 'toast-translucent') : {};
return {
style: {
zIndex: 60000 + this.overlayIndex,
},
class: {
...themedClasses,
...createThemedClasses(this.mode, 'toast'),
...getClassMap(this.cssClass)
...createColorClasses(this.color),
...getClassMap(this.cssClass),
'toast-translucent': this.translucent
}
};
}