antd-mobile

antd-mobile

Version 5.39.0
Published 1 month ago
15.2 MB
20 dependencies
MIT license

Install

npm i antd-mobile

yarn add antd-mobile

pnpm add antd-mobile

Overview

Index

Variables

variable ActionSheet

const ActionSheet: any;

variable AutoCenter

const AutoCenter: FC<any>;

variable Avatar

const Avatar: FC<any>;

variable Badge

const Badge: any;

variable Button

const Button: React.ForwardRefExoticComponent<any>;

variable Calendar

const Calendar: React.ForwardRefExoticComponent<any>;

variable CalendarPicker

const CalendarPicker: React.ForwardRefExoticComponent<any>;

variable CalendarPickerView

const CalendarPickerView: React.ForwardRefExoticComponent<any>;

variable CapsuleTabs

const CapsuleTabs: any;

variable Card

const Card: FC<any>;

variable CascadePicker

const CascadePicker: any;

variable CascadePickerView

const CascadePickerView: FC<CascadePickerViewProps>;

variable Cascader

const Cascader: any;

variable CascaderView

const CascaderView: any;

variable CenterPopup

const CenterPopup: FC<any>;

variable Checkbox

const Checkbox: any;

variable CheckList

const CheckList: any;

variable Collapse

const Collapse: any;

variable ConfigProvider

const ConfigProvider: FC<ConfigProviderProps>;

variable DatePicker

const DatePicker: any;

variable DatePickerView

const DatePickerView: FC<any>;

variable Dialog

const Dialog: any;

variable Divider

const Divider: FC<any>;

variable DotLoading

const DotLoading: React.NamedExoticComponent<any>;

const Dropdown: any;

variable Ellipsis

const Ellipsis: FC<any>;

variable Empty

const Empty: FC<any>;

Deprecated
Empty has been deprecated and will be removed in the next major version.

variable ErrorBlock

const ErrorBlock: any;

variable FloatingBubble

const FloatingBubble: FC<any>;

variable FloatingPanel

const FloatingPanel: React.ForwardRefExoticComponent<any>;

const Footer: FC<any>;

variable Form

const Form: any;

variable Grid

const Grid: any;

variable Image

const Image: React.FC<any>;

variable ImageUploader

const ImageUploader: React.ForwardRefExoticComponent<any>;

variable ImageViewer

const ImageViewer: any;

variable IndexBar

const IndexBar: any;

variable InfiniteScroll

const InfiniteScroll: FC<any>;

variable Input

const Input: React.ForwardRefExoticComponent<any>;

variable JumboTabs

const JumboTabs: any;

variable List

const List: any;

variable Loading

const Loading: React.NamedExoticComponent<any>;

variable Mask

const Mask: FC<any>;

const Modal: any;

const NavBar: FC<any>;

variable NoticeBar

const NoticeBar: React.NamedExoticComponent<any>;

variable NumberKeyboard

const NumberKeyboard: FC<any>;

variable PageIndicator

const PageIndicator: React.NamedExoticComponent<any>;

variable PasscodeInput

const PasscodeInput: React.ForwardRefExoticComponent<any>;

variable Picker

const Picker: any;

variable PickerView

const PickerView: React.NamedExoticComponent<any>;

const Popover: any;

const Popup: FC<any>;

variable ProgressBar

const ProgressBar: FC<any>;

variable ProgressCircle

const ProgressCircle: FC<any>;

variable PullToRefresh

const PullToRefresh: FC<PullToRefreshProps>;

variable Radio

const Radio: any;

variable Rate

const Rate: FC<any>;

variable Result

const Result: FC<any>;

variable ResultPage

const ResultPage: any;

variable SafeArea

const SafeArea: FC<any>;

variable ScrollMask

const ScrollMask: FC<ScrollMaskProps>;

variable SearchBar

const SearchBar: React.ForwardRefExoticComponent<any>;

variable Segmented

const Segmented: React.ForwardRefExoticComponent<any>;

const SideBar: any;

variable Skeleton

const Skeleton: any;

variable Slider

const Slider: FC<any>;

variable Space

const Space: FC<any>;

variable SpinLoading

const SpinLoading: React.NamedExoticComponent<any>;

variable Stepper

const Stepper: React.ForwardRefExoticComponent<any>;

variable Steps

const Steps: any;

variable SwipeAction

const SwipeAction: React.ForwardRefExoticComponent<any>;

variable Swiper

const Swiper: any;

variable Switch

const Switch: FC<any>;

variable TabBar

const TabBar: any;

variable Tabs

const Tabs: any;

variable Tag

const Tag: FC<any>;

variable TextArea

const TextArea: React.ForwardRefExoticComponent<any>;

variable Toast

const Toast: { show: typeof show; clear: typeof clear; config: typeof config };

variable TreeSelect

const TreeSelect: any;

variable VirtualInput

const VirtualInput: React.ForwardRefExoticComponent<any>;

variable WaterMark

const WaterMark: FC<any>;

Functions

function createErrorBlock

createErrorBlock: (imageRecord: ImageRecord) => React.FC<any>;

function reduceMotion

reduceMotion: () => void;

function restoreMotion

restoreMotion: () => void;

function Selector

Selector: <V extends SelectorValue>(p: any) => React.ReactElement<any, any>;

function setDefaultConfig

setDefaultConfig: (config: Config) => void;

function useConfig

useConfig: () => Config;

Interfaces

interface CheckboxGroupProps

interface CheckboxGroupProps {}

property children

children?: ReactNode;

property defaultValue

defaultValue?: CheckboxValue[];

property disabled

disabled?: boolean;

property onChange

onChange?: (val: CheckboxValue[]) => void;

property value

value?: CheckboxValue[];

interface ImageUploaderRef

interface ImageUploaderRef {}

property nativeElement

nativeElement: HTMLInputElement | null;

interface ImageUploadItem

interface ImageUploadItem {}

property extra

extra?: any;

property key

key?: string | number;

property thumbnailUrl

thumbnailUrl?: string;

property url

url: string;

interface RadioGroupProps

interface RadioGroupProps {}

property children

children?: ReactNode;

property defaultValue

defaultValue?: RadioValue | null;

property disabled

disabled?: boolean;

property onChange

onChange?: (val: RadioValue) => void;

property value

value?: RadioValue | null;

Type Aliases

type ActionSheetProps

type ActionSheetProps = {
    visible?: boolean;
    actions: Action[];
    extra?: ReactNode;
    cancelText?: ReactNode;
    onAction?: (action: Action, index: number) => void;
    onClose?: () => void;
    onMaskClick?: () => void;
    closeOnAction?: boolean;
    closeOnMaskClick?: boolean;
    safeArea?: boolean;
    popupClassName?: string;
    /** @deprecated use `styles` instead */
    popupStyle?: CSSProperties;
    styles?: Partial<Record<'body' | 'mask', CSSProperties>>;
} & Pick<
    PopupProps,
    'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'
> &
    NativeProps;

type AutoCenterProps

