---
title: WKDivider 分割线
group:
  title: 展示组件
  path: /show/
---

## 何时使用

区隔内容的分割线。

- 对不同章节的文本段落进行分割。

- 对行内文字/链接进行分割，例如表格的操作列。

## 基本使用

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

export default () => {
  return (
    <PageWrapper title="基础使用">
      <View className="wk-divider-page" style={{ width: '100%' }}>
        <View className="content">
          <WKDivider />
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 展示文本

```tsx
/**
 * title: 展示文本
 * desc: 传入tip参数，文字会显示在分割线的中间
 */
import React from 'react';
import { View, WKDivider } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  return (
    <PageWrapper title="展示文本">
      <View className="wk-divider-page" style={{ width: '100%' }}>
        <View className="content">
          <WKDivider tip="文本展示" />
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 虚线样式

```tsx
/**
 * title: 虚线样式
 * desc: 设置dashed属性为true，默认为false
 */
import React from 'react';
import { View, WKDivider } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  return (
    <PageWrapper title="虚线样式">
      <View className="wk-divider-page" style={{ width: '100%' }}>
        <View className="content">
          <WKDivider tip="文本展示" dashed />
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 自定义样式

```tsx
/**
 * title: 自定义样式
 * desc: 可以自定义样式，修改border-bottom覆盖分割线的样式
 */
import React from 'react';
import { View, WKDivider } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  return (
    <PageWrapper title="自定义样式">
      <View className="wk-divider-page" style={{ width: '100%' }}>
        <View className="content">
          <WKDivider tip="文本展示" style={{ color: '#1b99ff' }} />
        </View>
      </View>
    </PageWrapper>
  );
};
```

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