{"_id":"@ambilight-taro/tab-bar","name":"@ambilight-taro/tab-bar","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ambilight-taro/tab-bar","version":"1.0.0","description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Ftab-bar) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Ftab-bar)","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/tab-bar@1.0.0","_nodeVersion":"20.18.2","_npmVersion":"lerna/7.4.2/node@v20.18.2+arm64 (darwin)","dist":{"integrity":"sha512-UDiUT1HJLww3Gz0rsiKTn13Kl028mgBzI9YPVl7NJufGp4BS7hp9WeTBrP4nWNx1HG9F7LetQNJdWNDWVuLdlw==","shasum":"0bf9420a2b0848a0f70238a42774538a168ea92b","tarball":"https://registry.npmjs.org/@ambilight-taro/tab-bar/-/tab-bar-1.0.0.tgz","fileCount":13,"unpackedSize":13445,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDyhoaXCZURg5+J385t6pbBb/0uaTzDXqmZcn2Yc8YLEwIhAPj0cpTT7T3RDGOnGuSk3NPtlNUhqFrkguNsEJHrAPHY"}]},"_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/tab-bar_1.0.0_1742741474943_0.31092376502636165"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-23T14:51:14.849Z","1.0.0":"2025-03-23T14:51:15.143Z","modified":"2025-03-23T14:51:15.428Z"},"maintainers":[{"name":"chicken_bro","email":"ordinary_person@outlook.com"}],"description":"![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Ftab-bar) ![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Ftab-bar)","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/tab-bar\n\n![NPM Version](https://img.shields.io/npm/v/%40ambilight-taro%2Ftab-bar)\n![NPM Downloads](https://img.shields.io/npm/dm/%40ambilight-taro%2Ftab-bar)\n\n## Installation\n\n```shell\nnpm install @ambilight-taro/tab-bar\n```\n\n## Usage\n\n底部导航栏组件\n\n> 每一个 tab 的 icon 会要求提供 inactive、active 两份渲染用作动画效果，避免切换图标产生的闪烁现象（所以大家不要觉得麻烦hh）\n\n### Basic\n\n```tsx\nconst [current, setCurrent] = useState('0')\n\n<AlTabBar \n  current={current}\n  onTabClick={(_, which) => setCurrent(which.id)}\n  tabs={[\n    {id: '0', title: '0', iconSource: {inactive: <Text>0</Text>, active: <Text>0</Text>}},\n    {id: '1', title: '1', iconSource: {inactive: 'https://xxx.com/xxx.png', active: 'https://xxx.com/xxx.png'}}\n  ]} \n/>\n```\n\n### Effect\n\n```tsx\n<AlTabBar effect=\"pop\" />\n```\n\n### Render\n\n自定义 Item render，不推荐使用（不然用组件的意义何在，不如自己从头写hhh）\n\n```tsx\n<AlTabBar render={(item, isActive) => <View>{item.title}</View>} />\n```\n\n## Props & Types\n\n```tsx\ninterface AlTabBarProps extends AlBaseFcProps {\n  /**\n   * 根容器元素 key\n   */\n  id?: string\n  /**\n   * 当前活跃的 tab\n   */\n  current: string\n  /**\n   * tab 点击回调事件\n   * @param event 事件对象\n   * @param which 哪一个 tab 被点击\n   */\n  onTabClick?: (event: ITouchEvent, which: AlTabBarItem) => void\n  /**\n   * tab 渲染配置\n   */\n  tabs: AlTabBarItem[]\n  /**\n   * 激活态切换效果\n   */\n  effect?: 'pop' | 'scale'\n  /**\n   * item 自定义渲染器\n   */\n  render?: (item: AlTabBarItem, isActive: boolean) => React.ReactNode\n  className?: string\n  style?: React.CSSProperties | string\n}\n```\n\n```tsx\ninterface AlTabBarItem {\n  id: string\n  /**\n   * tab 标题\n   */\n  title?: React.ReactNode\n  /**\n   * tab icon 源\n   */\n  iconSource?: {\n    /**\n     * 激活态\n     * - typeof string -> url 将使用 image 自动渲染\n     * - others -> 视作 react node 节点直接渲染\n     */\n    active: React.ReactNode\n    /**\n     * 非激活态\n     * - typeof string -> url 将使用 image 自动渲染\n     * - others -> 视作 react node 节点直接渲染\n     */\n    inactive: React.ReactNode\n  }\n}\n```\n","readmeFilename":"README.md","_rev":"1-9fb995c497c76bc972782d758afac5a3"}