reactjs 如何在react中创建通知面板?

atmip9wb  于 2022-11-04  发布在  React
关注(0)|答案(2)|浏览(150)

我试图创建通知面板有点类似于下图所示:

我尝试在导航栏中使用折叠,但问题是当我点击通知图标时,它会展开整个导航栏。在另一个解决方案中,我尝试使用自定义下拉列表,但无法设置下拉列表的宽度。通知面板可以使用什么?请建议。

ff29svar

ff29svar1#

请尝试此代码,到如何创建通知面板中的React?

import React, { Component } from "react";
import { MDBNotification } from "mdbreact";

class Notification extends Component {
  render() {
    return (
      <MDBNotification
        autohide={3000} // by default = ∞ ms
        bodyClassName="p-5 font-weight-bold white-text"
        className="stylish-color-dark"
        closeClassName="blue-grey-text"
        fade
        icon="bell"
        iconClassName="blue-grey-text"
        message="Hello, world! This is a toast message."
        show
        text="11 mins ago"
        title="Bootstrap"
        titleClassName="elegant-color-dark white-text"
      />
    );
  }
}

export default Notification;

我希望这段代码对你有用。

  • 谢谢-谢谢
7gyucuyw

7gyucuyw2#

https://github.com/atapas/notifyme

<NotifyMe
  data={data}
  storageKey='notific_key'
  notific_key='timestamp'
  notific_value='update'
  heading='Notification Alerts'
  sortedByKey={false}
  showDate={true}
  size={64}
  color="yellow"
/>

相关问题