{"_id":"@ambilight-taro/progress","name":"@ambilight-taro/progress","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ambilight-taro/progress","version":"1.0.0","description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fprogress) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fprogress)","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/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"},"gitHead":"9ab8a57d0a8fda45ebfa6bd4e46e8ab04a420935","_id":"@ambilight-taro/progress@1.0.0","_nodeVersion":"20.18.2","_npmVersion":"lerna/7.4.2/node@v20.18.2+arm64 (darwin)","dist":{"integrity":"sha512-q+mbA9ITGXaNfxFwhPpZjJqOTwLRNMtQ+zqSTwfAWiJbOVDVZCuQjP99UhXBxAMVjgEU+eENWX0Fif8TCk9EMA==","shasum":"965cd7dee2ae4c47ddbdf18c6c369c723681c794","tarball":"https://registry.npmjs.org/@ambilight-taro/progress/-/progress-1.0.0.tgz","fileCount":17,"unpackedSize":16222,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIG9SKpzQBpODThycvsc8ObBj6DlPvMqT3j8M61IoRdACAiEA/Mhl/m8rnR5fI7iPpt9WGE8wYWAIlvqgde3bh8VZD2Y="}]},"_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/progress_1.0.0_1742741474771_0.44444827074385573"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-23T14:51:14.719Z","1.0.0":"2025-03-23T14:51:14.957Z","modified":"2025-03-23T14:51:15.178Z"},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fprogress) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fprogress)","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/progress\n\n![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Fprogress)\n![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Fprogress)\n\n## Installation\n\n```shell\nnpm install @ambilight-taro/progress\n```\n\n## Usage\n\n进度条组件，包含线形/环形进度条\n\n### Common\n\n#### 关闭动画效果\n\n```tsx\nimport { AlProgress } from '@ambilight-taro/progress'\n\n<AlProgress.Linear withAnimation={false} />\n\n<AlProgress.Circular withAnimation={false} />\n```\n\n### 设置动画时间\n\n```tsx\nimport { AlProgress } from '@ambilight-taro/progress'\n\n<AlProgress.Linear animationDuration={120} />\n\n<AlProgress.Circular animationDuration={120} />\n```\n\n### Linear\n\n线性进度条\n\n> 其颜色、圆角、高度等配置推荐使用 css 样式覆盖\n\n```tsx\nimport { AlProgress } from '@ambilight-taro/progress'\n\n<AlProgress.Linear value={32} />\n```\n\n### Circular\n\n环形进度条，使用 canvas 绘制，组件**宽高**与**父容器**相同，宽高的**最小值**将作为环形进度条的**圆直径**，无需手动设置尺寸高度\n\n- **Warning**: 组件会在初始化的时候来获取宽高尺寸，故而请在组件第一次渲染的时候确保父容器宽高正确或主动设置组件本身宽高\n\n> 环形进度条暂时不支持环形渐变色\n>\n> - createLinearGradient 效果不是很好，createConicGradient 小程序不支持\n> - 逐像素点绘制，效率过低\n> - 离屏渲染纹理图必须进行缩放处理，考虑小程序性能与最终纹理效果，暂时放弃此方案\n\n```tsx\nimport { AlProgress } from '@ambilight-taro/progress'\n\n<AlProgress.Circular value={32} />\n```\n\n#### 设置进度条颜色\n\n```tsx\n<AlProgress.Circular value={32} color={\"#000000\"} />\n```\n\n#### 设置进度条宽度\n\n```tsx\n<AlProgress.Circular value={32} thicknessRatio={0.1}/>\n```\n\n#### 展示进度条底部背景圆环\n\n```tsx\n<AlProgress.Circular value={32} ringColor={\"#eeeeee\"} />\n```\n\n#### 逆时针渲染\n\n```tsx\n<AlProgress.Circular value={32} clockwise={false} />\n```\n\n## Props\n\n### Basic\n\n环形、线性基础配置\n\n```tsx\ninterface AlProgressProps {\n  /**\n   * 进度值（0-100）\n   */\n  value: number\n  /**\n   * 是否开启动画效果\n   * @default true\n   */\n  withAnimation?: boolean\n  /**\n   * 动画周期（ms）\n   * @default 240\n   */\n  animationDuration?: number\n  className?: string\n  style?: React.CSSProperties | string\n}\n```\n\n### Linear \n\n```tsx\nexport interface AlLinearProgressProps extends AlProgressProps {}\n```\n\n### Circular\n\n```tsx\ninterface AlCircularProgressProps extends AlProgressProps {\n  /**\n   * 圆形线宽与直径的比例\n   * - 不直接设置线宽的原因在于 canvas 只接受 px 为单位，这样在不同设备上表现会出现差异\n   * @default 0.05\n   */\n  thicknessRatio?: number\n  /**\n   * 进度条颜色\n   * @default '#805AD5'\n   */\n  color?: string\n  /**\n   * 底部圆环颜色\n   * @default undefined 不绘制环形底色\n   */\n  ringColor?: string\n  /**\n   * 是否顺时针\n   * @default true\n   */\n  clockwise?: boolean\n}\n```\n","readmeFilename":"README.md","_rev":"1-05b5d0614c3986c1c194f6dab72ad501"}