type AutoCenterProps = {
    children?: ReactNode;
} & NativeProps;

type AvatarProps

type AvatarProps = {
    src: string;
    fallback?: ReactNode;
    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
} & Pick<ImageProps, 'alt' | 'lazy' | 'onClick' | 'onError' | 'onLoad'> &
    NativeProps<'--size' | '--border-radius'>;

type BadgeProps

type BadgeProps = {
    content?: ReactNode | typeof dot;
    color?: string;
    bordered?: boolean;
    children?: ReactNode;
    wrapperClassName?: string;
    wrapperStyle?: CSSProperties;
} & NativeProps<'--right' | '--top' | '--color'>;

type ButtonProps

type ButtonProps = {
    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
    fill?: 'solid' | 'outline' | 'none';
    size?: 'mini' | 'small' | 'middle' | 'large';
    block?: boolean;
    loading?: boolean | 'auto';
    loadingText?: string;
    loadingIcon?: ReactNode;
    disabled?: boolean;
    onClick?: (
        event: React.MouseEvent<HTMLButtonElement, MouseEvent>
    ) => void | Promise<void>;
    type?: 'submit' | 'reset' | 'button';
    shape?: 'default' | 'rounded' | 'rectangular';
    children?: ReactNode;
} & Pick<
    NativeButtonProps,
    'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd' | 'id'
> &
    NativeProps<
        | '--text-color'
        | '--background-color'
        | '--border-radius'
        | '--border-width'
        | '--border-style'
        | '--border-color'
    >;

type ButtonRef

type ButtonRef = {
    nativeElement: HTMLButtonElement | null;
};

type CalendarPickerProps

type CalendarPickerProps = CalendarPickerViewProps & {
    visible?: boolean;
    confirmText?: string;
    popupClassName?: string;
    popupStyle?: React.CSSProperties;
    popupBodyStyle?: React.CSSProperties;
    forceRender?: true;
    closeOnMaskClick?: boolean;
    onClose?: () => void;
    onMaskClick?: () => void;
    getContainer?: GetContainer;
} & (
        | {
              selectionMode?: undefined;
              onConfirm?: undefined;
          }
        | {
              selectionMode: 'single';
              onConfirm?: (val: Date | null) => void;
          }
        | {
              selectionMode: 'range';
              onConfirm?: (val: [Date, Date] | null) => void;
          }
    );

type CalendarPickerRef

type CalendarPickerRef = CalendarPickerViewRef;

type CalendarPickerViewProps

type CalendarPickerViewProps = {
    title?: React.ReactNode | false;
    confirmText?: string;
    weekStartsOn?: 'Monday' | 'Sunday';
    renderTop?: CalendarPickerViewColumRender | false;
    renderDate?: CalendarPickerViewColumRender;
    renderBottom?: CalendarPickerViewColumRender | false;
    allowClear?: boolean;
    max?: Date;
    min?: Date;
    shouldDisableDate?: (date: Date) => boolean;
} & (
    | {
          selectionMode?: undefined;
          value?: undefined;
          defaultValue?: undefined;
          onChange?: undefined;
      }
    | {
          selectionMode: 'single';
          value?: Date | null;
          defaultValue?: Date | null;
          onChange?: (val: Date | null) => void;
      }
    | {
          selectionMode: 'range';
          value?: [Date, Date] | null;
          defaultValue?: [Date, Date] | null;
          onChange?: (val: [Date, Date] | null) => void;
      }
) &
    NativeProps;

type CalendarPickerViewRef

type CalendarPickerViewRef = {
    jumpTo: (page: Page | ((page: Page) => Page)) => void;
    jumpToToday: () => void;
    getDateRange: () => DateRange;
};

type CalendarProps

type CalendarProps = {
    prevMonthButton?: React.ReactNode;
    prevYearButton?: React.ReactNode;
    nextMonthButton?: React.ReactNode;
    nextYearButton?: React.ReactNode;
    onPageChange?: (year: number, month: number) => void;
    weekStartsOn?: 'Monday' | 'Sunday';
    renderLabel?: (date: Date) => React.ReactNode;
    renderDate?: (date: Date) => React.ReactNode;
    allowClear?: boolean;
    max?: Date;
    min?: Date;
    shouldDisableDate?: (date: Date) => boolean;
    minPage?: Page;
    maxPage?: Page;
} & (
    | {
          selectionMode?: undefined;
          value?: undefined;
          defaultValue?: undefined;
          onChange?: undefined;
      }
    | {
          selectionMode: 'single';
          value?: Date | null;
          defaultValue?: Date | null;
          onChange?: (val: Date | null) => void;
      }
    | {
          selectionMode: 'range';
          value?: [Date, Date] | null;
          defaultValue?: [Date, Date] | null;
          onChange?: (val: [Date, Date] | null) => void;
      }
) &
    NativeProps;

type CalendarRef

type CalendarRef = {
    jumpTo: (page: Page | ((page: Page) => Page)) => void;
    jumpToToday: () => void;
};

type CapsuleTabProps

type CapsuleTabProps = {
    title: ReactNode;
    disabled?: boolean;
    forceRender?: boolean;
    destroyOnClose?: boolean;
    children?: ReactNode;
} & NativeProps;

type CapsuleTabsProps

type CapsuleTabsProps = {
    activeKey?: string | null;
    defaultActiveKey?: string | null;
    onChange?: (key: string) => void;
    children?: ReactNode;
} & NativeProps;

type CardProps

type CardProps = {
    title?: ReactNode;
    icon?: ReactNode;
    extra?: ReactNode;
    headerStyle?: CSSProperties;
    headerClassName?: string;
    bodyStyle?: CSSProperties;
    bodyClassName?: string;
    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    onBodyClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    onHeaderClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    children?: ReactNode;
} & NativeProps;

type CascadePickerOption

type CascadePickerOption = {
    label: string;
    value: string;
    children?: CascadePickerOption[];
};

type CascadePickerProps

type CascadePickerProps = Omit<PickerProps, 'columns'> & {
    options: CascadePickerOption[];
};

type CascadePickerRef

type CascadePickerRef = PickerRef;

type CascadePickerViewProps

type CascadePickerViewProps = Omit<PickerViewProps, 'columns'> & {
    options: CascadePickerOption[];
};

type CascaderOption

type CascaderOption = {
    label?: string;
    value?: string;
    disabled?: boolean;
    children?: CascaderOption[];
} & BaseOptionType;

type CascaderProps

type CascaderProps = {
    options: CascaderOption[];
    value?: CascaderValue[];
    defaultValue?: CascaderValue[];
    placeholder?: string;
    onSelect?: (value: CascaderValue[], extend: CascaderValueExtend) => void;
    onConfirm?: (value: CascaderValue[], extend: CascaderValueExtend) => void;
    onCancel?: () => void;
    onClose?: () => void;
    visible?: boolean;
    title?: ReactNode;
    confirmText?: ReactNode;
    cancelText?: ReactNode;
    loading?: boolean;
    children?: (
        items: (CascaderOption | null)[],
        actions: CascaderActions
    ) => ReactNode;
    onTabsChange?: (index: number) => void;
    activeIcon?: ReactNode;
    fieldNames?: FieldNamesType;
} & Pick<
    PopupProps,
    | 'getContainer'
    | 'afterShow'
    | 'afterClose'
    | 'onClick'
    | 'stopPropagation'
    | 'destroyOnClose'
    | 'forceRender'
