卡片 · card-api 弹层结构
卡片家族
索引
base
cpanel
crumb
full
page
border
radius
api
artic
namecode
imgs
tips
total
default
box
checkbox
form
form-item
form-inpselect
table
pager
multipled
menubar
mode
menus
tabmenu
code
json
template
tab
slide
paginate
tree
toggle
marquee
timeaxis
waterfall
popup
nav
chatbox
drag
choose
progress
roll
弹层结构卡:
card-api 是弹窗基座样式,$Q.card() 等弹窗工厂生成的 DOM 即此结构(第 1/2/3 个子元素 = 头部 / 主体 / 按钮区)。api-mask 变体去边框去底色,作透明蒙版。
结构说明
<div class="card card-api">
<div>头部(主色底白字)</div>
<div>主体内容</div>
<div>按钮区(确定 / 取消)</div>
</div>
$Q.card 工厂参数
| title / content | 标题与内容(content 必填) |
| width / height | 宽高(默认 auto) |
| bgColor | 遮罩背景,如 rgba(0,0,0,0.4),必填 |
| class | 额外类,如 fill-white 白底 |
| sure / cancel | 确定 / 取消回调(可配 sureText/sureClass/cancelText) |
| btnPosition | 按钮位置 left / centor / right |
| canMove / hasMask / zIndex | 可拖拽 / 遮罩 / 层级 |
$Q.card({
title: '新增',
content: '<p>内容</p>',
bgColor: 'rgba(0,0,0,0.4)',
class: 'fill-white',
sure: function () { alert('确定'); },
cancel: function () { alert('取消'); }
});
api-mask 与 msg
$Q.msg({ content: '保存成功', timeOut: 2500, position: 'c' });
KuoqiUI v2.00 · 离线静态文档 · 界面基于 KuoqiUI ·
返回首页