{"componentChunkName":"component---src-templates-components-tsx","path":"/components/full-screen","webpackCompilationHash":"1daf920fd56dc476eb98","result":{"data":{"markdownRemark":{"description":{"descriptionHtml":"","apiHtml":"

API#

\n

FullScreen#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeRequiredDefaultAlternative
className额外类名string否----
style额外样式React.CSSProperties否----
status是否全屏(受控属性)boolean否----
isBody是否是整个页面boolean否false--
targetRef需要控制全屏的元素的refRefObject否----
onChange全屏状态改变的回调function否----
"},"tableOfContents":"","frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"type":"Basic Components"},"fields":{"path":"/components/full-screen/index.en-US.md","slug":"/components/full-screen","modifiedTime":1576230292797}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"发送验证码组件","type":"基础组件"},"fields":{"slug":"/components/send-code-cn","path":"/components/send-code/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"Send verification code component","type":"Basic Components"},"fields":{"slug":"/components/send-code","path":"/components/send-code/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"滚动条","type":"基础组件"},"fields":{"slug":"/components/scrollable-bar-cn","path":"/components/scrollable-bar/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"ScrollableBar","type":"Basic Components"},"fields":{"slug":"/components/scrollable-bar","path":"/components/scrollable-bar/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"全屏组件","type":"基础组件"},"fields":{"slug":"/components/full-screen-cn","path":"/components/full-screen/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"Full Screen","type":"Basic Components"},"fields":{"slug":"/components/full-screen","path":"/components/full-screen/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/fit-text-cn","path":"/components/fit-text/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"Adaptive Text","type":"Basic Components"},"fields":{"slug":"/components/fit-text","path":"/components/fit-text/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"基础组件"},"fields":{"slug":"/components/error-boundary-cn","path":"/components/error-boundary/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"Basic Components"},"fields":{"slug":"/components/error-boundary","path":"/components/error-boundary/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/button-list-cn","path":"/components/button-list/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"Button Group","type":"Basic Components"},"fields":{"slug":"/components/button-list","path":"/components/button-list/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"权限组件","type":"业务组件"},"fields":{"slug":"/components/authorized-cn","path":"/components/authorized/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"Authorized Component","type":"Business Components"},"fields":{"slug":"/components/authorized","path":"/components/authorized/index.en-US.md"}}}]},"demos":{"edges":[{"node":{"content":{"content":{"zh-CN":"\n

点击按钮切换全屏

\n","en-US":"\n

Click the button to switch to full screen.

\n"},"highlightedCode":"
const Example = () => {\n  return (\n    <div>\n      <FullScreen isBody={true}>\n        <Button>切换全屏</Button>  \n      </FullScreen>\n    </div> \n  )\n}\n\nrender(\n  <Example />\n)
"},"code":"\"use strict\";\n\nvar Example = function Example() {\n return React.createElement(\"div\", null, React.createElement(FullScreen, {\n isBody: true\n }, React.createElement(Button, null, \"\\u5207\\u6362\\u5168\\u5C4F\")));\n};\n\nrender(React.createElement(Example, null));","frontmatter":{"title":{"zh_CN":"基础样例","en_US":"Basic Example"},"cols":null,"order":0,"subtitle":null,"type":null},"fields":{"slug":"/components/full-screen/demo/simple","path":"/components/full-screen/demo/simple.md"}}},{"node":{"content":{"content":{"zh-CN":"\n

点击图片

\n","en-US":"\n

Click image.

\n"},"highlightedCode":"
const Example = () => {\n  return (\n    <div>\n      <FullScreen>\n        <div \n          style={{ \n            height: 300,\n            width: 500,\n            backgroundImage: 'url(\"https://aip.bdstatic.com/portal-pc-node/dist/1568277945052/images/technology/face/detect/demo-card-1.jpg\")',\n            backgroundRepeat: 'no-repeat',\n            backgroundSize: '100% 100%'\n          }}\n        />\n      </FullScreen>\n    </div> \n  )\n}\n\nrender(\n  <Example />\n)
"},"code":"\"use strict\";\n\nvar Example = function Example() {\n return React.createElement(\"div\", null, React.createElement(FullScreen, null, React.createElement(\"div\", {\n style: {\n height: 300,\n width: 500,\n backgroundImage: 'url(\"https://aip.bdstatic.com/portal-pc-node/dist/1568277945052/images/technology/face/detect/demo-card-1.jpg\")',\n backgroundRepeat: 'no-repeat',\n backgroundSize: '100% 100%'\n }\n })));\n};\n\nrender(React.createElement(Example, null));","frontmatter":{"title":{"zh_CN":"控制某个DOM节点","en_US":"Control DOM"},"cols":null,"order":1,"subtitle":null,"type":null},"fields":{"slug":"/components/full-screen/demo/element","path":"/components/full-screen/demo/element.md"}}},{"node":{"content":{"content":{"zh-CN":"\n

点击按钮切换。

\n","en-US":"\n

Click the button to switch.

\n"},"highlightedCode":"
const Example = () => {\n  const rootRef = React.useRef(null);\n  const [isFullScreen, setIsFullScreen] = React.useState(false);\n  \n  return (\n    <div \n      style={{ \n        height: 300,\n        width: 500,\n        backgroundImage: 'url(\"https://aip.bdstatic.com/portal-pc-node/dist/1568277945052/images/technology/face/detect/demo-card-1.jpg\")',\n        backgroundRepeat: 'no-repeat',\n        backgroundSize: '100% 100%'\n      }}\n      ref={rootRef}\n    >\n      <FullScreen \n        status={isFullScreen} \n        targetRef={rootRef}\n      />\n      <Button \n        onClick={() => { \n          setIsFullScreen(!isFullScreen); \n        }}\n      >\n        切换\n      </Button>\n    </div> \n  )\n}\n\nrender(\n  <Example />\n)
"},"code":"\"use strict\";\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nvar Example = function Example() {\n var rootRef = React.useRef(null);\n\n var _React$useState = React.useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n isFullScreen = _React$useState2[0],\n setIsFullScreen = _React$useState2[1];\n\n return React.createElement(\"div\", {\n style: {\n height: 300,\n width: 500,\n backgroundImage: 'url(\"https://aip.bdstatic.com/portal-pc-node/dist/1568277945052/images/technology/face/detect/demo-card-1.jpg\")',\n backgroundRepeat: 'no-repeat',\n backgroundSize: '100% 100%'\n },\n ref: rootRef\n }, React.createElement(FullScreen, {\n status: isFullScreen,\n targetRef: rootRef\n }), React.createElement(Button, {\n onClick: function onClick() {\n setIsFullScreen(!isFullScreen);\n }\n }, \"\\u5207\\u6362\"));\n};\n\nrender(React.createElement(Example, null));","frontmatter":{"title":{"zh_CN":"受控组件","en_US":"Controlled Component"},"cols":null,"order":2,"subtitle":null,"type":null},"fields":{"slug":"/components/full-screen/demo/controlled","path":"/components/full-screen/demo/controlled.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/components/full-screen","demo":"/full-screen/demo/"}}}