FullScreen 全屏展示

基本使用

适用于全屏展示的场景

tsx

import { useRef } from "react";
import { FullScreen } from "@lite-code/shared";

const DashboardDemo = () => {
  const screenRef = useRef<any>(null);
  return (
    <FullScreen
      ref={screenRef}
      backgroundColor="var(--vp-c-bg)"
      onChange={(isFull: boolean) => console.log("当前全屏状态:", isFull)}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          padding: 10,
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            marginBottom: 12,
          }}
        >
          <div>
            <a onClick={() => screenRef.current?.toggle()}>
              ⛶ 切换全屏
            </a>
          </div>
        </div>
        <div
          style={{
            background: "var(--vp-c-alt)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            height: 300
          }}
        >
          展示区域
        </div>
      </div>
    </FullScreen>
  );
};

export default DashboardDemo;