or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cards.mdindex.mdlayout-navigation.mdplugins.mdsearch.mdstyling.mdutilities.mdwidgets.md
tile.json

utilities.mddocs/

Utility Components

AdminLTE provides several utility components that enhance the user experience with fullscreen functionality, dropdown management, iframe handling, and toast notifications. These components offer specialized features for modern web applications.

Fullscreen

The Fullscreen component enables fullscreen mode for any element, with automatic icon management and cross-browser compatibility.

API

class Fullscreen {
  constructor(element: HTMLElement, options?: FullscreenOptions);
  toggle(): void;
  toggleIcon(): void;
  fullscreen(): void;
  windowed(): void;
}

interface FullscreenOptions {
  minimizeIcon?: string;
  maximizeIcon?: string;
}

Default Configuration

const FullscreenDefaults = {
  minimizeIcon: 'fa-compress-arrows-alt',
  maximizeIcon: 'fa-expand-arrows-alt'
};

Browser Events Monitored

// Fullscreen change events across browsers
type FullscreenChangeEvents = 
  | 'webkitfullscreenchange'
  | 'mozfullscreenchange'
  | 'fullscreenchange'
  | 'MSFullscreenChange';

Usage Examples

Programmatic Usage

import { Fullscreen } from 'admin-lte';

// Initialize fullscreen functionality
const fullscreenButton = document.querySelector('[data-widget="fullscreen"]');
const fullscreen = new Fullscreen(fullscreenButton, {
  minimizeIcon: 'fa-compress',
  maximizeIcon: 'fa-expand'
});

// Control fullscreen programmatically
fullscreen.fullscreen();   // Enter fullscreen
fullscreen.windowed();     // Exit fullscreen
fullscreen.toggle();       // Toggle fullscreen state

// Listen for fullscreen changes
document.addEventListener('fullscreenchange', function() {
  if (document.fullscreenElement) {
    console.log('Entered fullscreen mode');
  } else {
    console.log('Exited fullscreen mode');
  }
});

Data Attribute Usage

<!-- Fullscreen toggle in navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" data-widget="fullscreen" href="#" role="button">
        <i class="fas fa-expand-arrows-alt"></i>
      </a>
    </li>
  </ul>
</nav>

<!-- Fullscreen toggle in card header -->
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Chart</h3>
    <div class="card-tools">
      <button type="button" class="btn btn-tool" data-widget="fullscreen">
        <i class="fas fa-expand-arrows-alt"></i>
      </button>
    </div>
  </div>
  <div class="card-body">
    <canvas id="myChart"></canvas>
  </div>
</div>

Custom Fullscreen Implementation

const fullscreen = new Fullscreen(fullscreenButton, {
  minimizeIcon: 'fa-compress-arrows-alt',
  maximizeIcon: 'fa-expand-arrows-alt'
});

// Custom fullscreen handling
fullscreenButton.addEventListener('click', function() {
  const chartContainer = document.querySelector('#chart-container');
  
  if (!document.fullscreenElement) {
    // Entering fullscreen - maximize chart
    chartContainer.style.width = '100vw';
    chartContainer.style.height = '100vh';
    fullscreen.fullscreen();
  } else {
    // Exiting fullscreen - restore original size
    chartContainer.style.width = '';
    chartContainer.style.height = '';
    fullscreen.windowed();
  }
});

Toasts

The Toasts component provides a comprehensive notification system with customizable positioning, styling, and behavior options.

API

class Toasts {
  constructor(element: HTMLElement, options?: ToastsOptions);
  create(): void;
}

interface ToastsOptions {
  position?: 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft';
  fixed?: boolean;
  autohide?: boolean;
  autoremove?: boolean;
  delay?: number;
  fade?: boolean;
  icon?: string;
  image?: string;
  imageAlt?: string;
  imageHeight?: string;
  title?: string;
  subtitle?: string;
  close?: boolean;
  body?: string;
  class?: string;
}

Default Configuration

const ToastsDefaults = {
  position: 'topRight',
  fixed: true,
  autohide: false,
  autoremove: true,
  delay: 1000,
  fade: true,
  icon: null,
  image: null,
  imageAlt: null,
  imageHeight: '25px',
  title: null,
  subtitle: null,
  close: true,
  body: null,
  class: null
};

Position Options

