Fullscreen
Use the Fullscreen component to switch the entire page or a specific element to fullscreen mode. In the example below, the buttons toggle the mode for the page or the image respectively.
Usage
<section data-controller="pwa--fullscreen">
    <img id="image1" src="https://picsum.photos/400/600" alt="Sample Image" class="h-auto max-w-full">
    <button {{ stimulus_action('pwa--fullscreen', 'request', 'click') }}>
        The page
    </button>
    <button {{ stimulus_action('pwa--fullscreen', 'request', 'click', {target: '#image1'}) }}>
        The image
    </button>
</section>Parameters
None
Actions
request: this action triggers fullscreen mode. The target parameter specifies the element to be displayed in fullscreen.
exit: this action will exist the fullscreen mode.
Targets
None
Events
Upon status change, the event pwa--battery:updated is triggered. The payload includes the following data:
- change: indicates the mode changed. The event properties- fullscreen(bool) and- element(target) are available.
- error: in case of error during the application of the change. The event property- elementis available.
Last updated
Was this helpful?