feat(alert, toast): pass arbitrary HTML attributes to host element (#23891)

resolves #23825
This commit is contained in:
William Martin
2021-09-14 22:44:57 -04:00
committed by GitHub
parent 1e13429731
commit 73a1daf0aa
13 changed files with 108 additions and 9 deletions

View File

@ -10,6 +10,7 @@ import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
import { ToastAttributes } from './toast-interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@ -106,6 +107,11 @@ export class Toast implements ComponentInterface, OverlayInterface {
*/
@Prop() animated = true;
/**
* Additional attributes to pass to the toast.
*/
@Prop() htmlAttributes?: ToastAttributes;
/**
* Emitted after the toast has presented.
*/
@ -263,6 +269,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
'toast-wrapper': true,
[`toast-${this.position}`]: true
};
const role = this.htmlAttributes?.role || (allButtons.length > 0 ? 'dialog' : 'status');
return (
<Host
@ -276,6 +283,8 @@ export class Toast implements ComponentInterface, OverlayInterface {
})}
tabindex="-1"
onIonToastWillDismiss={this.dispatchCancelHandler}
role={role}
{...this.htmlAttributes as any}
>
<div class={wrapperClass}>
<div class="toast-container" part="container">