跳到主要内容

弹出层 Popup

弹出层容器,用于展示弹窗等信息。提供 popup 与 popoup-titlebar 2个组件,可以单独配置。

用法示例

基本用法

<ti-popup id="popup" position="bottom">
<div>内容演示</div>
</ti-popup>

使用 TiPopupTitlebar

<ti-popup id="popup" position="bottom">
<ti-popup-titlebar
id="title-bar"
title="标题"
sub-title=副标题
confirm-text="确认"
cancel-text="取消"
variant="with-confirm"
/>
<div>内容演示</div>
</ti-popup-titlebar>
</ti-popup>

滚动穿透

<ti-popup 
id="popup"
position="bottom"
>
<div>阻止滚动区域</div>
<div style="height: 100px;overflow-y: auto">
<div id="demo1" style="height: 200px;">
可滚动区域,不会穿透
</div>
</div>
</ti-popup>

ti-popup API

属性 Properties

名称类型必填默认值说明备注
mask-z-indexnumber10000遮罩 z-index 层级-
content-z-indexnumber10001内容 z-index 层级-
has-maskbooleantrue是否显示遮罩-
visiblebooleanfalse是否显示弹出层-
prevent-scrollstringtrue是否锁定背景滚动-
close-on-maskbooleantrue是否在点击遮罩层后关闭-
timeoutnumber300动画时间,默认单位为 ms-
timing-functionstringlinear动画效果,即 CSS 的属性-
positionstringcenter弹出位置,可选值为 top bottom right left center-
ext-mask-stylestring-自定义遮罩层样式-
ext-content-stylestring-自定义弹出层样式-
transitionstring-过渡动画类型-
destroy-on-closebooleanfalse关闭后是否销毁--
safe-areabooleantrue使用底部安全栏-

事件 Events

事件名返回值描述
show-弹窗展示时触发
close-点击遮罩关闭时触发
enter-入场动画开始时触发
entered-入场动画结束时触发
exit-出场动画开始时触发
exited-出场动画结束时触发

插槽 Slots

名称说明备注
default默认插槽-

外部样式类 External Classes

名称说明备注
ext-class内容区容器样式类-
ext-content-class内容区样式类-
ext-mask-class蒙层样式类-

CSS 变量 CSS Variables

变量默认值说明备注
--popup-mask-bg-colorvar(--neutral-color-1, #212121)蒙层背景色-
--popup-mask-opacity0.8蒙层背景色透明度-
--popup-radius@radius-16内容区圆角-
--popup-box-bg-colorvar(--neutral-color-9, #ffffff)内容区背景色-
--popup-vertical-width100%内容区宽度;position 为 up|bottom 时生效-
--popup-vertical-min-height200px内容区最小高度;position 为 up|bottom 时生效-
--popup-vertical-max-heightcalc(100% - 200px)内容区最大高度;position 为 up|bottom 时生效-
--popup-horizontal-height100vh内容区高度;position 为 left|right 时生效-
--popup-horizontal-min-width50px内容区最小宽度;position 为 left|right 时生效-
--popup-horizontal-max-width100%内容区最大宽度;position 为 left|right 时生效-

ti-popup-titlebar API

属性 Properties

名称类型必填默认值说明备注
titlestring-标题-
sub-titlestring-副标题-
variantstringwith-confirm标题栏类型,可选值with-confirmcancel-only
confirm-textstring'确定'确认按钮的文案-
cancel-textstring'取消'取消按钮的文案-
ext-stylestring-根节点样式-

variant 枚举含义:

含义
with-confirm标题+确定+取消
cancel-only标题+关闭
mini-close仅关闭

事件 Events

事件名返回值描述
cancel-点击关闭按钮时触发
confirm-点击确认按钮时触发
close-点击关闭按钮时触发

CSS 变量 CSS Variables

变量默认值说明备注
--popup-title-bar-confirm-colorrgb(var(--theme-r, 250), var(--theme-g, 44), var(--theme-b, 25))确认按钮颜色-
--popup-title-bar-cancel-colorvar(--neutral-color-2, #757575)取消按钮颜色-
--popup-title-bar-back-colorvar(--neutral-color-2, #757575)返回按钮颜色-
--popup-title-bar-mini-close-padding36px 36px 36px 0关闭按钮的padding-