> &
    NativeProps;

type CascaderRef

type CascaderRef = CascaderActions;

type CascaderViewProps

type CascaderViewProps = {
    options: CascaderOption[];
    value?: CascaderValue[];
    defaultValue?: CascaderValue[];
    onChange?: (value: CascaderValue[], extend: CascaderValueExtend) => void;
    placeholder?: string | ((index: number) => string);
    onTabsChange?: (index: number) => void;
    activeIcon?: ReactNode;
    loading?: boolean;
    fieldNames?: FieldNamesType;
} & NativeProps<'--height'>;

type CenterPopupProps

type CenterPopupProps = PopupBaseProps &
    PropsWithChildren<{
        role?: string;
    }> &
    NativeProps<
        | '--background-color'
        | '--border-radius'
        | '--max-width'
        | '--min-width'
        | '--z-index'
    >;

type CheckboxProps

type CheckboxProps = {
    checked?: boolean;
    defaultChecked?: boolean;
    disabled?: boolean;
    onChange?: (checked: boolean) => void;
    value?: CheckboxValue;
    indeterminate?: boolean;
    block?: boolean;
    id?: string;
    icon?: (checked: boolean, indeterminate: boolean) => ReactNode;
    children?: ReactNode;
    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;

type CheckboxRef

type CheckboxRef = {
    check: () => void;
    uncheck: () => void;
    toggle: () => void;
};

type CheckListItemProps

type CheckListItemProps = Pick<
    ListItemProps,
    | 'title'
    | 'children'
    | 'description'
    | 'prefix'
    | 'disabled'
    | 'onClick'
    | 'style'
> & {
    value: CheckListValue;
    readOnly?: boolean;
} & NativeProps;

type CheckListProps

type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
    defaultValue?: CheckListValue[];
    value?: CheckListValue[];
    onChange?: (val: CheckListValue[]) => void;
    multiple?: boolean;
    activeIcon?: ReactNode;
    extra?: (active: boolean) => ReactNode;
    disabled?: boolean;
    readOnly?: boolean;
    children?: ReactNode;
} & NativeProps;

type CollapsePanelProps

type CollapsePanelProps = {
    key: string;
    title: ReactNode;
    disabled?: boolean;
    forceRender?: boolean;
    destroyOnClose?: boolean;
    onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
    arrowIcon?: ReactNode | ((active: boolean) => ReactNode);
    children?: ReactNode;
    /**
     * @deprecated use `arrowIcon` instead
     */
    arrow?: ReactNode | ((active: boolean) => ReactNode);
} & NativeProps;

type CollapseProps

type CollapseProps = (
    | ({
          accordion?: false;
      } & ValueProps<string[]>)
    | ({
          accordion: true;
      } & ValueProps<string | null>)
) & {
    children?: ReactNode;
} & NativeProps;

type ConfigProviderProps

type ConfigProviderProps = Partial<Config> & {
    children?: ReactNode;
};

type DatePickerProps

type DatePickerProps = Pick<
    PickerProps,
    | 'onCancel'
    | 'onClose'
    | 'closeOnMaskClick'
    | 'visible'
    | 'confirmText'
    | 'cancelText'
    | 'getContainer'
    | 'loading'
    | 'loadingContent'
    | 'afterShow'
    | 'afterClose'
    | 'onClick'
    | 'title'
    | 'stopPropagation'
    | 'style'
    | 'mouseWheel'
    | 'forceRender'
    | 'destroyOnClose'
> & {
    value?: PickerDate | null;
    defaultValue?: PickerDate | null;
    onSelect?: (value: PickerDate) => void;
    onConfirm?: (value: PickerDate) => void;
    min?: PickerDate;
    max?: PickerDate;
    precision?: Precision;
    children?: (value: PickerDate | null, actions: PickerActions) => ReactNode;
    renderLabel?: RenderLabel;
    filter?: DatePickerFilter;
    tillNow?: boolean;
} & NativeProps;

type DatePickerRef

type DatePickerRef = PickerRef;

type DatePickerViewProps

type DatePickerViewProps = Pick<
    PickerViewProps,
    'style' | 'mouseWheel' | 'loading' | 'loadingContent'
> & {
    value?: PickerDate;
    defaultValue?: PickerDate;
    onChange?: (value: PickerDate) => void;
    min?: PickerDate;
    max?: PickerDate;
    precision?: Precision;
    renderLabel?: RenderLabel;
    filter?: DatePickerFilter;
    tillNow?: boolean;
} & NativeProps;

type DialogAlertProps

type DialogAlertProps = Omit<
    DialogProps,
    'visible' | 'closeOnAction' | 'actions'
> & {
    confirmText?: ReactNode;
    onConfirm?: () => void | Promise<void>;
};

type DialogConfirmProps

type DialogConfirmProps = Omit<
    DialogProps,
    'visible' | 'closeOnAction' | 'actions'
> & {
    confirmText?: ReactNode;
    cancelText?: ReactNode;
    onConfirm?: () => void | Promise<void>;
    onCancel?: () => void | Promise<void>;
};

type DialogProps

type DialogProps = Pick<
    CenterPopupProps,
    | 'afterClose'
    | 'afterShow'
    | 'bodyClassName'
    | 'bodyStyle'
    | 'destroyOnClose'
    | 'disableBodyScroll'
    | 'forceRender'
    | 'getContainer'
    | 'maskClassName'
    | 'maskStyle'
    | 'stopPropagation'
    | 'visible'
> & {
    image?: string;
    header?: ReactNode;
    title?: ReactNode;
    content?: ReactNode;
    actions?: (Action | Action[])[];
    onAction?: (action: Action, index: number) => void | Promise<void>;
    onClose?: () => void;
    closeOnAction?: boolean;
    closeOnMaskClick?: boolean;
} & NativeProps;

type DialogShowProps

type DialogShowProps = Omit<
    DialogProps,
    'visible' | 'destroyOnClose' | 'forceRender'
>;

type DividerProps

type DividerProps = {
    contentPosition?: 'left' | 'right' | 'center';
    direction?: 'horizontal' | 'vertical';
    children?: ReactNode;
} & NativeProps;

type DotLoadingProps

type DotLoadingProps = {
    color?: 'default' | 'primary' | 'white' | (string & {});
} & NativeProps;

type DropdownItemProps

type DropdownItemProps = {
    key: string;
    title: ReactNode;
    active?: boolean;
    highlight?: boolean;
    forceRender?: boolean;
    destroyOnClose?: boolean;
    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    arrowIcon?: ReactNode;
    /**
     * @deprecated use `arrowIcon` instead
     */
    arrow?: ReactNode;
    children?: ReactNode;
} & NativeProps;

