ReactJS 语义 UI 模态模块

ReactJS 语义 UI 模态模块是一个基于ReactJS和语义UI的模态弹窗组件。它可以方便地为你的应用程序添加模态框，如确认弹窗、消息框、登录框等等。

安装

你可以通过npm来安装ReactJS 语义 UI 模态模块：

npm install @two-ui/semantic-ui-react-modal

使用

使用ReactJS 语义 UI 模态模块非常简单，只需导入Modal组件，然后在你的代码中像这样使用它：

import React, { useState } from 'react';
import { Button, Modal } from '@two-ui/semantic-ui-react-modal';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Show Modal</Button>

      <Modal
        open={open}
        onClose={() => setOpen(false)}
        title="Confirm"
        content="Are you sure you want to delete this item?"
        actions={[
          <Button key="cancel" label="Cancel" onClick={() => setOpen(false)} />,
          <Button key="delete" label="Delete" onClick={() => console.log('delete')} />,
        ]}
      />
    </div>
  );
}

在代码中，Modal组件通过open属性来控制是否显示。onClose属性则指定了当模态框关闭时应该执行的函数，title和content属性分别用于设置模态框的标题和主体内容，而actions属性则是一个数组，它包含了模态框中所有操作的按钮。

自定义主题风格

ReactJS 语义 UI 模态模块的默认样式是基于语义UI风格的。你可以通过覆盖CSS来自定义自己的主题风格。这里有一个例子：

.my-modal {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

import React, { useState } from 'react';
import { Button, Modal } from '@two-ui/semantic-ui-react-modal';
import './my-modal.css';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Show Modal</Button>

      <Modal
        className="my-modal"
        open={open}
        onClose={() => setOpen(false)}
        title="Confirm"
        content="Are you sure you want to delete this item?"
        actions={[
          <Button key="cancel" label="Cancel" onClick={() => setOpen(false)} />,
          <Button key="delete" label="Delete" onClick={() => console.log('delete')} />,
        ]}
      />
    </div>
  );
}

在代码中，我们通过className属性来指定了一个CSS类名，然后在CSS文件中通过这个类名来自定义样式。

以上是ReactJS 语义 UI 模态模块的简单介绍，它可以帮助你方便地在你的应用程序中添加模态框。它易于使用，具有灵活的自定义主题风格的能力。如果你的应用程序需要使用模态框，ReactJS 语义 UI 模态模块将是一个不错的选择。