CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-element-ui

A comprehensive Vue.js 2.0 component library providing 90 UI components for building modern web applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

navigation.mddocs/

Navigation

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

Capabilities

Menu System

Hierarchical navigation menus with support for nested submenus, icons, and active state management.

/**
 * Main menu component for navigation
 */
const Menu = Vue.component;

interface MenuProps {
  mode?: 'horizontal' | 'vertical';
  collapse?: boolean;
  backgroundColor?: string;
  textColor?: string;
  activeTextColor?: string;
  defaultActive?: string;
  defaultOpeneds?: array;
  uniqueOpened?: boolean;
  menuTrigger?: 'hover' | 'click';
  router?: boolean;
  collapseTransition?: boolean;
}

/**
 * Submenu container for nested menu items
 */
const Submenu = Vue.component;

interface SubmenuProps {
  index: string;
  popperClass?: string;
  showTimeout?: number;
  hideTimeout?: number;
  disabled?: boolean;
  popperAppendToBody?: boolean;
}

/**
 * Individual menu item
 */
const MenuItem = Vue.component;

interface MenuItemProps {
  index?: string;
  route?: string | object;
  disabled?: boolean;
}

/**
 * Menu item group for organizing related items
 */
const MenuItemGroup = Vue.component;

interface MenuItemGroupProps {
  title?: string;
}

Usage Examples:

// Vertical menu
<el-menu
  default-active="2"
  class="el-menu-vertical-demo"
  @open="handleOpen"
  @close="handleClose">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span>Navigator One</span>
    </template>
    <el-menu-item-group title="Group One">
      <el-menu-item index="1-1">item one</el-menu-item>
      <el-menu-item index="1-2">item two</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <template slot="title">item four</template>
      <el-menu-item index="1-4-1">item one</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <span slot="title">Navigator Two</span>
  </el-menu-item>
</el-menu>

// Horizontal menu
<el-menu
  :default-active="activeIndex"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect">
  <el-menu-item index="1">Processing Center</el-menu-item>
  <el-submenu index="2">
    <template slot="title">Workspace</template>
    <el-menu-item index="2-1">item one</el-menu-item>
    <el-menu-item index="2-2">item two</el-menu-item>
  </el-submenu>
  <el-menu-item index="3" disabled>Info</el-menu-item>
</el-menu>

// Collapsible menu
<el-menu
  default-active="1-4-1"
  class="el-menu-vertical-demo"
  :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <i class="el-icon-location"></i>
      <span slot="title">Navigator One</span>
    </template>
    <el-menu-item index="1-1">item one</el-menu-item>
  </el-submenu>
</el-menu>

Tabs System

Tab navigation for organizing content into switchable panels with support for closable tabs and custom content.

/**
 * Tabs container component
 */
const Tabs = Vue.component;

interface TabsProps {
  value?: string;
  type?: 'card' | 'border-card';
  closable?: boolean;
  addable?: boolean;
  editable?: boolean;
  tabPosition?: 'top' | 'right' | 'bottom' | 'left';
  stretch?: boolean;
  beforeLeave?: Function;
}

/**
 * Individual tab pane content
 */
const TabPane = Vue.component;

interface TabPaneProps {
  label?: string;
  disabled?: boolean;
  name?: string;
  closable?: boolean;
  lazy?: boolean;
}

Usage Examples:

// Basic tabs
<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="User" name="first">User</el-tab-pane>
  <el-tab-pane label="Config" name="second">Config</el-tab-pane>
  <el-tab-pane label="Role" name="third">Role</el-tab-pane>
  <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>

// Card style tabs
<el-tabs type="card" @tab-click="handleClick">
  <el-tab-pane label="User">User</el-tab-pane>
  <el-tab-pane label="Config">Config</el-tab-pane>
  <el-tab-pane label="Role">Role</el-tab-pane>
  <el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs>

// Closable tabs
<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
  <el-tab-pane
    v-for="(item, index) in editableTabs"
    :key="item.name"
    :label="item.title"
    :name="item.name">
    {{item.content}}
  </el-tab-pane>
</el-tabs>