type DropdownProps

type DropdownProps = {
    activeKey?: string | null;
    defaultActiveKey?: string | null;
    closeOnMaskClick?: boolean;
    closeOnClickAway?: boolean;
    onChange?: (key: string | null) => void;
    arrowIcon?: ReactNode;
    /**
     * @deprecated use `arrowIcon` instead
     */
    arrow?: ReactNode;
    getContainer?: PopupProps['getContainer'];
} & NativeProps;

type DropdownRef

type DropdownRef = {
    close: () => void;
};

type EllipsisProps

type EllipsisProps = {
    content: string;
    direction?: 'start' | 'end' | 'middle';
    rows?: number;
    expandText?: ReactNode;
    collapseText?: ReactNode;
    stopPropagationForActionButtons?: PropagationEvent[];
    onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    defaultExpanded?: boolean;
} & NativeProps;

type EmptyProps

type EmptyProps = {
    image?: ReactNode;
    imageStyle?: CSSProperties;
    description?: ReactNode;
} & NativeProps;

type ErrorBlockProps

type ErrorBlockProps = {
    status?: ErrorBlockStatus;
    title?: ReactNode;
    image?: string | ReactElement;
    description?: ReactNode;
    fullPage?: boolean;
    children?: ReactNode;
} & NativeProps<
    | '--image-height'
    | '--image-height-full-page'
    | '--image-width'
    | '--image-width-full-page'
>;

type ErrorBlockStatus

type ErrorBlockStatus = 'default' | 'disconnected' | 'empty' | 'busy';

type FloatingBubbleProps

type FloatingBubbleProps = {
    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    axis?: 'x' | 'y' | 'xy' | 'lock';
    magnetic?: 'x' | 'y';
    children?: ReactNode;
    offset?: Offset;
    defaultOffset?: Offset;
    onOffsetChange?: (offset: Offset) => void;
} & NativeProps<
    | '--initial-position-left'
    | '--initial-position-right'
    | '--initial-position-top'
    | '--initial-position-bottom'
    | '--z-index'
    | '--edge-distance'
    | '--size'
    | '--border-radius'
    | '--background'
>;

type FloatingPanelProps

type FloatingPanelProps = {
    anchors: number[];
    children: ReactNode;
    onHeightChange?: (height: number, animating: boolean) => void;
    handleDraggingOfContent?: boolean;
    placement?: 'bottom' | 'top';
} & NativeProps<'--border-radius' | '--z-index' | '--header-height'>;

type FloatingPanelRef

type FloatingPanelRef = {
    setHeight: (
        height: number,
        options?: {
            immediate?: boolean;
        }
    ) => void;
};

type FooterProps

type FooterProps = {
    label?: ReactNode;
    links?: LinkItem[];
    content?: ReactNode;
    chips?: ChipItem[];
    onChipClick?: (item: ChipItem, index: number) => void;
    onLinkClick?: (item: LinkItem, index: number) => void;
} & NativeProps<'--background-color'>;

type FormItemProps

type FormItemProps = Pick<
    RcFieldProps,
    | 'dependencies'
    | 'valuePropName'
    | 'name'
    | 'rules'
    | 'messageVariables'
    | 'trigger'
    | 'validateTrigger'
    | 'shouldUpdate'
    | 'initialValue'
    | 'getValueFromEvent'
    | 'getValueProps'
    | 'normalize'
    | 'preserve'
    | 'validateFirst'
> &
    Pick<
        ListItemProps,
        'style' | 'extra' | 'clickable' | 'arrow' | 'arrowIcon' | 'description'
    > & {
        label?: ReactNode;
        help?: ReactNode;
        helpIcon?: ReactNode;
        hasFeedback?: boolean;
        required?: boolean;
        noStyle?: boolean;
        disabled?: boolean;
        hidden?: boolean;
        layout?: FormLayout;
        childElementPosition?: 'normal' | 'right';
        children?: ChildrenType;
        onClick?: (e: React.MouseEvent, widgetRef: MutableRefObject<any>) => void;
    } & NativeProps;

type FormProps

type FormProps = Pick<
    RcFormProps,
    | 'form'
    | 'initialValues'
    | 'name'
    | 'preserve'
    | 'validateMessages'
    | 'validateTrigger'
    | 'onFieldsChange'
    | 'onFinish'
    | 'onFinishFailed'
    | 'onValuesChange'
    | 'children'
> &
    NativeProps<
        '--border-inner' | '--border-top' | '--border-bottom' | '--prefix-width'
    > &
    Partial<FormContextType> & {
        footer?: ReactNode;
        mode?: ListProps['mode'];
    };

type GridItemProps

type GridItemProps = {
    span?: number;
    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    children?: ReactNode;
} & NativeProps;

type GridProps

type GridProps = {
    columns: number;
    gap?: number | string | [number | string, number | string];
    children?: ReactNode;
} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;

type ImageProps

type ImageProps = {
    src?: string;
    alt?: string;
    width?: number | string;
    height?: number | string;
    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
    placeholder?: ReactNode;
    fallback?: ReactNode;
    lazy?: boolean;
    draggable?: boolean;
    onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
    onContainerClick?: (event: React.MouseEvent<HTMLDivElement, Event>) => void;
} & NativeProps<'--width' | '--height'> &
    Pick<
        React.ImgHTMLAttributes<HTMLImageElement>,
        | 'crossOrigin'
        | 'decoding'
        | 'loading'
        | 'referrerPolicy'
        | 'sizes'
        | 'srcSet'
        | 'useMap'
        | 'id'
    >;

type ImageUploaderProps

type ImageUploaderProps = {
    defaultValue?: ImageUploadItem[];
    value?: ImageUploadItem[];
    columns?: GridProps['columns'];
    onChange?: (items: ImageUploadItem[]) => void;
    onUploadQueueChange?: (tasks: UploadTask[]) => void;
    accept?: string;
    multiple?: boolean;
    maxCount?: number;
    onCountExceed?: (exceed: number) => void;
    disableUpload?: boolean;
    showUpload?: boolean;
    deletable?: boolean;
    deleteIcon?: ReactNode;
    capture?: InputHTMLAttributes<unknown>['capture'];
    onPreview?: (index: number, item: ImageUploadItem) => void;
    beforeUpload?: (file: File, files: File[]) => Promise<File | null> | File | null;
    upload: (file: File) => Promise<ImageUploadItem>;
    onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;
    preview?: boolean;
    showFailed?: boolean;
    imageFit?: ImageProps['fit'];
    children?: ReactNode;
    renderItem?: (
        originNode: ReactElement,
        file: ImageUploadItem,
        fileList: ImageUploadItem[]
    ) => ReactNode;
} & NativeProps<'--cell-size' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;

type ImageViewerProps

