or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-display.mdfeedback.mdform-controls.mdi18n.mdindex.mdlayout.mdnavigation.mdservices.md
tile.json

index.mddocs/

Element UI

Element UI is a comprehensive Vue.js 2.0 component library that provides 90 high-quality UI components for building modern web applications. It offers complete form controls, layout systems, navigation components, data display elements, and feedback mechanisms with consistent design language, extensive customization, internationalization support, and comprehensive accessibility features.

Package Information

  • Package Name: element-ui
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install element-ui

Core Imports

Global installation (recommended):

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

On-demand imports:

import { Button, Input, Message } from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/input.css';

Vue.component('el-button', Button);
Vue.component('el-input', Input);
Vue.prototype.$message = Message;

Basic Usage

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI, {
  size: 'medium', // set default component size
  zIndex: 3000,   // set default z-index for popups
  locale: {}      // set locale configuration
});

// Use components in templates
// <el-button type="primary" @click="handleClick">Click Me</el-button>
// <el-input v-model="value" placeholder="Enter text"></el-input>

// Use global services
this.$message.success('Operation completed');
this.$confirm('Delete this item?', 'Warning').then(() => {
  // User confirmed
});

Architecture

Element UI is built around several key architectural patterns:

  • Modular Component System: Each of the 90 components is independently packaged and can be imported selectively
  • Vue Plugin Architecture: Global installation via Vue.use() registers all components and adds prototype methods
  • Theme System: SCSS-based theming with CSS custom properties and component-specific stylesheets
  • Global Services: Singleton services for common UI patterns (loading, messages, notifications, dialogs)
  • Internationalization: Built-in i18n system with locale switching and custom translation functions
  • Type Safety: Complete TypeScript definitions with generic type support for complex components like Table and Tree

Capabilities

Form Controls

Complete set of form input components including text inputs, selections, date pickers, and validation. Provides controlled and uncontrolled patterns with built-in validation support.

// Core form components
const Button = Vue.component;
const Input = Vue.component;
const Select = Vue.component;
const DatePicker = Vue.component;
const Form = Vue.component;

// Form validation
const FormItem = Vue.component;

// Configuration for global installation
interface ElementUIOptions {
  size?: 'large' | 'medium' | 'small' | 'mini';
  zIndex?: number;
  locale?: any;
  i18n?: (path: string, options?: any) => string;
}

function install(Vue: typeof Vue, options?: ElementUIOptions): void;

Form Controls

Layout System

Flexible layout components for creating responsive grid systems and application layouts with containers, rows, columns, and semantic layout elements.

const Row = Vue.component;
const Col = Vue.component;
const Container = Vue.component;
const Header = Vue.component;
const Main = Vue.component;
const Aside = Vue.component;
const Footer = Vue.component;

Layout System

Navigation Components

Navigation elements including menus, breadcrumbs, tabs, and pagination for building intuitive user interfaces with clear information hierarchy.

const Menu = Vue.component;
const Tabs = Vue.component;
const Breadcrumb = Vue.component;
const Pagination = Vue.component;
const Dropdown = Vue.component;

Navigation

Data Display

Components for presenting and organizing data including tables, trees, tags, cards, and specialized display elements for rich content presentation.

const Table = Vue.component;
const Tree = Vue.component;
const Card = Vue.component;
const Tag = Vue.component;
const Timeline = Vue.component;
const Descriptions = Vue.component;

Data Display

Feedback Components

User feedback mechanisms including alerts, messages, notifications, loading states, and confirmation dialogs for interactive communication.

// Global services available on Vue prototype
interface VuePrototype {
  $message: MessageService;
  $notify: NotificationService;
  $msgbox: MessageBoxService;
  $alert: (message: string, title?: string, options?: any) => Promise<void>;
  $confirm: (message: string, title?: string, options?: any) => Promise<void>;
  $prompt: (message: string, title?: string, options?: any) => Promise<any>;
  $loading: LoadingService;
}

const Dialog = Vue.component;
const Alert = Vue.component;
const Popover = Vue.component;
const Tooltip = Vue.component;

Feedback

Global Services

System-level services for loading states, messages, notifications, and modal dialogs that can be accessed programmatically throughout the application.

interface MessageService {
  (message: string): void;
  success(message: string): void;
  warning(message: string): void;
  info(message: string): void;
  error(message: string): void;
}

interface LoadingService {
  (options?: LoadingOptions): LoadingInstance;
  service(options?: LoadingOptions): LoadingInstance;
  directive: Vue.DirectiveOptions;
}

interface NotificationService {
  (options: NotificationOptions): NotificationInstance;
  success(message: string, title?: string): NotificationInstance;
  warning(message: string, title?: string): NotificationInstance;
  info(message: string, title?: string): NotificationInstance;
  error(message: string, title?: string): NotificationInstance;
}

Global Services

Locale & Internationalization

Built-in internationalization system supporting multiple languages with customizable locale configurations and integration with vue-i18n.

interface LocaleSystem {
  use(lang: any): void;
  t(path: string, options?: any): string;
  i18n(handler: (path: string, options?: any) => string): void;
}

const locale: LocaleSystem;

Internationalization

Utility Components

Additional utility components for enhanced functionality and transitions.

/**
 * Collapse transition component for smooth expand/collapse animations
 */
const CollapseTransition = Vue.component;

/**
 * Custom scrollbar component
 */
const Scrollbar = Vue.component;

/**
 * Infinite scroll directive for auto-loading content
 */
const InfiniteScroll = Vue.directive;

Types

// Component size variations
type ComponentSize = 'large' | 'medium' | 'small' | 'mini';

// Horizontal alignment options
type HorizontalAlignment = 'left' | 'center' | 'right';

// Base component interface
interface ElementUIComponent extends Vue {
  $el: HTMLElement;
}

// Installation options
interface InstallationOptions {
  locale?: any;
  i18n?: (path: string, options?: any) => string;
  size?: ComponentSize;
}