FullscreenButton

Target element

Description

Make the document or a target element fullscreen.

props

class
confirmMessage - message to display in the confirm popup, defaults to empty string "" - disabled
id
target - element to make fullscreen (defaults to document.documentElement upon mount)
title

slots

name	purpose	default value
`default`	content to display when fullscreen is disabled	`Enabled Fullscreen`
`enabled`	content to display when fullscreen is enabled	`Exit Fullscreen`

example

<script lang="ts">
    import { FullscreenButton } from "drab";

    let target: HTMLDivElement;
</script>

<FullscreenButton class="button button-primary" />

<div bind:this={target} class="card bg-muted mt-8">
    <div class="mb-2">Target element</div>
    <FullscreenButton {target} class="button button-primary">
        Enable Element Fullscreen
    </FullscreenButton>
</div>