Modal

The ty-modal component is used to display content in a modal dialog overlay. It supports a close icon and can be triggered to open or close programmatically.

Usage

Live Editor

<ty-modal open>
  <div slot="header">Modal Header</div>
  <div>Modal Content</div>
  <div slot="footer">Modal Footer</div>
</ty-modal>

Result

Loading...

API

Properties

Name	Description	Type	Default
open	Controls the visibility of modal	Boolean	false
showCloseIcon	Displays a close icon in the modal	Boolean	true
size	size	'sm', 'md', 'lg', 'xl	'md'

Methods

Method	Description
showModal()	Opens the modal.
hideModal()	Closes the modal.
handleCloseClick()	Handles the action when the close icon or overlay is clicked.

Events

Name	Description
ty-close	Emitted when the modal is closed.