type ToastPositions = 
  | 'topRight'
  | 'topLeft'
  | 'bottomRight'
  | 'bottomLeft';

Events

// Event types triggered by Toasts
type ToastsEvents = 
  | 'init.lte.toasts'
  | 'created.lte.toasts'
  | 'removed.lte.toasts';

Usage Examples

Programmatic Usage

import { Toasts } from 'admin-lte';

// Initialize toast system
const toastContainer = document.querySelector('#toast-container');
const toasts = new Toasts(toastContainer, {
  position: 'topRight',
  autohide: true,
  delay: 5000
});

// Create different types of toasts
function showSuccessToast(message) {
  const successToast = new Toasts(toastContainer, {
    title: 'Success',
    body: message,
    class: 'bg-success',
    icon: 'fas fa-check',
    autohide: true,
    delay: 3000
  });
  successToast.create();
}

function showErrorToast(message) {
  const errorToast = new Toasts(toastContainer, {
    title: 'Error',
    body: message,
    class: 'bg-danger',
    icon: 'fas fa-exclamation-triangle',
    autohide: false,
    close: true
  });
  errorToast.create();
}

function showInfoToast(title, message, imageUrl) {
  const infoToast = new Toasts(toastContainer, {
    title: title,
    subtitle: 'Just now',
    body: message,
    image: imageUrl,
    imageAlt: 'User Avatar',
    class: 'bg-info',
    autohide: true,
    delay: 4000
  });
  infoToast.create();
}

// Usage examples
showSuccessToast('Data saved successfully!');
showErrorToast('Failed to connect to server.');
showInfoToast('New Message', 'You have a new message from John.', 'user-avatar.jpg');

Toast Positioning and Container Setup

<!-- Toast containers for different positions -->
<div id="toasts-top-right" class="toasts-top-right fixed"></div>
<div id="toasts-top-left" class="toasts-top-left fixed"></div>
<div id="toasts-bottom-right" class="toasts-bottom-right fixed"></div>
<div id="toasts-bottom-left" class="toasts-bottom-left fixed"></div>

<script>
// Initialize toast systems for different positions
const topRightToasts = new Toasts(document.getElementById('toasts-top-right'), {
  position: 'topRight'
});

const bottomLeftToasts = new Toasts(document.getElementById('toasts-bottom-left'), {
  position: 'bottomLeft',
  fade: false,
  fixed: true
});
</script>

Advanced Toast Examples

// Toast with custom styling and actions
function showActionToast() {
  const actionToast = new Toasts(toastContainer, {
    title: 'New Update Available',
    body: 'Version 2.1.0 is ready to install. Click to update now.',
    class: 'bg-warning text-dark',
    icon: 'fas fa-download',
    autohide: false,
    close: true,
    position: 'bottomRight'
  });
  actionToast.create();
  
  // Add click handler for action
  const toastElement = toastContainer.querySelector('.toast:last-child');
  toastElement.addEventListener('click', function() {
    window.location.href = '/update';
  });
}

// Progress toast
function showProgressToast() {
  const progressToast = new Toasts(toastContainer, {
    title: 'Uploading File',
    body: '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>',
    class: 'bg-primary',
    icon: 'fas fa-upload',
    autohide: false,
    close: false
  });
  progressToast.create();
  
  // Simulate progress
  const progressBar = toastContainer.querySelector('.progress-bar');
  let progress = 0;
  const interval = setInterval(() => {
    progress += 10;
    progressBar.style.width = progress + '%';
    if (progress >= 100) {
      clearInterval(interval);
      setTimeout(() => {
        toastContainer.querySelector('.toast:last-child').remove();
      }, 1000);
    }
  }, 200);
}

Dropdown

The Dropdown component enhances Bootstrap's dropdown functionality with viewport positioning and submenu support.

API

class Dropdown {
  constructor(element: HTMLElement, options?: DropdownOptions);
  toggleSubmenu(): void;
  fixPosition(): void;
}

interface DropdownOptions {
  // Empty default configuration
}

Usage Examples

Automatic Enhancement

The Dropdown component automatically enhances all Bootstrap dropdowns:

<!-- Standard Bootstrap dropdown -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" 
          type="button" 
          data-toggle="dropdown" 
          aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