type ImageViewerProps = {
    image: string;
    maxZoom?: number | 'auto';
    getContainer?: GetContainer;
    visible?: boolean;
    onClose?: () => void;
    afterClose?: () => void;
    renderFooter?: (image: string) => ReactNode;
    imageRender?: (
        image: string,
        {
            index,
        }: {
            index: number;
        }
    ) => ReactNode;
    classNames?: {
        mask?: string;
        body?: string;
    };
};

type IndexBarPanelProps

type IndexBarPanelProps = {
    index: string;
    title?: ReactNode;
    brief?: ReactNode;
    children?: ReactNode;
} & NativeProps;

type IndexBarProps

type IndexBarProps = {
    sticky?: boolean;
    onIndexChange?: (index: string) => void;
    children?: ReactNode;
} & NativeProps<'--sticky-offset-top'>;

type IndexBarRef

type IndexBarRef = {
    scrollTo: (index: string) => void;
};

type InfiniteScrollProps

type InfiniteScrollProps = {
    loadMore: (isRetry: boolean) => Promise<void>;
    hasMore: boolean;
    threshold?: number;
    children?:
        | ReactNode
        | ((hasMore: boolean, failed: boolean, retry: () => void) => ReactNode);
} & NativeProps;

type InputProps

type InputProps = Pick<
    NativeInputProps,
    | 'maxLength'
    | 'minLength'
    | 'autoComplete'
    | 'autoFocus'
    | 'pattern'
    | 'inputMode'
    | 'type'
    | 'name'
    | 'onFocus'
    | 'onBlur'
    | 'onPaste'
    | 'autoCapitalize'
    | 'autoCorrect'
    | 'onKeyDown'
    | 'onKeyUp'
    | 'onCompositionStart'
    | 'onCompositionEnd'
    | 'onClick'
    | 'step'
    | 'id'
    | 'placeholder'
    | 'readOnly'
    | 'disabled'
    | 'enterKeyHint'
> & {
    value?: string;
    defaultValue?: string;
    onChange?: (val: string) => void;
    clearable?: boolean;
    clearIcon?: ReactNode;
    onlyShowClearWhenFocus?: boolean;
    onClear?: () => void;
    onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
    min?: number;
    max?: number;
} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'> &
    AriaProps;

type InputRef

type InputRef = {
    clear: () => void;
    focus: () => void;
    blur: () => void;
    nativeElement: HTMLInputElement | null;
};

type JumboTabProps

type JumboTabProps = {
    title: ReactNode;
    description: ReactNode;
    disabled?: boolean;
    forceRender?: boolean;
    destroyOnClose?: boolean;
    children?: ReactNode;
} & NativeProps;

type JumboTabsProps

type JumboTabsProps = {
    activeKey?: string | null;
    defaultActiveKey?: string | null;
    onChange?: (key: string) => void;
    children?: ReactNode;
} & NativeProps;

type ListItemProps

type ListItemProps = {
    title?: ReactNode;
    children?: ReactNode;
    description?: ReactNode;
    prefix?: ReactNode;
    extra?: ReactNode;
    clickable?: boolean;
    arrowIcon?: boolean | ReactNode;
    disabled?: boolean;
    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
    /**
     * @deprecated use `arrowIcon` instead
     */
    arrow?: boolean | ReactNode;
} & NativeProps<'--prefix-width' | '--align-items' | '--active-background-color'>;

type ListProps

type ListProps = {
    header?: ReactNode;
    mode?: 'default' | 'card';
    children?: ReactNode;
} & NativeProps<
    | '--active-background-color'
    | '--align-items'
    | '--border-bottom'
    | '--border-inner'
    | '--border-top'
    | '--extra-max-width'
    | '--font-size'
    | '--header-font-size'
    | '--padding-left'
    | '--padding-right'
    | '--prefix-padding-right'
    | '--prefix-width'
>;

type ListRef

type ListRef = {
    nativeElement: HTMLDivElement | null;
};

type LoadingProps

type LoadingProps = DotLoadingProps;

type MaskProps

type MaskProps = {
    visible?: boolean;
    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    destroyOnClose?: boolean;
    forceRender?: boolean;
    disableBodyScroll?: boolean;
    color?: 'white' | 'black' | (string & {});
    opacity?: 'default' | 'thin' | 'thick' | number;
    getContainer?: GetContainer;
    afterShow?: () => void;
    afterClose?: () => void;
    stopPropagation?: PropagationEvent[];
    children?: ReactNode;
} & NativeProps<'--z-index'>;

type ModalAlertProps

type ModalAlertProps = Omit<ModalProps, 'visible' | 'closeOnAction' | 'actions'> & {
    confirmText?: ReactNode;
    onConfirm?: () => void | Promise<void>;
};

type ModalConfirmProps

type ModalConfirmProps = Omit<
    ModalProps,
    'visible' | 'closeOnAction' | 'actions'
> & {
    confirmText?: ReactNode;
    cancelText?: ReactNode;
    onConfirm?: () => void | Promise<void>;
    onCancel?: () => void | Promise<void>;
};

type ModalProps

type ModalProps = Pick<
    CenterPopupProps,
    | 'afterClose'
    | 'afterShow'
    | 'bodyClassName'
    | 'bodyStyle'
    | 'destroyOnClose'
    | 'disableBodyScroll'
    | 'forceRender'
    | 'getContainer'
    | 'maskClassName'
    | 'maskStyle'
    | 'stopPropagation'
    | 'visible'
> & {
    image?: string;
    header?: ReactNode;
    title?: ReactNode;
    content?: ReactNode;
    actions?: Action[];
    onAction?: (action: Action, index: number) => void | Promise<void>;
    onClose?: () => void;
    closeOnAction?: boolean;
    closeOnMaskClick?: boolean;
    showCloseButton?: boolean;
} & NativeProps;

type ModalShowProps

type ModalShowProps = Omit<ModalProps, 'visible' | 'destroyOnClose' | 'forceRender'>;

type MultiImageViewerProps

type MultiImageViewerProps = Omit<
    ImageViewerProps,
    'image' | 'renderFooter' | 'imageRender'
> & {
    images?: string[];
    defaultIndex?: number;
    onIndexChange?: (index: number) => void;
    renderFooter?: (image: string, index: number) => ReactNode;
    imageRender?: (
        image: string,
        {
            index,
        }: {
            index: number;
        }
    ) => ReactNode;
};

type MultiImageViewerRef

type MultiImageViewerRef = SlidesRef;

type NavBarProps

type NavBarProps = {
    back?: ReactNode;
    backIcon?: boolean | ReactNode;
    /**
     * @deprecated use `backIcon` instead
     */
    backArrow?: boolean | ReactNode;
    left?: ReactNode;
    right?: ReactNode;
    onBack?: () => void;
    children?: ReactNode;
} & NativeProps<'--height' | '--border-bottom'>;

type NoticeBarProps

