{"bugs":{"url":"https://github.com/raxjs/rax-components/issues"},"dist":{"shasum":"8701328d8ce8f887a1dd7aa0429ca186640a5e53","tarball":"https://registry.npmjs.org/rax-view/-/rax-view-2.2.0-0.tgz","fileCount":34,"integrity":"sha512-Qeuqw3raM6+0tl9aS760y3AQQHISEN0l5M95rLNqMm7mWJvegUFCNse24wZcnUC58fwgL712JYfFnKGfF7FfWg==","signatures":[{"sig":"MEUCIQCvezugf5HBz0Rdzx8VrdGM1Xf8CnHSuyPLaTB6WRzXnAIgTqyoIesXKNIMlq3IrdQ0lqY+5WqSCJdrSF15EM6yNNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":58619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7TWPCRA9TVsSAnZWagAASjIP/RIr0qTVHBv6Qy2hwUDH\nw7zRcG/+H2rB4U/kcICod14W9oD/jORf8NGU1FPuAdYN+PQQeAWfpRXE1oMp\nNYByGM9z+Aj78S6WSMvBVVblSw+Vnv5Ce1bk1jfyzJpP2FvE4NkLCaI+INyO\n6fUkjXsJDYxq85K5aSSTxOUnhkEQgWpU5zQCqjWE3mTnLbyujkaCyq7uT2FZ\nN75zDn26v1rwX9CdgA5Pj0JwHbYH8Yu5xD97MNzN8bVubCRPbY5YSUxjaSkY\nmftbzNGffTMix08Y5jf3makW+FrmYwjXGDoE6O4KOswXoqM7vUrSIR8qhjcN\npwRkvH+wS802zatlSssTNHYs1kGeWHdy0Rk1klZ4+c40NkDTrf4LqrbNuOwb\nEwe53DYaSv1Fyx1rR6xVZw33j8BvipCaS269jjlSI+lP1zUtLxoX8K/9DElo\nP4X4xkpI9/eNbErc1VhVFmgwaLVXIkvE4kiCePJFGbfYyDEAkP2EdXxxlH6Z\nh1pal2l04U0U/fgSoQJtLQEDaAOX5bPSZixIPDp/+pakoHcBs2C7qgr0Z0Ck\nBLYsEGnIeS2MZePP22IG1TlPl5UYh+1B6Zb/MGwwnGDWuoG8h02DQKNA+Ytz\ns5JHX226RT4viP1T/XQphxfs3TMvBKhm2eVV8dr7E6UJOT0NsW+6KOVHlDQW\nSufu\r\n=t8eM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-view","types":"lib/index.d.ts","module":"es/index.js","readme":"# rax-view\n\n[![npm](https://img.shields.io/npm/v/rax-view.svg)](https://www.npmjs.com/package/rax-view)\n\n## 支持\nWeb / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序\n\n## 描述\nView 是最基础的组件，它支持 Flexbox、touch handling 等功能，并且可以任意嵌套。\n不论在什么容器中，View 都直接对应一个容器的原生视图，就像 web 中的 div 一样。\n支持任意自定义属性的透传。\n\n## 安装\n\n```bash\n$ npm install rax-view --save\n```\n\n## 属性\n\n|**属性**| **类型** | **默认值** | **必填** | **描述** | **支持** |\n| ----------- | ---------- | ---------- | ------------ | ------------------ | ------------ |\n| className | `string` | - | false | 自定义样式名 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| style | `CSSProperties` | - | false | 自定义样式 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onClick | `function` | - | false | 点击 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onLongpress | `function` | - | false | 长按 | <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onAppear | `function` | - | false | 当前元素可见时触发 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onDisappear | `function` | - | false | 当前元素从可见变为不可见时触发 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onTouchStart | `function` | - | false | 触摸动作开始 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onTouchMove | `function` | - | false | 触摸后移动 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onTouchEnd | `function` | - | false | 触摸动作结束 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onTouchCancel | `function` | - | false | 触摸动作被打断，如来电提醒，弹窗 | <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n\n```jsx\nimport { createElement, useRef, useEffect, render } from \"rax\";\nimport DU from \"driver-universal\";\nimport View from \"rax-view\";\n\nconst App = () => {\n  const viewRef = useRef(null);\n  useEffect(() => {});\n  return (\n    <View\n      ref={viewRef}\n      style={{\n        padding: '30rpx'\n      }}\n      onClick={() => {\n        alert(\"container was clicked!\");\n      }}\n    >\n      <View\n        style={{\n          width: '300rpx',\n          height: '300rpx',\n          backgroundColor: \"red\"\n        }}\n        onClick={e => {\n          e.stopPropagation();\n          alert(\"red was clicked\");\n        }}\n      />\n      <View\n        style={{\n          width: '300rpx',\n          height: '300rpx',\n          backgroundColor: \"green\",\n          position: \"absolute\",\n          top: '20rpx',\n          left: '20rpx'\n        }}\n        onClick={() => {\n          alert(\"green was clicked\");\n        }}\n      />\n      <View\n        style={{\n          width: '300rpx',\n          height: '300rpx',\n          backgroundColor: \"yellow\",\n          position: \"absolute\",\n          top: '80rpx',\n          left: '210rpx'\n        }}\n        onClick={e => {}}\n      />\n    </View>\n  );\n};\n\nrender(<App />, document.body, { driver: DU });\n```\n\n## 默认样式\n\nrax-view 默认样式如下：\n\n```css\n.rax-view-v2 {\n   box-sizing: border-box;\n   display: flex;\n   flex-direction: column;\n   flex-shrink: 0;\n   align-content: flex-start;\n   border: 0 solid black;\n   margin: 0;\n   padding: 0;\n   min-width: 0;\n}\n```\n","exports":{".":{"web":"./es/common/index.js","weex":"./es/common/index.js","default":"./es/index.js","miniapp":"./es/miniapp/ali.js","baidu-smartprogram":"./es/common/index.js","bytedance-microapp":"./es/common/index.js","wechat-miniprogram":"./es/miniapp/wechat.js","kuaishou-miniprogram":"./es/common/index.js"},"./*":"./*"},"license":"BSD-3-Clause","scripts":{"build":"../../node_modules/.bin/build-scripts build --config ../../build.json --skip-demo","start":"../../node_modules/.bin/build-scripts start --config ../../build.json","prepublishOnly":"npm run build"},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"homepage":"https://github.com/raxjs/rax-components#readme","keywords":["Rax","rax-component","react-component"],"repository":{"url":"git+https://github.com/raxjs/rax-components.git","type":"git"},"_npmVersion":"7.10.0","description":"View component for Rax.","directories":{},"maintainers":[{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"_nodeVersion":"12.5.0","dependencies":{"classnames":"^2.2.6","universal-env":"^3.0.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"rax":"^1.0.0","eslint":"^5.16.0","csstype":"^2.6.4","@types/rax":"^1.0.0","driver-dom":"^1.0.0","typescript":"^3.5.3","@types/jest":"^24.0.12","driver-weex":"^1.0.0","babel-eslint":"^10.0.3","@types/ali-app":"^1.0.0","driver-universal":"^1.0.0","@types/classnames":"^2.2.9","eslint-config-rax":"^0.0.0","rax-test-renderer":"^1.0.0","eslint-plugin-import":"^2.18.2","@typescript-eslint/parser":"^1.7.0","@typescript-eslint/eslint-plugin":"^1.7.0"},"peerDependencies":{"rax":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/rax-view_2.2.0-0_1626158479378_0.9878781654572699","host":"s3://npm-registry-packages"},"_id":"rax-view@2.2.0-0","version":"2.2.0-0"}