tessl/npm-material-design-lite

Material Design Components in CSS, JS and HTML providing a comprehensive implementation of Google's Material Design specification for web applications.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Layout Components

Name: tessl/npm-material-design-lite
Author: tessl

Structural components for application layout including headers, drawers, navigation, tabs, and responsive grid systems. These components provide the foundation for Material Design app structures with responsive behavior and navigation patterns.

Capabilities

Material Layout

Main layout component that provides app structure with header, drawer, and content areas.

/**
 * Material Design layout component
 * CSS Class: mdl-js-layout
 * Widget: false
 */
interface MaterialLayout {
  /** Toggle drawer open/closed state */
  toggleDrawer(): void;
}

HTML Structure:

<!-- Basic layout with header and drawer -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  
  <main class="mdl-layout__content">
    <div class="page-content">
      <!-- Your content goes here -->
    </div>
  </main>
</div>

Layout Modes:

<!-- Fixed header that stays at top during scroll -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

<!-- Fixed drawer that stays open on large screens -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">

<!-- Waterfall header that shrinks on scroll -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--waterfall">

<!-- No drawer spacer -->
<div class="mdl-layout mdl-js-layout mdl-layout--no-drawer-button">

<!-- No desktop drawer -->
<div class="mdl-layout mdl-js-layout mdl-layout--no-desktop-drawer-button">

Usage Examples:

// Access layout instance
const layout = document.querySelector('.mdl-js-layout').MaterialLayout;

// Toggle drawer programmatically
layout.toggleDrawer();

// Open drawer on button click
document.querySelector('#menu-button').addEventListener('click', () => {
  layout.toggleDrawer();
});

// Close drawer when clicking on content
document.querySelector('.mdl-layout__content').addEventListener('click', () => {
  const drawer = document.querySelector('.mdl-layout__drawer');
  if (drawer.classList.contains('is-visible')) {
    layout.toggleDrawer();
  }
});

Material Layout Tab

Individual tab component within a layout header tab bar.

/**
 * Material Design layout tab component
 * CSS Class: mdl-js-layout (parent layout manages tabs)
 * Widget: true (as MaterialLayoutTab)
 */
interface MaterialLayoutTab {
  /** Programmatically select this tab and show associated panel */
  show(): void;
}

HTML Structure:

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
    </div>
  </header>
  
  <main class="mdl-layout__content">
    <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-2">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
    <section class="mdl-layout__tab-panel" id="scroll-tab-3">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
  </main>
</div>

Usage Examples:

// Access tab instances
const tabs = document.querySelectorAll('.mdl-layout__tab');
const tabInstances = Array.from(tabs).map(tab => tab.MaterialLayoutTab);

// Programmatically switch to a specific tab
const secondTab = tabs[1].MaterialLayoutTab;
secondTab.show();

// Dynamic tab switching
function switchToTab(index) {
  const tab = tabs[index];
  if (tab && tab.MaterialLayoutTab) {
    tab.MaterialLayoutTab.show();
  }
}

// Listen for tab changes
document.addEventListener('click', (event) => {
  if (event.target.matches('.mdl-layout__tab')) {
    console.log('Tab clicked:', event.target.textContent);
  }
});

Material Tabs

Standalone tab component for organizing content into switchable sections.

/**
 * Material Design tabs component
 * CSS Class: mdl-js-tabs
 * Widget: false
 */
interface MaterialTabs {
  // No public methods - behavior is entirely automatic
  // Tabs are activated by clicking tab elements
}

HTML Structure:

<!-- Standalone tabs -->
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
    <a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
    <a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
    <a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
  </div>

  <div class="mdl-tabs__panel is-active" id="starks-panel">
    <ul>
      <li>Eddard</li>
      <li>Catelyn</li>
      <li>Robb</li>
    </ul>
  </div>
  <div class="mdl-tabs__panel" id="lannisters-panel">
    <ul>
      <li>Tywin</li>
      <li>Cersei</li>
      <li>Jaime</li>
    </ul>
  </div>
  <div class="mdl-tabs__panel" id="targaryens-panel">
    <ul>
      <li>Viserys</li>
      <li>Daenerys</li>
    </ul>
  </div>
</div>

Usage Examples:

// Tabs work automatically, but you can listen for changes
document.addEventListener('click', (event) => {
  if (event.target.matches('.mdl-tabs__tab')) {
    const targetPanel = event.target.getAttribute('href');
    console.log('Switching to panel:', targetPanel);
    
    // Perform custom actions when tab changes
    onTabChange(targetPanel);
  }
});

function onTabChange(panelId) {
  // Custom logic for tab changes
  const panel = document.querySelector(panelId);
  if (panel) {
    // Load content dynamically if needed
    loadPanelContent(panel);
  }
}