type NoticeBarProps = {
    /** The type of the NoticeBar */
    color?: 'default' | 'alert' | 'error' | 'success' | 'info';
    /** TDelay to start scrolling, unit ms */
    delay?: number;
    /** Scroll speed, unit px/s */
    speed?: number;
    /** The content of the NoticeBar */
    content: ReactNode;
    /** Whether it can be closed */
    closeable?: boolean;
    /** Custom close icon */
    closeIcon?: ReactNode;
    /** Callback when closed */
    onClose?: () => void;
    /** Event when click */
    onClick?: () => void;
    /** Additional operating area, displayed to the left of the close button */
    extra?: ReactNode;
    /** Radio icon on the left */
    icon?: ReactNode;
    /** Whether to display multiple lines */
    wrap?: boolean;
    /** Block shape */
    shape?: 'rectangular' | 'neutral' | 'rounded';
    /** Border visibility */
    bordered?: 'block' | boolean;
} & NativeProps<
    | '--background-color'
    | '--border-color'
    | '--text-color'
    | '--font-size'
    | '--icon-font-size'
    | '--height'
>;

type NumberKeyboardProps

type NumberKeyboardProps = {
    visible?: boolean;
    title?: string;
    confirmText?: string | null;
    customKey?: string | [string, string];
    randomOrder?: boolean;
    showCloseButton?: boolean;
    onInput?: (v: string) => void;
    onDelete?: () => void;
    onClose?: () => void;
    onConfirm?: () => void;
    closeOnConfirm?: boolean;
    safeArea?: boolean;
} & Pick<
    PopupProps,
    | 'afterClose'
    | 'afterShow'
    | 'getContainer'
    | 'destroyOnClose'
    | 'forceRender'
    | 'stopPropagation'
> &
    NativeProps;

type PageIndicatorProps

type PageIndicatorProps = {
    total: number;
    current: number;
    direction?: 'horizontal' | 'vertical';
    color?: 'primary' | 'white';
} & NativeProps<
    | '--dot-color'
    | '--active-dot-color'
    | '--dot-size'
    | '--active-dot-size'
    | '--dot-border-radius'
    | '--active-dot-border-radius'
    | '--dot-spacing'
>;

type PasscodeInputProps

type PasscodeInputProps = {
    value?: string;
    defaultValue?: string;
    length?: number;
    plain?: boolean;
    error?: boolean;
    caret?: boolean;
    seperated?: boolean;
    keyboard?: ReactElement<NumberKeyboardProps>;
    inputMode?: 'numeric' | 'text';
    onBlur?: () => void;
    onFocus?: () => void;
    onChange?: (val: string) => void;
    onFill?: (val: string) => void;
} & NativeProps<
    | '--cell-gap'
    | '--cell-size'
    | '--dot-size'
    | '--border-color'
    | '--border-radius'
>;

type PasscodeInputRef

type PasscodeInputRef = {
    focus: () => void;
    blur: () => void;
};

type PickerProps

type PickerProps = {
    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
    value?: PickerValue[];
    defaultValue?: PickerValue[];
    loading?: boolean;
    loadingContent?: ReactNode;
    onSelect?: (value: PickerValue[], extend: PickerValueExtend) => void;
    onConfirm?: (value: PickerValue[], extend: PickerValueExtend) => void;
    onCancel?: () => void;
    onClose?: () => void;
    closeOnMaskClick?: boolean;
    visible?: boolean;
    title?: ReactNode;
    confirmText?: ReactNode;
    cancelText?: ReactNode;
    children?: (
        items: (PickerColumnItem | null)[],
        actions: PickerActions
    ) => ReactNode;
    renderLabel?: (item: PickerColumnItem) => ReactNode;
    mouseWheel?: boolean;
    popupClassName?: string;
    popupStyle?: CSSProperties;
} & Pick<
    PopupProps,
    | 'getContainer'
    | 'afterShow'
    | 'afterClose'
    | 'onClick'
    | 'stopPropagation'
    | 'forceRender'
    | 'destroyOnClose'
> &
    NativeProps<
        | '--header-button-font-size'
        | '--title-font-size'
        | '--item-font-size'
        | '--item-height'
    >;

type PickerRef

type PickerRef = PickerActions;

type PickerViewProps

type PickerViewProps = {
    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
    value?: PickerValue[];
    defaultValue?: PickerValue[];
    mouseWheel?: boolean;
    loading?: boolean;
    loadingContent?: ReactNode;
    onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
} & Pick<PickerProps, 'renderLabel'> &
    NativeProps<'--height' | '--item-height' | '--item-font-size'>;

type PopoverMenuProps

type PopoverMenuProps = Omit<PopoverProps, 'content'> & {
    actions: Action[];
    maxCount?: number;
    onAction?: (item: Action) => void;
};

type PopoverProps

type PopoverProps = {
    defaultVisible?: boolean;
    visible?: boolean;
    onVisibleChange?: (visible: boolean) => void;
    getContainer?: GetContainer;
    destroyOnHide?: boolean;
    children: ReactElement;
    mode?: 'light' | 'dark';
    trigger?: 'click';
    placement?: Placement | DeprecatedPlacement;
    stopPropagation?: PropagationEvent[];
    content: ReactNode;
} & NativeProps<'--z-index' | '--arrow-size'>;

type PopoverRef

type PopoverRef = {
    show: () => void;
    hide: () => void;
    visible: boolean;
};

type PopupProps

type PopupProps = PopupBaseProps &
    PropsWithChildren<{
        position?: 'bottom' | 'top' | 'left' | 'right';
        closeOnSwipe?: boolean;
    }> &
    NativeProps<'--z-index'>;

type ProgressBarProps

type ProgressBarProps = {
    percent?: number;
    rounded?: boolean;
    text?: boolean | ReactNode | ((percent: number) => ReactNode);
} & NativeProps<'--track-width' | '--track-color' | '--fill-color' | '--text-width'>;

type ProgressCircleProps

type ProgressCircleProps = {
    percent?: number;
    children?: ReactNode;
} & NativeProps<'--size' | '--track-width' | '--track-color' | '--fill-color'>;

type PullToRefreshProps

type PullToRefreshProps = {
    onRefresh?: () => Promise<any>;
    pullingText?: ReactNode;
    canReleaseText?: ReactNode;
    refreshingText?: ReactNode;
    completeText?: ReactNode;
    completeDelay?: number;
    headHeight?: number;
    threshold?: number;
    disabled?: boolean;
    renderText?: (status: PullStatus) => ReactNode;
    children?: ReactNode;
};

type RadioProps

