Skip to main content

Fullscreen

The Fullscreen component allows turning any nested components into the fullscreen mode. It can wrap any widget or layout and provides both a default Fullscreen toggle button and ability to assign hotkeys.

Fullscreen

Initialization and installation​

To use the Fullscreen control:

  1. Import the component from the Core package:
App.vue
<script setup>
  import { Fullscreen } from "@svar-ui/vue-core";
</script>
  1. Wrap any content inside the <Fullscreen> tag:
<template>
  <Fullscreen>
    <div class="demo-content">
      Any content can be fullscreened.
    </div>
  </Fullscreen>
</template>

Assigning hotkeys​

There is no hotkey by default. But you can use the hotkey property to assign any combination so that Fullscreen can be triggered using a keyboard shortcut.

<script setup>
  import { Fullscreen } from "@svar-ui/vue-core";
</script>

<template>
  <Fullscreen hotkey="ctrl+shift+f">
    <div class="demo">Press CTRL + SHIFT + F to toggle fullscreen</div>
  </Fullscreen>
</template>

Adding a custom toggle button​

Fullscreen has a default small toggle button that appears in the bottom-right corner. You can replace it with a custom one by defining a named slot toggleButton. Anything you put inside the toggleButton slot will replace the default button. The slot receives the following parameters:

  • inFullscreen - a boolean indicating if the content is currently fullscreen
  • onclick - a function to toggle fullscreen
<template>
  <Fullscreen>
    <div>Some content</div>

    <template #toggleButton="{ onclick, inFullscreen }">
      <button @click="onclick">
        {{ inFullscreen ? "Exit fullscreen" : "Enter fullscreen" }}
      </button>
    </template>
  </Fullscreen>
</template>

Multiple instances with the same hotkey​

You can have multiple Fullscreen instances using the same hotkey. When the hotkey is pressed, the currently focused instance toggles fullscreen.

<script setup>
  import { Fullscreen, Button } from "@svar-ui/vue-core";
</script>

<template>
  <!-- First instance -->
  <Fullscreen hotkey="ctrl+shift+f">
    <div>
      <h3>Instance 1</h3>
      <p>Press Ctrl + Shift + F to toggle fullscreen</p>
      <Button>Button inside instance 1</Button>
    </div>
  </Fullscreen>

  <!-- Second instance (same hotkey) -->
  <Fullscreen hotkey="ctrl+shift+f">
    <div>
      <h3>Instance 2</h3>
      <p>Press Ctrl + Shift + F to toggle fullscreen</p>
      <Button>Button inside instance 2</Button>
    </div>
  </Fullscreen>
</template>

Related sample: Fullscreen