npm package: @nyloong/components
Description: 匿龙组件库 @Nyloong/components ==============================
Author: 猛火Fierflame
Latest version: 0.5.2

匿龙组件库 @Nyloong/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-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` 菜单显示状态

### 实例

```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`  | 对话框宽度                                                 |

### 方法

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