FullScreen

Example Usage

import { FullScreen } from '@alitajs/antd-plus';

Demo

SyntaxError: No-Inline evaluations must call `render`.

Basic Example

Click the button to switch to full screen.

const Example = () => {
  return (
    <div>
      <FullScreen isBody={true}>
        <Button>切换全屏</Button>  
      </FullScreen>
    </div> 
  )
}

render(
  <Example />
)

SyntaxError: No-Inline evaluations must call `render`.

SyntaxError: No-Inline evaluations must call `render`.

Control DOM

Click image.

const Example = () => {
  return (
    <div>
      <FullScreen>
        <div 
          style={{ 
            height: 300,
            width: 500,
            backgroundImage: 'url("https://aip.bdstatic.com/portal-pc-node/dist/1568277945052/images/technology/face/detect/demo-card-1.jpg")',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '100% 100%'
          }}
        />
      </FullScreen>
    </div> 
  )
}

render(
  <Example />
)

SyntaxError: No-Inline evaluations must call `render`.

SyntaxError: No-Inline evaluations must call `render`.

Controlled Component

Click the button to switch.

const Example = () => {
  const rootRef = React.useRef(null);
  const [isFullScreen, setIsFullScreen] = React.useState(false);
  
  return (
    <div 
      style={{ 
        height: 300,
        width: 500,
        backgroundImage: 'url("https://aip.bdstatic.com/portal-pc-node/dist/1568277945052/images/technology/face/detect/demo-card-1.jpg")',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%'
      }}
      ref={rootRef}
    >
      <FullScreen 
        status={isFullScreen} 
        targetRef={rootRef}
      />
      <Button 
        onClick={() => { 
          setIsFullScreen(!isFullScreen); 
        }}
      >
        切换
      </Button>
    </div> 
  )
}

render(
  <Example />
)

SyntaxError: No-Inline evaluations must call `render`.

API#

FullScreen#

Property	Description	Type	Required	Default	Alternative
className	额外类名	string	否	--	--
style	额外样式	React.CSSProperties	否	--	--
status	是否全屏(受控属性)	boolean	否	--	--
isBody	是否是整个页面	boolean	否	`false`	--
targetRef	需要控制全屏的元素的ref	RefObject	否	--	--
onChange	全屏状态改变的回调	function	否	--	--