{"_id":"@alita/popup","_rev":"4-62370259e82ad525977681ef1ab0bfb0","name":"@alita/popup","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.1":{"name":"@alita/popup","version":"0.2.1","description":"弹出层容器，用于展示弹窗、信息提示等内容。","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/src/index.d.ts","typings":"dist/src/index.d.ts","repository":{"type":"git","url":"git+https://github.com/alitajs/components.git"},"authors":["LimMem <1270253618@qq.com> (https://github.com/LimMem)"],"scripts":{"build":"father-build","watch":"father-build -w","start":"dumi dev"},"keywords":[],"license":"ISC","peerDependencies":{"react":">=16.8.6","react-dom":">=16.14.0"},"dependencies":{"ahooks":"^2.9.6","antd-mobile":"^2.3.4","classnames":"^2.2.1","dom-helpers":"^5.2.1","react-transition-group":"^4.4.2"},"devDependencies":{"@types/react-transition-group":"^4.4.2"},"publishConfig":{"access":"public"},"gitHead":"01fbcba5004538473b1a7e761c263bf359f724d2","bugs":{"url":"https://github.com/alitajs/components/issues"},"homepage":"https://github.com/alitajs/components#readme","_id":"@alita/popup@0.2.1","_nodeVersion":"12.18.3","_npmVersion":"lerna/4.0.0/node@v12.18.3+x64 (darwin)","dist":{"integrity":"sha512-AgHtQ6lGi6qCzz9p/k0JnHW5UaMga2NVHf607zy9X/+nlzgH50fVBikprhkkF9Xf60i32juglF2afbSXIcRAhg==","shasum":"4a5d21d40d06999486c3251693227e94193fd486","tarball":"https://registry.npmjs.org/@alita/popup/-/popup-0.2.1.tgz","fileCount":684,"unpackedSize":2099190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP0y0CRA9TVsSAnZWagAAYqEQAJRUpAtDndrsASPceI9y\nFLZSymCQBsFXD0ZIEXilQby5pK2I2qzBFCKfZuy65dQeKAFZtviJtxftf83+\nw+m4xXJg0JUjbpfrdjoaVkMqCIG8WIy2rbjdZnN3IAHWj5amp/bwTJgmqK35\nX6AaAAU6oMhR64v91MR0fkHvoPu27LGTYcBk9sD+KQcK0BtQcjBFOXXrac0j\nUCeSd533yk5UgdjfXPbXZFpj7T5Qgp4QlEoufAjosdDYzdwW2RXVng/yTotF\nX2hSwkYew7z90FWoe7e227fIRmaWv16JkQx/LakGNIa3jf6ypkBNuitfEZNk\nWsf29b4yeGRg8j7PjaMAplliBeURCenMP7HeLepP6w56I6Qlo6KrZlcdzlh8\nnzij5PpRS++vYjjnuLm29G3a7s9oy5nnuX7NZtjLul1n3hCTogw8o6IZ6Cdn\nu2r0QzEYa1oCVSuI2kxiHLlHDrUQrh3VOA6pDnJYOij7wIxsL1fBYt28N9hC\nV59/JJi9z8WWwxkragTGX02tFnp5H9XlMaz5wLBTT8Nni2gf2VqC5woNYbES\nPWlDSj+JQx/WHg5Je6Cxdc3XG+3fabUEfliA+KUSDyGmwvWoxTj2rN9ei5GF\nfLSIx2+o/OB2MyVZ0+KJRmxF7prVhgNVuPaB0H+nO22CID15W55SgT+XgmTU\nijKi\r\n=CPs3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/a1z2muXzJD2vDtO4vBp2a1XCdzSpV83Ex06SgL92bAIhAKO3VVOLgvxgkE09xaPWBCDHFCvvTnO6jAVKcWD/Fg4g"}]},"_npmUser":{"name":"hammersjs","email":"1270253618@qq.com"},"directories":{},"maintainers":[{"name":"cjy0208","email":"fanluan058@gmail.com"},{"name":"hammersjs","email":"1270253618@qq.com"},{"name":"hang1017","email":"437132124@qq.com"},{"name":"xiaohuoni","email":"448627663@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/popup_0.2.1_1631538355902_0.8057122066326925"},"_hasShrinkwrap":false},"0.2.3":{"name":"@alita/popup","version":"0.2.3","description":"弹出层容器，用于展示弹窗、信息提示等内容。","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","typings":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/alitajs/components.git"},"authors":["LimMem <1270253618@qq.com> (https://github.com/LimMem)"],"scripts":{"build":"father-build","watch":"father-build -w","start":"dumi dev"},"keywords":[],"license":"ISC","peerDependencies":{"react":">=16.8.6","react-dom":">=16.14.0"},"dependencies":{"ahooks":"^2.9.6","antd-mobile":"^2.3.4","classnames":"^2.2.1","dom-helpers":"^5.2.1","react-transition-group":"^4.4.2"},"devDependencies":{"@types/react-transition-group":"^4.4.2"},"publishConfig":{"access":"public"},"gitHead":"8fac17c9d287c497f7efd6dad93f4bdb4e3b696a","bugs":{"url":"https://github.com/alitajs/components/issues"},"homepage":"https://github.com/alitajs/components#readme","_id":"@alita/popup@0.2.3","_nodeVersion":"12.18.3","_npmVersion":"lerna/4.0.0/node@v12.18.3+x64 (darwin)","dist":{"integrity":"sha512-xu30OpOdlbGWbzpUMJa1wv3LXzHfRkyX5rX890t4ghusZMjFWCGNnBy47TJTjigk55FWKWlpTJA4SYlYpdYAYA==","shasum":"d2a16a7a176facd6523e877377e75b43fca3ebf9","tarball":"https://registry.npmjs.org/@alita/popup/-/popup-0.2.3.tgz","fileCount":684,"unpackedSize":2099352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP1sHCRA9TVsSAnZWagAAGVcP/j4BtJfM9NdU+qulI++W\nqDVNRq4chdzzcaKLZmvidfdo9LzyZm58kHDG7UfEZP9q3z4ZNW2tGVpsCxfb\ns9kY5ttlRadrBXm509xtCjutzkX6u1b/6Sffne0otc0l9opCfuerocxDcksK\ndZMxS/2D6Zq0SEDQFPmrE7ytitnVY59t7pxdnjm5vd2siLQCUUNI6a3xcWkl\ntTyNtM4O94hiDhWDxj/Cmlh3Ywns6pFRr8cdSY8UKbSiS78TbvuD0osuSIs9\nv+FVpejVBU8ZIaxeAl8srF0dS4MIuqjjx6Aq6STIc80pqApeZlDCW0IxS70d\np7KpI3qX12tY12iP97+9kTPKdEdoFHI6cCgsS2YEn12hjHhxZonXfKokUEKm\nQwemOyyPRtqjW2GvldC+k1l4mU05L7dLIP8+KlwAsGcrsQzxsQucSSlWf/7e\neNwbcdBKnbzxc0edKQfoiMj/nccntFcZjX/JAmmXS0s1NQTDD8Jlutanmamy\nNiEhOMVLT5vIJMVLazKoG4i3CO6+PCVdFDTj4i0EQsF6H05+J5Hddverjetk\nKz6+emWZ0iv9IjflUTmo8npWbDcbm3LEBY0jiNFfZMz5M8QO1EtTuMPI3h0X\njKDbuREZ2vL4H2AHIDdDVatiJljWoNUkQoidoQGpid9QxulewU6JvlzqXlrt\nUY+j\r\n=Z3xm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEB4EDcnnbLv1M+PC2JDzxmqTuyT1GBIrq/NFgCm63ZQIgd4Sh2iL56xV+IbeOdoR35XBTDAdPM5v1p/aGanNqMMM="}]},"_npmUser":{"name":"hammersjs","email":"1270253618@qq.com"},"directories":{},"maintainers":[{"name":"cjy0208","email":"fanluan058@gmail.com"},{"name":"hammersjs","email":"1270253618@qq.com"},{"name":"hang1017","email":"437132124@qq.com"},{"name":"xiaohuoni","email":"448627663@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/popup_0.2.3_1631542023359_0.8381742294046091"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-13T13:05:55.829Z","0.2.1":"2021-09-13T13:05:56.247Z","modified":"2022-06-07T09:42:02.166Z","0.2.3":"2021-09-13T14:07:03.636Z"},"maintainers":[{"email":"pt370390794@126.com","name":"pengyh"},{"email":"savebtc11@gmail.com","name":"ashoka_j"},{"email":"437132124@qq.com","name":"hang1017"},{"email":"1270253618@qq.com","name":"hammersjs"},{"email":"fanluan058@gmail.com","name":"cjy0208"},{"email":"448627663@qq.com","name":"xiaohuoni"}],"description":"弹出层容器，用于展示弹窗、信息提示等内容。","homepage":"https://github.com/alitajs/components#readme","keywords":[],"repository":{"type":"git","url":"git+https://github.com/alitajs/components.git"},"bugs":{"url":"https://github.com/alitajs/components/issues"},"license":"ISC","readme":"\n# Popup 弹出动画\n\n### 介绍\n\n弹出层容器，用于展示弹窗、信息提示等内容。\n\n### 引入\n\n通过以下方式来引入组件\n\n```js\nimport React from 'react';\nimport { Popup } from '@alitajs/popup';\n```\n\n## 代码演示\n\n### 基础用法\n\n通过 `show` 控制弹出层是否展示。\n\n```js\nconst [show, setShow] = useState(false);\nreturn (\n  <>\n    <Button onClick={() => setShow(true)}>展示弹出层</Button>\n    <Popup show={show} onClose={() => setShow(false)}>\n      <div style={{ height: '50vh' }}>内容区域</div>\n    </Popup>\n  </>\n);\n```\n\n### 弹出位置\n\n通过 `mode` 属性设置弹出位置，默认从下部弹出，可以设置为 `popup`、`dropdown`、 `sliderLeft`、 `sliderRight`、`alert`;。\n\n```js\n// 从左侧弹出\n<Popup show={show} onClose={() => setShow(false)} mode=\"sliderLeft\"></Popup>\n```\n\n### 关闭图标\n\n设置 `closeable` 属性后，会在弹出层的合适位置显示关闭图标。 图标显示位置如下：\n\n| 弹出位置    | 关闭图标位置 |\n| ----------- | ------------ |\n| popup       | 右上         |\n| dropdown    | 右下         |\n| sliderLeft  | 右上         |\n| alert       | 右上         |\n| sliderRight | 左上         |\n\n```js\n// 示例代码\n<Popup closeable show={show} onClose={() => setShow(false)}></Popup>\n```\n\n### 圆角弹窗\n\n设置 `round` 属性后，弹窗会根据弹出位置添加不同的圆角样式。\n\n```js\n// 示例代码\n<Popup round show={show} onClose={() => setShow(false)}></Popup>\n```\n\n### 自定义内容区域\n\n通过 `custom` 属性可以自定义内容区域，弹出内容区域进行自定义设置。不再受内置样式影响\n\n```js\n<Popup custom show={show} onClose={() => setShow(false)}>\n  <div style={{ height: '80vh', backgroundColor: '#f40' }}>内容区域</div>\n</Popup>\n```\n\n## API\n\n### Props\n\n| 参数 | 说明 | 类型 | 默认值 |\n| --- | --- | --- | --- |\n| show | 是否展示 | boolean | false |\n| mode | 弹出框方向，可以取值：`popup`、`dropdown`、`sliderLeft`、`sliderRight`、`alert` | string | `popup` |\n| closeOnClickOverlay | 是否在点击遮罩层后关闭视图 | boolean | true |\n| zIndex | 层级 | number | 1 |\n| contentSize | 容器区域的尺寸 | string、number | 80% |\n| closeable | 是否显示关闭图标 | boolean | false |\n| round | 是否显示圆角 | boolean | false |\n| custom | 自定义内容区域 | boolean | false |\n| type | 弹出模式， `fullscreen`:全屏 `relative`: 相对当前控件位置弹出 | string | fullscreen |\n| closeOnClickOutside | type 为`relative`时，是否在点击其他区域关闭视图 | boolean | true |\n| offset | type 为`relative`时，相对起始位置偏移量 | number | 0 |\n| scrollElement | 页面区域滚动节点，一般用于`type`为 relative 时使用 | HTMLElement | document.documentElement |\n| awayRef | 去除目标元素，只响应目标元素之外的节点, 应用场景一般是在下拉菜单场景下配合 closeOnClickOutside 属性使用，点击页面某个区域不触发响应 | BasicTarget \\| BasicTarget[] | - |\n\n### Events\n\n| 事件名    | 说明         | 回调参数 |\n| --------- | ------------ | -------- |\n| onClose   | 关闭事件     | -        |\n| onEnter   | 动画即将进入 | -        |\n| onEntered | 动画已经进入 | -        |\n| onExit    | 动画即将退出 | -        |\n| onExited  | 动画已经退出 | -        |\n\n<!-- ## 常见问题 -->\n\n<code src=\"./src/demos/demo.tsx\" />\n\n<API/>\n","readmeFilename":"README.md"}