# netx-ui
> Personal component UI library based on Vue3 implementation
Latest version **1.0.9** (published 2022-07-27) · 0 weekly downloads
## Install
```sh
npm install netx-ui
pnpm add netx-ui
yarn add netx-ui
bun add netx-ui
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-07-27 |
| First published | 2022-03-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 551.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | VuJson |
| Maintainers | vujson |
## Links
- npm: https://www.npmjs.com/package/netx-ui
- Repository: https://github.com/1024shao/nx-ui
- Homepage: https://github.com/1024shao/nx-ui#readme
- Issues: https://github.com/1024shao/nx-ui/issues
- npm.io page: https://npm.io/package/netx-ui
## Recent versions
- 1.0.9 (latest) — 2022-07-27
- 1.0.8 — 2022-03-27
- 1.0.7 — 2022-03-27
- 1.0.6 — 2022-03-08
- 1.0.5 — 2022-03-08
- 1.0.4 — 2022-03-07
- 1.0.3 — 2022-03-07
- 1.0.2 — 2022-03-07
- 1.0.1 — 2022-03-07
- 1.0.0 — 2022-03-07
## README
## Vue3 + Vite2
使用`Vue3.2 setup语法糖`开发个人的组件库，全面拥抱Vue3 ☑
## 使用
### 安装
```shell
npm i netx-ui
yarn add netx-ui
pnpm add netx-ui
```
### 全局注册
```vue
....
import NetXUI from 'netx-ui'
Vue.use(NetXUI)
import '../node_modules/netx-ui/dist/style.css' // 这个bug 待修复 作者正在学习中~
// 这样会报错 找不到这个css文件
// import 'netx-ui/dist/style.css'
...
```
## 组件
### 按钮(Button)
| 属性 | 值 | 描述 |
| -------- | ---------------- | -------------------------------------------------------------------- |
| type | String | 按钮类型：primary,info,success,warning,danger |
| plain | Boolean | 是否为朴素按钮，默认为 false |
| mimicry | Boolean | 是否为拟态按钮，和 plain 不能同时设置，会被 plain 覆盖。默认为 false |
| disabled | Boolean | 是否禁用按钮，默认为 false |
| round | Boolean | 是否为圆角按钮，默认为 false |
| circle | Boolean | 是否为圆形按钮，默认为 false |
| icon | Array 或 Boolean | font-awesome 字体数组，默认为 false |
| 事件 | 值 | 描述 |
| ----- | -------- | -------- |
| click | Function | 点击事件 |
---
### 对话框(Dialog)
| 属性 | 值 | 描述 |
| -------- | ------- | ---------------------------------- |
| title | String | 对话框头部提示，默认为"提示" |
| visiable | Boolean | 对话框可见状态，默认为 false |
| mimicry | Boolean | 对话框是否为拟态风格，默认为 false |
| width | String | 对话框宽度，默认为 60% |
| top | String | 对话框距离顶部位置，默认为 15vh |
| 插槽 | 描述 |
| ------ | ----------------------- |
| title | Dialog 标题区的内容 |
| footer | Dialog 按钮操作区的内容 |
---
### 输入框(Input)
| 属性 | 值 | 描述 |
| ------------ | ------- | ---------------------------------- |
| placeholder | String | 占位符，默认为空字符串 |
| type | String | 表单类型，默认为'text' |
| mimicry | Boolean | 对话框是否为拟态风格，默认为 false |
| name | String | 表单命名，默认为空 |
| value | String | 表单值，默认为空字符串 |
| disabled | Boolean | 是否禁用，默认为 false |
| clearable | Boolean | 是否可清空，默认为 false |
| showPassword | Boolean | 是否显示密码可见，默认为 false |
### 切换(Switch)
| 属性 | 值 | 描述 |
| ------------- | ------- | ---------------------------------- |
| mimicry | Boolean | 对话框是否为拟态风格，默认为 false |
| name | String | 表单命名，默认为空 |
| value | String | 表单值，默认为空字符串 |
| disabled | Boolean | 是否禁用，默认为 false |
| activeColor | String | 激活状态颜色，默认为#dcdfe6 |
| inactiveColor | String | 未激化状态颜色，默认为#dcdfe6 |
| 事件 | 值 | 描述 |
| ------ | -------- | ---------------------------------- |
| change | Function | 状态修改触发事件，返回修改后的状态 |
---
### 单选框(Radio)
| 属性 | 值 | 描述 |
| ------- | ------------------------- | ---------------------------------- |
| label | [String, Number, Boolean] | 单选框 label 值，默认为空字符串 |
| name | String | 表单命名，默认为空 |
| value | String | 表单值，默认为空字符串 |
| color | String | 单选框选择时的颜色，默认为#409eff |
### 单选框组(RadioGroup)
用于包裹 radio，通过 v-model 指定组内所有的 radio 的 v-model
---
### 复选框(Checkbox)
| 属性 | 值 | 描述 |
| ------- | ------------------------- | ---------------------------------- |
| label | [String, Number, Boolean] | 单选框 label 值，默认为空字符串 |
| mimicry | Boolean | 对话框是否为拟态风格，默认为 false |
| name | String | 表单命名，默认为空 |
| value | String | 表单值，默认为空字符串 |
| color | String | 单选框选择时的颜色，默认为#409eff |
### 复选框组(CheckboxGroup)
用于包裹多个 checkbox，通过 v-model 指定组内所有的 checkout 的 v-model
---
### 表单项(Form-item)
| 属性 | 值 | 描述 |
| ----- | ------ | ------------------------------- |
| label | String | 单选框 label 值，默认为空字符串 |
### 表单(Form)
| 属性 | 值 | 描述 |
| ----------- | ------ | -------------------- |
| model | Object | 表单对象，必填 |
| label-width | String | 标签宽度，默认"80px" |
---
### 轮播图(Carousel)
| 属性 | 值 | 描述 |
| ------- | ------------------------- | -----------------------------------|
| duration| ms | 轮播时间，单位毫秒，默认2000ms |
| autoplay| Boolean | 是否自动播放，默认为 true |
| initial | Number | 初始显示第几个item，默认为0 |
| hasDirection| Boolean | 是否显示左右箭头，默认为true |
| hasDot | Boolean | 是否显示轮播图地下的小点，默认为true |
| dotBgColor | String | 小圆点为acitve时的颜色，默认为#008c8c |
---
_Source: https://npm.io/package/netx-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._