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

插槽

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

组 <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 菜单打开状态

伪元素

• ::port(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 | 对话框宽度 |

方法

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>