Fullscreen Plugin

The FullScreen plugin toggles the browser’s native fullscreen mode.

Usage

This plugin is activated via data attributes.

Data API

Add data-lte-toggle="fullscreen" to a button element. Use data-lte-icon="maximize" and data-lte-icon="minimize" on child icon elements to toggle their visibility.

<button type="button" class="btn" data-lte-toggle="fullscreen">
  <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
  <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
</button>

Events

Event	Description
`maximized.lte.fullscreen`	Fired when entering fullscreen mode.
`minimized.lte.fullscreen`	Fired when exiting fullscreen mode.

Programmatic API

import { FullScreen } from "admin-lte"

const btn = document.querySelector('[data-lte-toggle="fullscreen"]')
const fs = new FullScreen(btn)

fs.toggleFullScreen()  // enter or exit based on current state
fs.inFullScreen()      // request fullscreen
fs.outFullscreen()     // exit fullscreen

Methods

Method	Returns	Description
`toggleFullScreen()`	`void`	Calls `inFullScreen()` if not in fullscreen, otherwise `outFullscreen()`. Checks `document.fullscreenEnabled` first.
`inFullScreen()`	`void`	Calls `document.documentElement.requestFullscreen()`, toggles `.d-none` on the maximize/minimize icons. Fires `maximized.lte.fullscreen`.
`outFullscreen()`	`void`	Calls `document.exitFullscreen()`, toggles `.d-none` on the maximize/minimize icons. Fires `minimized.lte.fullscreen`.

The constructor takes no config — pass only the trigger element.

Notes

Requires browser support for the Fullscreen API. Check document.fullscreenEnabled before invoking.
The maximize icon is hidden via the d-none Bootstrap utility class (not inline display) so it doesn’t override the icon library’s natural display value — this works correctly with FontAwesome, Lucide, Tabler Icons, etc.
Fullscreen on document.documentElement (i.e. <html>) means the entire page goes fullscreen. To fullscreen just a card, use the CardWidget maximize() method instead.