Ant Design Mobile

Ant Design Mobile provides essential UI blocks optimized for building mobile web applications. Key characteristics include:

• Fast: Optimized for performance and minimal package size without requiring manual configuration.
• Customizable: Uses CSS variables for efficient theme adjustments and component appearance customization.
• Atomic: Components are designed with specific, focused functionality.
• Fluent: Features smooth gestures and delicate animations for a high-quality user experience.

The CalendarPickerView is an experimental component used as the content area for the CalendarPicker. It allows users to select either a single date or a range of dates.

Note: This component is currently marked as <Experimental>.

import { CalendarPickerView } from 'antd-mobile';

The Card component is a universal container used to group related content such as text, lists, pictures, or paragraphs. It provides a structured layout with an optional header (containing a title, icon, and extra area) and a body area.

import { Card } from 'antd-mobile'

// Basic usage
<Card title='Card Title'>
  Card content goes here.
</Card>

The Ellipsis component is used to hide content and replace it with "..." when the display space is insufficient. It is useful when text length or height exceeds the container width/height, in charts with limited space, or during responsive resizing.

// Example usage (based on demo1.tsx structure)
<Ellipsis content="Your long text here..." />

The Form component provides high-performance form controls with built-in data field management, including data entry, verification, and corresponding styles. It is suitable for creating entities or collecting information where input data types need to be checked.

import { Form, Input } from 'antd-mobile';

const MyForm = () => (
  <Form
    onFinish={(values) => console.log(values)}
    onFinishFailed={(errorInfo) => console.log(errorInfo)}
  >
    <Form.Item name='username' label='Username' rules={[{ required: true }]}>
      <Input />
    </Form.Item>
  </Form>
);

The Slider component is a sliding input used to select values within a continuous or discrete range. It can be used for single values or as a range selector (dual handles).

Use Slider when a user needs to select a value within a specific numerical interval or a custom range.

// Example usage (conceptual based on documentation)
<Slider 
  min={0} 
  max={100} 
  defaultValue={50} 
  onChange={(value) => console.log(value)} 
/>

The SwipeAction component is a functional extension for lists that allows users to swipe an item to reveal hidden action menus (on the left or right side). It is ideal for list-based interfaces where secondary actions (like delete, edit, or archive) should be accessible via a gesture rather than cluttering the main UI.

// Example usage pattern
<SwipeAction
  leftActions={[
    { key: 'delete', text: 'Delete', color: 'danger', onClick: () => console.log('delete') }
  ]}
  onAction={(action) => console.log(action.key)}
>
  {/* Your list item content here */}
</SwipeAction>

The Checkbox component allows users to make multiple selections from a set of options. It can be used as a standalone component to mark a state or as part of a Checkbox.Group for managing multiple related values.

When to use Checkbox vs Switch:

• Use Checkbox for state marking that typically requires a submit operation to finalize.
• Use Switch when the action should directly trigger an immediate state change.

import { Checkbox } from 'antd-mobile'

<Checkbox checked={checked} onChange={setChecked}>Label</Checkbox>