tessl/npm-uikit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

—

Pending

Overview

Eval results

Files

Interactive Components

Name: tessl/npm-uikit
Author: tessl

UIkit's interactive components provide JavaScript-powered functionality including modals, dropdowns, accordions, tooltips, and other dynamic user interface elements.

Capabilities

Modal

Modal dialog overlay component for displaying content above the main interface.

/* Modal Structure */
.uk-modal {
  /* Modal overlay container */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1010;
  display: none;
  overflow-y: auto;
  background: rgba(0,0,0,0.6);
}

.uk-modal-dialog {
  /* Modal content container */
  position: relative;
  margin: 50px auto;
  max-width: 600px;
  background: #fff;
  border-radius: 5px;
}

/* Modal Sizes */
.uk-modal-container { /* Container-sized modal */ }
.uk-modal-full { /* Full-screen modal */ }

/* Modal Components */
.uk-modal-header { /* Modal header section */ }
.uk-modal-body { /* Modal body content */ }
.uk-modal-footer { /* Modal footer section */ }
.uk-modal-title { /* Modal title styling */ }
.uk-modal-close { /* Modal close button */ }

JavaScript API:

/**
 * Modal component for overlay dialogs
 */
UIkit.modal(element: HTMLElement | string, options?: {
  /** Keyboard ESC closes modal */
  keyboard?: boolean;
  /** Background click closes modal */
  'bg-close'?: boolean;
  /** Modal stacking support */
  stack?: boolean;
  /** Container element */
  container?: boolean | string;
  /** Close selector */
  'sel-close'?: string;
}): ModalComponent;

interface ModalComponent {
  /** Modal element */
  $el: HTMLElement;
  /** Show modal */
  show(): Promise<void>;
  /** Hide modal */
  hide(): Promise<void>;
  /** Toggle modal visibility */
  toggle(): Promise<void>;
  /** Check if modal is active */
  isToggled(): boolean;
}

// Global modal methods
UIkit.modal.alert(message: string): Promise<void>;
UIkit.modal.confirm(message: string): Promise<boolean>;
UIkit.modal.prompt(message: string, value?: string): Promise<string | null>;
UIkit.modal.dialog(content: string, options?: object): ModalComponent;

Usage Examples:

<!-- Basic Modal -->
<div id="modal-example" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Headline</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p class="uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary" type="button">Save</button>
        </p>
    </div>
</div>

<!-- Trigger Button -->
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #modal-example">Open</button>

<!-- Full Modal -->
<div id="modal-full" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
        <div class="uk-grid-collapse uk-child-width-1-2@s uk-flex-middle" uk-grid>
            <div class="uk-background-cover" style="background-image: url('images/photo.jpg');" uk-height-viewport></div>
            <div class="uk-padding-large">
                <h1>Headline</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
</div>

// Programmatic modal usage
const modal = UIkit.modal('#modal-example');

// Show modal
modal.show();

// Hide modal
modal.hide();

// Alert dialog
UIkit.modal.alert('Hello World!');

// Confirmation dialog
UIkit.modal.confirm('Are you sure?').then(() => {
    console.log('Confirmed');
});

// Prompt dialog
UIkit.modal.prompt('Enter your name:', 'Default').then((name) => {
    if (name !== null) {
        console.log('Name:', name);
    }
});

Dropdown

Dropdown positioning component for contextual overlays.

/* Dropdown Container */
.uk-dropdown {
  /* Dropdown content container */
  display: none;
  position: absolute;
  z-index: 1020;
  min-width: 200px;
  padding: 25px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}

/* Dropdown Sizes */
.uk-dropdown-small { /* Small dropdown */ }
.uk-dropdown-large { /* Large dropdown */ }

/* Dropdown Nav */
.uk-dropdown .uk-nav {
  /* Navigation inside dropdown */
  margin: -10px -15px;
}

JavaScript API:

/**
 * Dropdown component for positioned overlays
 */
UIkit.dropdown(element: HTMLElement | string, options?: {
  /** Toggle selector */
  toggle?: string | boolean;
  /** Dropdown position */
  pos?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom';
  /** Trigger mode */
  mode?: 'click' | 'hover';
  /** Hover delay */
  'delay-show'?: number;
  /** Hide delay */
  'delay-hide'?: number;
  /** Boundary element */
  boundary?: string | HTMLElement;
  /** Boundary alignment */
  'boundary-align'?: boolean;
  /** Flip dropdown position */
  flip?: boolean | string;
  /** Dropdown offset */
  offset?: number;
  /** Animation */
  animation?: string;
  /** Animation duration */
  duration?: number;
}): DropdownComponent;

