匿龙组件库 @neeloong/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 | 是否禁用 |

插槽

| 插槽 | 说明 | | ---- | ---- | | icon | 前置图表 | | extra | 后置额外内容 |

折叠面板 <nl-collapse>

支持多层嵌套

属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | nonTrigger | nonTrigger | boolean | false | 是否隐藏切换器 | | startTrigger | startTrigger | boolean | false | 切换器位置是否在标签之前 | | accordion | accordion | boolean | false | 是否为手风琴模式 | | disabled | disabled | boolean | false | 是否禁用 | | open | open | boolean | false | 是否打开 | | animation | animation | boolean | false | 是否启用动画 | | menu | menu | boolean | false | 是否为菜单 | | label | label | string | `` | 标签内容 |

伪元素

• ::part(header) 头部部分
• ::part(main) 主体部分

插槽

| 插槽 | 说明 | | ---------- | ---------------- | | 默认插槽 | 主体内容 | | label | 自定义标签内容 | | trigger | 自定义切换器图标 |

实例

<nl-collapse animation accordion>
	<div slot="label">label<button>111</button></div>
	<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-collapse>

聚焦 <nl-focus>

属性

| HTML属性 | JS 属性 | css 属性 | 类型 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | target | target | | string | 聚焦位置(目标元素选择器) | | | targetElement | | Element? | 聚焦位置(目标元素) | | x | x | | number | 聚焦位置(X) | | y | y | | number | 聚焦位置(Y) | | width | width | | number | 聚焦位置(宽度) | | height | height | | number | 聚焦位置(高度) | | | | color | color | 遮罩颜色 |

组 <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 | 是否禁用当前菜单，仅子菜单有效 |

状态

• --open 菜单打开状态

伪元素

• ::part(menu) 弹出菜单部分

插槽

| 插槽 | 说明 | | ---- | ---- | | 默认插槽 | 菜单内容 | | label | 子菜单在父菜单中的标签，仅子菜单有效 |

菜单的显示位置说明

当配置有多种菜单的显示位置时，将按照以下优先级优先选择:

• targetElement
• target
• x y

全局提示 <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 | 对话框宽度 | | position | position | | 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-pagination> <nl-pagination-jumper> <nl-pagination-next> <nl-pagination-page> <nl-pagination-pager> <nl-pagination-prev> <nl-pagination-sizer> <nl-pagination-value>

<nl-pagination> 为分页内容的容器组件，其余为分页子组件，具体为：

• <nl-pagination-jumper> 页码跳转组件
• <nl-pagination-next> 下一页组件
• <nl-pagination-page> 指定页组件
• <nl-pagination-pager> 分页导航组件
• <nl-pagination-prev> 上一页组件
• <nl-pagination-sizer> 分页尺寸切换组件
• <nl-pagination-value> 分页信息组件

<nl-pagination> 属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | size | size | number | 0 | 每页数量，0 表示不分页 | | total | total | number | 0 | 总数 | | pages | pages | number | 1 | 总分页数，如果未设置，则为 Math.ceil(total / size) | | page | page | number | 1 | 当前页码 |

<nl-pagination-jumper> 属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | disabled | disabled | boolean | false | 是否禁用 |

<nl-pagination-next> 属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | disabled | disabled | boolean | false | 是否禁用 |

<nl-pagination-page> 属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | disabled | disabled | boolean | false | 是否禁用 | | value | value | number | 1 | 要跳转的页码 |

<nl-pagination-pager> 属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | disabled | disabled | boolean | false | 是否禁用 |

<nl-pagination-prev> 属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | disabled | disabled | boolean | false | 是否禁用 |

<nl-pagination-sizer> 属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | disabled | disabled | boolean | false | 是否禁用 | | sizes | sizes | number[] | false | 可选的分页数 | | label | label | string | '#' | 各选项的标签，# 将会被替换为每页的条数 | | non-label | nonLabel | string | '-' | 不分页选项的标签 |

<nl-pagination-value> 属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | name | name | string | page | 要显示的内容 |

<nl-pagination> 事件

change

| 事件 | JS 类型 | 是否冒泡 | 可否取消 | 说明 | | -------- | ------- | -------- | -------- | -------------- | | change | Event | 否 | 否 | 分页子组件组件改变每页数量或当前页码时触发 |

<nl-pagination-value> 的 name 属性说明

• size 每页数量
• total 总数
• pages 总分页数
• page 当前页码
• start 当前页的第一项序号
• end 当前页的最后一项序号

实例

<nl-pagination size="20" total="1563" page="6">
	<nl-pagination-value name="start"></nl-pagination-value>
	-
	<nl-pagination-value name="end"></nl-pagination-value>
	/
	<nl-pagination-value name="total"></nl-pagination-value>
	<nl-pagination-prev>上一页</nl-pagination-prev>
	<nl-pagination-pager></nl-pagination-pager>
	<nl-pagination-next>下一页</nl-pagination-next>
	<nl-pagination-jumper></nl-pagination-jumper>
	<nl-pagination-page value="11">11</nl-pagination-page>
	<nl-pagination-sizer sizes="10,20,50,0" non-label="不分页" label="# 条/页"></nl-pagination-sizer>
</nl-pagination>

滚动数字 <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>

面板分割 <nl-split>

支持多层嵌套

属性

| HTML属性 | JS 属性 | 类型 | 默认值 | 说明 | | ----------- | ----------- | -------- | -------- | -------------- | | column | column | boolean | false | 是否为列的方向 | | disabled | disabled | boolean | false | 是否禁用 | | min | min | number | 0 | 可调节的最小位置 | | max | max | number | 1 | 可调节的最大位置 | | value | value | number | 0.5 | 当前位置 |

事件

| 事件 | JS 类型 | 是否冒泡 | 可否取消 | 说明 | | -------- | ------- | -------- | -------- | -------------- | | change | Event | 否 | 否 | 用户调整位置 |

插槽

| 插槽 | 说明 | | ---------- | ---------------- | | start | 第一个面板内的内容 | | end | 第二个面板内的内容 | | trigger | 自定义触发器 |

实例

<nl-split min="0.2" max="0.9" value="0.8">
	<div slot="start">左边</div>
	<div slot="end">右边</div>
</nl-collapse>