{"_id":"@ambilight-taro/popup","name":"@ambilight-taro/popup","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ambilight-taro/popup","version":"1.0.0","description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fpopup) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fpopup)","main":"./lib/index.js","types":"./lib/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"rollup -c","build:watch":"rollup -cw"},"repository":{"type":"git","url":"git+https://github.com/pesce-salato/ambilight-taro-ui.git"},"author":"","license":"MIT","bugs":{"url":"https://github.com/pesce-salato/ambilight-taro-ui/issues"},"homepage":"https://github.com/pesce-salato/ambilight-taro-ui#readme","devDependencies":{"@ambilight-taro/dynamic-render-controller":"^1.0.0","@ambilight-taro/rollup-config":"*","@ambilight-taro/tsconfig":"*","@tarojs/components":"3.6.19","@tarojs/taro":"3.6.19","@types/react":"^18.2.38","react":"^18.0.0","rollup":"^4.5.1","typescript":"^5.3.2"},"dependencies":{"@ambilight-taro/basic-view":"^1.0.0","@ambilight-taro/core":"^1.0.0","@ambilight-taro/portal":"^1.0.0","@ambilight-taro/use-bottom-safe-padding":"^1.0.0"},"peerDependencies":{"@ambilight-taro/dynamic-render-controller":"^0.0.1"},"gitHead":"9ab8a57d0a8fda45ebfa6bd4e46e8ab04a420935","_id":"@ambilight-taro/popup@1.0.0","_nodeVersion":"20.18.2","_npmVersion":"lerna/7.4.2/node@v20.18.2+arm64 (darwin)","dist":{"integrity":"sha512-ePm41nTfm8Zq3YKlSnm1OKphy5lOmkojVbf8XF6YB5TqqMjwO5+OM0FWmovnmyqbW2oJO4QH5f8RU74VvOMsag==","shasum":"b58ca3b574d1d9e8a39b550e14c0b6d2771f35c8","tarball":"https://registry.npmjs.org/@ambilight-taro/popup/-/popup-1.0.0.tgz","fileCount":16,"unpackedSize":22921,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC9uHdZ8Hl1ju+n88yaaHKMv86cxYavygJ61m0oklhROgIhAODuuA84XQHlwAxEstrsbjhF3JzJ08dMBWSHfHo4GOrr"}]},"_npmUser":{"name":"chicken_bro","email":"ordinary_person@outlook.com"},"directories":{},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/popup_1.0.0_1742741476658_0.013356000859997552"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-23T14:51:16.595Z","1.0.0":"2025-03-23T14:51:16.850Z","modified":"2025-03-23T14:51:17.122Z"},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fpopup) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fpopup)","homepage":"https://github.com/pesce-salato/ambilight-taro-ui#readme","repository":{"type":"git","url":"git+https://github.com/pesce-salato/ambilight-taro-ui.git"},"bugs":{"url":"https://github.com/pesce-salato/ambilight-taro-ui/issues"},"license":"MIT","readme":"# @ambilight-taro/popup\n\n![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fpopup)\n![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fpopup)\n\n## Installation\n\n```shell\nnpm install @ambilight-taro/popup\n```\n\n## Usage\n\n弹出层\n\nPS: 内容默认是没有背景色的（如果尝试使用好像啥也看不到，**这是特性！这不是BUG** HHHHH）\n\n## Functional call\n\n### Basic\n```tsx\nconst { close, changeProps } = AlPopup.show({\n  children: <View style={{ height: '128rpx', background: 'white' }}>Hey bro</View>\n})\n\nsetTimeout(close, 3000)\n```\n\n### Render to special target\n\n```tsx\nAlPopup.show({children: 666}, 'AlDynamicRenderController Id')\n```\n\n## Component\n\n### Basic\n\n```tsx\n<AlPopup visible>弹出的不只是微信，还有可恶的Ding ding</AlPopup>\n```\n\n### Position\n\n```tsx\n<AlPopup position=\"center\">什么，我又收到了好人卡？</AlPopup>\n```\n\n### SafePadding\n\n是否开启安全边距，默认会开启\n\n- `position = 'bottom'` -> 底部黑条自动兼容\n- `position = 'top'` -> 顶部状态栏自动兼容\n\n```tsx\n<AlPopup safePadding>Keep a safe distance</AlPopup>\n```\n\n### catchMove\n\n是否开启根容器 `catchMove` 属性，避免出现滚动穿透，默认会开启\n\n> - 在低版本 taro 中，catchMove 动态设置会出现问题，所以大家用的时候，设置好了就别动啦\n> - 如果想要阻止穿透，但又想要内容滚动，则可以使用 ScrollView 作为弹出内容容器\n> - https://docs.taro.zone/docs/3.x/vue-overall#%E4%BA%8Ccatchmove\n\n```tsx\n<AlPopup catchMove>以不变应万变</AlPopup>\n```\n\n### Others\n\n其他的大家看一下 Props & Types 就好啦 hhh\n\n## Props & Types\n\n```tsx\ninterface AlPopupProps extends AlBaseFcProps {\n  visible?: boolean\n  /**\n   * @default 'bottom'\n   */\n  position?: 'bottom' | 'center' | 'left' | 'right' | 'top'\n  /**\n   * 是否开启安全边距\n   * - position = 'bottom' -> ios bottom safe padding\n   * - position = 'top' -> status bar safe padding\n   * @default true\n   */\n  safePadding?: boolean\n  /**\n   * 遮罩点击事件\n   */\n  onMaskClick?: (event: ITouchEvent) => void\n\n  children: React.ReactNode\n  /**\n   * 透传到 AlPortal 的 props\n   */\n  portalProps?: Omit<AlPortalProps, 'children'>\n  /**\n   * 是否开启 catchMove 配置，拦截点击滚动事件，避免出现滚动穿透\n   * - 请在组件初始化的时候就配置好，动态改变可能不会有预期的效果\n   * - 如果此时想要实现弹出内容滚动，则可以使用 ScrollView 来做滚动处理\n   * @default true\n   */\n  catchMove?: boolean\n  /**\n   * is invoked by functional call\n   * @private\n   */\n  _functionCall?: boolean\n  /**\n   * 弹出动画完成事件\n   */\n  onAppear?: () => void\n  /**\n   * 收起动画完成事件\n   */\n  onHide?: () => void\n  className?: string\n  style?: React.CSSProperties | string\n}\n```\n\n```tsx\ninterface AlPopupFunctionalShowProps extends Omit<AlPopupProps, 'visible'> {}\n\ninterface AlPopupStatic {\n  show: (\n    props: AlPopupFunctionalShowProps,\n    controllerId?: string\n  ) => {\n    close: () => void\n    changeProps: (newProps: AlPopupFunctionalShowProps) => void\n  }\n}\n```\n\n\n\n","readmeFilename":"README.md","_rev":"1-b2c2d6f80c30cbea3b3c4b21a69018b8"}