CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vant

Mobile UI Components library built on Vue 3 with 100+ components

74

1.07x
Overview
Eval results
Files

navigation-components.mddocs/

Navigation Components

Navigation and routing components including tabs, navigation bars, pagination, and sidebar navigation.

Capabilities

NavBar

Navigation bar component for page headers with title and navigation controls.

import { NavBar } from 'vant';

interface NavBarProps {
  /** Page title */
  title?: string;
  /** Left text */
  leftText?: string;
  /** Right text */
  rightText?: string;
  /** Left arrow */
  leftArrow?: boolean;
  /** Left disabled */
  leftDisabled?: boolean;
  /** Right disabled */
  rightDisabled?: boolean;
  /** Fixed position */
  fixed?: boolean;
  /** Placeholder */
  placeholder?: boolean;
  /** Z index */
  zIndex?: number | string;
  /** Safe area inset top */
  safeAreaInsetTop?: boolean;
  /** Clickable */
  clickable?: boolean;
}

Tab & Tabs

Tab navigation component for organizing content in multiple panels.

import { Tab, Tabs } from 'vant';

interface TabsProps {
  /** Active tab */
  modelValue?: string | number;
  /** Tab type */
  type?: 'line' | 'card';
  /** Tab color */
  color?: string;
  /** Background color */
  background?: string;
  /** Duration */
  duration?: number;
  /** Line width */
  lineWidth?: number | string;
  /** Line height */
  lineHeight?: number | string;
  /** Animated */
  animated?: boolean;
  /** Border */
  border?: boolean;
  /** Ellipsis */
  ellipsis?: boolean;
  /** Sticky */
  sticky?: boolean;
  /** Swipeable */
  swipeable?: boolean;
  /** Lazy render */
  lazyRender?: boolean;
  /** Scrollspy */
  scrollspy?: boolean;
  /** Offset top */
  offsetTop?: number | string;
  /** Swipe threshold */
  swipeThreshold?: number | string;
  /** Title active color */
  titleActiveColor?: string;
  /** Title inactive color */
  titleInactiveColor?: string;
}

interface TabProps {
  /** Tab title */
  title?: string;
  /** Tab name */
  name?: string | number;
  /** Badge content */
  badge?: string | number;
  /** Show badge dot */
  dot?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Title slot */
  titleSlot?: string;
  /** Title class */
  titleClass?: string;
  /** Title style */
  titleStyle?: string | object;
  /** Show zero badge */
  showZeroBadge?: boolean;
}

Tabbar & TabbarItem

Bottom tab bar component for primary navigation.

import { Tabbar, TabbarItem } from 'vant';

interface TabbarProps {
  /** Active tab */
  modelValue?: string | number;
  /** Fixed position */
  fixed?: boolean;
  /** Border */
  border?: boolean;
  /** Z index */
  zIndex?: number | string;
  /** Active color */
  activeColor?: string;
  /** Inactive color */
  inactiveColor?: string;
  /** Route */
  route?: boolean;
  /** Before change */
  beforeChange?: (name: string | number) => boolean | Promise<boolean>;
  /** Placeholder */
  placeholder?: boolean;
  /** Safe area inset bottom */
  safeAreaInsetBottom?: boolean;
}

interface TabbarItemProps {
  /** Tab name */
  name?: string | number;
  /** Icon name */
  icon?: string;
  /** Icon prefix */
  iconPrefix?: string;
  /** Badge content */
  badge?: string | number;
  /** Show badge dot */
  dot?: boolean;
  /** Route info */
  to?: string | object;
  /** Replace route */
  replace?: boolean;
}

Pagination

Pagination component for dividing content across multiple pages.

import { Pagination } from 'vant';

interface PaginationProps {
  /** Current page */
  modelValue?: number;
  /** Page mode */
  mode?: 'multi' | 'simple';
  /** Previous text */
  prevText?: string;
  /** Next text */
  nextText?: string;
  /** Page count */
  pageCount?: number | string;
  /** Total items */
  totalItems?: number | string;
  /** Items per page */
  itemsPerPage?: number | string;
  /** Show page size */
  showPageSize?: number | string;
  /** Force ellipses */
  forceEllipses?: boolean;
}

