pull/4172/head
mertsincan 2023-07-19 12:34:12 +01:00
parent 6578e42e19
commit 093562f217
3 changed files with 14 additions and 4 deletions

View File

@ -112,8 +112,8 @@ const classes = {
text: 'p-toast-message-text',
summary: 'p-toast-summary',
detail: 'p-toast-detail',
button: 'p-toast-icon-close p-link',
buttonIcon: 'p-toast-icon-close-icon'
closeButton: 'p-toast-icon-close p-link',
closeIcon: 'p-toast-icon-close-icon'
};
const { load: loadStyle } = useStyle(styles, { name: 'toast', manual: true });

View File

@ -65,12 +65,22 @@ export interface ToastPassThroughOptions {
buttonContainer?: ToastPassThroughOptionType;
/**
* Uses to pass attributes to the button's DOM element.
* @deprecated since v3.30.2. Use 'closeButton' option.
*/
button?: ToastPassThroughOptionType;
/**
* Uses to pass attributes to the button's DOM element.
*/
closeButton?: ToastPassThroughOptionType;
/**
* Uses to pass attributes to the button icon's DOM element.
* @deprecated since v3.30.2. Use 'closeIcon' option.
*/
buttonIcon?: ToastPassThroughOptionType;
/**
* Uses to pass attributes to the button icon's DOM element.
*/
closeIcon?: ToastPassThroughOptionType;
/**
* Uses to manage all lifecycle hooks
* @see {@link BaseComponent.ComponentHooks}

View File

@ -10,8 +10,8 @@
</template>
<component v-else :is="templates.message" :message="message"></component>
<div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
<button v-ripple :class="cx('button')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button') }">
<component :is="templates.closeicon || 'TimesIcon'" :class="[cx('buttonIcon'), closeIcon]" v-bind="ptm('buttonIcon')" />
<button v-ripple :class="cx('closeButton')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button'), ...ptm('closeButton') }">
<component :is="templates.closeicon || 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" />
</button>
</div>
</div>