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.svelte
<script>
  import { Fullscreen } from "@svar-ui/svelte-core";
</script>
  1. Wrap any content inside the <Fullscreen> tag:
<Fullscreen>
  <div class="demo-content">
    Any content can be fullscreened.
  </div>
</Fullscreen>

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>
  import { Fullscreen } from "@svar-ui/svelte-core";
</script>

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

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 snippet toggleButton. Anything you put inside {#snippet toggleButton(...)} will replace the default button. The function receives the following parameters:

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

  {#snippet toggleButton(onclick, inFullscreen)}
    <button on:click={onclick}>
      {inFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
    </button>
  {/snippet}
</Fullscreen>

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>
  import { Fullscreen, Button } from "@svar-ui/svelte-core";
</script>

<!-- 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>