npm package: @neeloong/components
Description: 匿龙组件库 @neeloong/components ==============================
Author: 猛火Fierflame
Latest version: 0.8.0

匿龙组件库 @neeloong/components
==============================

角度输入 `<nl-angle>`
------------------------

角度输入 `<nl-angle>` 是一个 HTML 是输入，支持基本的输入组件属性

### 实例

```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` | ` / `  | 面包屑的分隔符 |

### 实例

```html
<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`  | 自定义切换器图标 |

### 实例

```html
<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-highlighter>`
------------------------

支持多层嵌套

### 属性

| HTML属性    | JS 属性     | 类型     | 默认值   | 说明           |
| ----------- | ----------- | -------- | -------- | -------------- |
| `pattern` | `pattern` | `string` | `''` | 高亮内容匹配规则，与 `<input>` 的 `pattern` 类似，但会额外使用 `g` 标志且不会为其前后添加`^(?:` 和 `)$` |
| `text` | `text` | `string` | `''` | 高亮内容，只有当未配置 `pattern` 属性，或 `pattern` 无效时才有效 |

### 引入的 CSS 选择器

- `::highlight(nl-highlighter)` 高亮文本部分，对于高亮部分，需要手动定义样式。

### 实例

```html
<style>
::highlight(nl-highlighter) {
	background-color: yellow;
}
</style>
<nl-highlighter text="bc">
12345a<a href="#a">b</a>c12345ab123456abc
</nl-highlighter>
```

菜单 `<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` 菜单显示状态

### 实例

```html
<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()`

进行自适应处理

### 实例

```html
<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` 当前页的最后一项序号


### 实例

```html
<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 时，所显示的符号 |

### 实例

```html
<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` | 栅格左侧的间隔格数 |

### 实例

```html
<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` |

### 实例

```html
<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`  | 自定义触发器 |


### 实例

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

```