// Programmatically activate a tab
function activateTab(tabSelector) {
  const tab = document.querySelector(tabSelector);
  const panel = document.querySelector(tab.getAttribute('href'));
  
  // Remove active class from all tabs and panels
  document.querySelectorAll('.mdl-tabs__tab').forEach(t => t.classList.remove('is-active'));
  document.querySelectorAll('.mdl-tabs__panel').forEach(p => p.classList.remove('is-active'));
  
  // Add active class to selected tab and panel
  tab.classList.add('is-active');
  panel.classList.add('is-active');
}

Layout Constants

/**
 * Material Layout constants and configuration
 */
interface LayoutConstants {
  /** Media query for maximum width */
  MAX_WIDTH: '(max-width: 1024px)';
  
  /** Pixels to scroll tabs when using arrow buttons */
  TAB_SCROLL_PIXELS: 100;
  
  /** Timeout for resize event handling */
  RESIZE_TIMEOUT: 100;
  
  /** Menu icon HTML entity */
  MENU_ICON: '&#xE5D2;';
  
  /** Left chevron icon name */
  CHEVRON_LEFT: 'chevron_left';
  
  /** Right chevron icon name */
  CHEVRON_RIGHT: 'chevron_right';
}

/**
 * Layout modes
 */
interface LayoutModes {
  /** Standard layout mode */
  STANDARD: 0;
  
  /** Seamed layout mode */
  SEAMED: 1;
  
  /** Waterfall layout mode */
  WATERFALL: 2;
  
  /** Scroll layout mode */
  SCROLL: 3;
}

/**
 * Keyboard codes used by layout components
 */
interface LayoutKeyCodes {
  ENTER: 13;
  ESCAPE: 27;
  SPACE: 32;
}

Responsive Behavior

Layout components automatically adapt to different screen sizes:

// Monitor responsive changes
const mediaQuery = window.matchMedia('(max-width: 1024px)');

mediaQuery.addListener((mq) => {
  if (mq.matches) {
    // Mobile/tablet view
    console.log('Switched to mobile layout');
    setupMobileNavigation();
  } else {
    // Desktop view
    console.log('Switched to desktop layout');
    setupDesktopNavigation();
  }
});

function setupMobileNavigation() {
  // Show drawer button
  // Hide large-screen-only navigation
}

function setupDesktopNavigation() {
  // Hide drawer button (if no-desktop-drawer-button class is used)
  // Show large-screen navigation
}

Layout Integration

// Initialize layout with custom behavior
function initializeLayout() {
  const layout = document.querySelector('.mdl-js-layout');
  
  // Ensure layout is upgraded
  componentHandler.upgradeElement(layout);
  
  // Set up drawer close on content click
  const content = layout.querySelector('.mdl-layout__content');
  content.addEventListener('click', () => {
    const drawer = layout.querySelector('.mdl-layout__drawer');
    if (drawer.classList.contains('is-visible')) {
      layout.MaterialLayout.toggleDrawer();
    }
  });
  
  // Set up tab switching
  const tabs = layout.querySelectorAll('.mdl-layout__tab');
  tabs.forEach((tab, index) => {
    tab.addEventListener('click', () => {
      console.log('Layout tab clicked:', index);
      // Custom tab switching logic
    });
  });
}

// Handle dynamic content updates
function updateLayoutContent(newContent) {
  const contentArea = document.querySelector('.mdl-layout__content .page-content');
  contentArea.innerHTML = newContent;
  
  // Upgrade any new MDL components in the content
  componentHandler.upgradeElements(contentArea.querySelectorAll('[class*="mdl-js-"]'));
}

Accessibility

Layout components include accessibility features:

// Keyboard navigation support
document.addEventListener('keydown', (event) => {
  const layout = document.querySelector('.mdl-js-layout').MaterialLayout;
  
  switch (event.key) {
    case 'Escape':
      // Close drawer on escape
      const drawer = document.querySelector('.mdl-layout__drawer');
      if (drawer.classList.contains('is-visible')) {
        layout.toggleDrawer();
      }
      break;
      
    case 'Tab':
      // Handle tab navigation within drawer
      if (event.target.closest('.mdl-layout__drawer')) {
        handleDrawerTabNavigation(event);
      }
      break;
  }
});

function handleDrawerTabNavigation(event) {
  const drawer = document.querySelector('.mdl-layout__drawer');
  const focusableElements = drawer.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])');
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];
  
  if (event.shiftKey && event.target === firstElement) {
    // Wrap to last element
    event.preventDefault();
    lastElement.focus();
  } else if (!event.shiftKey && event.target === lastElement) {
    // Wrap to first element
    event.preventDefault();
    firstElement.focus();
  }
}