| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- 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.
- ```html
- <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
- ```js
- 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](https://developer.mozilla.org/docs/Web/API/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](card-widget.html#programmatic-api) instead.
|
