页面信息

页面是一种弹出页，用于展示相关内容。

样式

Preview
Code

这个是内容

<div class="bny-page" style="position: unset;width: 350px; height: 300px;">
    <div class="header">
        <div class="title">标题</div>
        <div class="setwin">
            <span class="bny-icon icon-minus min-auto"></span>
            <span class="bny-icon icon-quanping zoom"></span>
            <span class="bny-icon icon-cuo close-btn"></span>
        </div>
    </div>
    <div class="content">这个是内容</div>
</div>

htmx-组件

Preview
Code

<button hx-ext="bny-page" hx-get="/test/data/page.html" hx-trigger="click" class="bny-btn">窗体页面信息</button>
<button hx-ext="bny-page" hx-get="/test/data/page.html" hx-trigger="click" class="bny-btn" title="false" anim="right" width="600px" height="600px" offset="right" shade>右边抽屉</button>
<button hx-ext="bny-page" hx-get="/test/data/page.html" hx-trigger="click" class="bny-btn" title="false" anim="down" width="100%" height="200px" offset="bottom" shade>底部抽屉</button>
<button hx-ext="bny-page" hx-get="/test/data/page.json" hx-trigger="click" class="bny-btn">自定义页面信息</button>
<button hx-ext="bny-page" hx-get="/test/data/page.html" hx-trigger="click" class="bny-btn" title="false" anim="up" width="100%" height="200px" offset="top" shade>顶部抽屉</button>

API

标签属性

属性	默认值	必须	描述
hx-ext	bny-page	是	拓展属性名
title	'页面'	否	标题，默认值为'页面'，当为'false'时表示不显示标题栏
shade		否	是否显示遮罩层，默认值为不显示。点击遮罩层会关闭弹窗
anim	'scale'	否	提示动画:scale-缩放,left-左移,right-右移,up-上移,down-下移
width	'680px'	否	宽度，默认值为'680px'
height	'520px'	否	高度，默认值为'520px'
offset	'auto'	否	偏移量，默认值为'auto',top/left/right/bottom

Json属性

属性	默认值	必须	描述
data	{}	是	自定义属性，用于在弹窗中显示
data.title	'页面'	否	标题，默认值为'页面',当为false时表示不显示标题栏
data.anim	'scale'	否	提示动画:scale-缩放,left-左移,right-右移,up-上移,down-下移
data.shade	false	否	是否显示遮罩层，默认值为不显示。点击遮罩层会关闭弹窗
data.width	'680px'	否	宽度，默认值为'680px'
data.height	'520px'	否	高度，默认值为'520px'
data.offset	'auto'	否	偏移量，默认值为'auto',top/left/right/bottom
data.content	''	否	内容，默认值为空字符串

Js用法

bny.page(content, options)

属性	默认值	必须	描述
content		是	内容，无默认，必须传入字符串
options	{}	否	选项，默认空对象
options.title	'页面'	否	标题，默认值为'页面',当为false时表示不显示标题栏
options.anim	'scale'	否	提示动画:scale-缩放,left-左移,right-右移,up-上移,down-下移
options.width	'680px'	否	宽度，默认值为'680px'
options.height	'520px'	否	高度，默认值为'520px'
options.offset	'auto'	否	偏移量，默认值为'auto',top/left/right/bottom,或者数组[string x,string y]
options.shade	false	否	是否显示遮罩层，默认值为不显示。点击遮罩层会关闭弹窗

样式
htmx-组件
API