{"_id":"@ambilight-taro/toast","name":"@ambilight-taro/toast","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ambilight-taro/toast","version":"1.0.0","description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Ftoast) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Ftoast)","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"},"peerDependencies":{"@ambilight-taro/dynamic-render-controller":"^0.0.1"},"gitHead":"9ab8a57d0a8fda45ebfa6bd4e46e8ab04a420935","_id":"@ambilight-taro/toast@1.0.0","_nodeVersion":"20.18.2","_npmVersion":"lerna/7.4.2/node@v20.18.2+arm64 (darwin)","dist":{"integrity":"sha512-rj8v1s9S4TtEAgd/8qLwDbSx+cKxRcE8HUjwKZMTjfjVP0ABVXUKPtqXBTUY8F4HuTVtlPQpKdQ7lIYUczhL3A==","shasum":"bf5ecfa786bb4bc9b2d65877b756fedcb1e6c15e","tarball":"https://registry.npmjs.org/@ambilight-taro/toast/-/toast-1.0.0.tgz","fileCount":15,"unpackedSize":17106,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD4npu5gKzB94cUkJry3WUlbYivXfSwev7G8bfB5sHsAwIhAJTnhtzaGky7l0VLZWe+LCeYfscUpQgZROfO5xs6IBl+"}]},"_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/toast_1.0.0_1742741476492_0.24247053421156317"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-23T14:51:16.413Z","1.0.0":"2025-03-23T14:51:16.841Z","modified":"2025-03-23T14:51:17.139Z"},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Ftoast) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Ftoast)","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/toast\n\n![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Ftoast)\n![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Ftoast)\n\n## Installation\n\n```shell\nnpm install @ambilight-taro/toast\n```\n\n## Usage\n\n轻提示组件\n\n### Functional call (recommend)\n\n组件提供函数式调用，并进行渲染队列管理\n\n> 如出现新的渲染，则会直接关闭之前所有渲染的 toast\n>\n> 但可以开启 `isBlocked` 配置，阻塞当前队列直至当前 toast 结束渲染，后续队列才可开始按照预定模式渲染\n\n> 此功能依赖于：`@ambilight-taro/dynamic-render-controller` 提供动态渲染队列管理\n> 请确保项目安装 `@ambilight-taro/dynamic-render-controller`，并且在需要展示的页面至少有一个`<AlDynamicRenderController />` 节点\n\n```shell\nnpm install @ambilight-taro/dynamic-render-controller\n```\n\n```tsx\n{/* 我们推荐为每一个 controller 指定一个全局唯一的 controllerId */}\n{/* 但也可以省略不配置，具体用法可参考  @ambilight-taro/dynamic-render-controller*/}\n<AlDynamicRenderController />\n```\n\n#### Basic\n\n```tsx\nimport { AlToast } from '@ambilight-taro/toast'\n\nAlToast.show({label: 'Hello world?'})\n```\n#### With icon\n\n```tsx\nimport { AlLoadingIcon } from '@ambilight-taro/icon'\n\n// icon 没有任何限制，可完全控制渲染\n// 此处使用 AlLoadingIcon 仅为了方便演示\nAlToast.show({label: 'Hello world?', icon: <AlLoadingIcon />})\n```\n\n#### Block render queue\n\n阻塞渲染队列，直到当前 toast 被关闭\n\n```tsx\nAlToast.show(\n  {label: 'Hello world?', icon: <AlLoadingIcon />},\n  {isBlocked: true}\n)\n```\n\n### Component\n\n组件渲染模式比较简单，此处就不过多赘述，直接查看 Props 即可\n\n\n## Props & Types\n\n```tsx\ninterface AlToastProps {\n  /**\n   * 是否可见\n   */\n  visible: boolean\n  /**\n   * 图标\n   */\n  icon?: React.ReactNode\n  /**\n   * 内容标签\n   */\n  label?: React.ReactNode\n  /**\n   * @default 'bottom'\n   */\n  position?: AlToastPosition\n  /**\n   * @default 3000 ms\n   */\n  duration?: number\n  /**\n   * 自动关闭事件（duration 时间结束后调用）\n   */\n  onClose: () => void\n  /**\n   * 是否使用遮罩去拦截点击、滑动事件，避免与页面内容交互\n   * @default false\n   */\n  mask?: boolean\n  /**\n   * y 轴偏移值（基于整体宽度 750 的设计稿下的尺寸）\n   */\n  offset?: number\n  /**\n   * 透传到 AlPortal 的 props\n   */\n  portalProps?: Omit<AlPortalProps, 'children'>\n  className?: string\n  style?: React.CSSProperties | string\n}\n```\n\n```tsx\ntype AlToastPosition = \"top\" | \"center\" | \"bottom\"\n```\n\n```tsx\ninterface AlToastFunctionalConfig {\n  /**\n   * 目标渲染控制器 id，具体可以参考 `AlDynamicRenderController`\n   * @default 不配置则会默认渲染到当前应用中“最新”（存在且最后出现）创建的控制器上\n   */\n  controllerId?: string\n  /**\n   * 是否阻塞渲染队列，直至此 toast 渲染结束\n   */\n  isBlocked?: boolean\n}\n\ninterface AlToastStatic {\n  show: (props: Omit<AlToastProps, 'visible'>, config?: AlToastFunctionalConfig) => () => void\n}\n```\n\n\n","readmeFilename":"README.md","_rev":"1-6cdbcd452f344272cc5d47d77c0818aa"}