# @wenmu/empty-dialog

> 一个空的 dialog 弹窗，内容及样式完全自定义。

Latest version **1.0.1** (published 2022-11-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install @wenmu/empty-dialog
pnpm add @wenmu/empty-dialog
yarn add @wenmu/empty-dialog
bun add @wenmu/empty-dialog
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-11-03 |
| First published | 2022-11-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 15.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wenmu |
| Maintainers | wenmu |
| Keywords | dialog, react, empty-dialog |

## Links

- npm: https://www.npmjs.com/package/@wenmu/empty-dialog
- Repository: https://gitee.com/wangpeng126_2009/empty-dialog
- Homepage: https://gitee.com/wangpeng126_2009/empty-dialog.git
- Issues: https://gitee.com/wangpeng126_2009/empty-dialog.git
- npm.io page: https://npm.io/package/@wenmu/empty-dialog

## Dependencies (7)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [css-loader](https://npm.io/package/css-loader.md) ^6.7.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [browserslist](https://npm.io/package/browserslist.md) ^4.12.0
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-11-03
- 1.0.0 — 2022-11-03

## README

# 描述

一个空的 dialog 弹窗，内容及样式完全自定义。

## 为什么要造这个轮子

第三方的弹窗到处都是，但是有一个问题，就是他们自带了一些样式，比如关闭按钮的位置，padding、角的弧度等几乎都和 UI 设计的不一样。要花大量功夫去研究第三方的组件的样式，然后暴力更改。

这个组件只是一个弹窗，只是留出了内容区域的位置，位置也可以通过自定义的样式进行重置。在内容区域里面自定义要显示的内容。

## 安装 install

```bash
npm i @wenmu/empty-dialog
```

## 效果

![效果](https://s2.loli.net/2022/11/03/ZIBhd28FbmaRq4f.png)
![重置内容区背景色](https://s2.loli.net/2022/11/03/8H3CwayPUXKhIEj.png)

## 使用

直接在组件中定义子元素，子元素就是显示的内容。关闭按钮也需要自定义。

```js
import EmptyDialog from "@wenmu/empty-dialog";

function Main() {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };
  return (
    <section>
      <div onClick={onClick}>弹窗</div>
      <EmptyDialog visible={visible} className={styles["custom-content"]}>
        <div>
          这是内容区域，完全自定义，白色背景只是为了显示区域的位置。
          <button
            onClick={() => {
              setVisible(false);
            }}
          >
            关闭
          </button>
        </div>
      </EmptyDialog>
    </section>
  );
}
```

## 参数

| 参数      | 说明       | 默认值 | 类型    |
| --------- | :--------- | :----- | ------- |
| visible   | 是否显示   | false  | boolean |
| className | 自定义样式 | ''     | string  |

---
_Source: https://npm.io/package/@wenmu/empty-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._