Teal TealUI

对话框ui/dialog

基本用法
不可关闭
事件
样式
API
Dialog 类

基本用法

<button id="btn">弹窗</button>
<script>
    import { VNode, from } from "ui/control";
    import Dialog from "ui/dialog";

    btn.onclick = () => {
        from(<Dialog title="标题">内容</Dialog>).show(btn);
    };
</script>

不可关闭

<button id="btn_hideClose">弹窗</button>
<script>
    import { VNode, from } from "ui/control";
    import Dialog from "ui/dialog";

    btn_hideClose.onclick = () => {
        const dialog = from(<Dialog title="标题" hideClose><button onClick={() => { dialog.close(); } }>手动关闭</button></Dialog>);
        dialog.show(btn_hideClose);
    };
</script>

事件

<button id="btn_event">弹窗</button>
<script>
    import { VNode, from } from "ui/control";
    import Dialog from "ui/dialog";

    btn_event.onclick = () => {
        const dialog = from(<Dialog title="标题" onBeforeClose={() => confirm("确定是否关闭?")}>内容</Dialog>);
        dialog.show(btn_event);
    };
</script>

样式

顶部
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
<div class="x-dialog" style="display: block; position: relative;">
    <section class="x-panel">
        <header class="x-panel-header">
            <button class="x-close x-icon" title="关闭" aria-label="关闭">✖</button>
            <h5>顶部</h5>
        </header>
        <div class="x-panel-body">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
    </section>
</div>

如果需要一个含有确定/取消按钮或者含有一个图标的对话框,请使用消息框。

API

Dialog 类

继承自:Control

表示一个对话框。

字段 类型 描述 继承自
⮞ header : HTMLElement

头部。

HTMLElement

头部。

—
⮞ title : NodeLike

标题。

NodeLike

标题。

—
⮞ hideClose : boolean

是否可关闭。

boolean

是否可关闭。

—
⮞ animation : ToggleAnimation

切换显示的动画。

ToggleAnimation

切换显示的动画。

—
⮞ target : HTMLElement

切换显示的动画目标。

HTMLElement

切换显示的动画目标。

—
⮞ onShow : (sender: Dialog) => void

显示对话框事件。

function

显示对话框事件。

—
⮞ onBeforeClose : (sender: Dialog) => boolean | void

即将关闭对话框事件。

function

即将关闭对话框事件。

—
⮞ onClose : (sender: Dialog) => void

关闭对话框事件。

function

关闭对话框事件。

—
⮞ draggable : boolean

是否可拖动。

boolean

是否可拖动。

—
⮞ body : HTMLElement

(已覆盖)(只读)获取用于包含子控件和节点的根元素。

继承自

Control

HTMLElement

(已覆盖)(只读)获取用于包含子控件和节点的根元素。

Control
⮞ readyState : ControlState

获取当前控件的渲染状态。

继承自

Control

ControlState

获取当前控件的渲染状态。

Control
⮞ elem : HTMLElement

关联的元素。

继承自

Control

HTMLElement

关联的元素。

Control
⮞ vNode : VNode

(保护的)获取当前控件关联的虚拟节点。

继承自

Control

VNode

(保护的)获取当前控件关联的虚拟节点。

Control
⮞ sourceVNode : VNode

获取创建该控件使用的源虚拟节点。

继承自

Control

VNode

获取创建该控件使用的源虚拟节点。

Control
⮞ alwaysUpdate : boolean

控件是否使用主动更新模式。

继承自

Control

boolean

控件是否使用主动更新模式。

Control
⮞ duration : number = 200

渐变的持续毫秒数。如果为 0 则不使用渐变。

继承自

Control

number

渐变的持续毫秒数。如果为 0 则不使用渐变。

Control
⮞ class : string

CSS 类名。

继承自

Control

string

CSS 类名。

Control
⮞ hidden : boolean

是否隐藏。

继承自

Control

boolean

是否隐藏。

Control
⮞ style : string | { [key: string]: string | number; }

控件样式。

继承自

Control

string | object

控件样式。

Control
⮞ id : string

控件序号。

继承自

Control

string

控件序号。

Control
⮞ content : NodeLike

控件内容。

继承自

Control

NodeLike

控件内容。

Control
⮞ onSelectStart : (e: Event, sender: Dialog) => void function

选择开始事件。

Control
⮞ onClick : (e: MouseEvent, sender: Dialog) => void function

点击事件。

Control
⮞ onAuxClick : (e: MouseEvent, sender: Dialog) => void function

中键点击事件。

Control
⮞ onDblClick : (e: MouseEvent, sender: Dialog) => void function

双击事件。

Control
⮞ onContextMenu : (e: PointerEvent, sender: Dialog) => void function

右键菜单事件。

Control
⮞ onMouseDown : (e: MouseEvent, sender: Dialog) => void function

鼠标按下事件。

Control
⮞ onMouseUp : (e: MouseEvent, sender: Dialog) => void function

鼠标按上事件。

