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

feedback-components.mddocs/

Feedback Components

Interactive feedback components including dialogs, action sheets, loading states, and toast notifications.

Capabilities

Dialog

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;
}

ActionSheet

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

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;
}

Notify

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

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;
}

PullRefresh

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;
}

ShareSheet

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;
}

SwipeCell

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;
}

FloatingPanel

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;
}

FloatingBubble

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

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-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