DOCSEARCHbyAlgolia
Submit Docs

Arco Design Mobile

repository·main·Indexed 19 days ago

https://github.com/arco-design/arco-design-mobile

A comprehensive React UI component library optimized for mobile H5 and WebView environments. It features over 50 TypeScript-based components, including ActionSheet, Avatar, Badge, Button, Carousel, and Cell, with a focus on pixel-accurate design and high-quality finger interaction effects.

Tokens
358.3K
Snippets
893
Records
1.2K
Agent score
64%

What's inside Arco Design Mobile

  2. Use the Image component

    main

    The Image component is an enhanced version of the standard <img> tag. It supports various image fit modes (object-fit), loading indicators, and error handling. You can customize the loading state (loadingArea) and error state (errorArea) with custom React nodes.

    Key features include:

    • Fit Modes: Supports standard CSS object-fit values and special preview modes like preview-x or preview-y.
    • Loading/Error States: Automatically shows indicators or custom content when loading or when an error occurs.
    • Retry Logic: Supports automatic retries via retryTime.
    • Manual Control: Use staticLabel to bypass the loading lifecycle and render a raw <img> tag, or showImage to manually control loading.

  4. Use the Skeleton component for loading states

    main

    The Skeleton component displays placeholder graphics to indicate that content is currently loading. It supports various placeholder types including titles, paragraphs, avatars, and grids. You can customize the animation style, colors, and specific placeholder configurations.

    <Skeleton 
  title={true} 
  paragraph={true} 
  avatar={true} 
  animation="gradient" 
/>

  6. Use the IndexBar component

    main

    The IndexBar component is a navigation component used to quickly jump to specific sections of a list. It typically features a sticky header and a sidebar for rapid navigation.

    Key Features

    • Sticky Headers: Automatically keeps the current group's title at the top while scrolling.
    • Sidebar Navigation: A side indicator that allows users to jump to specific indices.
    • Customizable Rendering: Extensive render props allow you to customize the sidebar, the sticky items, and the group items.
    • Manual Control: Use the scrollToIndex ref method to programmatically scroll to a specific section.

    Usage Modes

    You can provide data to the IndexBar in two ways:

    1. Data-driven: Pass a groups array containing IndexBarGroupItem objects to the groups prop.
    2. JSX-driven: Use IndexBar.Group as children. Note that when using JSX, certain props like onGroupItemClick or renderGroupItem must be applied directly to the IndexBar.Group component rather than the parent IndexBar.
    <IndexBar 
  groups={[
    {
      index: 'A',
      list: [{ content: 'Apple' }, { content: 'Apricot' }]
    },
    {
      index: 'B',
      list: [{ content: 'Banana' }, { content: 'Blueberry' }]
    }
  ]}
  onChange={(index, trigger) => console.log(index, trigger)}
/>

  9. Use the Steps component to display progress

    main

    The Steps component is used to display the progress of a task or to guide users through a complex process. It can be configured to run horizontally or vertically and supports custom icons, statuses, and alignment.

    Key Configuration Options

    • Direction: Set direction="horizontal" (default) or direction="vertical".
    • Alignment: Use align="center" or align="start". Note that alignment defaults to center for horizontal steps and start for vertical steps.
    • Current Step: Control the active step using the current prop (0-indexed).
    • Status: The overall progress state can be managed via current, but individual steps can have their status overridden using the status prop on Steps.Step.
    • Data Source: You can provide steps via the items prop (highest priority) or as children (lower priority).

    Step Statuses

    Available statuses for both the Steps component and individual Step elements are:

    • finish: Completed step.
    • error: Step with an error.
    • wait: Pending step.
    • process: Currently active step.
    <Steps current={1}>
  <Steps.Step title="Step 1" description="Description 1" status="finish" />
  <Steps.Step title="Step 2" description="Description 2" />
  <Steps.Step title="Step 3" description="Description 3" />
</Steps>

  10. Use the DropdownMenu component

    main

    The DropdownMenu is a component that allows users to expand a dropdown box by clicking a selector to view and select from various options. It supports multiple selectors and can handle single or multiple selections.

    Key features include:

    • Controlled/Uncontrolled modes: Use selectIndex and values for controlled state, or defaultSelectIndex and defaultValues for uncontrolled state.
    • Multiple selection: Enable via the multiple prop.
    • Cascading options: Supports hierarchical selection using CascadeOptions.
    • Customization: Customize labels via renderSelectLabel and handle interactions via onOptionClick or onValuesChange.
    <DropdownMenu 
  options={options} 
  onValuesChange={(values) => console.log(values)} 
/>

  12. Use the ImagePreview component

    main

    The ImagePreview component provides a full-screen image viewing experience with support for circular rotation, two-finger/double-tap zoom, and thumbnail zoom effects. It can be used as a component or via the open method.

    Key features include:

    • Gestures: Pinch-to-zoom, double-tap zoom, and swipe-to-close.
    • Customization: Custom loading/error areas, custom indicators, and custom close buttons via extra or renderExtra props.
    • Layout: Control image fit with fit (preview-y or preview-x) and spacing with spaceBetween.
    // Example usage of ImagePreview component
<ImagePreview
  images={[
    { src: 'https://example.com/img1.png' },
    { src: 'https://example.com/img2.png' }
  ]}
  openIndex={0}
  close={() => setVisible(false)}
  loop={true}
/>