---
title: WKNoticeBar 通知栏
group:
  title: 展示组件
  path: /show/
---

## 何时使用

用于循环播放展示一组消息通知。

## 基础使用

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

export default () => {
  return (
    <PageWrapper title="基础使用">
      <WKNoticeBar text="最好的领导是做心灵的导航仪，而不是做赶车人" />
    </PageWrapper>
  );
};
```

## 滚动播放

```tsx
/**
 * title: 滚动播放
 * desc: 通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为
 */
import React from 'react';
import { WKNoticeBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  return (
    <PageWrapper title="滚动播放">
      <WKNoticeBar text="技术是开发它的人的共同灵魂" scrollable />
    </PageWrapper>
  );
};
```

## 多行展示

```tsx
/**
 * title: 多行展示
 * desc: 文字较长时，可以通过设置 wrapable 属性来开启多行展示。
 */
import React from 'react';
import { WKNoticeBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  return (
    <PageWrapper title="多行展示">
      <WKNoticeBar
        wrapable
        text="技术是开发它的人的共同灵魂技术是开发它的人的共同灵魂技术是开发它的人的共同灵魂技术是开发它的人的共同灵魂技术是开发它的人的共同灵魂技术是开发它的人的共同灵魂技术是开发它的人的共同灵魂"
      />
    </PageWrapper>
  );
};
```

## 通知栏模式

```tsx
/**
 * title: closeable
 * desc: closeable 模式，在右侧显示关闭按钮
 */
import React from 'react';
import { WKNoticeBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  return (
    <PageWrapper title="通知栏模式">
      <WKNoticeBar closeable text="技术是开发它的人的共同灵魂" />
    </PageWrapper>
  );
};
```

## 自定义样式

```tsx
/**
 * title: 自定义
 * desc: 通过 color 属性设置文本颜色，通过 background 属性设置背景色
 */
import React from 'react';
import { WKNoticeBar } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';

export default () => {
  return (
    <PageWrapper title="自定义样式">
      <WKNoticeBar color="#12CD3D" background="#E5FFE6" text="技术是开发它的人的共同灵魂" />
    </PageWrapper>
  );
};
```

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

## WKNoticeBarMethods

| Name  | Description  | Type         | Default |
| ----- | ------------ | ------------ | ------- |
| reset | 重置文字滚动 | `() => void` |         |
