Mobile UI Components library built on Vue 3 with 100+ components
74
Interactive feedback components including dialogs, action sheets, loading states, and toast notifications.
Modal dialog component for user confirmations and alerts.
import { Dialog } from 'vant';
// Function API
function Dialog(options: DialogOptions): Promise<void>;
function Dialog.alert(options: DialogOptions): Promise<void>;
function Dialog.confirm(options: DialogOptions): Promise<void>;
interface DialogOptions {
/** Dialog title */
title?: string;
/** Dialog message */
message?: string;
/** Message align */
messageAlign?: 'left' | 'center' | 'right';
/** Show confirm button */
showConfirmButton?: boolean;
/** Show cancel button */
showCancelButton?: boolean;
/** Confirm button text */
confirmButtonText?: string;
/** Cancel button text */
cancelButtonText?: string;
/** Confirm button color */
confirmButtonColor?: string;
/** Cancel button color */
cancelButtonColor?: string;
/** Show overlay */
overlay?: boolean;
/** Overlay class */
overlayClass?: string;
/** Overlay style */
overlayStyle?: object;
/** Close on overlay click */
closeOnClickOverlay?: boolean;
/** Lock scroll */
lockScroll?: boolean;
/** Allow HTML */
allowHtml?: boolean;
/** Class name */
className?: string;
/** Transition */
transition?: string;
/** Get container */
getContainer?: string | (() => Element);
/** Before close */
beforeClose?: (action: string) => boolean | Promise<boolean>;
}
// Static methods
namespace Dialog {
function close(): void;
function setDefaultOptions(options: DialogOptions): void;
function resetDefaultOptions(): void;
}Action sheet component for presenting multiple options to users.
import { ActionSheet } from 'vant';
interface ActionSheetProps {
/** Show action sheet */
show?: boolean;
/** Action list */
actions?: ActionSheetAction[];
/** Title */
title?: string;
/** Cancel text */
cancelText?: string;
/** Description */
description?: string;
/** Closeable */
closeable?: boolean;
/** Close icon */
closeIcon?: string;
/** Duration */
duration?: number | string;
/** Round */
round?: boolean;
/** Overlay */
overlay?: boolean;
/** Overlay class */
overlayClass?: string;
/** Overlay style */
overlayStyle?: object;
/** Lock scroll */
lockScroll?: boolean;
/** Lazy render */
lazyRender?: boolean;
/** Close on click overlay */
closeOnClickOverlay?: boolean;
/** Close on click action */
closeOnClickAction?: boolean;
/** Safe area inset bottom */
safeAreaInsetBottom?: boolean;
/** Get container */
getContainer?: string | (() => Element);
/** Before close */
beforeClose?: (action: string) => boolean | Promise<boolean>;
}
interface ActionSheetAction {
/** Action name */
name?: string;
/** Action color */
color?: string;
/** Sub name */
subname?: string;
/** Loading state */
loading?: boolean;
/** Disabled state */
disabled?: boolean;
/** Class name */
className?: string;
/** Callback function */
callback?: (action: ActionSheetAction) => void;
}Loading component for showing loading states and spinners.
import { Loading } from 'vant';
interface LoadingProps {
/** Loading color */
color?: string;
/** Loading type */
type?: 'circular' | 'spinner';
/** Loading size */
size?: string | number;
/** Text size */
textSize?: string | number;
/** Text color */
textColor?: string;
/** Vertical layout */
vertical?: boolean;
}
// Function API
function Loading.service(message?: string): LoadingInstance;
function Loading.service(options: LoadingServiceOptions): LoadingInstance;
interface LoadingServiceOptions {
/** Loading message */
message?: string;
/** Forbid click */
forbidClick?: boolean;
/** Loading type */
loadingType?: 'circular' | 'spinner';
/** Overlay */
overlay?: boolean;
/** Duration */
duration?: number;
}
interface LoadingInstance {
close: () => void;
}Notification component for showing status messages.
import { Notify } from 'vant';
// Function API
function Notify(message: string): NotifyInstance;
function Notify(options: NotifyOptions): NotifyInstance;
interface NotifyOptions {
/** Notify type */
type?: 'primary' | 'success' | 'warning' | 'danger';
/** Notify message */
message?: string;
/** Duration */
duration?: number;
/** Color */
color?: string;
/** Background */
background?: string;
/** Class name */
className?: string;
/** Lock scroll */
lockScroll?: boolean;
/** Position */
position?: 'top' | 'bottom';
/** Click callback */
onClick?: (event: MouseEvent) => void;
/** Close callback */
onClose?: () => void;
/** Opened callback */
onOpened?: () => void;
}
interface NotifyInstance {
close: () => void;
}
// Static methods
namespace Notify {
function clear(): void;
function setDefaultOptions(options: NotifyOptions): void;
function resetDefaultOptions(): void;
}Overlay component for modal backgrounds and masks.
import { Overlay } from 'vant';
interface OverlayProps {
/** Show overlay */
show?: boolean;
/** Z index */
zIndex?: string | number;
/** Duration */
duration?: string | number;
/** Class name */
className?: string;
/** Custom style */
customStyle?: object;
/** Lock scroll */
lockScroll?: boolean;
}Pull-to-refresh component for refreshing content.
import { PullRefresh } from 'vant';
interface PullRefreshProps {
/** Loading state */
loading?: boolean;
/** Success text */
successText?: string;
/** Success duration */
successDuration?: number | string;
/** Animation duration */
animationDuration?: number | string;
/** Head height */
headHeight?: number | string;
/** Pull distance */
pullDistance?: number | string;
/** Disabled */
disabled?: boolean;
}Share sheet component for social sharing options.
import { ShareSheet } from 'vant';
interface ShareSheetProps {
/** Show share sheet */
show?: boolean;
/** Options */
options?: ShareSheetOption[] | ShareSheetOption[][];
/** Title */
title?: string;
/** Cancel text */
cancelText?: string;
/** Description */
description?: string;
/** Duration */
duration?: number | string;
/** Round */
round?: boolean;
/** Overlay */
overlay?: boolean;
/** Overlay class */
overlayClass?: string;
/** Overlay style */
overlayStyle?: object;
/** Lock scroll */
lockScroll?: boolean;
/** Lazy render */
lazyRender?: boolean;
/** Close on click overlay */
closeOnClickOverlay?: boolean;
/** Safe area inset bottom */
safeAreaInsetBottom?: boolean;
/** Get container */
getContainer?: string | (() => Element);
/** Before close */
beforeClose?: (action: string) => boolean | Promise<boolean>;
}
interface ShareSheetOption {
/** Option name */
name?: string;
/** Option description */
description?: string;
/** Option icon */
icon?: string;
/** Option class name */
className?: string;
}Swipe cell component for revealing actions on swipe.
import { SwipeCell } from 'vant';
interface SwipeCellProps {
/** Cell name */
name?: string | number;
/** Left action width */
leftWidth?: number | string;
/** Right action width */
rightWidth?: number | string;
/** Before close */
beforeClose?: (params: { name: string; position: string }) => boolean | Promise<boolean>;
/** Disabled */
disabled?: boolean;
/** Stop propagation */
stopPropagation?: boolean;
}
interface SwipeCellInstance {
open: (side: 'left' | 'right') => void;
close: () => void;
}Floating panel component for bottom sheets and drawers.
import { FloatingPanel } from 'vant';
interface FloatingPanelProps {
/** Panel height */
height?: number | string;
/** Anchors */
anchors?: number[];
/** Duration */
duration?: number;
/** Content draggable */
contentDraggable?: boolean;
/** Lock scroll */
lockScroll?: boolean;
/** Safe area inset bottom */
safeAreaInsetBottom?: boolean;
}Floating bubble component for floating action buttons.
import { FloatingBubble } from 'vant';
interface FloatingBubbleProps {
/** Bubble axis */
axis?: 'xy' | 'x' | 'y' | 'lock';
/** Magnetic */
magnetic?: 'x' | 'y';
/** Offset */
offset?: { x: number; y: number };
/** Teleport */
teleport?: string | Element;
/** Gap */
gap?: number;
/** Icon */
icon?: string;
}Barrage component for live comment streams.
import { Barrage } from 'vant';
interface BarrageProps {
/** Auto play */
autoPlay?: boolean;
/** Rows */
rows?: number | string;
/** Top */
top?: number | string;
/** Duration */
duration?: number;
/** Delay */
delay?: number;
}
interface BarrageInstance {
play: () => void;
pause: () => void;
}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