0.5.2 • Published 1 month ago
匿龙组件库 @Nyloong/components
角度输入 <nl-angle>
角度输入 <nl-angle> 是一个 HTML 是输入，支持基本的输入组件属性
实例
<form>
<nl-angle name="angle" value="30" style="font-size: 5em;"></nl-angle>
<button>提交</button>
</form>
面包屑 <nl-breadcrumb>
属性
| HTML属性 | JS 属性 | 等价自定义属性 | 类型 | 默认值 | 说明 |
|---|
separator | separator | --nl-breadcrumb-separator | string | / | 面包屑的分隔符 |
实例
<nl-breadcrumb>
<span><a href="#">带链接1</a></span>
<span>普通2</span>
<span><a href="#">带链接3</a></span>
<span>普通4</span>
<span>最后一项5</span>
</nl-breadcrumb>
单元格 <nl-cell>
属性
| HTML属性 | JS 属性 | 类型 | 说明 |
|---|
label | label | string | 标签内容 |
explain | explain | string | 描述内容 |
disabled | disabled | boolean | 是否禁用 |
插槽
组 <nl-group>
支持多层嵌套
属性
| HTML属性 | JS 属性 | CSS 属性 | 类型 | 默认值 | 说明 |
|---|
column | column | | boolean | false | 是否为列的方向 |
nl-long | long | | boolean | false | 是否占用整行 |
radius | radius | | number | 0 | 圆角的大小 |
unit | unit | | string | px | 圆角的单位 |
| | nl-group-radius | length | - | 圆角，优先级高于 radius unit |
子元素属性
| HTML属性 | 类型 | 默认值 | 说明 |
|---|
nl-long | boolean | false | 是否默认填充此元素 |
菜单 <nl-menu>
支持多层嵌套
属性
| HTML属性 | JS 属性 | 类型 | 说明 |
|---|
open | open | boolean | 菜单是否为打开状态，仅根菜单有效 |
mask | mask | boolean | 是否采用覆盖层，如果浏览器不支持 showPopover() 方法，则强制使用覆盖层，仅根菜单有效 |
target | target | string | 菜单的显示位置(目标元素选择器)，仅根菜单有效 |
| targetElement | Element? | 菜单的显示位置(目标元素)，仅根菜单有效 |
| x | x | number | 菜单的显示位置(X)，仅根菜单有效 |
| y | y | number | 菜单的显示位置(Y)，仅根菜单有效 |
| direction | direction | 'inlineStart', 'inlineEnd', 'blockStart', 'blockEnd' 中的一个或多个， HTML 属性中,隔开, js 属性中为数组 | 菜单的显示方向，仅根菜单有效 |
| align | align | 'start', 'end', 'center' 中的一个或多个， HTML 属性中,隔开, js 属性中为数组 | 菜单的对其方式，仅根菜单有效 |
| disabled | disabled | boolean | 是否禁用当前菜单，仅子菜单有效 |
状态
伪元素
插槽
| 插槽 | 说明 |
|---|
| 默认插槽 | 菜单内容 |
label | 子菜单在父菜单中的标签，仅子菜单有效 |
菜单的显示位置说明
当配置有多种菜单的显示位置时，将按照以下优先级优先选择:
全局提示 <nl-message>
支持多层嵌套
属性
| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 |
|---|
open | open | boolean | false | 是否显示全局提示 |
duration | duration | number | 1.5 | 全局提示显示的时长(s)，到时自动隐藏， 0 表示不自动关闭 |
closable | closable | boolean | false | 是否显示关闭按钮 |
状态
--open 菜单打开状态--shown 菜单显示状态
实例
<nl-message open duration="3">111</nl-message>
<nl-message open>222</nl-message>
<nl-message open duration="0">333</nl-message>
对话框 <nl-modal>
支持多层嵌套
属性
| HTML属性 | JS 属性 | CSS 属性 | 类型 | 说明 |
|---|
open | open | | boolean | 对话框是否为打开状态 |
mask | mask | | boolean | 覆盖层是否为暗色 |
cancelable | cancelable | | boolean | 是否显示取消按钮 |
closable | closable | | boolean | 是否显示关闭按钮 |
mask-closable | maskClosable | | boolean | 点击遮罩层时，是否可以关闭对话框 |
disabled | disabled | | boolean | 取消按钮、关闭按钮、确定按钮及点击遮罩层关闭对话框是否可用 |
size | size | --nl-modal-size | string | 对话框宽度 |
方法
cancel()
点击取消按钮、关闭按钮或遮罩层，按下Esc键 也会调用此函数
触发 cancel 事件，并默认关闭对话框并触发 close 事件
ok()
触发 ok 事件，并默认关闭对话框并触发 close 事件
事件
| 事件 | 类型 | 是否冒泡 | 是否可取消 | 说明 |
|---|
ok | Event | 否 | 是 | 调用 ok() 方法时触发 |
cancel | Event | 否 | 是 | 调用 cancel() 方法时触发 |
close | Event | 否 | 否 | 调用 ok() 或 cancel() 方法并且没有取消时触发 |
插槽
| 插槽 | 说明 |
|---|
| 默认插槽 | 对话框主体内容 |
header | 自定义页头 |
footer | 自定义页脚内容 |
close | 自定义右上角关闭内容 |
可移动区域 <nl-movable> <nl-movable-area> <nl-movable-target>
<nl-movable> 可以在 <nl-movable-area> 内进行移动、缩放，如果 <nl-movable> 的后代中包含 <nl-movable-target>，则只有在作用于 <nl-movable-target> 上时，才能移动、缩放
<nl-movable> 属性
| 属性 | JS 属性 | 类型 | 默认值 | 说明 |
|---|
inertia | inertia | boolean | false | 是否拥有惯性 |
touch-movable | touchMovable | boolean | false | 是否支持触屏移动 |
touch-scalable | touchScalable | boolean | false | 是否支持触屏缩放 |
roller-movable | rollerMovable | boolean | false | 是否支持鼠标滚论移动 |
roller-scalable | rollerScalable | boolean | false | 是否支持鼠标滚论缩放 |
left-mouse-movable | leftMouseMovable | boolean | false | 是否支持鼠标左键移动 |
auto-adaptively | autoAdaptively | boolean | false | 是否自动自适应 |
global | global | boolean | false | 是否在整个 <nl-movable-area> 区域内操作都有效 |
<nl-movable> 方法
movable.adaptively()
进行自适应处理
实例
<nl-movable-area style="background-color: #666; width: 500px; height: 500px;">
<nl-movable
style="background-color: #88F; width: 100px; height: 100px;"
roller-movable roller-scalable left-mouse-movable></nl-movable>
</nl-movable-area>
滚动数字 <nl-roll-digit>
属性
| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 |
|---|
value | value | number | 0 | 要显示的数字 |
sign | sign | boolean | false | 是否为显示符号而非数字 |
digit | digit | number | 0 | 要显示的数字的位数， 0 表示个位，1 表示十位，2 表示百位...,负数表示小数点部分 |
plus | plus | boolean | false | 当为正数时，是否显示加号 |
zero | plus | + - | | 当为 0 时，所显示的符号 |
实例
<nl-roll-digit value="56789" digit="1" style="
background-color: #88F;
line-height: 2em;
inline-size: .8em;
border-radius: .2em;
"></nl-roll-digit>
栅格 <nl-row>
属性
| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 |
|---|
aliquot | aliquot | int | 24 | 栅格间隔 |
gutter-inline | gutterInline | string | 0 | 行内间距 |
gutter-block | gutterBlock | string | 0 | 行间间距 |
子元素属性
| HTML属性 | 类型 | 默认值 | 说明 |
|---|
nl-span | int | 1 | 栅格占位格数 |
nl-offset | string | 0 | 栅格左侧的间隔格数 |
实例
<nl-row aliquot="240" gutter-inline=2 gutter-block=20>
<span nl-span=60><div style="background-color:antiquewhite">1</div></span>
<span nl-span=40><div style="background-color:burlywood">1</div></span>
<span nl-span=40 nl-offset=60><div style="background-color:aqua">1</div></span>
<span nl-span=40><div style="background-color:chartreuse">1</div></span>
</nl-row>
间距 <nl-space>
支持多层嵌套
属性
| HTML属性 | JS 属性 | CSS 属性 | 类型 | 默认值 | 说明 |
|---|
column | column | | boolean | 24 | 是否为列的方向 |
space | space | | number | 16 | 间隙宽度的大小 |
unit | unit | | string | px | 间隙宽度的单位 |
| | nl-space | length | - | 间隙宽度，优先级高于 space unit |
实例
<nl-space space="20">
<div style="background-color:antiquewhite">1</div>
<div style="background-color:burlywood">1</div>
<div style="background-color:aqua">1</div>
<div style="background-color:chartreuse">1</div>
</nl-space>