Make the document or a specific element fullscreen.
Use
<scriptlang="ts">import{ FullscreenButton }from"@rossrobino/components";letfullscreenDiv: HTMLDivElement;</script><FullscreenButtonclass="mb-4 bg-gray-200 px-4 py-2"/><divbind:this={fullscreenDiv}class="bg-gray-800 p-4"><divclass="mb-2 text-gray-50">Target element fullscreen</div><FullscreenButtontargetElement={fullscreenDiv}class="bg-gray-200 px-4 py-2"><spanslot="enabled">Exit Element Fullscreen</span><spanslot="disabled">Enable Element Fullscreen</span></FullscreenButton></div>
Preview
Target element fullscreen
Props
name
purpose
type
default value
class
class
string
""
id
id
string
""
confirmMesssage
Message to display in the confirm popup, set this to empty string "" to disable confirm entirely
string
""
targetElement
element to make fullscreen
HTMLElement
document.documentElement
Slots
name
purpose
default value
enabled
content to display when fullscreen is enabled
Exit Fullscreen
disabled
content to display when fullscreen is disabled
Enabled Fullscreen
ShareButton
Purpose
Uses the navigator api to share or copy a url link depending on browser support.
Use
<script>import{ ShareButton }from"@rossrobino/components";</script><ShareButtonclass="bg-gray-200 px-4 py-2"text="Check out this page: "title="@rossrobino/components"url="https://components.robino.dev"/>