<!-- Navbar dropdown with submenu -->
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
    Settings
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Profile</a>
    <div class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#">Preferences</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Display</a>
        <a class="dropdown-item" href="#">Privacy</a>
        <a class="dropdown-item" href="#">Notifications</a>
      </div>
    </div>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Logout</a>
  </div>
</li>

IFrame

The IFrame component provides a comprehensive iframe management system with tabbed navigation, fullscreen mode, and dynamic content loading.

API

class IFrame {
  constructor(element: HTMLElement, options?: IFrameOptions);
  createTab(title: string, link: string, uniqueName?: string, autoOpen?: boolean): void;
  openTabSidebar(item: HTMLElement, autoOpen?: boolean): void;
  switchTab(item: HTMLElement, reload?: boolean): void;
  removeActiveTab(type: string, element?: HTMLElement): void;
  toggleFullscreen(): void;
  onTabClick(item: HTMLElement): HTMLElement;
  onTabChanged(item: HTMLElement): HTMLElement;
  onTabCreated(item: HTMLElement): HTMLElement;
}

interface IFrameOptions {
  onTabClick?: (item: HTMLElement) => HTMLElement;
  onTabChanged?: (item: HTMLElement) => HTMLElement;
  onTabCreated?: (item: HTMLElement) => HTMLElement;
  autoIframeMode?: boolean;
  autoItemActive?: boolean;
  autoShowNewTab?: boolean;
  autoDarkMode?: boolean;
  allowDuplicates?: boolean;
  allowReload?: boolean;
  loadingScreen?: boolean;
  useNavbarItems?: boolean;
  scrollOffset?: number;
  scrollBehaviorSwap?: boolean;
  iconMaximize?: string;
  iconMinimize?: string;
}

Default Configuration

const IFrameDefaults = {
  onTabClick: function(item) { return item; },
  onTabChanged: function(item) { return item; },
  onTabCreated: function(item) { return item; },
  autoIframeMode: true,
  autoItemActive: true,
  autoShowNewTab: true,
  autoDarkMode: false,
  allowDuplicates: false,
  allowReload: true,
  loadingScreen: true,
  useNavbarItems: true,
  scrollOffset: 40,
  scrollBehaviorSwap: false,
  iconMaximize: 'fa-expand',
  iconMinimize: 'fa-compress'
};

Data Attributes

// Data attributes used by IFrame component
type IFrameDataAttributes = 
  | 'data-widget="iframe"'
  | 'data-widget="iframe-close"'
  | 'data-widget="iframe-scrollleft"'
  | 'data-widget="iframe-scrollright"'
  | 'data-widget="iframe-fullscreen"';

Usage Examples

Basic IFrame Setup

<!-- IFrame container -->
<div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">
  <!-- IFrame header with tabs -->
  <div class="nav navbar navbar-expand-lg navbar-white navbar-light border-bottom p-0">
    <div class="nav-item dropdown">
      <a class="nav-link bg-danger dropdown-toggle" data-toggle="dropdown" href="#" role="button">
        Close All
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all">Close All</a>
        <a class="dropdown-item" href="#" data-widget="iframe-close" data-type="all-other">Close All Other</a>
      </div>
    </div>
    
    <ul class="navbar-nav overflow-hidden" role="tablist"></ul>
    
    <div class="pt-1 ml-auto">
      <a class="btn btn-sm btn-primary" href="#" data-widget="iframe-scrollleft">
        <i class="fas fa-angle-double-left"></i>
      </a>
      <a class="btn btn-sm btn-primary" href="#" data-widget="iframe-scrollright">
        <i class="fas fa-angle-double-right"></i>
      </a>
      <a class="btn btn-sm btn-secondary" href="#" data-widget="iframe-fullscreen">
        <i class="fas fa-expand"></i>
      </a>
    </div>
  </div>
  
  <!-- IFrame content area -->
  <div class="tab-content">
    <div class="tab-pane fade active show" id="panel-default" role="tabpanel">
      <iframe src="./starter.html"></iframe>
    </div>
  </div>
  
  <!-- Loading screen -->
  <div class="overlay dark">
    <i class="fas fa-2x fa-sync-alt fa-spin"></i>
  </div>
</div>

Programmatic IFrame Management

import { IFrame } from 'admin-lte';

