@daysnap/horn-ui/src/hor-cell/README.md

hron ui

# HorCell 单元格

### 介绍

单元格为列表中的单个展示项，也可以用于表单项底层

## 代码演示

### 基础用法

```html
<hor-cell label="单元格" value="内容" />
<hor-cell label="单元格" value="内容" arrow />
<hor-cell required label="单元格" value="内容" icon="setting-o" arrow />
```

### 内容多行

```html
<hor-cell label="单元格" lineClamp="2" value="1内容内容内容内容内容内容内容内1内2" />
<hor-cell label="可省略" value="1内容内容内容内容内容内容内容内容内容内容内容内容2" ellipsis />
<hor-cell
  label="多行可省略"
  lineClamp="2"
  value="1内容内容内容内容内容内容内容内1内容内容内容内容内容内容内容内容内容内容内容内容2容内容内容内容内容2"
/>
```

### 垂直排列

```html
<hor-cell
  required
  direction="column"
  label="单元格"
  value="1内容内容内容内容内容内容内容内容内容内容内容内容2"
  arrow
/>
<hor-cell
  direction="column"
  lineClamp="2"
  label="超出多少行可省略"
  value="1内容内容内容内容内容内容内容内容内容内容内容内容21内容内容内容内容内容内容内容内容内容内容内容内容21内容内容内容内容内容内容内容内容内容内容内容内容2"
/>
```

### 使用插槽

```html
 <hor-cell label="单元格">
  <b>插槽内容</b>
  <hor-icon name="hor-version" />
</hor-cell>
<hor-cell label="单元格" arrow>
  <input type="text" placeholder="请输入密码" />
  <template #suffix>
    <hor-icon name="plus" />
  </template>
</hor-cell>
```

## API

### Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horCellProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell, horCellProps } from '.'
  import { parseType } from '../utils'
</script>