javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +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

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
}
};
}