type RadioProps = {
    checked?: boolean;
    defaultChecked?: boolean;
    disabled?: boolean;
    onChange?: (checked: boolean) => void;
    value?: RadioValue;
    block?: boolean;
    id?: string;
    icon?: (checked: boolean) => ReactNode;
    children?: ReactNode;
    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;

type RateProps

type RateProps = {
    allowClear?: boolean;
    allowHalf?: boolean;
    character?: ReactNode;
    count?: number;
    defaultValue?: number;
    readOnly?: boolean;
    value?: number;
    onChange?: (value: number) => void;
} & NativeProps<
    '--star-size' | '--active-color' | '--inactive-color' | '--inactive-color-half'
>;

type ResultPageProps

type ResultPageProps = {
    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
    title: ReactNode;
    description?: ReactNode;
    icon?: ReactNode;
    details?: ResultPageDetails | null;
    children?: ReactNode;
    primaryButtonText?: ReactNode;
    secondaryButtonText?: ReactNode;
    onPrimaryButtonClick?: OnClick;
    onSecondaryButtonClick?: OnClick;
} & NativeProps<'--background-color'>;

type ResultProps

type ResultProps = {
    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
    title: ReactNode;
    description?: ReactNode;
    icon?: ReactNode;
} & NativeProps;

type SafeAreaProps

type SafeAreaProps = {
    position: 'top' | 'bottom';
} & NativeProps;

type ScrollMaskProps

type ScrollMaskProps = {
    scrollTrackRef: RefObject<HTMLElement>;
};

type SearchBarProps

type SearchBarProps = Pick<
    InputProps,
    | 'onFocus'
    | 'onBlur'
    | 'onClear'
    | 'onCompositionStart'
    | 'onCompositionEnd'
    | 'autoFocus'
> & {
    value?: string;
    defaultValue?: string;
    maxLength?: number;
    placeholder?: string;
    clearable?: boolean;
    onlyShowClearWhenFocus?: boolean;
    showCancelButton?: boolean | ((focus: boolean, value: string) => boolean);
    cancelText?: string;
    searchIcon?: ReactNode;
    /**
     * @deprecated use `searchIcon` instead
     */
    icon?: ReactNode;
    clearOnCancel?: boolean;
    onSearch?: (val: string) => void;
    onChange?: (val: string) => void;
    onCancel?: () => void;
} & NativeProps<
        | '--background'
        | '--border-radius'
        | '--placeholder-color'
        | '--height'
        | '--padding-left'
    >;

type SearchBarRef

type SearchBarRef = InputRef;

type SegmentedProps

type SegmentedProps = InternalSegmentedProps &
    NativeProps<
        | '--segmented-background'
        | '--segmented-item-color'
        | '--segmented-item-selected-background'
        | '--segmented-item-selected-color'
        | '--segmented-item-disabled-color'
    >;

type SelectorOption

type SelectorOption<V> = {
    label?: ReactNode;
    description?: ReactNode;
    value?: V;
    disabled?: boolean;
} & BaseOptionType;

type SelectorProps

type SelectorProps<V> = {
    options: SelectorOption<V>[];
    columns?: GridProps['columns'];
    multiple?: boolean;
    disabled?: boolean;
    defaultValue?: V[];
    value?: V[];
    onChange?: (
        v: V[],
        extend: {
            items: SelectorOption<V>[];
        }
    ) => void;
    showCheckMark?: boolean;
    fieldNames?: FieldNamesType;
} & NativeProps<
    | '--color'
    | '--checked-color'
    | '--text-color'
    | '--checked-text-color'
    | '--border'
    | '--checked-border'
    | '--border-radius'
    | '--padding'
    | '--gap'
    | '--gap-vertical'
    | '--gap-horizontal'
>;

type SideBarItemProps

type SideBarItemProps = {
    title?: ReactNode;
    disabled?: boolean;
    badge?: BadgeProps['content'];
} & NativeProps;

type SideBarProps

type SideBarProps = {
    activeKey?: string | null;
    defaultActiveKey?: string | null;
    onChange?: (key: string) => void;
    children?: ReactNode;
} & NativeProps<
    '--width' | '--height' | '--item-border-radius' | '--background-color'
>;

type SkeletonProps

type SkeletonProps = {
    animated?: boolean;
} & NativeProps<'--width' | '--height' | '--border-radius'>;

type SkeletonTitleProps

type SkeletonTitleProps = {
    animated?: boolean;
} & NativeProps;

type SliderProps

type SliderProps = {
    min?: number;
    max?: number;
    value?: SliderValue;
    defaultValue?: SliderValue;
    step?: number;
    marks?: SliderMarks;
    ticks?: boolean;
    disabled?: boolean;
    range?: boolean;
    icon?: ReactNode;
    popover?: boolean | ((value: number) => ReactNode);
    residentPopover?: boolean;
    onChange?: (value: SliderValue) => void;
    onAfterChange?: (value: SliderValue) => void;
} & NativeProps<'--fill-color'>;

type SpaceProps

type SpaceProps = {
    direction?: 'horizontal' | 'vertical';
    align?: 'start' | 'end' | 'center' | 'baseline';
    justify?:
        | 'start'
        | 'end'
        | 'center'
        | 'between'
        | 'around'
        | 'evenly'
        | 'stretch';
    wrap?: boolean;
    block?: boolean;
    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
    children?: ReactNode;
} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;

type SpinLoadingProps

type SpinLoadingProps = {
    color?: 'default' | 'primary' | 'white' | (string & {});
} & NativeProps<'--color' | '--size'>;

type StepperProps

type StepperProps = NumberStepperProps | StringStepperProps;

type StepperRef

type StepperRef = Pick<InputRef, 'blur' | 'focus' | 'nativeElement'>;

type StepProps

type StepProps = {
    title?: ReactNode;
    description?: ReactNode;
    icon?: ReactNode;
    status?: 'wait' | 'process' | 'finish' | 'error';
} & NativeProps;

type StepsProps

type StepsProps = {
    current?: number;
    direction?: Direction;
    children?: ReactNode;
} & NativeProps<
    | '--title-font-size'
    | '--description-font-size'
    | '--indicator-margin-right'
    | '--icon-size'
>;

type SwipeActionProps

type SwipeActionProps = {
    rightActions?: Action[];
    leftActions?: Action[];
    onAction?: (action: Action, e: React.MouseEvent) => void;
    closeOnTouchOutside?: boolean;
    closeOnAction?: boolean;
    children: ReactNode;
    stopPropagation?: PropagationEvent[];
    onActionsReveal?: (side: SideType) => void;
    onClose?: () => void;
} & NativeProps<'--background'>;

type SwipeActionRef

type SwipeActionRef = {
    close: () => void;
    show: (side?: SideType) => void;
};

type SwiperProps

type SwiperProps = {
    defaultIndex?: number;
    allowTouchMove?: boolean;
    autoplay?: boolean | 'reverse';
    autoplayInterval?: number;
    loop?: boolean;
    direction?: 'horizontal' | 'vertical';
    onIndexChange?: (index: number) => void;
    indicatorProps?: Pick<PageIndicatorProps, 'color' | 'style' | 'className'>;
    indicator?: false | ((total: number, current: number) => ReactNode);
    slideSize?: number;
    trackOffset?: number;
    stuckAtBoundary?: boolean;
    rubberband?: boolean;
    stopPropagation?: PropagationEvent[];
    /**
     * Virtual scroll usage. Should work with renderProps `children`
     */
    total?: number;
    /**
     * renderProps is only work when `total` used
     */
    children?: ReactElement | ReactElement[] | ((index: number) => ReactElement);
} & NativeProps<'--height' | '--width' | '--border-radius' | '--track-padding'>;

type SwiperRef

type SwiperRef = {
    swipeTo: (index: number) => void;
    swipeNext: () => void;
    swipePrev: () => void;
};

type SwitchProps

type SwitchProps = {
    loading?: boolean;
    disabled?: boolean;
    checked?: boolean;
    defaultChecked?: boolean;
    /** @deprecated use `onChange` instead */
    beforeChange?: (val: boolean) => Promise<void>;
    onChange?: (checked: boolean) => void | Promise<void>;
    checkedText?: ReactNode;
    uncheckedText?: ReactNode;
} & NativeProps<'--checked-color' | '--width' | '--height' | '--border-width'>;

type TabBarItemProps

type TabBarItemProps = {
    icon?: ReactNode | ((active: boolean) => ReactNode);
    title?: ReactNode | ((active: boolean) => ReactNode);
    badge?: BadgeProps['content'];
    onClick?: () => void;
} & NativeProps;

type TabBarProps

type TabBarProps = {
    activeKey?: string | null;
    defaultActiveKey?: string | null;
    onChange?: (key: string) => void;
    safeArea?: boolean;
    children?: ReactNode;
} & NativeProps;

type TabProps

type TabProps = {
    title: ReactNode;
    disabled?: boolean;
    forceRender?: boolean;
    destroyOnClose?: boolean;
    children?: ReactNode;
} & NativeProps;

type TabsProps

type TabsProps = {
    activeKey?: string | null;
    defaultActiveKey?: string | null;
    activeLineMode?: 'auto' | 'full' | 'fixed';
    stretch?: boolean;
    onChange?: (key: string) => void;
    children?: ReactNode;
    direction?: 'ltr' | 'rtl';
    /**
     * @experimental Support disabled auto scroll when Tabs header content change.
     * This API name or function may change in the future.
     * Please lock the version if you want to use it.
     */
    autoScroll?: boolean;
} & NativeProps<
    | '--fixed-active-line-width'
    | '--active-line-height'
    | '--active-line-border-radius'
    | '--title-font-size'
    | '--content-padding'
    | '--active-title-color'
    | '--active-line-color'
>;

type TagProps

type TagProps = {
    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | (string & {});
    fill?: 'solid' | 'outline';
    round?: boolean;
    onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
    children?: ReactNode;
} & NativeProps<
    '--border-color' | '--background-color' | '--text-color' | '--border-radius'
>;

type TextAreaProps

type TextAreaProps = Pick<
    React.DetailedHTMLProps<
        React.TextareaHTMLAttributes<HTMLTextAreaElement>,
        HTMLTextAreaElement
    >,
    | 'autoComplete'
    | 'autoFocus'
    | 'disabled'
    | 'readOnly'
    | 'name'
    | 'onFocus'
    | 'onBlur'
    | 'onCompositionStart'
    | 'onCompositionEnd'
    | 'onClick'
    | 'onKeyDown'
> & {
    onChange?: (val: string) => void;
    value?: string;
    defaultValue?: string;
    placeholder?: string;
    rows?: number;
    maxLength?: number;
    showCount?: boolean | ((length: number, maxLength?: number) => ReactNode);
    autoSize?:
        | boolean
        | {
              minRows?: number;
              maxRows?: number;
          };
    id?: string;
    onEnterPress?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
    enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
} & NativeProps<
        | '--font-size'
        | '--color'
        | '--placeholder-color'
        | '--disabled-color'
        | '--text-align'
        | '--count-text-align'
    >;

type TextAreaRef

type TextAreaRef = {
    clear: () => void;
    focus: () => void;
    blur: () => void;
    nativeElement: HTMLTextAreaElement | null;
};

type ToastShowProps

type ToastShowProps = Omit<ToastProps, 'visible'>;

type TreeSelectOption

type TreeSelectOption = {
    label?: string;
    value?: string;
    children?: TreeSelectOption[];
} & {
    [key: string]: any;
};

type TreeSelectProps

type TreeSelectProps = {
    options: TreeSelectOption[];
    defaultValue?: string[];
    value?: string[];
    onChange?: (
        value: string[],
        extend: {
            options: TreeSelectOption[];
        }
    ) => void;
    fieldNames?: FieldNamesType;
} & NativeProps;

type VirtualInputProps

type VirtualInputProps = {
    onFocus?: () => void;
    onBlur?: () => void;
    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
    keyboard?: ReactElement<NumberKeyboardProps>;
    clearable?: boolean;
    onClear?: () => void;
} & Pick<
    InputProps,
    'value' | 'onChange' | 'placeholder' | 'disabled' | 'clearIcon'
> &
    NativeProps<
        | '--font-size'
        | '--color'
        | '--placeholder-color'
        | '--disabled-color'
        | '--text-align'
        | '--caret-width'
        | '--caret-color'
    >;

type VirtualInputRef

type VirtualInputRef = {
    focus: () => void;
    blur: () => void;
};

type WaterMarkProps

type WaterMarkProps = {
    gapX?: number;
    gapY?: number;
    zIndex?: number;
    width?: number;
    height?: number;
    rotate?: number;
    image?: string;
    imageWidth?: number;
    imageHeight?: number;
    content?: string | string[];
    fontColor?: string;
    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
    fontFamily?: string;
    fontWeight?: 'normal' | 'light' | 'weight' | number;
    fontSize?: number | string;
    fullPage?: boolean;
} & NativeProps<'--z-index'>;

Package Files (133)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/antd-mobile.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/antd-mobile)

