or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration-theming.mddisplay-components.mdfeedback-components.mdform-components.mdgesture-components.mdindex.mdlayout-components.mdnavigation-components.mdpicker-components.md
tile.json

index.mddocs/

Ant Design Mobile

Ant Design Mobile (antd-mobile) is a comprehensive React UI library providing essential mobile-first components for building mobile web applications. It offers 80+ carefully crafted components with smooth gestures, delicate animations, and extensive customization through CSS variables.

Package Information

  • Package Name: antd-mobile
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install antd-mobile

Core Imports

import { Button, Toast, Modal, Dialog } from "antd-mobile";

For CommonJS:

const { Button, Toast, Modal, Dialog } = require("antd-mobile");

Basic Usage

import { Button, Toast, List, Input } from "antd-mobile";

function App() {
  const handleClick = () => {
    Toast.show("Hello World!");
  };

  return (
    <div>
      <List header="Form Example">
        <List.Item>
          <Input placeholder="Enter your name" />
        </List.Item>
        <List.Item>
          <Button color="primary" block onClick={handleClick}>
            Submit
          </Button>
        </List.Item>
      </List>
    </div>
  );
}

Architecture

Ant Design Mobile is built around several key architectural patterns:

  • Component System: 80+ React components covering all common mobile UI patterns
  • Type Safety: Full TypeScript support with comprehensive type definitions
  • CSS Variables: Extensive theming through CSS custom properties
  • Imperative APIs: Programmatic control for Modal, Dialog, Toast components
  • Mobile Optimization: Touch gestures, animations, and mobile-specific interactions
  • Configuration System: Global configuration through ConfigProvider
  • Ref Forwarding: Access to underlying DOM elements via React refs

Capabilities

Form Components

Essential form controls including inputs, buttons, pickers, and validation components for mobile forms.

// Core form components
function Button(props: ButtonProps): JSX.Element;
function Input(props: InputProps): JSX.Element;
function Checkbox(props: CheckboxProps): JSX.Element;
function Switch(props: SwitchProps): JSX.Element;

interface ButtonProps {
  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
  fill?: 'solid' | 'outline' | 'none';
  size?: 'mini' | 'small' | 'middle' | 'large';
  block?: boolean;
  loading?: boolean | 'auto';
  disabled?: boolean;
  onClick?: (event: React.MouseEvent) => void | Promise<void>;
  children?: React.ReactNode;
}

interface InputProps {
  type?: 'text' | 'password' | 'number' | 'search';
  placeholder?: string;
  value?: string;
  defaultValue?: string;
  maxLength?: number;
  disabled?: boolean;
  clearable?: boolean;
  onChange?: (val: string) => void;
}

Form Components

Display Components

Components for presenting content including cards, lists, badges, and media display.

// Core display components
function Card(props: CardProps): JSX.Element;
function List(props: ListProps): JSX.Element;
function Avatar(props: AvatarProps): JSX.Element;
function Badge(props: BadgeProps): JSX.Element;

interface CardProps {
  title?: React.ReactNode;
  extra?: React.ReactNode;
  headerStyle?: React.CSSProperties;
  bodyStyle?: React.CSSProperties;
  children?: React.ReactNode;
}

interface ListProps {
  header?: React.ReactNode;
  mode?: 'default' | 'card';
  children?: React.ReactNode;
}

Display Components

Navigation Components

Navigation patterns including tabs, navigation bars, and sidebar components.

// Core navigation components
function NavBar(props: NavBarProps): JSX.Element;
function Dropdown(props: DropdownProps): JSX.Element;
function TabBar(props: TabBarProps): JSX.Element;
function Tabs(props: TabsProps): JSX.Element;
function SideBar(props: SideBarProps): JSX.Element;

interface NavBarProps {
  back?: React.ReactNode;
  backIcon?: boolean | React.ReactNode;
  left?: React.ReactNode;
  right?: React.ReactNode;
  onBack?: () => void;
  children?: React.ReactNode;
}

interface TabBarProps {
  activeKey?: string;
  defaultActiveKey?: string;
  onChange?: (key: string) => void;
  children?: React.ReactNode;
}

Navigation Components

Feedback Components

User feedback components including modals, toasts, loading indicators, and progress displays.

