# xt-ps-ui

> A Component Library for Vue.js.

Latest version **1.1.1** (published 2019-03-01) · 0 weekly downloads

## Install

```sh
npm install xt-ps-ui
pnpm add xt-ps-ui
yarn add xt-ps-ui
bun add xt-ps-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2019-03-01 |
| First published | 2019-03-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | sx |
| Maintainers | xblz |
| Keywords | vue, xt, component |

## Links

- npm: https://www.npmjs.com/package/xt-ps-ui
- Repository: https://github.com/xblz/vue-xblz-ui
- Homepage: https://github.com/xblz/vue-xblz-ui#readme
- Issues: https://github.com/xblz/vue-xblz-ui/issues
- npm.io page: https://npm.io/package/xt-ps-ui

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.1.1 (latest) — 2019-03-01

## README

### 说明

#### 报告类内容展示 table

- 数据格式如下：

```
[
  { label: '姓名', content: '张三' },
  { label: '婚姻状态', content: '未婚' },
  { label: '性别', content: '男' },
  { label: '出生年月', content: '1949/10/01' },
  { label: '家庭地址', content: '浙江省杭州市江干区市民中心' },
  { label: '居住地址', content: '浙江省杭州市滨江区' },
  { label: '条目1', content: '条目1说明内容' },
  { label: '条目2', content: '条目2说明内容' },
  { label: '条目3', content: '条目3说明内容' },
  { label: '条目4', content: '条目4说明内容' },
  { label: '条目5', content: '条目5说明内容' },
  { label: '条目6', content: '条目6说明内容' },
  { label: '条目7', content: '条目7说明内容' },
  { label: '条目8', content: '条目8说明内容' },
  { label: '条目9', content: '条目9说明内容' },
  { label: '条目10', content: '条目10说明内容' }
]
```

- 展示效果
  ![示例图片](./public/demo_pic.png)

### Install

```shell
npm install xt-ps-ui -S
```

### 快速集成

```javascript
import Vue from 'vue';
import XtComponents from 'xt-ps-ui';

Vue.use(XtComponents);

// or
import { Table } from 'xt-ps-ui';

Vue.component(Table.name, Table);
```

```vue
<xt-table
  :data="[{ label: '姓名', value: '张三' }]"
  :colCount="4"
  tableLineColor="#dfdfdf"
  labelProp="label"
  labelFontColor="black"
  labelBgColor="#efefef"
  labelAlign="center"
  labelWidth="50%"
  contentProp="content"
  contentFontColor="#000000"
  contentBgColor="#ffffff"
  contentAlign="left"
></xt-table>
```

### 参数说明

```
data : 展示内容，默认[]
colCount : 行展示列数，默认4
tableLineColor : table分割线颜色，默认#e8e8e8

labelProp : label取值字段，默认：label
labelFontColor : label文字颜色，默认#666666
labelBgColor : label背景色，默认#e9f7fe
labelAlign : label内容位置，可选值left、center、right，默认：center
labelWidth : label宽度，可选值单位px、%，默认120px

contentProp : content取值字段，默认：label
contentFontColor : content文字颜色，默认#666666
contentBgColor : content背景色，默认#ffffff
contentAlign : content内容位置，可选值left、center、right，默认：center
```

---
_Source: https://npm.io/package/xt-ps-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._