Build dashboard and admin-UI slides in Slidev using ant-design-vue (the Vue 3 implementation of Ant Design). Use when creating Slidev presentations that need dashboards
1 次安装
设计与多媒体
Antd Vue Components
试用Learn and look up how to use any ant-design-vue (Vue 3) component — its variants, runnable examples, Vue 3 SFC code, and key props/events/slots. Use when the user asks how to use an ant-design-vue
它能做什么
Learn and look up how to use any ant-design-vue (Vue 3) component — its variants, runnable examples, Vue 3 SFC code, and key props/events/slots. Use when the user asks how to use an ant-design-vue component (a-table, a-form, a-select, a-menu, a-modal, …), wants a component's variants/examples/Vue 3 code, is porting a UI from React antd to Vue, or is learning ant-design-vue. Target is ant-design-vue v4 (Vue 3), NOT React antd.
技能文档
ant-design-vue components — learning reference
A study & lookup guide for every ant-design-vue v4 (Vue 3) component. For each component you get: what it's for · its variants · a runnable Vue 3 SFC example · key props/events/slots · tips.
Read first
- This targets
ant-design-vuev4.2.x on Vue 3. Globally-registered components use thea-prefix (,). It is not Reactantd— props/events/slots differ (see conventions). - Start with references/conventions.md — the patterns shared by all components (registration, icons,
v-model:*, events, slots, forms, theme, imperative APIs, and how to run any example). Learn these once and every component below makes sense.
How to help someone learn a component
When asked "how do I use ``?" (or for its variants/examples/code):
- Find it in the index below and open that category file in
references/. - Present in this order: one-line what → variants (the forms it ships in) → a minimal runnable Vue 3 SFC → key API (props/events/slots) → tips and when to pick it over a sibling.
- Match the level: beginners get the minimal example first; then layer on variants/edge cases. Porting from React → point them at the React→Vue mapping in conventions.md.
- Always use Vue 3 idioms:
v-model:value/v-model:checked/v-model:open/…,@changeevents, and named/scoped slots (never React render-props oronChange). - To run it: give the Vite quickstart in conventions.md, or offer to scaffold a playground.
Component index
| Category | File | Components |
|---|---|---|
| Conventions (read first) | conventions.md | registration · icons · v-model:* · events · slots · forms · theme/tokens · message/Modal/notification · run-any-example |
| General | general.md | Button · FloatButton · Typography · Icon |
| Layout | layout.md | Divider · Flex · Grid (Row/Col) · Layout · Space |
| Navigation | navigation.md | Anchor · Breadcrumb · Dropdown · Menu · Pagination · Steps |
| Data Entry | data-entry.md | AutoComplete · Cascader · Checkbox · DatePicker · Form · Input · InputNumber · Mentions · Radio · Rate · Select · Slider · Switch · TimePicker · Transfer · TreeSelect · Upload |
| Data Display | data-display.md | Avatar · Badge · Calendar · Card · Carousel · Collapse · Descriptions · Empty · Image · List · Popover · QRCode · Segmented · Statistic · Table · Tabs · Tag · Timeline · Tooltip · Tour · Tree |
| Feedback | feedback.md | Alert · Drawer · Message · Modal · Notification · Popconfirm · Progress · Result · Skeleton · Spin · Watermark |
| Other / system | other.md | Affix · App · ConfigProvider · theme tokens · util |
Per-component entry shape
Every component in the category files follows the same template, so studying is uniform:
### Name ``
What: one sentence.
Variants: the meaningful forms (size/type/mode/shape/state …).
Example: a complete + SFC you can paste & run.
API: key props · events · slots (the ones you actually use).
Tips: gotchas + "use this vs ".
Related
- Building dashboards in Slidev with these components? Use the
slidev-antd-dashboardskill — it covers the Slidev integration, layout shell, and dashboard composition rules. This skill is the general-purpose component learning reference. - Official docs (authoritative API): .
相关技能
A design-language assistant for Ant Design (antd). Use when the user wants to learn, apply, critique, or theme UIs according to Ant Design's design language — its four design values
1 次安装
Element Plus Vue3 desktop component library. Invoke when developing Vue 3.x pages, using Element Plus components (el-button, el-input, el-form, el-table, etc...
3 次安装2 星标
Query project-specific Arco Design usage patterns and generate Vue 3 admin page prototypes with mock data, scaffold files, and route snippets. Use when Codex...
18 次安装
Element UI Vue2 desktop component library. Invoke when developing Vue 2.x pages, using el- prefix components (button/input/form/table/dialog etc). ⚠️ Upload requires server-side validation.
3 次安装1 星标
Element UI 基于 Vue 2.0 的桌面端组件库中文文档 - 包含 60+ 组件的 API 参考、使用示例、设计指南、安装快速上手
1 次安装1 星标