xtt-ui

Appearance

dialog 弹窗 ​

弹窗

open This is dialog

基础用法 ​

open This is dialog
html
<xtt-button id="open1">open</xtt-button>

<xtt-dialog id="dialog1"> This is dialog </xtt-dialog>

with title ​

open This is dialog open
自定义 header
This is dialog
html
<xtt-button id="open2">open</xtt-button>
<xtt-dialog id="operate2" title="dialog title"> This is dialog </xtt-dialog>

<xtt-button id="open3">open</xtt-button>
<xtt-dialog id="dialog3">
	<header slot="header">自定义 header</header>
	This is dialog
</xtt-dialog>
open This is dialog
自定义 footer
html
<xtt-button id="open4">open</xtt-button>
<xtt-dialog id="dialog4">
	This is dialog
	<footer slot="footer">自定义 footer</footer>
</xtt-dialog>
open This is dialog
html
<xtt-button id="open5">open</xtt-button>
<xtt-dialog id="dialog5" title="dialog title" modal-close> This is dialog </xtt-dialog>

align-center ​

open This is dialog
html
<xtt-button id="open6">open</xtt-button>
<xtt-dialog id="dialog6" title="dialog title" align-center> This is dialog </xtt-dialog>