shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 开发与工程无需 API Key

arco-design

Arco Design React UI 组件库参考 (@arco-design/web-react)。每当用户要求构建页面、创建UI、编写前端代码、开发Web应用程序、设计仪表板或实现任何React界面时——尤其是在他们提到Arco、arco-design、@arco-design/web-react 或任何 Arco 组件名称（如按钮、表格、表单、模态框、选择器、菜单等）时使用此技能。涵盖了所有70个组件的完整API、代码示例、导入模式、主题化、国际化(i18n)、布局、表单、表格、模态框、导航、数据输入、数据显示、反馈、响应式设计以及最佳实践。

person作者: jakexiaohubgithub
open_in_new仓库download下载资源包

Arco Design React — Skills Reference

@arco-design/web-react — An enterprise-level React UI component library by ByteDance.

Critical Conventions

Always follow these rules when writing Arco Design code:

  • Imports: import { Button, Table, Form } from '@arco-design/web-react' — always from the package root, never from sub-paths like @arco-design/web-react/es/Button
  • Icons: import { IconSearch, IconPlus } from '@arco-design/web-react/icon'
  • Types: import type { TableProps, FormInstance } from '@arco-design/web-react'
  • Styles: import '@arco-design/web-react/dist/css/arco.css' (full) or configure on-demand loading
  • Date library: dayjs (NOT moment.js)
  • Controlled mode: value + onChange; Uncontrolled: defaultValue
  • Sub-components: accessed via Component.Sub pattern — Form.Item, Select.Option, Menu.SubMenu, Input.Search, Input.TextArea, Grid.Row, Grid.Col
  • Form.Item uses field prop (not name like Ant Design)
  • Switch in Form requires triggerPropName="checked"

Skill Index

Load the relevant file below for full API reference, code examples, and best practices.

Setup & Configuration

| Topic | File | When to use | |-------|------|-------------| | Installation | getting-started.md | Install @arco-design/web-react, import styles, configure tree-shaking or babel-plugin-import | | Global Config | config-provider.md | Set global component size, theme, locale, default props via <ConfigProvider> | | Theming | theming.md | Custom theme colors, CSS variable overrides, Less variables, dark mode toggle | | Internationalization | internationalization.md | Switch languages, add locale packs, customize locale text | | Architecture | architecture.md | Understand controlled/uncontrolled patterns, props merging, ref forwarding, CSS naming |

General Components

| Component | File | Use for | |-----------|------|---------| | Button | button.md | Buttons, button groups, icon buttons, loading state | | Icon | icon.md | Built-in icons (IconXxx), custom SVG icons, IconFont | | Typography | typography.md | Headings, paragraphs, text ellipsis, copyable/editable text | | Link | link.md | Hyperlinks with icon, hover states | | Divider | divider.md | Horizontal/vertical dividers, dividers with text |

Layout

| Component | File | Use for | |-----------|------|---------| | Grid | grid.md | 24-column Row/Col grid, responsive breakpoints (xs/sm/md/lg/xl/xxl), gutter | | Layout | layout.md | Page skeleton: Header, Sider, Content, Footer, collapsible sidebar | | Space | space.md | Consistent spacing between elements, horizontal/vertical, wrap |

Navigation

| Component | File | Use for | |-----------|------|---------| | Menu | menu.md | Sidebar nav, top nav bar, sub-menus, menu groups, collapsible | | Tabs | tabs.md | Tab switching, card tabs, editable/closable tabs, extra content | | Dropdown | dropdown.md | Dropdown menus, context menus, button dropdowns | | Breadcrumb | breadcrumb.md | Navigation hierarchy path, route breadcrumbs | | Pagination | pagination.md | Page navigation, size changer, simple/mini mode | | Steps | steps.md | Step-by-step workflows, vertical/dot steps, error state | | Affix | affix.md | Pin element to viewport on scroll | | Anchor | anchor.md | In-page anchor navigation, scroll-to-section | | PageHeader | page-header.md | Page title + back button + breadcrumb + actions |

Data Entry

