---
title: 全屏切换
order: 24
---

## 其他-全屏切换 FullscreenSwitch

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Other, STYLE_PREFIX } from '@linkdesign/screen';

const { FullscreenSwitch } = Other;

const App = () => {
  return (
    <div data-theme="dark" className={`container ${STYLE_PREFIX}main-body`}>
      <FullscreenSwitch
        target="#FullscreenSwitch"
        className="switch"
        local={{
          default: '大屏模式',
          active: '退出大屏',
        }}
      />
    </div>
  );
}

ReactDOM.render((
  <App />
), mountNode);
````

````css
#FullscreenSwitch {
  background-color: #1f3b6d;
}

#FullscreenSwitch .container {
  position: relative;
  background-color: #1f3b6d;
  height: 56px;
  display: flex;
  justify-content: flex-end;
}

.switch {
  padding: 0 20px;
}
````