interface DropdownComponent {
  /** Dropdown element */
  $el: HTMLElement;
  /** Show dropdown */
  show(): Promise<void>;
  /** Hide dropdown */
  hide(delay?: boolean): Promise<void>;
  /** Toggle dropdown visibility */
  toggle(): Promise<void>;
  /** Check if dropdown is active */
  isToggled(): boolean;
}

Usage Examples:

<!-- Basic Dropdown -->
<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<!-- Click Dropdown -->
<button class="uk-button uk-button-default" type="button">Click</button>
<div uk-dropdown="mode: click">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<!-- Positioned Dropdown -->
<button class="uk-button uk-button-default" type="button">Bottom Right</button>
<div uk-dropdown="pos: bottom-right">
    <ul class="uk-nav uk-dropdown-nav">
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

// Programmatic dropdown usage
const dropdown = UIkit.dropdown('#dropdown-example', {
    mode: 'click',
    pos: 'bottom-center'
});

// Show dropdown
dropdown.show();

// Hide dropdown
dropdown.hide();

Accordion

Collapsible content sections component.

/* Accordion Container */
.uk-accordion {
  /* Accordion wrapper */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Accordion Item */
.uk-accordion > li {
  /* Individual accordion item */
  margin-bottom: 20px;
}

.uk-accordion-title {
  /* Accordion header/trigger */
  display: block;
  font-size: 18px;
  line-height: 1.4;
  color: #333;
  cursor: pointer;
}

.uk-accordion-content {
  /* Accordion content panel */
  margin-top: 20px;
}

/* Accordion States */
.uk-open > .uk-accordion-title::after {
  /* Open accordion indicator */
  content: "";
}

JavaScript API:

/**
 * Accordion component for collapsible content
 */
UIkit.accordion(element: HTMLElement | string, options?: {
  /** Active accordion items */
  active?: number | false;
  /** Animation type */
  animation?: boolean;
  /** Collapsible all items */
  collapsible?: boolean;
  /** Allow multiple open items */
  multiple?: boolean;
  /** Item targets selector */
  targets?: string;
  /** Toggle selector */
  toggle?: string;
  /** Content selector */
  content?: string;
  /** Transition type */
  transition?: string;
}): AccordionComponent;

interface AccordionComponent {
  /** Accordion element */
  $el: HTMLElement;
  /** Toggle specific item */
  toggle(index: number, animate?: boolean): void;
}

Usage Examples:

<!-- Basic Accordion -->
<ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href="#">Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate.</p>
        </div>
    </li>
</ul>

<!-- Multiple Open Accordion -->
<ul uk-accordion="multiple: true">
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Item 1</a>
        <div class="uk-accordion-content">
            <p>Content 1</p>
        </div>
    </li>
    <li class="uk-open">
        <a class="uk-accordion-title" href="#">Item 2</a>
        <div class="uk-accordion-content">
            <p>Content 2</p>
        </div>
    </li>
</ul>

Tooltip

Contextual tooltip component for additional information display.

/* Tooltip Container */
.uk-tooltip {
  /* Tooltip content container */
  display: none;
  position: absolute;
  z-index: 1030;
  max-width: 200px;
  padding: 3px 6px;
  background: #666;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
}

/* Tooltip Arrow */
.uk-tooltip::before {
  /* Tooltip arrow/pointer */
  content: "";
  position: absolute;
  border: 5px solid transparent;
}

JavaScript API:

/**
 * Tooltip component for contextual information
 */
UIkit.tooltip(element: HTMLElement | string, options?: {
  /** Tooltip text */
  title?: string;
  /** Tooltip position */
  pos?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
  /** Tooltip offset */
  offset?: number | boolean;
  /** Show animation */
  animation?: string;
  /** Animation duration */
  duration?: number;
  /** Show delay */
  delay?: number;
  /** CSS class */
  cls?: string;
  /** Container element */
  container?: string | HTMLElement;
}): TooltipComponent;

interface TooltipComponent {
  /** Tooltip element */
  $el: HTMLElement;
  /** Show tooltip */
  show(): void;
  /** Hide tooltip */
  hide(): void;
}

Usage Examples:

<!-- Basic Tooltip -->
<button class="uk-button uk-button-default" uk-tooltip="Hello World">Hover</button>

<!-- Positioned Tooltip -->
<button class="uk-button uk-button-default" uk-tooltip="title: Hello World; pos: top-right">Top Right</button>

<!-- Tooltip with Delay -->
<button class="uk-button uk-button-default" uk-tooltip="title: Hello World; delay: 500">Delayed</button>

Offcanvas

Off-screen panel component for navigation and content.

/* Offcanvas Container */
.uk-offcanvas {
  /* Offcanvas overlay */
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.uk-offcanvas-bar {
  /* Offcanvas content panel */
  position: absolute;
  top: 0;
  bottom: 0;
  left: -270px;
  width: 270px;
  padding: 20px;
  background: #222;
  overflow-y: auto;
}

/* Offcanvas Modes */
.uk-offcanvas-slide { /* Slide mode */ }
.uk-offcanvas-push { /* Push mode */ }
.uk-offcanvas-reveal { /* Reveal mode */ }

/* Offcanvas Flip */
.uk-offcanvas-flip .uk-offcanvas-bar {
  /* Right-side offcanvas */
  left: auto;
  right: -270px;
}

JavaScript API:

/**
 * Offcanvas component for off-screen panels  
 */
UIkit.offcanvas(element: HTMLElement | string, options?: {
  /** Offcanvas mode */
  mode?: 'slide' | 'push' | 'reveal' | 'none';
  /** Flip to right side */
  flip?: boolean;
  /** Overlay background */
  overlay?: boolean;
  /** Escape key closes */
  'esc-close'?: boolean;
  /** Background click closes */
  'bg-close'?: boolean;
  /** Container element */
  container?: boolean | string;
}): OffcanvasComponent;

interface OffcanvasComponent {
  /** Offcanvas element */
  $el: HTMLElement;
  /** Show offcanvas */
  show(): Promise<void>;
  /** Hide offcanvas */
  hide(): Promise<void>;
  /** Toggle offcanvas visibility */
  toggle(): Promise<void>;
}

Usage Examples:

<!-- Basic Offcanvas -->
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #offcanvas-slide">Open</button>

<div id="offcanvas-slide" uk-offcanvas>
    <div class="uk-offcanvas-bar">
        <button class="uk-offcanvas-close" type="button" uk-close></button>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

<!-- Push Mode Offcanvas -->
<div id="offcanvas-push" uk-offcanvas="mode: push; overlay: true">
    <div class="uk-offcanvas-bar">
        <button class="uk-offcanvas-close" type="button" uk-close></button>
        <ul class="uk-nav uk-nav-default">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

Toggle

Element visibility toggle component.

/**
 * Toggle component for element visibility
 */
UIkit.toggle(element: HTMLElement | string, options?: {
  /** Target element selector */
  target?: string;
  /** Toggle mode */
  mode?: 'click' | 'hover';
  /** CSS class to toggle */
  cls?: string;
  /** Media query condition */
  media?: string;
  /** Animation */
  animation?: string;
  /** Animation duration */
  duration?: number;
  /** Queued animations */
  queued?: boolean;
}): ToggleComponent;

interface ToggleComponent {
  /** Toggle element */
  $el: HTMLElement;
  /** Toggle visibility */
  toggle(): Promise<void>;
}

Usage Examples:

<!-- Basic Toggle -->
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-animation">Toggle</button>
<div id="toggle-animation">
    <p>What's up?</p>
</div>

<!-- Class Toggle -->
<button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle-class; cls: uk-card-primary">Toggle Class</button>
<div id="toggle-class" class="uk-card uk-card-default uk-card-body uk-width-1-2">
    <p>This card will toggle between default and primary styling.</p>
</div>

<!-- Multiple Targets -->
<button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle">Toggle All</button>
<div class="toggle">Target 1</div>
<div class="toggle">Target 2</div>

Switcher

Content switching component for displaying different content panels.

/**
 * Switcher component for content switching
 */
UIkit.switcher(element: HTMLElement | string, options?: {
  /** Target switcher content */
  connect?: string;
  /** Toggle selector */
  toggle?: string;
  /** Active item index */
  active?: number;
  /** Animation */
  animation?: string;
  /** Animation duration */
  duration?: number;
  /** Swiping support */
  swiping?: boolean;
}): SwitcherComponent;

interface SwitcherComponent {
  /** Switcher element */
  $el: HTMLElement;
  /** Show specific item */
  show(index: number): void;
}

Usage Examples:

<!-- Basic Switcher -->
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

<!-- Connected Switcher -->
<ul class="uk-subnav uk-subnav-pill" uk-switcher="connect: #my-id">
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul id="my-id" class="uk-switcher uk-margin">
    <li>Connected content 1</li>
    <li>Connected content 2</li>
</ul>

Install with Tessl CLI