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 icon property to show icon at start of toast content (#23596)

Browse Source 
resolves #23524

Co-authored-by: William Martin <contact@willmartin.dev>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Dominik Geng
2021-07-23 18:46:01 +02:00
committed by GitHub
parent fffef8acd2
commit df24c8c5ae
11 changed files with 72 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,6 +18,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
* @part container - The element that wraps all child elements.
* @part header - The header text of the toast.
* @part message - The body text of the toast.
* @part icon - The icon that appears next to the toast content.
*/
@Component({
tag: 'ion-toast',
@ -106,6 +107,12 @@ export class Toast implements ComponentInterface, OverlayInterface {
*/
@Prop() animated = true;
/**
* The name of the icon to display, or the path to a valid SVG file. See `ion-icon`.
* https://ionic.io/ionicons
*/
@Prop() icon?: string;
/**
* Emitted after the toast has presented.
*/
@ -243,7 +250,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
<ion-icon
icon={b.icon}
slot={b.text === undefined ? 'icon-only' : undefined}
class="toast-icon"
class="toast-button-icon"
/>}
{b.text}
</div>
@ -281,6 +288,10 @@ export class Toast implements ComponentInterface, OverlayInterface {
<div class="toast-container" part="container">
{this.renderButtons(startButtons, 'start')}
{this.icon !== undefined &&
<ion-icon class="toast-icon" part="icon" icon={this.icon} lazy={false} aria-hidden="true"></ion-icon>
}
<div class="toast-content">
{this.header !== undefined &&
<div class="toast-header" part="header">{this.header}</div>