mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-26 22:31:46 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
1.1 KiB
1.1 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 6.1 |
|
zh-CN
配合 react-text-loop-next 或 react-fast-marquee 实现消息轮播通知栏。
en-US
Show a loop banner by using with react-text-loop-next or react-fast-marquee.
import React from 'react';
import { Alert } from 'antd';
import { TextLoop } from 'react-text-loop-next';
import Marquee from 'react-fast-marquee';
const App: React.FC = () => (
<>
<Alert
banner
message={
<TextLoop mask>
<div>Notice message one</div>
<div>Notice message two</div>
<div>Notice message three</div>
<div>Notice message four</div>
</TextLoop>
}
/>
<Alert
banner
message={
<Marquee pauseOnHover gradient={false}>
I can be a React component, multiple React components, or just some text.
</Marquee>
}
/>
</>
);
export default App;