HTML

<a href="https://www.jsdocs.io/package/antd-mobile"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 month ago.
Package analyzed in 11707 ms.
Missing or incorrect documentation? Open an issue for this package.

antd-mobile

Install

Overview

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable ActionSheet

variable AutoCenter

variable Avatar

variable Badge

variable Button

variable Calendar

variable CalendarPicker

variable CalendarPickerView

variable CapsuleTabs

variable Card

variable CascadePicker

variable CascadePickerView

variable Cascader

variable CascaderView

variable CenterPopup

variable Checkbox

variable CheckList

variable Collapse

variable ConfigProvider

variable DatePicker

variable DatePickerView

variable Dialog

variable Divider

variable DotLoading

variable Dropdown

variable Ellipsis

variable Empty

Deprecated

variable ErrorBlock

variable FloatingBubble

variable FloatingPanel

variable Footer

variable Form

variable Grid

variable Image

variable ImageUploader

variable ImageViewer

variable IndexBar

variable InfiniteScroll

variable Input

variable JumboTabs

variable List

variable Loading

variable Mask

variable Modal

variable NavBar

variable NoticeBar

variable NumberKeyboard

variable PageIndicator

variable PasscodeInput

variable Picker

variable PickerView

variable Popover

variable Popup

variable ProgressBar

variable ProgressCircle

variable PullToRefresh

variable Radio

variable Rate

variable Result

variable ResultPage

variable SafeArea

variable ScrollMask

variable SearchBar

variable Segmented

variable SideBar

variable Skeleton

variable Slider

variable Space

variable SpinLoading

variable Stepper