Mobile UI Components library built on Vue 3 with 100+ components
74
Navigation and routing components including tabs, navigation bars, pagination, and sidebar navigation.
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 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;
}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 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;
}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 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 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;
}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[];
}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-vantdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10