reactjs antd代码示例：Bubble组件和message组件使用示例

偏执的太偏执、 2024-02-17 13:37 67阅读 0赞

Ant Design（AntD）是一个优秀的前端UI框架，为React应用程序提供了一整套设计语言和高质量的React组件。以下是一个使用AntD的`message`和`Bubble`组件的示例。

首先，确保你已经安装了Ant Design。如果还没有，可以通过npm或yarn进行安装：

npm install antd

或

yarn add antd

然后，你可以在你的React组件中使用`message`和`Bubble`组件。下面是一个简单的示例：

import React from 'react';
    import { message, Bubble } from 'antd';
    
    const Demo = () => {
      const handleClick = () => {
        message.success('这是一条成功消息！'); // 使用message组件显示一条成功消息
      };
    
      return (
        <Bubble direction="up" distance={30} showArrow={false}>
          <div style={
       { width: 200, height: 50, backgroundColor: '#f5f7fa', lineHeight: '50px', textAlign: 'center' }}>点击查看消息</div>
          <div style={
       { width: 200, height: 50, backgroundColor: '#2db7f5', lineHeight: '50px', textAlign: 'center', color: '#fff' }}>这是一条消息，点击查看更多</div>
          <button onClick={handleClick}>显示消息</button>
        </Bubble>
      );
    };
    
    export default Demo;

在这个示例中，我们首先导入了`React`和`antd`库中的`message`和`Bubble`组件。然后，我们创建了一个名为`Demo`的React组件。在这个组件中，我们定义了一个名为`handleClick`的函数，当点击按钮时，这个函数会调用`message.success`方法显示一条成功消息。

`Bubble`组件被用来包裹一些内容，并创建一个从底部弹出的动画效果。我们通过设置`direction`属性为"up"，`distance`属性为30，以及`showArrow`属性为false来定义这个动画效果。我们还为Bubble组件添加了一些样式，使其看起来更像一个气泡。最后，我们添加了一个按钮，当点击这个按钮时，会触发我们之前定义的`handleClick`函数，显示一条成功消息。