| Component | File | Use for | |-----------|------|---------| | Form | form.md | Form building, validation, Form.Item (uses field prop), Form.List, useForm hook | | Input | input.md | Text input, Input.Password, Input.Search, Input.TextArea, prefix/suffix | | Select | select.md | Dropdown select, multi-select, search, remote search, Select.Option, virtual scroll | | DatePicker | date-picker.md | Date/range picker (RangePicker), week/month/quarter/year, disabled dates (dayjs) | | TimePicker | time-picker.md | Time selection, range, 12h format, step intervals | | InputNumber | input-number.md | Numeric input, stepper, precision, min/max | | Checkbox | checkbox.md | Multi-select, Checkbox.Group, select all / indeterminate | | Radio | radio.md | Single select, Radio.Group, button-style radio | | Switch | switch.md | Toggle switch, loading, text labels (use triggerPropName="checked" in Form) | | Slider | slider.md | Range slider, marks, vertical, step, tooltip format | | Rate | rate.md | Star rating, half-star, readonly, custom characters | | Cascader | cascader.md | Multi-level cascade (province/city), remote load, search | | TreeSelect | tree-select.md | Select from tree structure, checkable, searchable, async load | | Transfer | transfer.md | Transfer items between two lists, search, simple mode | | AutoComplete | auto-complete.md | Input autocomplete, search suggestions | | Mentions | mentions.md | @mention users/topics in text input | | InputTag | input-tag.md | Tag input, add/remove tags, drag sort | | Upload | upload.md | File upload, drag-and-drop, image upload with preview | | ColorPicker | color-picker.md | Color selection (hex/rgb/hsl) | | VerificationCode | verification-code.md | OTP / verification code input |

Data Display

| Component | File | Use for | |-----------|------|---------| | Table | table.md | Data tables, sort, filter, pagination, fixed columns/header, virtual scroll, row selection, expandable rows | | List | list.md | Data lists, paginated, virtual scroll, grid layout | | Card | card.md | Card containers, cover, Card.Grid, Card.Meta, actions | | Tree | tree.md | Tree structure, checkable, draggable, virtual scroll, async load | | Tooltip | tooltip.md | Hover text hints (for rich content use Popover) | | Popover | popover.md | Click/hover popup cards with rich content | | Avatar | avatar.md | User avatars, avatar groups, image/text/icon avatars | | Badge | badge.md | Numeric badges, status dots, count indicators | | Tag | tag.md | Status tags, closable, Tag.CheckableTag, colored tags | | Carousel | carousel.md | Image carousels, slideshows | | Collapse | collapse.md | Collapsible panels, accordion mode, FAQ | | Descriptions | descriptions.md | Key-value detail display, bordered, responsive columns | | Calendar | calendar.md | Calendar view, event marking | | Comment | comment.md | Comment display, nested replies, actions | | Empty | empty.md | Empty state placeholder | | Image | image.md | Image display, preview, lazy load, Image.PreviewGroup | | Statistic | statistic.md | Numeric display, countdown, trend indicators | | Timeline | timeline.md | Timelines, activity feeds, changelog |

Feedback

| Component | File | Use for | |-----------|------|---------| | Modal | modal.md | Modal dialogs, Modal.confirm(), useModal hook, form-in-modal | | Message | message.md | Global toast: Message.success(), error(), warning(), loading() | | Notification | notification.md | Rich notification toasts with title + content + actions | | Drawer | drawer.md | Slide-out side panels, form editing, nested drawers | | Alert | alert.md | Inline alert banners (info/success/warning/error), banner mode | | Progress | progress.md | Linear/circular progress bars, step progress | | Popconfirm | popconfirm.md | Lightweight confirmation popup before delete/submit | | Result | result.md | Result pages (success/fail/403/404/500) | | Skeleton | skeleton.md | Loading skeleton placeholders with animation | | Spin | spin.md | Loading spinner wrapping content |

Other

| Component | File | Use for | |-----------|------|---------| | BackTop | back-top.md | Scroll-to-top button | | Portal | portal.md | Render children into different DOM node | | ResizeBox | resize-box.md | Resizable containers, split panes | | Trigger | trigger.md | Base popup positioning (underlies Tooltip/Popover/Dropdown) | | Watermark | watermark.md | Text/image watermarks over page content |

Patterns & Best Practices

| Topic | File | When to use | |-------|------|-------------| | Form Patterns | form-patterns.md | Dynamic forms, linked validation, nested forms, async submit, complex layouts | | Table Patterns | table-patterns.md | Remote data, editable rows, virtual scroll large data, custom filters | | Modal Patterns | modal-patterns.md | Form-in-modal, confirmation flows, nested drawers, global messages | | Controlled vs Uncontrolled | controlled-uncontrolled.md | Choosing value+onChange vs defaultValue pattern | | Responsive Design | responsive-design.md | Grid breakpoints, adaptive layout, mobile-friendly design |

Hooks

Import from @arco-design/web-react/hooks. Use these headless hooks only when you need a fully custom UI — otherwise prefer the corresponding component.

| Hook | File | Use for | |------|------|---------| | useVerificationCode | use-verification-code.md | Custom OTP input with focus, paste, keyboard navigation | | useWatermark | use-watermark.md | Dynamic canvas watermark with tamper protection |