---
title: "SigmaFullscreenControl"
description: "全屏开关。整个 .sigma-root 一起进入全屏，覆盖层与其他控件都跟随。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/components/fullscreen-control"
---
# SigmaFullscreenControl

> 全屏开关。整个 .sigma-root 一起进入全屏，覆盖层与其他控件都跟随。

## 用法

进入全屏后控件与提示层一并跟随——因为全屏目标是整个 `.sigma-root`，而不是画布本身。只让 canvas 全屏的话，覆盖层与控件会留在原页面上。

全屏目标经 `el.closest('.sigma-root')` 解析。这样做是为了不依赖 `SigmaGraph` 的 DOM 结构（比 `sigma.getContainer().parentElement` 稳），代价是控件必须位于图的 DOM 子树内。它不使用 `useSigma()`，因此不需要图的注入上下文，但 DOM 位置的要求仍然成立。

> [!WARNING]
> 
> 把它渲染到 
> 
> SigmaGraph
> 
>  之外（或 Teleport 出去），
> 
> closest()
> 
>  找不到 
> 
> .sigma-root
> 
> ，按钮点了没反应。

浏览器不支持 Fullscreen API（或被权限策略禁用）时，组件**什么都不渲染**——不是渲染一个禁用态按钮。这样 `SigmaControls` 里不会留下一个空位。需要自定义降级提示，就在外面自己判断：

```vue
<script setup lang="ts">
import { useFullscreen } from '@vueuse/core'

const { isSupported } = useFullscreen()
</script>

<template>
  <SigmaFullscreenControl v-if="isSupported" />
  <span v-else>当前浏览器不支持全屏</span>
</template>
```

### `labels`

两项依次对应进入与退出全屏，同时用作 `aria-label` 与 `title`。按钮自带 `aria-pressed`，无需另外声明状态：

```vue [FullscreenControlExample.vue]
<script setup lang="ts">
defineProps<{ enterLabel: string, exitLabel: string }>()

const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaControls position="top-right">
      <SigmaFullscreenControl :labels="[enterLabel, exitLabel]" />
      <SigmaZoomControl :reset="false" />
    </SigmaControls>

    <SigmaTooltip />
  </SigmaGraph>
</template>
```

## 示例

### 默认插槽

默认插槽以 `{ isFullscreen }` 暴露当前状态，供图标随状态切换。默认图标是全屏时 `⤡`、非全屏时 `⛶`：

```vue [FullscreenControlSlotExample.vue]
<script setup lang="ts">
const { data } = await useFetch('/api/small.json')
</script>

<template>
  <SigmaGraph :data="data">
    <SigmaControls position="top-right">
      <SigmaFullscreenControl>
        <template #default="{ isFullscreen }">
          <UIcon :name="isFullscreen ? 'i-lucide-minimize' : 'i-lucide-maximize'" />
        </template>
      </SigmaFullscreenControl>
    </SigmaControls>
  </SigmaGraph>
</template>
```

**isFullscreen** (`boolean`): 当前是否处于全屏。

## API

### Props

```ts
/**
 * Props for the SigmaFullscreenControl component
 */
interface SigmaFullscreenControlProps {
  /**
   * 无障碍标签，依次为进入与退出全屏
   * @default ["进入全屏", "退出全屏"]
   */
  labels?: [string, string] | undefined;
}
```

### Slots

```ts
/**
 * Slots for the SigmaFullscreenControl component
 */
interface SigmaFullscreenControlSlots {
  default(): any;
}
```


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.