陌讯skills聚合平台

arco-design

📁 arco-design/arco-design-skill 📅 3 days ago
8
总安装量
7
周安装量
#34030
全站排名
安装命令
npx skills add https://github.com/arco-design/arco-design-skill --skill arco-design

Agent 安装分布

opencode 7
gemini-cli 6
claude-code 6
github-copilot 6
codex 6
kimi-cli 6

Skill 文档

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
GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。