Control
⮞ onMouseOver : (e: MouseEvent, sender: Dialog) => void function

鼠标移入事件。

Control
⮞ onMouseOut : (e: MouseEvent, sender: Dialog) => void function

鼠标移开事件。

Control
⮞ onMouseEnter : (e: MouseEvent, sender: Dialog) => void function

鼠标进入事件。

Control
⮞ onMouseLeave : (e: MouseEvent, sender: Dialog) => void function

鼠标离开事件。

Control
⮞ onMouseMove : (e: MouseEvent, sender: Dialog) => void function

鼠标移动事件。

Control
⮞ onWheel : (e: WheelEvent, sender: Dialog) => void function

鼠标滚轮事件。

Control
⮞ onScroll : (e: UIEvent, sender: Dialog) => void function

滚动事件。

Control
⮞ onTouchStart : (e: TouchEvent, sender: Dialog) => void function

触摸开始事件。

Control
⮞ onTouchMove : (e: TouchEvent, sender: Dialog) => void function

触摸移动事件。

Control
⮞ onTouchEnd : (e: TouchEvent, sender: Dialog) => void function

触摸结束事件。

Control
⮞ onTouchCancel : (e: TouchEvent, sender: Dialog) => void function

触摸撤销事件。

Control
⮞ onPointerEnter : (e: PointerEvent, sender: Dialog) => void function

指针进入事件。

Control
⮞ onPointerLeave : (e: PointerEvent, sender: Dialog) => void function

指针离开事件。

Control
⮞ onPointerOver : (e: PointerEvent, sender: Dialog) => void function

指针移入事件。

Control
⮞ onPointerOut : (e: PointerEvent, sender: Dialog) => void function

指针移开事件。

Control
⮞ onPointerDown : (e: PointerEvent, sender: Dialog) => void function

指针按下事件。

Control
⮞ onPointerMove : (e: PointerEvent, sender: Dialog) => void function

指针移动事件。

Control
⮞ onPointerUp : (e: PointerEvent, sender: Dialog) => void function

指针松开事件。

Control
⮞ onPointerCancel : (e: PointerEvent, sender: Dialog) => void function

指针取消事件。

Control
⮞ onGotPointerCapture : (e: PointerEvent, sender: Dialog) => void function

指针开始捕获事件。

Control
⮞ onLostPointerCapture : (e: PointerEvent, sender: Dialog) => void function

指针停止捕获事件。

Control
方法 描述 继承自
⮞ handleCloseClick()():void

(保护的)当点击关闭按钮后执行。

返回值

类型:void

(保护的)当点击关闭按钮后执行。

—
⮞ show(...)(target?:HTMLElement):void

显示当前对话框。

参数 类型 描述 默认值
target HTMLElement —

返回值

类型:void

显示当前对话框。

—
⮞ close(...)(target?:HTMLElement):void

关闭当前对话框。

参数 类型 描述 默认值
target HTMLElement —

返回值

类型:void

关闭当前对话框。

—
⮞ render()():VNode

(保护的)

返回值

类型:VNode

继承自

Control

(保护的)(已覆盖)当被子类重写时负责返回当前控件的虚拟节点。

Control
⮞ init()():void

(保护的)

返回值

类型:void

继承自

Control

(保护的)(已覆盖)当被子类重写时负责在关联元素后初始化当前控件。

Control
⮞ uninit()():void

(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。

返回值

类型:void

继承自

Control

(保护的)当被子类重写时负责在元素被取消关联前取消初始化当前控件。

Control
⮞ update()():void

重新渲染当前控件。

返回值

类型:void

继承自

Control

重新渲染当前控件。

Control
⮞ layout(changes)(changes:Changes):void

重新布局当前控件。

参数 类型 描述 默认值
changes* Changes —

返回值

类型:void

继承自

Control

重新布局当前控件。

Control
⮞ invalidate()():void

使当前控件无效并在下一帧重新渲染。

返回值

类型:void

继承自

Control

使当前控件无效并在下一帧重新渲染。

Control
⮞ renderTo(parent, ...)(parent:Control | Node, refChild?:Control | Node):void

将当前控件渲染到指定的父控件或节点。

参数 类型 描述 默认值
parent* Control | Node —
refChild Control | Node —

返回值

类型:void

继承自

Control

将当前控件渲染到指定的父控件或节点。

Control
⮞ find(selector)(selector:string):Control | HTMLElement

在当前控件查找指定的子控件或节点。

参数 类型 描述 默认值
selector* string —

返回值

类型:Control | HTMLElement

返回子控件或节点。如果找不到则返回 null。

继承自

Control

在当前控件查找指定的子控件或节点。

Control
⮞ query(selector)(selector:string):(Control | HTMLElement)[]

在当前控件查找匹配的所有子控件或节点。

参数 类型 描述 默认值
selector* string —

返回值

类型:(Control | HTMLElement)[]

返回子控件或节点列表。

继承自

Control

在当前控件查找匹配的所有子控件或节点。

Control