// Core feedback components
function ActionSheet(props: ActionSheetProps): JSX.Element;
function Popover(props: PopoverProps): JSX.Element;
function Toast(props: ToastProps): JSX.Element;
function Modal(props: ModalProps): JSX.Element;
function Dialog(props: DialogProps): JSX.Element;
function Loading(props: LoadingProps): JSX.Element;

// Toast imperative API
namespace Toast {
  function show(content: string | ToastShowProps): ToastHandler;
  function clear(): void;
}

interface ToastShowProps {
  content: React.ReactNode;
  duration?: number;
  position?: 'top' | 'bottom' | 'center';
  mask?: boolean;
  maskClickable?: boolean;
}

interface ToastHandler {
  close(): void;
}

Feedback Components

Picker Components

Date, time, and option selection components with customizable options and cascading support.

// Core picker components
function DatePicker(props: DatePickerProps): JSX.Element;
function Picker(props: PickerProps): JSX.Element;
function Calendar(props: CalendarProps): JSX.Element;
function CascadePicker(props: CascadePickerProps): JSX.Element;

interface DatePickerProps {
  value?: Date;
  defaultValue?: Date;
  min?: Date;
  max?: Date;
  precision?: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
  onChange?: (val: Date | null) => void;
  children?: React.ReactNode;
}

interface PickerProps<T = any> {
  columns: PickerColumn<T>[];
  value?: T[];
  defaultValue?: T[];
  onChange?: (val: T[], extend: PickerValueExtend) => void;
  children?: React.ReactNode;
}

Picker Components

Gesture Components

Touch gesture and interaction components including swipe, pull-to-refresh, and floating elements.

// Core gesture components
function SwipeAction(props: SwipeActionProps): JSX.Element;
function PullToRefresh(props: PullToRefreshProps): JSX.Element;
function Swiper(props: SwiperProps): JSX.Element;
function FloatingBubble(props: FloatingBubbleProps): JSX.Element;

interface SwipeActionProps {
  rightActions?: SwipeActionAction[];
  leftActions?: SwipeActionAction[];
  onActionsReveal?: (side: 'left' | 'right', actions: SwipeActionAction[]) => void;
  children: React.ReactElement;
}

interface PullToRefreshProps {
  onRefresh: () => Promise<any>;
  pullingText?: React.ReactNode;
  canReleaseText?: React.ReactNode;
  refreshingText?: React.ReactNode;
  completeText?: React.ReactNode;
  disabled?: boolean;
  children: React.ReactNode;
}

Gesture Components

Layout Components

Layout and spacing components for organizing content and managing screen real estate.

// Core layout components
function Grid(props: GridProps): JSX.Element;
function Space(props: SpaceProps): JSX.Element;
function SafeArea(props: SafeAreaProps): JSX.Element;
function AutoCenter(props: AutoCenterProps): JSX.Element;

interface GridProps {
  columns: number;
  gap?: number | string | [number | string, number | string];
  children?: React.ReactNode;
}

interface SpaceProps {
  direction?: 'horizontal' | 'vertical';
  align?: 'start' | 'end' | 'center' | 'baseline';
  justify?: 'start' | 'end' | 'center' | 'around' | 'between' | 'evenly';
  wrap?: boolean;
  block?: boolean;
  gap?: 'small' | 'middle' | 'large' | number | string;
  children?: React.ReactNode;
}

Layout Components

Configuration & Theming

Global configuration and theming system for customizing appearance and behavior.

// Configuration components and utilities
function ConfigProvider(props: ConfigProviderProps): JSX.Element;
function useConfig(): ConfigProviderProps;
function setDefaultConfig(config: Config): void;

interface ConfigProviderProps {
  locale?: Locale;
  theme?: 'light' | 'dark';
  children?: React.ReactNode;
}

// Motion control utilities
function reduceMotion(): void;
function restoreMotion(): void;

Configuration & Theming

Core Types

// Common prop patterns
interface NativeProps<S extends string = never> {
  className?: string;
  style?: React.CSSProperties & Partial<Record<S, string>>;
  tabIndex?: number;
}

// Ref types for imperative control
interface ButtonRef {
  nativeElement: HTMLButtonElement | null;
}

interface InputRef {
  nativeElement: HTMLInputElement | null;
  clear(): void;
  focus(): void;
  blur(): void;
}

// Event handlers
type ClickHandler = (event: React.MouseEvent) => void | Promise<void>;
type ChangeHandler<T> = (value: T) => void;