// Custom tab content
<el-tabs>
  <el-tab-pane>
    <span slot="label"><i class="el-icon-date"></i> Route</span>
    Route
  </el-tab-pane>
  <el-tab-pane label="Config">Config</el-tab-pane>
</el-tabs>

Breadcrumb Navigation

Breadcrumb trail showing the current location within a navigational hierarchy.

/**
 * Breadcrumb container component
 */
const Breadcrumb = Vue.component;

interface BreadcrumbProps {
  separator?: string;
  separatorClass?: string;
}

/**
 * Individual breadcrumb item
 */
const BreadcrumbItem = Vue.component;

interface BreadcrumbItemProps {
  to?: string | object;
  replace?: boolean;
}

Usage Examples:

// Basic breadcrumb
<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item>
  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>

// Icon separator
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>

Dropdown Navigation

Dropdown menus for secondary navigation and action menus.

/**
 * Dropdown trigger and container
 */
const Dropdown = Vue.component;

interface DropdownProps {
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
  size?: 'large' | 'medium' | 'small' | 'mini';
  splitButton?: boolean;
  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
  trigger?: 'hover' | 'click' | 'contextmenu';
  hideOnClick?: boolean;
  showTimeout?: number;
  hideTimeout?: number;
  tabindex?: number;
}

/**
 * Dropdown menu container
 */
const DropdownMenu = Vue.component;

/**
 * Individual dropdown menu item
 */
const DropdownItem = Vue.component;

interface DropdownItemProps {
  command?: string | number | object;
  disabled?: boolean;
  divided?: boolean;
  icon?: string;
}

Usage Examples:

// Basic dropdown
<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">Action 1</el-dropdown-item>
    <el-dropdown-item command="b">Action 2</el-dropdown-item>
    <el-dropdown-item command="c" disabled>Action 3</el-dropdown-item>
    <el-dropdown-item command="d" divided>Action 4</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

// Split button dropdown
<el-dropdown split-button type="primary" @click="handleClick" @command="handleCommand">
  Dropdown List
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">Action 1</el-dropdown-item>
    <el-dropdown-item command="b">Action 2</el-dropdown-item>
    <el-dropdown-item command="c">Action 3</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

// Right-click context menu
<el-dropdown trigger="contextmenu">
  <span class="el-dropdown-link">
    Right click
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>Action 1</el-dropdown-item>
    <el-dropdown-item>Action 2</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

Pagination

Pagination controls for navigating through large datasets with customizable layout and sizing options.

/**
 * Pagination component for data navigation
 */
const Pagination = Vue.component;

interface PaginationProps {
  small?: boolean;
  background?: boolean;
  pageSize?: number;
  total?: number;
  pageCount?: number;
  pagerCount?: number;
  currentPage?: number;
  layout?: string;
  pageSizes?: array;
  popperClass?: string;
  prevText?: string;
  nextText?: string;
  disabled?: boolean;
  hideOnSinglePage?: boolean;
}

Usage Examples:

// Basic pagination
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[100, 200, 300, 400]"
  :page-size="100"
  layout="total, sizes, prev, pager, next, jumper"
  :total="400">
</el-pagination>

// Small pagination
<el-pagination
  small
  layout="prev, pager, next"
  :total="50">
</el-pagination>

// Custom layout
<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

// Complete pagination
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page.sync="currentPage"
  :page-sizes="[10, 20, 30, 40]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

Page Header

Page header component with navigation and action areas for page-level navigation.

/**
 * Page header with back navigation and title
 */
const PageHeader = Vue.component;

interface PageHeaderProps {
  title?: string;
  content?: string;
}

Usage Examples:

// Basic page header
<el-page-header @back="goBack" content="Detail">
</el-page-header>

// Custom content
<el-page-header @back="goBack">
  <template slot="content">
    <span>Detail</span>
  </template>
</el-page-header>

// With title and content
<el-page-header
  title="Back"
  content="Detail page description">
</el-page-header>

Install with Tessl CLI

npx tessl i tessl/npm-element-ui

docs

data-display.md

feedback.md

form-controls.md

i18n.md

index.md

layout.md

navigation.md

services.md

tile.json