DOCSEARCHbyAlgolia
Submit Docs

Ant Design Mini

repository·master·Indexed 20 days ago

https://github.com/ant-design/ant-design-mini

A mobile-focused UI component library following Ant Design specifications, specifically designed for mini-program environments including Alipay, WeChat, and uni-app. It provides a rich set of customizable components such as Actions, Bubble, and Conversations, supporting multiple theme styles and internationalization.

Tokens
217.2K
Snippets
612
Records
832
Agent score
67%

What's inside antd-mini

  1. Overview of Ant Design Mini

    master

    Ant Design Mini is a UI component library designed for mobile mini programs. It follows the Ant Design design specifications and provides a comprehensive ecosystem for rapid application development.

    Key Features

    • Rich Component Library: A wide range of practical components with flexible customization and expansion.
    • Customizable Themes & Internationalization: Supports multiple theme styles and seamless switching of component text across multiple languages.
    • Multi-Platform Support:
      • Alipay Mini Programs: Native support.
      • WeChat Mini Programs: Supported via adaptation.
      • uni-app: Supported via adaptation.

  3. Introduce the Prompts component

    master

    The Prompts component is designed for AI products to help first-time users quickly understand the capabilities and intended scope of the AI. It provides a list of suggested prompts or actions to lower the learning curve and facilitate immediate engagement.

    "usingComponents": {
#if ALIPAY
  "ant-prompts": "antd-mini/es/Prompts/index"
#endif
#if WECHAT
  "ant-prompts": "antd-mini/Prompts/index"
#endif
}

  7. Introduce the Picker component

    master

    The Picker component displays a scrollable list of one or more sets of options. It provides a consistent user experience across both iOS and Android platforms.

    Note: If you have fewer than 5 options, it is recommended to use a Radio component instead of a Picker for better UX.

  8. Use the Typography component

    master

    The Typography component is used for displaying text segments. It supports text ellipsis (truncation), cross-platform bolding compatibility (iOS/Android), and can be used as an actionable button with an icon.

    Key Features:

    • Ellipsis: Use ellipsisRow to handle multi-line truncation.
    • Icons: Supports both IconType and direct image URLs.
    • Interactivity: Supports click events and a specific onDisabledTap event to listen for clicks when the component is in a disabled state.

  9. Use conditional compilation for Alipay and WeChat

    master

    Ant Design Mini allows you to write code using Alipay axml syntax that can be compiled into both Alipay and WeChat versions. You can use specific comment patterns to handle conditional compilation for different platforms.

    Syntax Pattern: Use <!-- #comments if ALIPAY --> and <!-- #comments endif --> to wrap code that should only appear in the Alipay version. Code outside these comments will be processed for both platforms (e.g., converting Alipay-specific attributes like a:if to WeChat-specific attributes like wx:if).

    <view>
  <!-- #comments if ALIPAY -->
  <text a:if="{{a}}">a</text>
  <text a:if="{{a && b}}">a & b</text>
  <!-- #comments endif -->
  <text a:if="{{a}}">a</text>
  <text a:else>!a</text>
  <text class="{{a ? '1' : '2'}}"></text>
  <text class="1 {{a ? '1' + '2' : '2'}} 2"></text>
</view>

  10. Customize Calendar cell content with onFormatter

    master

    The onFormatter prop allows you to inject custom data into each calendar cell, such as custom labels, CSS classes, or disabling specific dates.

    Signature: (cell: CellState, currentValue: CalendarValue) => CellState

    Example: Disabling dates before today

    Alipay (pass method name as string):

    <ant-calendar onFormatter="handleFormat" />

    WeChat (pass method via data):

    <ant-calendar onFormatter="{{handleFormat}}" />

    Logic (TS):

    import dayjs from 'dayjs';

Page({
  handleFormat(cell: CellState) {
    return {
      disabled: dayjs(cell.time).isBefore(dayjs().startOf('date'))
    };
  }
});
    import dayjs from 'dayjs';
function demoFormatter(cell: CellState, value: CalendarValue) {
  // Example: Disable dates more than 3 days away from the current selection
  if (Array.isArray(value) && value.length == 1) {
    const current = value[0];
    return {
      disabled: dayjs(cell.time).diff(dayjs(current), 'days') > 3,
      bottom: {
        label: dayjs(cell.time).diff(dayjs(current), 'days') > 3 ? '不可选' : undefined,
      },
    };
  }
  return {};
}

  12. How the Form component works

    master

    The Form component in ant-design-mini is a container used to collect information, manage data entry, and perform validation.

    Key Concepts:

    • Data Collection: The Form tracks values based on the name property provided to its child input components.
    • Registration: Unlike standard web forms, you must manually register each input component's reference with the Form instance (using addItem on Alipay or a ref list on WeChat) so the Form can intercept its value changes and validation states.
    • Validation: The Form provides built-in support for rules, asynchronous loading of initial values, and custom validation logic.
    • Platform Differences: The registration mechanism and import paths vary between Alipay and WeChat platforms. Always check the platform-specific implementation for handleRef.