---
title: WKCell 单元格
group:
  title: 基础组件
  path: /base/
---

## 何时使用

- 一般用于信息显示列表
- cell 信息输入列表

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKCell, View, WKInput, WKIcon, WKCellGroup } from '@wakeapp/components';

export default () => {
  return (
    <PageWrapper title="基本使用">
      <WKCellGroup title="WKCell基本用法">
        <WKCell title="测试">惟客数据</WKCell>
        <WKCell title="标题" showArrow>
          惟客数据
        </WKCell>
        <WKCell title="测试" desc="惟客数据"></WKCell>
        <WKCell title="测试" titleSlot="惟客数据"></WKCell>
      </WKCellGroup>
    </PageWrapper>
  );
};
```

## 输入框用法

```tsx
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKCell, View, WKInput, WKIcon, WKCellGroup } from '@wakeapp/components';

export default () => {
  const icon = <WKIcon icon="save" color="red" style={{ fontSize: '48rpx' }}></WKIcon>;
  return (
    <PageWrapper title="输入框用法">
      <WKCellGroup title="修改背景">
        <WKCell title="标题" showArrow icon={icon}>
          惟客数据
        </WKCell>
        <WKCell title="标题" showArrow extra="<extra>">
          惟客数据
        </WKCell>
        <WKCell title="标题" titleSlot="<slot>" desc="描述" descSlot="<描述slot>">
          惟客数据
        </WKCell>
        <WKCell title="标题" required>
          惟客数据
        </WKCell>
        <WKCell title="标题" required>
          <WKInput
            type="text"
            placeholder="请输入"
            style={{ border: '1px solid var(--gray-alpha-4)', width: '100%', textAlign: 'right' }}
          ></WKInput>
        </WKCell>
        <WKCell title="测试" footer="这是footer部分">
          惟客数据
        </WKCell>
      </WKCellGroup>
    </PageWrapper>
  );
};
```

## 常用的两种情况

```tsx
import React from 'react';
import PageWrapper from '../PageWrapper';
import { WKCell, View, WKInput, WKIcon, WKCellGroup } from '@wakeapp/components';

export default () => {
  const icon = <WKIcon icon="save" color="gray"></WKIcon>;

  return (
    <PageWrapper title="常用的两种情况">
      <WKCellGroup title="标题背景不同于其他背景的情况">
        <WKCell title="测试" desc="惟客数据"></WKCell>
        <WKCell title="测试" titleSlot="惟客数据"></WKCell>
        <WKCell title="测试">惟客数据</WKCell>
        <WKCell title="测试" tooltip="tooltip" align="left">
          惟客数据
        </WKCell>
        <WKCell title="测试" error="error" align="left">
          惟客数据
        </WKCell>
        <WKCell title="测试" tooltip="tooltip" error="error" desc="desc" align="left">
          惟客数据
        </WKCell>
      </WKCellGroup>

      <WKCellGroup title="卡片的情况" card>
        <WKCell title="标题" showArrow icon={icon}>
          惟客数据
        </WKCell>
        <WKCell title="标题" showArrow extra="<extra>">
          惟客数据
        </WKCell>
        <WKCell title="标题" titleSlot="<slot>" desc="描述" descSlot="<描述slot>">
          惟客数据
        </WKCell>
        <WKCell title="标题" required>
          惟客数据
        </WKCell>
        <WKCell title="标题" required>
          <WKInput
            type="text"
            placeholder="请输入"
            style={{ border: '1px solid var(--gray-alpha-4)', width: '100%', textAlign: 'right' }}
          ></WKInput>
        </WKCell>
        <WKCell title="测试" footer="这是footer部分">
          惟客数据
        </WKCell>
        <WKCell title="测试" desc="描述" footer="这是footer部分">
          惟客数据
        </WKCell>
      </WKCellGroup>

      <View style={{ margin: '20rpx' }}>无标题情况</View>
      <WKCellGroup style={{ padding: 0 }}>
        <WKCell title="标题" showArrow icon={icon}>
          惟客数据
        </WKCell>
      </WKCellGroup>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKCell/WKCell.d.ts'></API>