// Initialize iframe system
const iframeContainer = document.querySelector('[data-widget="iframe"]');
const iframe = new IFrame(iframeContainer, {
  allowDuplicates: false,
  allowReload: true,
  loadingScreen: true,
  autoShowNewTab: true,
  onTabCreated(item) {
    console.log('New tab created:', item);
    return item;
  },
  onTabChanged(item) {
    console.log('Tab changed to:', item);
    return item;
  }
});

// Create tabs programmatically
iframe.createTab('Dashboard', '/dashboard.html', 'dashboard', true);
iframe.createTab('Users', '/users.html', 'users', false);
iframe.createTab('Settings', '/settings.html', 'settings', false);

// Navigation integration
document.querySelectorAll('.nav-link[href]').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    const href = this.getAttribute('href');
    const title = this.textContent.trim();
    const uniqueName = href.replace(/[^a-zA-Z0-9]/g, '');
    
    iframe.createTab(title, href, uniqueName, true);
  });
});

Advanced IFrame Configuration

const iframe = new IFrame(iframeContainer, {
  autoIframeMode: true,
  autoItemActive: true,
  autoShowNewTab: true,
  allowDuplicates: false,
  allowReload: true,
  loadingScreen: true,
  scrollOffset: 50,
  
  onTabCreated(item) {
    const tabId = item.getAttribute('href');
    const tabContent = document.querySelector(tabId);
    
    // Add custom tab controls
    const tabNav = item.parentElement;
    const closeBtn = document.createElement('button');
    closeBtn.className = 'btn btn-sm';
    closeBtn.innerHTML = '<i class="fas fa-times"></i>';
    closeBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      this.removeActiveTab('only', item);
    });
    
    tabNav.appendChild(closeBtn);
    return item;
  },
  
  onTabChanged(item) {
    // Update browser URL without navigation
    const href = item.getAttribute('href');
    window.history.replaceState(null, null, href);
    
    // Update page title
    const tabTitle = item.textContent;
    document.title = `AdminLTE - ${tabTitle}`;
    
    return item;
  }
});

Dropdown

The Dropdown component enhances Bootstrap's dropdown functionality with viewport positioning, submenu support, and improved keyboard navigation.

API

class Dropdown {
  constructor(element: HTMLElement, options?: DropdownOptions);
  toggleSubmenu(): void;
  fixPosition(): void;
}

interface DropdownOptions {
  // Inherits from Bootstrap dropdown options
}

Automatic Enhancement Features

// Features automatically added to Bootstrap dropdowns
const enhancements = {
  submenuSupport: 'Nested dropdown menus with proper positioning',
  viewportDetection: 'Automatic position adjustment to stay in viewport',
  keyboardNavigation: 'Enhanced keyboard navigation for accessibility',
  touchSupport: 'Improved touch device support'
};

Usage Examples

Standard Dropdown with Submenu

<!-- Navbar dropdown with nested submenu -->
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
    Settings
  </a>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Profile</a>
    <div class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#">Preferences</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Display Settings</a>
        <a class="dropdown-item" href="#">Privacy Settings</a>
        <a class="dropdown-item" href="#">Notification Settings</a>
      </div>
    </div>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Logout</a>
  </div>
</li>

Programmatic Control

import { Dropdown } from 'admin-lte';

// Enhanced dropdown automatically applies to all Bootstrap dropdowns
const dropdownElement = document.querySelector('.dropdown-toggle');
const dropdown = new Dropdown(dropdownElement);

// Fix positioning manually if needed
dropdown.fixPosition();

// Toggle submenu programmatically
dropdown.toggleSubmenu();

Complex Menu Structure

<!-- Multi-level dropdown menu -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" 
          type="button" 
          data-toggle="dropdown">
    Multi-level Menu
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    
    <!-- First level submenu -->
    <div class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#">Category 1</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Subcategory 1.1</a>
        <a class="dropdown-item" href="#">Subcategory 1.2</a>
        
        <!-- Second level submenu -->
        <div class="dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" href="#">More Options</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Option A</a>
            <a class="dropdown-item" href="#">Option B</a>
            <a class="dropdown-item" href="#">Option C</a>
          </div>
        </div>
      </div>
    </div>
    
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

All utility components provide:

  • Cross-browser compatibility
  • Seamless integration with AdminLTE theming
  • Event-driven architecture for custom extensions
  • Responsive design considerations
  • Accessibility features and keyboard navigation