IndexBar & IndexAnchor

Index bar component for quick navigation through sorted lists.

import { IndexBar, IndexAnchor } from 'vant';

interface IndexBarProps {
  /** Index list */
  indexList?: string[] | number[];
  /** Z index */
  zIndex?: number | string;
  /** Sticky */
  sticky?: boolean;
  /** Sticky offset top */
  stickyOffsetTop?: number;
  /** Highlight color */
  highlightColor?: string;
  /** Teleport */
  teleport?: string | Element;
}

interface IndexAnchorProps {
  /** Anchor index */
  index?: string | number;
}

Sidebar & SidebarItem

Sidebar navigation component for secondary navigation.

import { Sidebar, SidebarItem } from 'vant';

interface SidebarProps {
  /** Active key */
  modelValue?: string | number;
}

interface SidebarItemProps {
  /** Item title */
  title?: string;
  /** Route info */
  to?: string | object;
  /** Replace route */
  replace?: boolean;
  /** Badge content */
  badge?: string | number;
  /** Show badge dot */
  dot?: boolean;
  /** Disabled state */
  disabled?: boolean;
}

Grid & GridItem

Grid layout component for organizing content in a grid structure.

import { Grid, GridItem } from 'vant';

interface GridProps {
  /** Column number */
  columnNum?: number | string;
  /** Icon size */
  iconSize?: string | number;
  /** Gutter */
  gutter?: number | string;
  /** Border */
  border?: boolean;
  /** Center content */
  center?: boolean;
  /** Square */
  square?: boolean;
  /** Clickable */
  clickable?: boolean;
  /** Direction */
  direction?: 'horizontal' | 'vertical';
  /** Reverse */
  reverse?: boolean;
}

interface GridItemProps {
  /** Item text */
  text?: string;
  /** Item icon */
  icon?: string;
  /** Icon prefix */
  iconPrefix?: string;
  /** Icon color */
  iconColor?: string;
  /** Badge content */
  badge?: string | number;
  /** Show badge dot */
  dot?: boolean;
  /** Route info */
  to?: string | object;
  /** Replace route */
  replace?: boolean;
}

TreeSelect

Tree select component for hierarchical data selection.

import { TreeSelect } from 'vant';

interface TreeSelectProps {
  /** Selected main item */
  mainActiveIndex?: number | string;
  /** Selected items */
  activeId?: string | number | Array<string | number>;
  /** Tree data */
  items?: TreeSelectItem[];
  /** Height */
  height?: number | string;
  /** Max selected count */
  max?: number | string;
}

interface TreeSelectItem {
  /** Item text */
  text: string;
  /** Item id */
  id?: string | number;
  /** Item badge */
  badge?: string | number;
  /** Show badge dot */
  dot?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Child items */
  children?: TreeSelectItem[];
}

ActionBar, ActionBarIcon & ActionBarButton

Bottom action bar for e-commerce and action-heavy interfaces.

import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';

interface ActionBarProps {
  /** Placeholder */
  placeholder?: boolean;
  /** Safe area inset bottom */
  safeAreaInsetBottom?: boolean;
}

interface ActionBarIconProps {
  /** Icon name */
  icon?: string;
  /** Icon color */
  color?: string;
  /** Icon text */
  text?: string;
  /** Badge content */
  badge?: string | number;
  /** Show badge dot */
  dot?: boolean;
  /** Icon prefix */
  iconPrefix?: string;
  /** Route info */
  to?: string | object;
  /** Replace route */
  replace?: boolean;
}

interface ActionBarButtonProps {
  /** Button type */
  type?: 'default' | 'primary' | 'warning' | 'danger';
  /** Button text */
  text?: string;
  /** Button color */
  color?: string;
  /** Icon */
  icon?: string;
  /** Disabled state */
  disabled?: boolean;
  /** Loading state */
  loading?: boolean;
  /** Route info */
  to?: string | object;
  /** Replace route */
  replace?: boolean;
}

Install with Tessl CLI

npx tessl i tessl/npm-vant

docs

basic-components.md

business-components.md

display-components.md

feedback-components.md

form-components.md

index.md

navigation-components.md

utilities-composables.md

tile.json