---
Title: Antdv Next Component Semantic Descriptions
URL: https://www.antdv-next.com/llms-semantic.md
---



---
Title: Advanced
URL: https://www.antdv-next.com/docs/vue/compatible-style.md
---

## Default Style Compatibility

Antdv Next supports the [last 2 versions of modern browsers](https://browsersl.ist/#q=defaults). By default, we use some modern CSS features to improve style maintainability and extensibility. These features may not be supported in older browsers, but we can solve this through some compatibility solutions.

| Feature | antdv-next version | Compatibility | Minimum Chrome Version | Compatibility workaround |
| --- |-------------------| --- | --- | --- |
| [:where Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | `>=1.0.0`         | [caniuse](https://caniuse.com/?search=%3Awhere) | Chrome 88 | `<StyleProvider hashPriority="high">` |
| [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) | `>=1.0.0`         | [caniuse](https://caniuse.com/css-logical-props) | Chrome 89 | `<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>` |

If you need to support older browsers, please use `@antdv-next/cssinjs` [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) for degradation handling according to your actual requirements.

## `:where` Selector

- Support Version: `>=1.0.0`
- MDN: [:where](https://developer.mozilla.org/en-US/docs/Web/CSS/:where)
- Browser Compatibility: [caniuse](https://caniuse.com/?search=%3Awhere)
- Minimum Chrome Version Supported: 88
- Default Enabled: Yes

The CSS-in-JS feature of Antdv Next uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers, you can use `@antdv-next/cssinjs` to disable the default lowering of specificity (please ensure version consistency with antd).

```vue
<template>
  <!-- `hashPriority` defaults to `low`, when set to `high`, -->
  <!-- it will remove the `:where` selector wrapper -->
  <a-style-provider hash-priority="high">
    <MyApp />
  </a-style-provider>
</template>
```

It will turn `:where` to class selector:

```diff
--  :where(.css-bAMboO).ant-btn {
++  .css-bAMboO.ant-btn {
      color: #fff;
    }
```

Note: After turning off the `:where` downgrade, you may need to manually adjust the priority of some styles. Or you can **use PostCSS plugin** to raise application css selector priority. PostCSS provides many plugins can help on this. e.g:

- [postcss-scopify](https://www.npmjs.com/package/postcss-scopify)
- [postcss-increase-specificity](https://www.npmjs.com/package/postcss-increase-specificity)
- [postcss-add-root-selector](https://www.npmjs.com/package/postcss-add-root-selector)

Raise priority through plugin:

```diff
--  .my-btn {
++  #root .my-btn {
      background: red;
    }
```

## CSS Logical Properties

- Support Version: `>=1.0.0`
- MDN: [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
- Browser Compatibility: [caniuse](https://caniuse.com/css-logical-props)
- Minimum Chrome Version Supported: 89
- Default Enabled: Yes

To unify LTR and RTL styles, Antdv Next uses CSS logical properties. For example, the original `margin-left` is replaced by `margin-inline-start`, so that it is the starting position spacing under both LTR and RTL. If you need to be compatible with older browsers (such as 360 Browser, QQ Browser, etc.), you can configure `transformers` through the `StyleProvider` of `@antdv-next/cssinjs`:

```vue
<script lang="ts" setup>
import { legacyLogicalPropertiesTransformer } from '@antdv-next/cssinjs'
</script>

<template>
  <!-- `transformers` provides preprocessing to transform styles -->
  <a-style-provider :transformers="[legacyLogicalPropertiesTransformer]">
    <MyApp />
  </a-style-provider>
</template>
```

When toggled, styles will downgrade CSS logical properties:

```diff
.ant-modal-root {
-- inset: 0;
++ top: 0;
++ right: 0;
++ bottom: 0;
++ left: 0;
}
```

## `@layer` Specificity Lowering {#layer-specificity-lowering}

- Support Version: `>=1.0.0`
- MDN: [@layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer)
- Browser Compatibility: [caniuse](https://caniuse.com/?search=%40layer)
- Minimum Chrome Version Supported: 99
- Default Enabled: No

Antdv Next supports configuring `@layer` for unified specificity lowering since `1.0.0`. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of `@layer`). When enable `layer`, the child element **must** wrap ConfigProvider to update the icon-related styles:

```vue
<template>
  <a-style-provider layer>
    <a-config-provider>
      <MyApp />
    </a-config-provider>
  </a-style-provider>
</template>
```

antd styles will be encapsulated in `@layer` to lower the priority:

```diff
++  @layer antd {
      :where(.css-bAMboO).ant-btn {
        color: #fff;
      }
++  }
```

⚠️ zeroRuntime Scenario Notes

When `zeroRuntime` is enabled, Antdv Next’s styles are precompiled into a standalone `antd.css` file. If you also enable the `@layer` specificity–lowering mechanism, you must ensure that `antd.css` is placed inside the same layer (e.g., `layer(antd)`). Otherwise, its specificity will be higher than the styles injected by StyleProvider, causing the lowering mechanism to fail or resulting in unexpected override behavior.

```css
/* global.css / app.css */
@layer theme, base, antd, components, utilities;

/* The precompiled antd.css output by zeroRuntime must explicitly specify a layer */
@import url(antd.css) layer(antd);
```

If you cannot use the `@import ... layer()` syntax, you may wrap the content during your build process instead:

```css
@layer antd {
  /* contents of antd.css */
}
```

## autoPrefixer

- Support Version: `>=1.0.0`
- Browser Compatibility: Automatically adds browser prefixes for wider browser support
- Default Enabled: No

Some styles rely on browser prefixes for compatibility. The `autoPrefixer` transformer can automatically add browser prefixes to styles, ensuring they work properly across different browsers.

```vue
<script lang="ts" setup>
import { autoPrefixTransformer } from '@antdv-next/cssinjs'
</script>

<template>
  <a-style-provider :transformers="[autoPrefixTransformer]">
    <MyApp />
  </a-style-provider>
</template>
```

The final transformed styles:

```diff
  .sample-box {
--  user-select: none;
++  -webkit-user-select: none;
++  -moz-user-select: none;
++  -ms-user-select: none;
++  user-select: none;
  }
```

## Rem Adaptation

In responsive web development, there is a need for a convenient and flexible way to achieve page adaptation and responsive design. The `px2remTransformer` transformer can quickly and accurately convert pixel units in style sheets to rem units relative to the root element (HTML tag), enabling the implementation of adaptive and responsive layouts.

```vue
<script lang="ts" setup>
import { px2remTransformer } from '@antdv-next/cssinjs'

const px2rem = px2remTransformer({
  rootValue: 32, // 32px = 1rem; @default 16
})
</script>

<template>
  <a-style-provider :transformers="[px2rem]">
    <MyApp />
  </a-style-provider>
</template>
```

The resulting transformed styles:

```diff
 .px2rem-box {
-  width: 400px;
+  width: 12.5rem;
   background-color: green;
-  font-size: 32px;
+  font-size: 1rem;
   border: 10PX solid #f0f;
 }

 @media only screen and (max-width: 600px) {
   .px2rem-box {
     background-color: red;
-    margin: 10px;
+    margin: 0.3125rem;
   }
 }
```

### Options

<!-- prettier-ignore -->
| Parameter | Description  | Type | Default |
| --- | --- | --- | --- |
| rootValue | Font size of the root element | `number` | 16 |
| precision | Decimal places for the converted value | `number` | 5 |
| mediaQuery | Whether to convert px in media queries | `boolean` | false |

For more details, please refer to: [px2rem.ts#Options](https://github.com/ant-design/cssinjs/blob/master/src/transformers/px2rem.ts)

## Shadow DOM Usage

Since `<style />` tag insertion is different from normal DOM in Shadow DOM scenario, you need to use `StyleProvider` of `@antdv-next/cssinjs` to configure the `container` property to set the insertion position:

```tsx
import { StyleProvider } from '@antdv-next/cssinjs'
import { render } from 'vue'

const shadowRoot = someEle.attachShadow({ mode: 'open' })
const container = document.createElement('div')
shadowRoot.appendChild(container)

render(
  <StyleProvider container={shadowRoot}>
    <MyApp />
  </StyleProvider>,
  container
)
```

## Compatible with Third-party Style Libraries

In some cases, you may need antd to coexist with other style libraries, such as `Tailwind CSS`, `Emotion`, `styled-components`, etc. Unlike traditional CSS solutions, these third-party libraries are often not easy to override antd styles by increasing CSS selector priority. You can configure `@layer` for antd to lower its CSS selector weight, and arrange `@layer` order to solve style override problems:

### antd config `@layer`

As mentioned earlier, when using StyleProvider, you must wrap ConfigProvider to update icon-related styles:

```vue
<template>
  <a-style-provider layer>
    <a-config-provider>
      <MyApp />
    </a-config-provider>
  </a-style-provider>
</template>
```

### TailwindCSS Arrange `@layer`

Before starting the following configuration, you need to enable [`@layer`](#layer-specificity-lowering) feature.

#### TailwindCSS v3

In global.css, adjust `@layer` to control the order of style override. Place `tailwind-base` before `antd`:

```less
@layer tailwind-base, antd;

@layer tailwind-base {
  @tailwind base;
}
@tailwind components;
@tailwind utilities;
```

#### TailwindCSS v4

In global.css, adjust `@layer` to control the order of style override. Place `antd` in the right position:

```less
@layer theme, base, antd, components, utilities;

@import 'tailwindcss';
```

### reset.css and antd.css

If you are using Antdv Next’s `reset.css`, you need to assign it to a specific `@layer` to prevent it from overriding the lowered-specificity antd styles. Similarly, in the `zeroRuntime` scenario, if you import `antd.css` separately, you must also place it inside `layer(antd)` to keep the layer hierarchy consistent:

```css
/* Both reset.css and antd.css must specify a layer */
@layer reset, antd;

/* reset styles */
@import url(reset.css) layer(reset);

/* antd styles */
@import url(antd.css) layer(antd);
```

This ensures that:

- reset.css will not override Antdv Next styles that have been lowered via @layer
- antd.css (in zeroRuntime mode) stays aligned with the layer injected by StyleProvider
- Layer order still works correctly with third-party styling systems such as Tailwind, Emotion, or other CSS-in-JS libraries

### With other CSS-in-JS libraries

After configuring `@layer` for antd, you don't need to do any additional configuration for other CSS-in-JS libraries. Your CSS-in-JS can completely override antd styles.

### SSR Scene

When using SSR, styles are often rendered inline in HTML through `<style />`. At this time, please make sure that the styles with the specified `@layer` priority order are loaded before `@layer` is used.

#### ❌ Wrong {#wrong}

```html
<head>
  <!-- SSR Injection style -->
  <style>
    @layer antd {
      /** ... */
    }
  </style>

  <!-- css file contains @layer xxx, antd; -->
  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
  <!-- or write @layer xxx, antd; in html directly -->
  <style>
    @layer xxx, antd;
  </style>
</head>
```

#### ✅ Correct {#correct}

```html
<head>
  <!-- css file contains @layer xxx, antd; -->
  <link rel="stylesheet" href="/b9a0m0b9o0o3.css" />
  <!-- or write @layer xxx, antd; in html directly -->
  <style>
    @layer xxx, antd;
  </style>

  <!-- SSR Injection style -->
  <style>
    @layer antd {
      /** ... */
    }
  </style>
</head>
```

---
Title: Ant Design of Vue
URL: https://www.antdv-next.com/docs/vue/introduce.md
---

Following the Ant Design specification, we developed a Vue UI library `antdv-next` that contains a set of high quality components for building rich, interactive user interfaces.

<div class="pic-plus">
  <img width="150" draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/>
  <span>+</span>
  <img width="150" draggable="false" src="../../../assets/vue.svg"/>
  <span>=</span>
  <img width="190" draggable="false" src="../../../assets/antdv-next.svg"/>
</div>

---

## ✨ Features {#features}

- 🌈 Enterprise-class UI designed for web applications.
- 📦 A set of high-quality Vue3 components out of the box.
- 🛡 Written in TypeScript with predictable static types.
- ⚙️ Share the <a href="https://ant.design/docs/resources" target="_blank" rel="noopener noreferrer">Ant Design of React</a> design resource system.
- 🌍 Internationalization support for dozens of languages.
- 🎨 Powerful theme customization in every detail.

## Environment Support

- Modern browsers
- Server-side Rendering
- [Electron](https://www.electronjs.org/)

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Electron |
| --- | --- | --- | --- | --- | --- |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

> Dropped support of IE8 after `vue3`. `antdv-next` does not support IE by default. We recommend starting from `vue@3.5.x` version.

## Version

- Stable: [![npm package](https://img.shields.io/npm/v/antdv-next.svg?style=flat-square)](https://www.npmjs.org/package/antdv-next)

## Installation

### Using npm or yarn or pnpm or bun

**We recommend using [npm](https://www.npmjs.com/) or [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/) or [bun](https://bun.sh/) to install**, it not only makes development easier, but also allows you to take advantage of the rich ecosystem of JavaScript packages and tooling.

<InstallDependencies npm='$ npm install antdv-next --save' yarn='$ yarn add antdv-next' pnpm='$ pnpm install antdv-next --save' bun='$ bun add antdv-next'></InstallDependencies>

If you are in a bad network environment, you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm).

### Import in Browser

Add `script` and `link` tags in your browser and use the global variable `antd`.

We provide `antd.js`, `antd.css` and `reset.css` under the `dist` folder in antdv-next's npm package. You can also download these files directly from <!--[![CDNJS](https://img.shields.io/cdnjs/v/antdv-next.svg?style=flat-square)](https://cdnjs.com/libraries/antdv-next)，--> [![](https://data.jsdelivr.com/v1/package/npm/antdv-next/badge)](https://www.jsdelivr.com/package/npm/antdv-next) or [UNPKG](https://unpkg.com/antdv-next/dist/).

> **We strongly discourage loading the entire files**, as this will add bloat to your application and make it more difficult to receive bugfixes and updates.

> Note: You should import `vue`, `dayjs` before using `antd.js`.

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Import in browser demo</title>
    <link href="https://cdn.jsdelivr.net/npm/antdv-next@1.6.0/dist/reset.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/antdv-next@1.6.0/dist/antd.css" rel="stylesheet" />
  </head>

  <body>
    <div id="app">
      {{msg}}
      <a-button type="primary">click</a-button>
    </div>

    <script>window.process = { env: { NODE_ENV: 'production' } }</script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.global.js"></script>
    <!-- dayjs + all dependent plugins must be loaded before antdv-next -->
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.9/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/advancedFormat.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/customParseFormat.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/localeData.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/weekday.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/weekOfYear.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.9/plugin/weekYear.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/antdv-next@1.6.0/dist/antd.js"></script>
    <script>
      const { createApp } = Vue;
      const app = createApp({
        setup() {
          return {
            msg: "hello antdv-next",
          };
        },
      });
      app.use(antd.default);
      app.mount("#app");
    </script>
  </body>
</html>
```

## Usage

```vue
<template>
  <a-date-picker />
</template>
```

### Use modularized antdv-next

`antdv-next` is a Pure ESM project and supports ES modules tree shaking by default.

### TypeScript

`antdv-next` is written in TypeScript with complete definitions.

## Links

- [Home page](/)
- [Components](/components/overview)

---
Title: Awesome
URL: https://www.antdv-next.com/docs/vue/awesome.md
---

## Official Ecosystem

| Name | Description |
| ---- | ---- |
| [vue-components](https://github.com/antdv-next/vue-components) | Headless styled components built on top of `@v-c/*` |
| [@antdv-next/x](https://github.com/antdv-next/x) | AI component library |
| [@antdv-next/auto-import-resolver](https://github.com/antdv-next/auto-import-resolver) | Auto-import resolver for on-demand usage |
| [@antdv-next/icons](https://github.com/antdv-next/icons) | SVG icon package |
| [@antdv-next/nuxt](https://github.com/antdv-next/nuxt) | Nuxt module |
| [admin](https://github.com/antdv-next/admin) | Admin dashboard starter template |
| [antdv-style](https://github.com/antdv-next/antdv-style) | CSS-in-JS solution based on `Emotion` |
| [antdv-next-playground](https://github.com/antdv-next/antdv-next-playground) | Online playground built on `@vue/repl` |
| [css-plugin](https://github.com/antdv-next/css-plugin) | Plugins for `@antdv-next/unocss` and `@antdv-next/tailwind` |
| [docs-base](https://github.com/antdv-next/docs-base) | Documentation starter template |
| [vite-plugin-dayjs](https://github.com/antdv-next/vite-plugin-dayjs) | Converts Day.js CommonJS imports to ESM automatically |

## Community Ecosystem

| Name | Description |
| ---- | ---- |
| [Fantastic-admin](https://fantastic-admin.hurui.me/) | AI-oriented admin system framework |
| [antdv-next-tiptap](https://pengyinghao.github.io/antdv-next-tiptap/) | A rich text editor built with Vue3, antdv-next, and tiptap |
| [antdv-next-pro-components](https://github.com/lucasjeke/pro-components/) | A component library based on antdv-next with enterprise-level components |
| [Naive Admin](https://naiveadmin.com) | Out-of-the-box front-end and back-end framework |

---
Title: CLI
URL: https://www.antdv-next.com/docs/vue/cli.md
---

This guide explains how to use `@antdv-next/cli` to query antdv-next component knowledge, analyze project usage, and guide version migrations from the command line.

## What is Antdv Next CLI? {#what-is-antdv-next-cli}

[`@antdv-next/cli`](https://github.com/antdv-next/cli) is the official command-line tool that brings Antdv Next knowledge to your terminal. All metadata is installed with the package: every Props, Events, Slots, Token, Demo, and Changelog entry can be queried in milliseconds, completely offline.

## Highlights {#highlights}

- 📦 **Fully offline** — All metadata is installed with the package. No network requests, no latency, and no API key required.
- 🎯 **Version-accurate** — Query the exact API for antdv-next@x.y.z instead of only "latest".
- 🤖 **Agent-optimized** — Every command supports `--format json`, with structured error codes and suggested fixes. stdout and stderr are strictly separated.
- 🔮 **Smart corrections** — Typed `Buttn`? The CLI suggests `Button` based on Levenshtein distance, prioritizing candidates with the same first letter.
- 🔌 **MCP server** — `antdv mcp` starts a stdio server with native integration for Claude Desktop, Cursor, and other IDEs.

## Installation {#install}

```bash
npm install -g @antdv-next/cli
```

Node.js `>=20.0.0` is required. You can also install it globally with `pnpm add -g @antdv-next/cli` or `bun add -g @antdv-next/cli`.

## Quick Start {#quick-start}

```bash
antdv init                           # Initialize a project
antdv list                           # List all components and version information
antdv info Button                    # Component props, events, slots, types, and defaults
antdv doc Button                     # Complete Markdown documentation
antdv demo Select basic              # Runnable demo source code
antdv token DatePicker               # Design Token values
antdv design.md                      # Design language documentation (design.md)
antdv semantic Table                 # class / styles structure
antdv changelog 1.2.0 1.0.0 Select   # Compare API differences across versions
antdv doctor                         # Diagnose project configuration issues
antdv env                            # Collect environment information for bug reports
antdv usage ./src                    # Analyze antdv-next imports in a project
antdv lint ./src                     # Check deprecated APIs and best practices
antdv migrate 1 2                    # v1-to-v2 migration guide
antdv migrate 1 2 --apply ./src      # Generate an Agent migration prompt
antdv mcp                            # Start the MCP server for IDE integration
antdv setup --client claude          # Connect an AI Agent through MCP/Skill
antdv upgrade                        # Upgrade the CLI to the latest version
```

## Commands {#commands}

### Project Initialization

| Command | Description |
| --- | --- |
| `antdv init [project-name]` | Initialize a Vite project by default |
| `antdv init [project-name] --nuxt` | Initialize a Nuxt-based antdv-next project |

### Knowledge Queries {#knowledge-query}

| Command | Description |
| --- | --- |
| `antdv list` | List all components, including bilingual names, categories, and the version in which they were introduced |
| `antdv info <Component>` | Display Props, Events, and Slots tables with types, default values, and descriptions |
| `antdv doc <Component>` | Display the complete Markdown documentation for a component |
| `antdv demo <Component> [name]` | Display runnable demo source code (TSX) |
| `antdv token [Component]` | Display global or component-level Design Tokens |
| `antdv design.md` | Display the design language document for AI design tools |
| `antdv semantic <Component>` | Display the semantic `class` / `styles` structure and usage examples |
| `antdv changelog [v1] [v2] [component]` | Display Changelog entries, a version range, or an API comparison across versions |

#### antdv design.md {#design-md}

`antdv design.md` outputs the antdv-next design language description file, following the [google-labs-code/design.md](https://github.com/google-labs-code/design.md) specification. The file is intended for AI design tools such as Figma Make and Google Stitch, enabling them to follow the antdv-next visual language when generating UIs.

```bash
antdv design.md                # Output the complete design.md content
antdv design.md --format json  # Output in JSON format
```

The file includes:

- **YAML Front Matter** — Structured Token definitions for colors, typography, border radii, spacing, and core components, with support for the `{path.to.token}` reference syntax
- **Design overview** — The four antdv-next values: Natural, Certain, Meaningful, and Growing
- **Color system** — Functional colors, preset palettes, and why neutral colors use `rgba()`
- **Typography** — A 14px base font size, the font stack, and a two-weight constraint
- **Layout** — A 4px grid, spacing scale, and three-layer surface model
- **Hierarchy and depth** — Four shadow levels, motion durations, and easing functions
- **Shape** — A default 6px border radius and per-component classifications
- **Components** — Style descriptions for core component archetypes and states
- **Design guidance** — Do's and Don'ts

The file is also published at [antdv-next.com/design.md](https://antdv-next.com/design.md), allowing AI tools to read it directly from the URL.

### Project Analysis {#project-analysis}

| Command | Description |
| --- | --- |
| `antdv doctor` | Run 10 diagnostic checks covering Vue compatibility, duplicate installations, peer dependencies, SSR, and Babel plugins |
| `antdv env [dir]` | Collect antdv-next-related environment information for bug reports or AI-assisted diagnosis |
| `antdv usage [dir]` | Report import statistics, subcomponent distribution, and non-component exports |
| `antdv lint [target]` | Check deprecated APIs, accessibility issues, performance problems, and best practices |
| `antdv migrate <from> <to>` | Produce a migration checklist that distinguishes automatic fixes from manual work; `--apply` generates an Agent prompt |

### Issue Reporting {#issue-reporting}

| Command | Description |
| --- | --- |
| `antdv bug` | Report a bug to the antdv-next repository |
| `antdv bug-cli` | Report a bug to the antdv-next/cli repository |

### CLI Management {#cli-management}

| Command | Description |
| --- | --- |
| `antdv mcp` | Start an MCP server that provides six tools and supports IDE integration with Claude Code, Cursor, VS Code, and more |
| `antdv setup` | Connect Antdv Next MCP/Skill to Claude Code, Cursor, VS Code, or Codex |
| `antdv upgrade` | Upgrade the CLI to the latest version |

The `antdv mcp` command starts a [Model Context Protocol](https://modelcontextprotocol.io/) server, giving AI assistants direct access to Antdv Next knowledge. See the [MCP Server](/docs/vue/mcp) guide for detailed configuration instructions.

The `antdv setup` command can write MCP configuration, install the built-in Antdv Next Skill, or do both:

```bash
antdv setup --client claude
antdv setup --client cursor --mode both
antdv setup --client vscode --write-instructions
antdv setup --client codex
antdv setup --client claude --dry-run
antdv setup --client claude --check
```

### Global Options {#global-flags}

| Option | Description | Default |
| --- | --- | --- |
| `--format json\|text\|markdown` | Output format | `text` |
| `--ver <v>` | Target antdv-next version (for example, `1.5.0`) | Auto-detected |
| `-V, --version` | Print the CLI version | - |

The target version is detected in the following order: the `--version` option, `node_modules/antd`, the dependency declaration in `package.json`, and finally the default fallback version.

## Usage with AI Tools {#usage-with-ai-tools}

The CLI includes a [Skill file](https://github.com/antdv-next/cli/blob/main/skills/antdv/SKILL.md) that guides coding agents to invoke the right command at the right time:

```bash
npx skills add antdv-next/cli
```

| Tool | Description |
| --- | --- |
| **Claude Code** | Install it as an Agent Skill or use the `antdv` command directly in the terminal. [Documentation](https://docs.anthropic.com/en/docs/claude-code) |
| **Cursor** | After the Skill is installed, the Agent automatically invokes CLI commands. [Documentation](https://docs.cursor.com/zh/context/@-symbols/@-docs) |
| **Codex** | Install the Skill to give the Agent access. [Documentation](https://github.com/openai/codex) |
| **Gemini CLI** | Install the Skill to enable automatic command invocation. [Documentation](https://github.com/google-gemini/gemini-cli) |

All Agents compatible with the [skills](https://github.com/nicepkg/agent-skills) protocol are supported.

## Learn More {#learn-more}

- [@antdv-next/cli GitHub repository](https://github.com/antdv-next/cli)
- [@antdv-next/cli on npm](https://www.npmjs.com/package/@antdv-next/cli)
- [Antdv Next LLMs.txt guide](/docs/vue/llms)
- [Antdv Next MCP Server](/docs/vue/mcp)

---
Title: Common Props
URL: https://www.antdv-next.com/docs/vue/common-props.md
---

> Tips: The following generic properties apply to most antdv-next components; those not supported are described separately.

| Property      | Description | Type | Default |
|---------------| --- | --- | --- |
| style         | The additional style | CSSProperties | - |
| class         | The additional css class | string | - |
| rootClass | ClassName on the root element | string | - |
| autoFocus     | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |

---
Title: Contributing
URL: https://www.antdv-next.com/docs/vue/contributing.md
---

This guide will help you understand how to contribute to Antdv Next. Please take a few minutes to read this guide before submitting an issue or pull request.

## Code of Conduct

We use the same [Code of Conduct](https://github.com/antdv-next/antdv-next/blob/main/CODE_OF_CONDUCT.md) as the Ant Design community. We hope all contributors will abide by it. Please take the time to read it thoroughly to ensure you understand what is and isn't allowed.

## Transparent Development

All our development work is done on [Github](https://github.com/antdv-next/antdv-next). Whether it's a pull request from a team member or a community contributor, all pull requests must go through the same review process.

## Branch Management

We currently maintain two long-term branches: `main` and `feat`. If you need to fix a bug, please send a pull request to `main`. We will release a `patch` version from `main` every period of time (at most one month). If you need to add a new feature pull request, please base it on the `feat` branch. We will try to merge `feat` into `main` within two months and release a `minor` version containing new features.

:::info Why is the cycle uncertain?
We don't have a large team like Ant Design to support frequent version releases, so we can only release new versions as quickly as possible while ensuring quality. We hope everyone understands.
:::

## First Contribution

If you're not sure how to submit a Pull Request on GitHub, you can read the following article to learn:

[How to Contribute on GitHub](https://opensource.guide/how-to-contribute/)

To help you get started with your first attempt, we've marked some relatively easy-to-fix bugs and small features with [good first issues](https://github.com/antdv-next/antdv-next/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). These issues can serve as a good first attempt.

If you plan to start working on an issue, please check the comments below the issue first to make sure no one else is working on it. If no one is currently working on it, you can leave a comment to let others know you will be handling this issue to avoid duplicate work.

If someone previously commented that they would handle the issue but there has been no activity for a week or two, you can also take over the issue, but you still need to leave a comment to inform others.

## Pull Request

The Antdv Next Team will pay attention to all pull requests. We will review and merge your code, and may also ask you to make some changes or tell you why we cannot accept such changes.

**Before you send a Pull Request**, please make sure you follow these steps:

1. Make changes based on the [correct branch](#branch-management).
2. Run `pnpm install` in the project root directory.
3. If you fixed a bug or added a new feature, please make sure to write corresponding tests. This is important.

Since most of antdv-next is based on `vue-components`, sometimes you need to send a pull request to the [vue-components](https://github.com/antdv-next/vue-components) repository. If you fix a bug, we will release a patch version as soon as possible after merging your changes, and then you just need to reinstall your dependencies to use the newly released version. If your pull request adds a new feature, after your changes are merged and a version is released, you also need to send a pull request to Antdv Next to upgrade the corresponding dependencies, documentation, and TypeScript type definitions.

## Development Workflow

Our project is a monorepo by default, using [pnpm workspace](https://pnpm.io/workspaces) to manage multiple sub-packages. So before you start contributing code, please make sure you understand the basic usage of pnpm workspace.

The following steps assume you have already installed and configured pnpm.

1. Fork this repository to your personal account.
2. Clone your forked repository locally: `git clone https://github.com/xxx/antdv-next.git`.
3. Enter the project directory: `cd antdv-next`.
4. Install dependencies: `pnpm install`.
5. Run the development environment: `pnpm dev`.
6. Run code style check: `pnpm lint`.
7. Build the site: `pnpm build`.
8. Compile and build: `pnpm build:antdv`.

## Acknowledgements

Thanks to all the friends who contributed code and documentation to Antdv Next. You make this project better! We look forward to more contributors joining this project to promote the development of Antdv Next together.

<a href="https://github.com/antdv-next/antdv-next/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=antdv-next/antdv-next&max=100&columns=15" />
</a>

---
Title: Customize Theme
URL: https://www.antdv-next.com/docs/vue/customize-theme.md
---

Antdv Next allows you to customize our design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc.

We provide a new way to customize themes. With CSS-in-JS, the ability of theming has also been enhanced, including but not limited to:

1. Switching theme dynamically;
2. Multiple themes;
3. Customizing theme variables for some components;
4. ...

## Configure Theme

We call the smallest element that affects the theme **Design Token**. By modifying the Design Token, we can present various themes or components. You can pass `theme` to `ConfigProvider` to customize theme.

:::warning
`ConfigProvider` will not take effect on static methods such as `message.xxx`, `Modal.xxx`, `notification.xxx`, because in these methods, antdv-next will dynamically create new Vue entities through `render`. Its context is not the same as the context of the current code, so context information cannot be obtained.

When you need context information (such as the content configured by ConfigProvider), you can use the `Modal.useModal` method to return the modal entity and the contextHolder node. Just insert it where you need to get the context, or you can use [App Component](/components/app) to simplify the problem of using Modal and other methods that need to manually implant the contextHolder.
:::

### Customize Design Token

By modifying `token` property of `theme`, we can modify Design Token globally. Some tokens will affect other tokens. We call these tokens Seed Token.

```stackblitz {title="Customize Design Token"}
<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#00b96b',
        borderRadius: 2,
        colorBgContainer: '#f6ffed',
      },
    }"
  >
    <a-space>
      <a-button type="primary">Primary</a-button>
      <a-button>Default</a-button>
    </a-space>
  </a-config-provider>
</template>
```

### Use Preset Algorithms

Themes with different styles can be quickly generated by modifying `algorithm`. We provide three sets of preset algorithms by default:

- default algorithm `theme.defaultAlgorithm`
- dark algorithm `theme.darkAlgorithm`
- compact algorithm `theme.compactAlgorithm`

You can switch algorithms by modifying the `algorithm` property of `theme` in ConfigProvider, and multiple algorithms can be configured to take effect in sequence.

```stackblitz {title="Use Preset Algorithms"}
<template>
  <a-config-provider
    :theme="{
      algorithm: theme.darkAlgorithm,
      // Or combine algorithms:
      // algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
    }"
  >
    <a-space>
      <a-input placeholder="Please Input" />
      <a-button type="primary">Submit</a-button>
    </a-space>
  </a-config-provider>
</template>

<script setup lang="ts">
import { theme } from 'antdv-next'
</script>
```

### Customize Component Token

In addition to Design Token, each component will also have its own Component Token to achieve style customization capabilities for components, and different components will not affect each other. Similarly, other Design Token of components can also be overridden in this way.

:::info Algorithm of Component Token
By default, all component tokens can only override global token and will not be derived based on Seed Token.

In version `>= 1.0.0`, component tokens support the `algorithm` property, which can be used to enable algorithm or pass in other algorithms.
:::

```stackblitz {title="Customize Component Token"}
<template>
  <a-config-provider
    :theme="{
      components: {
        Button: {
          colorPrimary: '#00b96b',
          algorithm: true,
        },
        Input: {
          colorPrimary: '#eb2f96',
          algorithm: true,
        },
      },
    }"
  >
    <a-space>
      <div style="font-size: 14px">Enable algorithm: </div>
      <a-input placeholder="Please Input" />
      <a-button type="primary">Submit</a-button>
    </a-space>
  </a-config-provider>

  <a-divider />

  <a-config-provider
    :theme="{
      components: {
        Button: {
          colorPrimary: '#00b96b',
        },
        Input: {
          colorPrimary: '#eb2f96',
        },
      },
    }"
  >
    <a-space>
      <div style="font-size: 14px">Disable algorithm: </div>
      <a-input placeholder="Please Input" />
      <a-button type="primary">Submit</a-button>
    </a-space>
  </a-config-provider>
</template>
```

### Disable Motion

antdv-next has built-in interaction animations to make enterprise-level pages more detailed. In some extreme scenarios, it may affect the performance of page interaction. If you need to turn off the animation, try setting `motion` of `token` to `false`:

```stackblitz {title="Disable Motion"}
<template>
  <a-row :gutter="[24, 24]">
    <a-col :span="24">
      <a-flex gap="small">
        <a-checkbox :checked="checked">Checkbox</a-checkbox>
        <a-radio :checked="checked">Radio</a-radio>
        <a-switch :checked="checked" />
      </a-flex>
    </a-col>

    <a-col :span="24">
      <a-config-provider :theme="{ token: { motion: false } }">
        <a-flex gap="small">
          <a-checkbox :checked="checked">Checkbox</a-checkbox>
          <a-radio :checked="checked">Radio</a-radio>
          <a-switch :checked="checked" />
        </a-flex>
      </a-config-provider>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue'

const checked = ref(false)

let timer: ReturnType<typeof setInterval> | undefined

onMounted(() => {
  timer = setInterval(() => {
    checked.value = !checked.value
  }, 500)
})

onBeforeUnmount(() => {
  if (timer) clearInterval(timer)
})
</script>
```

## Advanced

### Zero Runtime {#zero-runtime}

We provide `zeroRuntime` mode to further improve application performance. When enabled, Antdv Next will no longer generate component styles at runtime, so you need to manually import the style files.

:::warning Notice
This configuration is static and cannot be dynamically configured through `ConfigProvider`!
:::

Import the style file in `main.ts`:

```ts
import 'antdv-next/dist/antd.css'
```

Configure the theme in `App.vue`:
```vue
<template>
  <a-config-provider :theme="{ zeroRuntime: true }">
    <MyApp />
  </a-config-provider>
</template>
```

`antdv-next/dist/antd.css` contains all antdv-next component styles, but does not include hashed className.

### Switch Themes Dynamically

Dynamically switching themes is very simple for users. You can dynamically switch themes at any time through the `theme` property of `ConfigProvider` without any additional configuration.

```stackblitz {title="Switch Themes Dynamically"}
<template>
  <a-color-picker
    show-text
    v-model:value="primary"
  />
  <a-divider />
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: typeof primary === 'string' ? primary : primary?.toHexString()
      },
    }"
  >
    <a-space>
      <a-input placeholder="Please Input" />
      <a-button type="primary">Submit</a-button>
    </a-space>
  </a-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const primary = ref('#1677ff')
</script>
```

### Nested Theme

By nesting `ConfigProvider` you can apply local theme to some parts of your page. Design Tokens that have not been changed in the child theme will inherit the parent theme.

```stackblitz {title="Nested Theme"}
<template>
  <a-config-provider
    :theme="{
      token: {
        colorPrimary: '#1677ff',
      },
    }"
  >
    <a-space>
      <a-button type="primary">Theme 1</a-button>

      <a-config-provider
        :theme="{
          token: {
            colorPrimary: '#00b96b',
          },
        }"
      >
        <a-button type="primary">Theme 2</a-button>
      </a-config-provider>
    </a-space>
  </a-config-provider>
</template>

```

### Consume Design Token

If you want to consume the Design Token under the current theme, we provide `useToken` hook to get Design Token.

```stackblitz {title="Consume Design Token"}
<template>
  <div
    :style="{
      backgroundColor: token.colorPrimaryBg,
      padding: token.padding + 'px',
      borderRadius: token.borderRadius + 'px',
      color: token.colorPrimaryText,
      fontSize: token.fontSize + 'px',
    }"
  >
    Consume Design Token
  </div>
</template>

<script setup lang="ts">
import { theme } from 'antdv-next' // or ant-design-vue

const { useToken } = theme
const { token } = useToken()
</script>
```

### Static Consume (e.g. Atomic CSS)

Normally we recommend using atomic CSS to consume Design Token. We provide a UnoCSS plugin to make it easier to use Design Token.

#### Installation

```shell
npm install -D @antdv-next/unocss

# or
pnpm add -D @antdv-next/unocss

```

#### Configuration

Import the plugin in `uno.config.ts`:
```ts
import { presetAntd } from '@antdv-next/unocss'

export default defineConfig({
  presets: [
    presetAntd(),
  ]
})
```

#### Usage

Please install the `unocss` extension in `vscode` or `webstorm` for better hints.

By default, we have added some configurations on top of `unocss`. If you want to distinguish between `unocss` and `antdv-next` tokens, you can use the `a-` prefix for class names:

```vue
<template>
  <div class="a-c-primary">
    Consume Design Token with Atomic CSS
  </div>
  <div class="c-primary">
    Consume Design Token with Atomic CSS (without prefix)
  </div>
</template>
```

We support both usages. Since we provide completion in the plugin, we won't go into details here.

## Design Token

In Design Token, we provide a three-layer structure that is more suitable for the design, and disassemble the Design Token into three parts: Seed Token, Map Token and Alias Token. These three groups of Tokens are not simple groupings, but a three-layer derivation relationship. Map Tokens are derived from Seed Tokens, and Alias Tokens are derived from Map Tokens. In most cases, using Seed Tokens is sufficient for custom themes. But if you need a higher degree of theme customization, you need to understand the life cycle of Design Token in antd.

### Life of Design Token

![token](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*uF3kTrY4InUAAAAAAAAAAAAAARQnAQ)

### Seed Token

Seed Token means the origin of all design intent. For example, we can change the theme color by changing `colorPrimary`, and the algorithm inside antd will automatically calculate and apply a series of corresponding colors according to the Seed Token:

```tsx
const theme = {
  token: {
    colorPrimary: '#1890ff',
  },
}
```

### Map Token

Map Token is a gradient variable derived from Seed. It is recommended to implement custom Map Token through `theme.algorithm`, which can ensure the gradient relationship between Map Tokens. It can also be overridden by `theme.token` to modify the value of some map tokens individually.

```tsx
const theme = {
  token: {
    colorPrimaryBg: '#e6f7ff',
  },
}
```

### Alias Token

Alias Token is used to control the style of some common components in batches, which is basically a Map Token alias, or a specially processed Map Token.

```tsx
const theme = {
  token: {
    colorLink: '#1890ff',
  },
}
```

### Algorithm

The basic algorithm is used to expand the Seed Token into a Map Token, such as calculating a gradient color palette from a basic color, or calculating rounded corners of various sizes from a basic rounded corner. Algorithms can be used alone or in any combination, for example, dark and compact algorithms can be combined to get a dark and compact theme.

```tsx
import { theme } from 'antdv-next'

const { darkAlgorithm, compactAlgorithm } = theme

const theme = {
  algorithm: [darkAlgorithm, compactAlgorithm],
}
```

## API

### Theme

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- |----|
| token | Modify Design Token | `AliasToken` | - |    |
| inherit | Inherit theme configured in upper ConfigProvider | boolean | true |    |
| algorithm | Modify the algorithms of theme | `(token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]` | `defaultAlgorithm` |    |
| components | Modify Component Token and Alias Token applied to components | `ComponentsConfig` | - |    |
| cssVar | CSS Variables Configuration | [cssVar](#css-var) | - |    |
| hashed | Style patch on the hash className | boolean | true |    |
| zeroRuntime | Enable zero-runtime mode, which will not generate style at runtime, need to import additional CSS file | boolean | true | -  |

### ComponentsConfig

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| `Component` (Can be any antd Component name like `Button`) | Modify Component Token or override Component used Alias Token | `ComponentToken & AliasToken & { algorithm: boolean \| (token: SeedToken) => MapToken` \| `((token: SeedToken) => MapToken)[]}` | - |

> `algorithm` of component is `false` by default, which means tokens of component will only override global token. When it is set with `true`, the algorithm will be the same as global. You can also pass algorithm or Array of algorithm, and it will override algorithm of global.

### cssVar {#css-var}

| Property | Description | Type | Default              | Version |
| --- | --- | --- |----------------------| --- |
| prefix | Prefix of CSS variables, same as `prefixCls` configured on ConfigProvider by default | string | `ant`                |  |
| key | Unique key for current theme, filled with `useId` by default | string | `useId` in Vue 3 |  |

### SeedToken

<TokenTable type="seed"></TokenTable>

### MapToken

> Inherit all SeedToken properties

<TokenTable type="map"></TokenTable>

### AliasToken

> Inherit all SeedToken and MapToken properties

<TokenTable type="alias"></TokenTable>

## FAQ

### Why component re-mounted when `theme` changed from `undefined` to some object or to `undefined`?

In ConfigProvider, we pass context through `DesignTokenContext`. When `theme` is `undefined`, a layer of Provider will not be set, so Vue VirtualDOM structure changes from scratch or from existence to nothing, causing components to be re-mounted. Solution: Replace `undefined` with an empty object `{}`.

---
Title: Design.md
URL: https://www.antdv-next.com/docs/vue/design-md.md
---

`design.md` is a design language description file following the [google-labs-code/design.md](https://github.com/google-labs-code/design.md) specification. It is intended for AI design tools such as Figma Make and Google Stitch, giving them a structured understanding of the antdv-next default Light theme — visual language, component patterns, and theme Tokens — so generated UIs match the library out of the box.

## Where It Comes From

`design.md` is generated from the component library's theme Tokens by the [`@antdv-next/cli`](https://github.com/antdv-next/cli) tooling (`scripts/tokens.ts` extracts Tokens, `antdv design.md` outputs the file). The published file is the single source of truth for both the CLI and this site.

## Where to Get It

The file is available from multiple sources:

| Source | Description |
| --- | --- |
| [design.md](https://antdv-next.com/design.md) | Published raw file, readable directly by AI tools |
| `antdv design.md` | CLI command that outputs the same content ([CLI guide](/docs/vue/cli)) |
| [llms.txt](https://antdv-next.com/llms.txt) | Navigation file that links to design.md and all component docs |

## Design Token

The front matter of `design.md` carries machine-readable tokens. Key values of the default Light theme:

### Colors

| Token | Value | Usage |
| --- | --- | --- |
| `primary` | `#1677FF` | Brand color for primary actions, links, focus states |
| `success` / `warning` / `error` / `info` | `#52C41A` / `#FAAD14` / `#FF4D4F` / `#1677FF` | Semantic feedback colors |
| `surface` | `#FFFFFF` | Container surfaces (buttons, inputs, cards) |
| `surface-container` | `#FAFAFA` | Muted containers: table headers, tags, hovers |
| `surface-layout` | `#F5F5F5` | Page background |
| `on-surface` | `#1F1F1F` | Primary text on surfaces |
| `on-surface-variant` | `#595959` | Secondary text |
| `on-surface-disabled` | `#BFBFBF` | Disabled text |
| `outline` | `#D9D9D9` | Default borders |
| `outline-variant` | `#F0F0F0` | Lighter borders, dividers |

### Typography

| Token | Value |
| --- | --- |
| `fontFamily` | `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif` |
| `fontFamilyCode` | `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace` |
| `display-lg` → `body-sm` | `38px` → `12px` scale (headings `600` weight, body `400`) |

### Shapes, Spacing & Size

| Token | Value |
| --- | --- |
| `rounded` | `none 0 / sm 2 / md 4 / DEFAULT 6 / lg 8 / xl 16 / full 9999px` |
| `spacing.unit` | `4px` grid (`xs 4 / sm 8 / md 16 / lg 24 / xl 32`) |
| `control-height` | `32px` default control height |

## Component Patterns

`design.md` also describes the component layer of the design system — how Tokens combine into recurring UI patterns:

- **Button (primary)** — `#1677FF` background, white text, `6px` radius, `32px` height, `0 15px` padding; hover `#4096FF`, active `#0958D9`
- **Button (default)** — `surface` background, `on-surface` text
- **Input / Select** — `surface` background, `32px` height, `6px` radius; focus `#4096FF` border
- **Card** — `surface` background, `8px` radius, `24px` padding
- **Modal** — `surface` background, `8px` radius, `20px 24px` padding
- **Tag** — `surface-container` background, `4px` radius, `0 7px` padding, `12px` text
- **Table header** — `surface-container` background, `600` weight `14px` text, `16px` padding
- **Menu selected** — `#E6F4FF` background with primary text

## Validation

`design.md` is a formal spec — validate it, check WCAG contrast, and compare token regressions with the official CLI:

```bash
npx @google/design.md lint design.md
npx @google/design.md diff design.md design-v2.md
```

## Related

- [LLMs.txt guide](/docs/vue/llms) — structured documentation for AI tools
- [CLI guide](/docs/vue/cli) — `antdv design.md` and other offline commands
- [Customize Theme](/docs/vue/customize-theme) — theme Tokens and algorithms

---
Title: FAQ
URL: https://www.antdv-next.com/docs/vue/faq.md
---

## Components are not vertically aligned when placed in single row.

Try [Space](/components/space/) component to make them aligned.

## Why do third-party SVG icons have margin-block-end? {#faq-icon-margin-block-end}

Components such as Breadcrumb, Collapse, Segmented, Tabs, and Tag apply `display: inline-block`, `vertical-align: middle`, and `margin-block-end: 0.2em` to SVGs rendered directly in the corresponding icon slots to adjust their visual alignment with text.

In inline layout, an SVG has no text baseline, so its bottom edge participates in baseline alignment by default, which can make it appear too high next to text. `display: inline-block` keeps the icon in the inline flow, while `vertical-align: middle` aligns the center of its margin box to the parent's baseline plus half its x-height (the height of a lowercase x), making the alignment independent of the icon's height.

However, the center of the x-height is usually lower than the center of capital letters, so a small upward optical adjustment is needed. `margin-block-end: 0.2em` adds a margin below the icon. Once the margin box is centered, the icon itself moves up by about `0.1em`, bringing it closer to the center of capital letters in common fonts. The `0.2em` value approximates the difference between cap height and x-height in common fonts, and using `em` makes the adjustment scale with the font size.

These styles target directly rendered SVGs. Icons from `@antdv-next/icons` wrap their SVG in an extra container and use their own alignment styles. Different fonts, internal icon whitespace, or an icon's own `vertical-align` can affect the result. If an icon already handles its own alignment, or an icon-only use case does not need text alignment compensation, you can locally override the corresponding SVG with `margin-block-end: 0` and adjust its own styles as needed.

## My component's default locale is English, how do I switch back to Chinese? {#how-to-switch-the-default-locale-to-chinese}

Try wrapping your app with the [ConfigProvider](/components/config-provider#config-provider-demo-locale) component.

If the locale of date components still does not take effect, set `dayjs.locale('zh-cn')` and **check whether the `dayjs` version in your project matches the `dayjs` version required by `antdv-next`**.

## Date-related components locale is not working?

Please check whether you have imported dayjs locale correctly.

```jsx
import dayjs from 'dayjs';

import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');
```

Please check whether there are two versions of dayjs installed.

```jsx
npm ls dayjs
```

If you are using a mismatched version of dayjs with antdv-next dependent dayjs in your project. That would be a problem cause locale not working.

## Why is a DOM node still rendered for some empty content? {#vue-renderable}

antdv-next uses the internal `isRenderable` utility to determine whether a content wrapper DOM should be created. It is designed as a compatibility-oriented content presence check, not a validator for valid Vue nodes, and it does not recursively predict whether Vue will eventually produce visible content.

`isRenderable` treats only `null`, `undefined`, `false`, and the empty string `''` as having no content. All other values are treated as content. Therefore, when it controls whether a wrapper DOM is rendered:

| Value | `isRenderable` | Result |
| --- | --- | --- |
| `null`, `undefined`, `false`, `''` | `false` | Neither the wrapper DOM nor any content is rendered |
| `true` | `true` | The wrapper DOM is created, but Vue renders no text content for `true` |
| `0` | `true` | The wrapper DOM is created and `0` is rendered normally |
| Non-empty strings, other numbers, VNodes, etc. | `true` | The wrapper DOM is created and Vue handles the content |

Here, `false` is treated as an explicit no-content marker, while `true` means that content was provided. Although `true` itself produces no text node, the wrapper DOM is still created. Similarly, an empty array, an empty Fragment, or a component that eventually returns `null` passes the check. The number `0` is not mistaken for empty content and is rendered normally.

## Camelcase slots / render props (e.g. `#tagRender`) don't work when using the CDN (UMD) build?

This is a limitation of Vue **in-DOM templates**, not a component bug. When the template is written directly in the page's HTML (e.g. inside `<div id="app">`), the browser's HTML parser **lowercases** tag and attribute names — including slot names, so `#tagRender` reaches the component as `tagrender` instead of `tagRender`, and the camelCase slot never fires. This applies to every camelCase slot (`tagRender`, `maxTagPlaceholder`, `popupRender`, …), and writing `#tagrender` in lowercase does not help either. See the Vue docs on [in-DOM template parsing caveats](https://vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats).

Pick any of the following (the first two need no build tooling):

**Option 1: Write the template as a JS string** (recommended for CDN usage, smallest change). Instead of putting the markup in the page HTML, move it into the `template` option string, which Vue's runtime compiler parses case-sensitively:

```js
const App = {
  template: `
    <a-tree-select :tree-data="treeData" multiple style="width: 100%">
      <template #tagRender="tagProps">
        <span style="color: red">{{ tagProps.label }}</span>
      </template>
    </a-tree-select>
  `,
  setup() {
    return { treeData }
  },
}
Vue.createApp(App).use(window.antd).mount('#app')
```

**Option 2: Use a render function `h`**:

```js
const { h } = Vue
h(window.antd.TreeSelect, { treeData, multiple: true }, {
  tagRender: props => h('span', { style: 'color: red' }, props.label),
})
```

**Option 3: Use a Single-File Component (`.vue`) with a build tool** such as Vite / webpack. Recommended for real projects — the SFC compiler preserves case and is not affected by this limitation.

## Why do popups have no animation, or flash at the viewport edge before settling? {#popup-animation-missing-with-reduced-motion}

This is usually not a component issue but a global "reduced motion" style on the page. Many projects copy this CSS from boilerplate:

```css
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
```

It only takes effect when the operating system asks for reduced motion. This is an OS setting, not a browser one:

- Windows 11: Settings → Accessibility → Visual effects, when "Animation effects" is turned off (on Windows 10: Settings → Ease of Access → Display → "Show animations in Windows"). It is also often off over Remote Desktop, in virtual machines, and when the performance options are set to "Adjust for best performance".
- macOS: System Settings → Accessibility → Display, when "Reduce motion" is turned on. It is off by default.

That is why the problem looks like it "only happens on some Windows machines". Once the style applies:

1. `animation-duration` shortens the enter/leave animations (CSS keyframes) of popups such as Dropdown, Select and Tooltip to 0.01ms, so they look like they have no animation.
2. `transition-property` defaults to `all`, so `transition-duration` gives every element a transition it never declared, including the popup's position properties. Popups aligned to the right or bottom (e.g. a `bottomRight` dropdown or a `top` Tooltip) may then appear at the viewport edge in the first frame after opening and jump into place afterwards.

**How to check**: run `matchMedia('(prefers-reduced-motion: reduce)').matches` in the browser console. `true` means the OS asks for reduced motion. On another machine you can reproduce it by emulating `prefers-reduced-motion: reduce` in the Rendering panel of Chrome DevTools.

**How to fix**:

- If animations should look the same on every device, remove the global style and write reduced-motion rules only for the elements that need them. antdv-next components do not follow this OS setting themselves, which matches antd.
- If you want to keep the global rule but let popups animate as usual, exclude the popup root elements from it. If you changed `prefixCls`, replace `ant` with your prefix:

```css
@media (prefers-reduced-motion: reduce) {
  *:not(.ant-dropdown, .ant-select-dropdown, .ant-cascader-dropdown, .ant-picker-dropdown, .ant-tooltip, .ant-popover),
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
```

---
Title: For Agents
URL: https://www.antdv-next.com/docs/vue/for-agents.md
---

This page provides a ready-to-use prompt that helps any AI coding agent work effectively with antdv-next.

## Copy This Prompt {#copy-prompt}

Copy it into your Agent conversation or automation workflow.

```text
This version may contain breaking changes. Its component APIs, conventions, and file structure may differ from those in your training data. Before writing any code, read https://antdv-next.com/docs/vue/for-agents.md and https://raw.githubusercontent.com/antdv-next/cli/main/skills/antdv/SKILL.md, pay attention to deprecation notices, and follow the instructions for using antdv-next.

If you can install skills, run:
npx skills add antdv-next/cli
```

## What the Agent Gets {#what-the-agent-gets}

### CLI — Offline Knowledge and Project Tools {#cli}

[`@antdv-next/cli`](https://github.com/antdv-next/cli) installs all metadata with the package: every Prop, Event, Slot, Token, Demo, and Changelog entry can be queried in milliseconds, completely offline.

```bash
npm install -g @antdv-next/cli
```

```bash
antdv init                           # Initialize a project
antdv list                           # List all components and version information
antdv info Button                    # Component props, events, slots, types, and defaults
antdv doc Button                     # Complete Markdown documentation
antdv demo Select basic              # Runnable demo source code
antdv token DatePicker               # Design Token values
antdv design.md                      # Design language documentation (design.md)
antdv semantic Table                 # class / styles structure
antdv changelog 1.2.0 1.0.0 Select   # Compare API differences across versions
antdv doctor                         # Diagnose project configuration issues
antdv env                            # Collect environment information for bug reports
antdv usage ./src                    # Analyze antdv-next imports in a project
antdv lint ./src                     # Check deprecated APIs and best practices
antdv migrate 1 2                    # v1-to-v2 migration guide
antdv migrate 1 2 --apply ./src      # Generate an Agent migration prompt
antdv mcp                            # Start the MCP server for IDE integration
antdv setup --client claude          # Connect an AI Agent through MCP/Skill
antdv upgrade                        # Upgrade the CLI to the latest version
```

Complete reference: [CLI](/docs/vue/cli)

### design.md — Design Language Context {#design-md}

[design.md](https://antdv-next.com/design.md) is intended for AI design tools. It describes the visual language, component patterns, and theme Tokens of the default antdv-next Light theme.

Complete reference: [design.md](/docs/vue/design-md)

### MCP Server — IDE Integration {#mcp}

The CLI can also run as an MCP server. It provides seven tools and supports integration with IDEs such as Claude Code, Cursor, and VS Code.

```json
{
  "mcpServers": {
    "antdv": {
      "command": "npx",
      "args": ["-y", "@antdv-next/cli", "mcp"]
    }
  }
}
```

Complete reference: [MCP Server](/docs/vue/mcp)

### LLMs.txt — Structured Documentation for LLMs {#llms-txt}

Inject the complete component documentation directly into the AI context:

| File | Description |
| --- | --- |
| [llms.txt](https://antdv-next.com/llms.txt) | Navigation file containing links to all documentation and components |
| [design.md](https://antdv-next.com/design.md) | Design language description for AI design tools |
| [llms-full.txt](https://antdv-next.com/llms-full.txt) | Complete component documentation in English |
| [llms-full-cn.txt](https://antdv-next.com/llms-full-cn.txt) | Complete component documentation in Chinese |

You can also retrieve documentation for an individual component at `https://antdv-next.com/components/<name>.md`.

Complete references: [LLMs.txt](/docs/vue/llms) and [design.md](/docs/vue/design-md)

---
Title: Getting Started
URL: https://www.antdv-next.com/docs/vue/getting-started.md
---

Antdv Next is dedicated to providing a **good development experience** for programmers. Before starting, it is recommended to learn [Vue](https://vuejs.org/) first, and correctly install and configure [Node.js](https://nodejs.org/) v20 or above.

The official guide assumes that you have intermediate knowledge about HTML, CSS, and JavaScript, and have fully mastered the correct development approach with the Vue ecosystem. If you are just starting to learn front-end or Vue, it may not be the best idea to use the UI framework as your first step.

---

## Your First Example {#first-example}

Here is a simple online StackBlitz demo of an Antdv Next component to show the usage of Antdv Next.

<iframe src="https://stackblitz.com/edit/vitejs-vite-stk21cho?embed=1&file=src%2FApp.vue&hideExplorer=1&hideNavigation=1" width="100%" height="500px" frameborder="0"></iframe>

Follow the steps below to play around with Antdv Next yourself:

### 1. Create a StackBlitz {#create-stackblitz}

Visit [Antdv Next Start Template](https://stackblitz.com/edit/vitejs-vite-stk21cho?file=src%2FApp.vue) to create an online StackBlitz example -- don't forget to save to create a new instance.

### 2. Use a Component {#use-antdv-next-component}

If you are working in a local Vue project, install `antdv-next` first. The StackBlitz created above already includes this dependency.

<InstallDependencies npm='$ npm install antdv-next --save' yarn='$ yarn add antdv-next' pnpm='$ pnpm install antdv-next --save' bun='$ bun add antdv-next'></InstallDependencies>

Replace the contents of `App.vue` with the following code. As you can see, you can directly use `antdv-next` components with the SFC approach.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
</script>

<template>
  <a-date-picker v-model:value="value" need-confirm />
</template>
```

### 3. Explore More Components {#explore-components}

You can view the list of components in the side menu of the Components page, such as the [Alert](/components/alert) component. Plenty of examples are also provided in the component pages and API documentation at the bottom.

Find the first example in the code demo section and click the "Show Code" icon to expand the source code. You can copy the code directly to your StackBlitz to try and adjust it yourself.

## Import on Demand {#import-on-demand}

### Tree Shaking Import

`antdv-next` supports tree shaking of ES modules by default, so using `import { Button } from 'antdv-next';` would drop js code you didn't use.

### Auto Import with `unplugin-vue-components`

You can use [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) to achieve automatic on-demand import.

We provide a library adapter `@antdv-next/auto-import-resolver`.

#### Installation

<InstallDependencies
  npm='$ npm i @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D'
  yarn='$ yarn add @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D'
  pnpm='$ pnpm add @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D'
  bun='$ bun add @antdv-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D'
/>

#### Usage

> This section only introduces usage with Vite. For more details, please refer to [@antdv-next/auto-import-resolver](https://www.npmjs.com/package/@antdv-next/auto-import-resolver).

```ts
import { AntdvNextResolver } from '@antdv-next/auto-import-resolver'
// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [AntdvNextResolver()],
    }),
  ],
})
```

---
Title: Internationalization
URL: https://www.antdv-next.com/docs/vue/i18n.md
---

The default language of `antdv-next` is currently English. If you wish to use other languages, follow the instructions below.

## ConfigProvider

`antdv-next` provides a Vue Component [ConfigProvider](/components/config-provider) for configuring antd locale text globally.

```vue
<script lang="ts" setup>
import frFR from 'antdv-next/locale/fr_FR'
</script>

<template>
  <a-config-provider :locale="frFR">
    <App />
  </a-config-provider>
</template>
```

You can see the complete configuration here: [ConfigProvider](/components/config-provider).

Note: `fr_FR` is the filename, the following table also follows the same rules.

The following languages are currently supported:

### Supported languages:

| Language                 | Filename |
| ------------------------ | -------- |
| Arabic                   | ar_EG    |
| Azerbaijani              | az_AZ    |
| Bulgarian                | bg_BG    |
| Bangla (Bangladesh)      | bn_BD    |
| Belarusian               | by_BY    |
| Catalan                  | ca_ES    |
| Czech                    | cs_CZ    |
| Danish                   | da_DK    |
| German                   | de_DE    |
| Greek                    | el_GR    |
| English (United Kingdom) | en_GB    |
| English                  | en_US    |
| Spanish                  | es_ES    |
| Spanish (United States)  | es_US    |
| Basque                   | eu_ES    |
| Estonian                 | et_EE    |
| Persian                  | fa_IR    |
| Finnish                  | fi_FI    |
| French (Belgium)         | fr_BE    |
| French (Canada)          | fr_CA    |
| French (France)          | fr_FR    |
| Irish (Ireland)          | ga_IE    |
| Galician (Spain)         | gl_ES    |
| Hebrew                   | he_IL    |
| Hindi                    | hi_IN    |
| Croatian                 | hr_HR    |
| Hungarian                | hu_HU    |
| Armenian                 | hy_AM    |
| Indonesian               | id_ID    |
| Italian                  | it_IT    |
| Icelandic                | is_IS    |
| Japanese                 | ja_JP    |
| Georgian                 | ka_GE    |
| Kurdish (Kurmanji)       | kmr_IQ   |
| Kannada                  | kn_IN    |
| Kazakh                   | kk_KZ    |
| Khmer                    | km_KH    |
| Korean                   | ko_KR    |
| Lithuanian               | lt_LT    |
| Latvian                  | lv_LV    |
| Macedonian               | mk_MK    |
| Malayalam (India)        | ml_IN    |
| Marathi (India)          | mr_IN    |
| Mongolian                | mn_MN    |
| Malay (Malaysia)         | ms_MY    |
| Burmese                  | my_MM    |
| Norwegian                | nb_NO    |
| Nepali                   | ne_NP    |
| Dutch (Belgium)          | nl_BE    |
| Dutch                    | nl_NL    |
| Polish                   | pl_PL    |
| Portuguese (Brazil)      | pt_BR    |
| Portuguese               | pt_PT    |
| Romanian                 | ro_RO    |
| Russian                  | ru_RU    |
| Sinhalese / Sinhala      | si_LK    |
| Slovak                   | sk_SK    |
| Serbian                  | sr_RS    |
| Slovenian                | sl_SI    |
| Albanian                 | sq_AL    |
| Swedish                  | sv_SE    |
| Tamil                    | ta_IN    |
| Thai                     | th_TH    |
| Turkish                  | tr_TR    |
| Turkmen                  | tk_TK    |
| Urdu (Pakistan)          | ur_PK    |
| Ukrainian                | uk_UA    |
| Uzbek(latn)              | uz_UZ    |
| Vietnamese               | vi_VN    |
| Chinese (Simplified)     | zh_CN    |
| Chinese (Traditional)    | zh_HK    |
| Chinese (Traditional)    | zh_TW    |

See more usage at [ConfigProvider](/components/config-provider).

---
Title: LLMs.txt
URL: https://www.antdv-next.com/docs/vue/llms.md
---

This guide explains how to enable AI tools like Cursor, Windsurf, and Claude to better understand Antdv Next.

## What is LLMs.txt?

We support [LLMs.txt](https://llmstxt.org/) files for making the Antdv Next documentation available to large language models (LLMs). This feature helps AI tools better understand our component library, its APIs, and usage patterns.

## Available Routes

We provide several LLMs.txt routes to help AI tools access our documentation:

- [llms.txt](https://antdv-next.com/llms.txt) - Contains a structured overview of all components and their documentation links
- [llms-full.txt](https://antdv-next.com/llms-full.txt) - Provides comprehensive documentation including implementation details and examples

## Usage with AI Tools

### Cursor

Use the `@Docs` feature in Cursor to include the LLMs.txt files in your project. This helps Cursor provide more accurate code suggestions and documentation for Antdv Next components.

[Read more about @Docs in Cursor](https://docs.cursor.com/context/@-symbols/@-docs)

### Windsurf

Reference the LLMs.txt files using `@` or in your `.windsurf/rules` files to enhance Windsurf's understanding of Antdv Next components.

[Read more about Windsurf Memories](https://docs.windsurf.com/windsurf/cascade/memories)

### Claude Code

In Claude Code, add `LLMs.txt` to the workspace Knowledge Base (Docs / Context Files) configuration. This allows the file to be referenced during code completion and explanation, improving understanding of Antdv Next components.

[Learn more about Claude Code document context configuration](https://code.claude.com/docs)

### Gemini CLI

In Gemini CLI, you can specify the `LLMs.txt` file path with the `--context` parameter or in `.gemini/config.json`, enabling Gemini to reference the document when answering or generating code.

[Learn more about Gemini CLI context configuration](https://ai.google.dev/gemini-api/docs?hl=en)

### Trae

In Trae, place the `LLMs.txt` file into the project’s knowledge sources and enable referencing in the settings. This allows Trae to better support Antdv Next components when generating or analyzing code.

[Learn more about Trae knowledge sources](https://trae.ai/docs)

### Qoder

In Qoder, you can add `LLMs.txt` as an external knowledge file in `.qoder/config.yml`, or temporarily reference it in a conversation with `@docs LLMs.txt`, enhancing support for Antdv Next components.

[Learn more about Qoder configuration](https://docs.qoder.com/)

### Other AI Tools

Any AI tool that supports LLMs.txt can use these routes to better understand Antdv Next. Simply point your tool to any of the routes above.

---
Title: MCP Server
URL: https://www.antdv-next.com/docs/vue/mcp.md
---

This guide explains how to use antdv-next with AI tools through the Model Context Protocol (MCP).

## What is MCP? {#what-is-mcp}

[Model Context Protocol (MCP)](https://modelcontextprotocol.io/) is an open protocol that enables AI models to interact with external tools and data sources. Through MCP, AI assistants can access up-to-date documentation, code examples, and API references.

## Official MCP Server {#official-mcp-server}

After installing [`@antdv-next/cli`](https://github.com/antdv-next/cli), you can start the official MCP server with the `antdv mcp` command. It provides seven tools and supports IDE integration.

### Tools {#tools}

| Tool | Description |
| --- | --- |
| `antdv_list` | List available components |
| `antdv_info` | Get component API specifications |
| `antdv_doc` | Get complete documentation |
| `antdv_demo` | Get runnable code examples |
| `antdv_token` | Query Design Token values |
| `antdv_design_md` | Get the design language document |
| `antdv_semantic` | Inspect the DOM structure and styling hooks |

### Configuration {#configuration}

Add the MCP server to your IDE configuration:

```json
{
  "mcpServers": {
    "antdv": {
      "command": "npx",
      "args": ["-y", "@antdv-next/cli", "mcp"]
    }
  }
}
```

If you have installed the CLI globally (`npm i -g @antdv-next/cli`), you can also use:

```json
{
  "mcpServers": {
    "antdv": {
      "command": "antdv",
      "args": ["mcp"]
    }
  }
}
```

You can specify an antdv-next version with an additional option:

```json
{
  "mcpServers": {
    "antdv": {
      "command": "npx",
      "args": ["-y", "@antdv-next/cli", "mcp", "--ver", "1.5.0"]
    }
  }
}
```

You can also let the CLI write the configuration for a supported client automatically:

```bash
antdv setup --client claude
antdv setup --client cursor --mode both
antdv setup --client vscode --write-instructions
antdv setup --client codex
```

Supported clients include `claude`, `cursor`, `vscode`, and `codex`. Available setup modes are `mcp`, `skill`, and `both`.

## Usage with AI Tools {#usage-with-ai-tools}

| Tool | Instructions | Configuration |
| --- | --- | --- |
| **Cursor** | Add it to `.cursor/mcp.json` or go to Settings → Features → MCP. [Documentation](https://docs.cursor.com/zh/context/@-symbols/@-docs) | `{ "mcpServers": { "antdv": { "command": "npx", "args": ["-y", "@antdv-next/cli", "mcp"] } } }` |
| **Windsurf** | Add it to `~/.codeium/windsurf/mcp_config.json`. [Documentation](https://docs.windsurf.com/windsurf/cascade/memories) | `{ "mcpServers": { "antdv": { "command": "npx", "args": ["-y", "@antdv-next/cli", "mcp"] } } }` |
| **Claude Code** | Add it to `mcpServers` in the Claude settings. [Documentation](https://docs.anthropic.com/en/docs/claude-code) | `{ "mcpServers": { "antdv": { "command": "npx", "args": ["-y", "@antdv-next/cli", "mcp"] } } }` |
| **VS Code** | Add it to `.vscode/mcp.json` or go to Settings → MCP. [Documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) | `{ "servers": { "antdv": { "command": "npx", "args": ["-y", "@antdv-next/cli", "mcp"] } } }` |
| **Codex** | Add it to `.codex/mcp.json`. [Documentation](https://github.com/openai/codex) | `{ "mcpServers": { "antdv": { "command": "npx", "args": ["-y", "@antdv-next/cli", "mcp"] } } }` |
| **Gemini CLI** | Add it to the MCP configuration. [Documentation](https://ai.google.dev/gemini-api/docs?hl=en) | `{ "mcpServers": { "antdv": { "command": "npx", "args": ["-y", "@antdv-next/cli", "mcp"] } } }` |
| **Trae** | Add it in the MCP settings. [Documentation](https://www.trae.ai/docs) | `{ "mcpServers": { "antdv": { "command": "npx", "args": ["-y", "@antdv-next/cli", "mcp"] } } }` |
| **Qoder** | Add it to the MCP configuration. [Documentation](https://docs.qoder.com/) | `{ "mcpServers": { "antdv": { "command": "npx", "args": ["-y", "@antdv-next/cli", "mcp"] } } }` |
| **Neovate Code** | Configure MCP in Settings or describe the task in a prompt. [Documentation](https://github.com/neovateai/neovate-code) | `{ "mcpServers": { "antdv": { "command": "npx", "args": ["-y", "@antdv-next/cli", "mcp"] } } }` |

## Alternative: Use LLMs.txt {#alternative-llms-txt}

If your AI tool does not support MCP, you can use our [LLMs.txt](/docs/vue/llms) resources instead. We provide:

- [llms.txt](https://antdv-next.com/llms.txt) - A structured overview of all components
- [llms-full.txt](https://antdv-next.com/llms-full.txt) - Complete documentation with examples

## Learn More {#learn-more}

- [Model Context Protocol documentation](https://modelcontextprotocol.io/)
- [Antdv Next CLI](/docs/vue/cli)
- [@antdv-next/cli GitHub repository](https://github.com/antdv-next/cli)
- [Antdv Next LLMs.txt guide](/docs/vue/llms)

---
Title: Migrating from Ant Design Vue to Antdv Next
URL: https://www.antdv-next.com/docs/vue/migration-antdv-next.md
---

This document will help you migrate from `ant-design-vue` to `antdv-next`.

`antdv-next` originally implemented some compatibility measures for `ant-design-vue`, but there are still some `API` incompatibilities that cannot be directly adapted. Before upgrading, you need to ensure that your environment meets the new requirements.

## Upgrade Preparation

1. Please upgrade to the latest version of `ant-design-vue@4` to ensure you are using the latest antdv `API`.
2. It is recommended to upgrade Vue 3 to version `3.5.x`.

```shell
pnpm add antdv-next

# or
npm install antdv-next

# or
yarn add antdv-next
```

## What are the Incompatible Changes

### Replacing @ant-design/icons-vue

-  ⚠️ **Important:** `@ant-design/icons-vue` is not adapted for `antdv-next`, which may cause theme switching and `layer` mode to not work properly. Please ensure you install and use `@antdv-next/icons`.

```shell
pnpm add @antdv-next/icons
# or
npm install @antdv-next/icons
# or
yarn add @antdv-next/icons
```

### DOM Structure Adjustments

- antdv-next has upgraded and optimized the DOM structure of many components to improve maintainability and consistency.
- For most projects that normally use `ant-design-vue` styles, this will not have a significant impact.
- ⚠️ If your project has custom styles targeting internal DOM nodes of components (such as relying on specific selectors or hierarchical structures), you may need to manually check and adjust styles after upgrading.

### API Adjustments

⚠️ The following APIs have been marked as **Deprecated**. Although these properties can still be used currently, the console will show deprecation warnings, and they will be removed in 2.0. To maintain code maintainability and compatibility, **it is recommended to migrate to the corresponding replacement properties as soon as possible**.

- `Alert`
    - `closeText` deprecated, changed to `closable.closeIcon`.
    - `message` deprecated, changed to `title`.

- `Anchor`
    - `Anchor children` deprecated, changed to `items`.

- `AutoComplete`
    - `dropdownMatchSelectWidth` deprecated, changed to `popupMatchSelectWidth`.
    - `dropdownStyle` deprecated, changed to `styles.popup.root`.
    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
    - `popupClassName` deprecated, changed to `classes.popup.root`.
    - `dropdownRender` deprecated, changed to `popupRender`.
    - `onDropdownVisibleChange` deprecated, changed to `onOpenChange`.
    - `dataSource` deprecated, changed to `options`.

- `Avatar.Group`
    - `maxCount` deprecated, changed to `:max="{count: number}"`.
    - `maxStyle` deprecated, changed to `:max="{style: CSSProperties}"`.
    - `maxPopoverPlacement` deprecated, changed to `:max="{popover: PopoverProps}"`.
    - `maxPopoverTrigger` deprecated, changed to `:max="{popover: PopoverProps}"`.

- `BackTop`
    - `FloatButton.BackTop` deprecated, changed to `FloatButton.BackTop`.

- `Breadcrumb`
    - `routes` deprecated, changed to `items`.
    - `routes.children` deprecated, changed to `items.menu`.
    - `itemRender="props"` deprecated, changed to `itemRender="item"`.
    - `Breadcrumb.Item` and `Breadcrumb.Separator` deprecated, changed to `items`.

- `Button.Group`
    - `BackTop` deprecated, changed to `FloatButton.BackTop`.

- `Button`
    - `iconPosition` deprecated, changed to `iconPlacement`.

- `Calendar`
    - `dateFullCellRender` deprecated, changed to `fullCellRender`.
    - `dateCellRender` deprecated, changed to `cellRender`.
    - `monthFullCellRender` deprecated, changed to `fullCellRender`.
    - `monthCellRender` deprecated, changed to `cellRender`.

- `Card`
    - `headStyle` deprecated, changed to `styles.header`.
    - `bodyStyle` deprecated, changed to `styles.body`.
    - `bordered` deprecated, changed to `variant`.

- `Carousel`
    - `dotPosition` deprecated, changed to `dotPlacement`.

- `Cascader`
    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
    - `dropdownStyle` deprecated, changed to `styles.popup.root`.
    - `dropdownRender` deprecated, changed to `popupRender`.
    - `dropdownMenuColumnStyle` deprecated, changed to `styles.popup.listItem`.
    - `popupMenuColumnStyle` deprecated, changed to `styles.popup.listItem`.
    - `onDropdownVisibleChange` deprecated, changed to `onOpenChange`.
    - `onPopupVisibleChange` deprecated, changed to `onOpenChange`.
    - `bordered` deprecated, changed to `variant`.

- `Collapse`
    - `destroyInactivePanel` deprecated, changed to `destroyOnHidden`.
    - `expandIconPosition` deprecated, changed to `expandIconPlacement`.

- `Collapse.Panel`
    - `disabled` deprecated, changed to `collapsible="disabled"`.

- `ConfigProvider`
    - `dropdownMatchSelectWidth` deprecated, changed to `popupMatchSelectWidth`.

- `DatePicker.RangePicker`
    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
    - `popupClassName` deprecated, changed to `classes.popup.root`.
    - `popupStyle` deprecated, changed to `styles.popup.root`.
    - `bordered` deprecated, changed to `variant`.
    - `onSelect` deprecated, changed to `onCalendarChange`.

- `DatePicker`
    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
    - `popupClassName` deprecated, changed to `classes.popup.root`.
    - `popupStyle` deprecated, changed to `styles.popup.root`.
    - `bordered` deprecated, changed to `variant`.
    - `onSelect` deprecated, changed to `onCalendarChange`.

- `Descriptions`
    - `labelStyle` deprecated, changed to `styles.label`.
    - `contentStyle` deprecated, changed to `styles.content`.

- `Divider`
    - `type` deprecated, changed to `orientation`.
    - `orientationMargin` deprecated, changed to `styles.content.margin`.

- `Drawer`
    - `headerStyle` deprecated, changed to `styles.header`.
    - `bodyStyle` deprecated, changed to `styles.body`.
    - `footerStyle` deprecated, changed to `styles.footer`.
    - `contentWrapperStyle` deprecated, changed to `styles.wrapper`.
    - `destroyOnClose` deprecated, changed to `destroyOnHidden`.
    - `maskStyle` deprecated, changed to `styles.mask`.
    - `drawerStyle` deprecated, changed to `styles.section`.
    - `destroyInactivePanel` deprecated, changed to `destroyOnHidden`.
    - `width` deprecated, changed to `size`.
    - `height` deprecated, changed to `size`.

- `Dropdown.Button`
    - `Dropdown.Button` deprecated, changed to `Space.Compact + Dropdown + Button`.

- `Dropdown`
    - `dropdownRender` deprecated, changed to `popupRender`.
    - `destroyPopupOnHide` deprecated, changed to `destroyOnHidden`.
    - `overlay(v-slot)` deprecated, changed to `popupRender`.
    - `overlayClassName` deprecated, changed to `classes.root`.
    - `overlayStyle` deprecated, changed to `styles.root`.
    - `placement: xxxCenter` deprecated, changed to `placement: xxx`.
    - `<Dropdown class="xx"></Dropdown>` deprecated, changed to `<Dropdown><span class="xx"></span></Dropdown>`.

- `Empty`
    - `imageStyle` deprecated, changed to `styles.image`.

- `FloatButton`
    - `description` deprecated, changed to `content`.

- `Image`
    - `wrapperStyle` deprecated, changed to `styles.root`.
    - `visible` deprecated, changed to `open`.
    - `onVisibleChange` deprecated, changed to `onOpenChange`.
    - `maskClassName` deprecated, changed to `classes.cover`.
    - `rootClassName` deprecated, changed to `classes.root`.
    - `toolbarRender` deprecated, changed to `actionsRender`.

- `Input`
    - `addonAfter` deprecated, changed to `SpaceCompact`.
    - `addonBefore` deprecated, changed to `SpaceCompact`.

- `Input.Group`
    - `Input.Group` deprecated, changed to `Space.Compact`.

- `InputNumber`
    - `bordered` deprecated, changed to `variant`.
    - `addonAfter` deprecated, changed to `Space.Compact`.
    - `addonBefore` deprecated, changed to `Space.Compact`.

- `Mentions`
    - `Mentions.Option` deprecated, changed to `options`.

- `Menu`
    - `value` deprecated, changed to `key`.
    - `children` deprecated, changed to `items`.
    - `select` event, changed to `(value: string | number, option: Option) => void`.

- `Modal`
    - `bodyStyle` deprecated, changed to `styles.body`.
    - `maskStyle` deprecated, changed to `styles.mask`.
    - `destroyOnClose` deprecated, changed to `destroyOnHidden`.

- `Notification`
    - `btn` deprecated, changed to `actions`.
    - `message` deprecated, changed to `title`.

- `Progress`
    - `strokeWidth` deprecated, changed to `size`.
    - `width` deprecated, changed to `size`.
    - `trailColor` deprecated, changed to `railColor`.
    - `gapPosition` deprecated, changed to `gapPlacement`.

- `Select`
    - `dropdownMatchSelectWidth` deprecated, changed to `popupMatchSelectWidth`.
    - `dropdownStyle` deprecated, changed to `styles.popup.root`.
    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
    - `popupClassName` deprecated, changed to `classes.popup.root`.
    - `dropdownRender` deprecated, changed to `popupRender`.
    - `onDropdownVisibleChange` deprecated, changed to `onOpenChange`.
    - `bordered` deprecated, changed to `variant`.

- `Slider`
    - `tooltipPrefixCls` deprecated, changed to `tooltip.prefixCls`.
    - `getTooltipPopupContainer` deprecated, changed to `tooltip.getPopupContainer`.
    - `tipFormatter` deprecated, changed to `tooltip.formatter`.
    - `tooltipPlacement` deprecated, changed to `tooltip.placement`.
    - `tooltipVisible` deprecated, changed to `tooltip.open`.

- `SpaceCompact`
    - `direction` deprecated, changed to `orientation`.

- `Space`
    - `direction` deprecated, changed to `orientation`.
    - `split` deprecated, changed to `separator`.

- `Spin`
    - `tip` deprecated, changed to `description`.
    - `wrapperClassName` deprecated, changed to `classes.root`.

- `Splitter`
    - `layout` deprecated, changed to `orientation`.

- `Countdown`
    - `<a-statistic-countdown />` deprecated, changed to `<a-statistic-timer type="countdown" />`.

- `Statistic`
    - `valueStyle` deprecated, changed to `styles.content`.

- `Steps`
    - `labelPlacement` deprecated, changed to `titlePlacement`.
    - `progressDot` deprecated, changed to `type="dot"`.
    - `direction` deprecated, changed to `orientation`.
    - `items.description` deprecated, changed to `items.content`.

- `Table`
    - `pagination.position` deprecated, changed to `pagination.placement`.
    - `onSelectInvert` deprecated, changed to `onChange`.
    - `filterDropdownOpen` deprecated, changed to `filterDropdownProps.open`.
    - `onFilterDropdownOpenChange` deprecated, changed to `filterDropdownProps.onOpenChange`.
    - `filterCheckall` deprecated, changed to `locale.filterCheckAll`.
    - `customRender` deprecated, changed to `render`.
    - `customRow` deprecated, changed to `onRow`.
    - `onResizeColumn` deprecated, changed to `onResize`.
    - `customFilterIcon` deprecated, changed to `filterIcon`.
    - `customFilterDropdown` deprecated, changed to `filterDropdown`.
    - `customCell` deprecated, changed to `onCell`.

- `Tabs`
    - `popupClassName` deprecated, changed to `classes.popup`.
    - `tabPosition` deprecated, changed to `tabPlacement`.
    - `destroyInactiveTabPane` deprecated, changed to `destroyOnHidden`.
    - `Tabs.TabPane` deprecated, changed to `items`.

- `Tag`
    - `bordered={false}` deprecated, changed to `variant="filled"`.
    - `color="xxx-inverse"` deprecated, changed to `variant="solid"`.

- `TimePicker`
    - `addon` deprecated, changed to `renderExtraFooter`.

- `Timeline`
    - `Timeline.Item` deprecated, changed to `items`.
    - `pending` deprecated, changed to `items`.
    - `pendingDot` deprecated, changed to `items`.
    - `mode=left|right` deprecated, changed to `mode=start|end`.

- `Tooltip`
    - `overlayStyle` deprecated, changed to `styles.root`.
    - `overlayInnerStyle` deprecated, changed to `styles.container`.
    - `overlayClassName` deprecated, changed to `classes.root`.
    - `destroyTooltipOnHide` deprecated, changed to `destroyOnHidden`.

- `Popover`
    - `overlayClassName` deprecated, changed to `classes.container`.

- `Transfer`
    - `listStyle` deprecated, changed to `styles.section`.
    - `operationStyle` deprecated, changed to `styles.actions`.
    - `operations` deprecated, changed to `actions`.

- `TreeSelect`
    - `dropdownMatchSelectWidth` deprecated, changed to `popupMatchSelectWidth`.
    - `dropdownStyle` deprecated, changed to `styles.popup.root`.
    - `dropdownClassName` deprecated, changed to `classes.popup.root`.
    - `popupClassName` deprecated, changed to `classes.popup.root`.
    - `dropdownRender` deprecated, changed to `popupRender`.
    - `onDropdownVisibleChange` deprecated, changed to `onOpenChange`.
    - `bordered` deprecated, changed to `variant`.

- `Tree`
    - `tree.dataRef` deprecated, changed to `tree`.
    - `treeData.title(v-slot)` deprecated, changed to `titleRender`.

- `notification`
    - `message` deprecated, changed to `title`.
    - `btn` deprecated, changed to `actions`.
    - `close` deprecated, changed to `destroy`.

### Overlay Components (Modal, Drawer, etc.)

- Added `mask` overlay functionality with blur effect support.
- Enabled by default, can be disabled with the following configuration:

```vue
<template>
  <a-config-provider
    :modal="{
      mask: {
        blur: false,
      },
    }"
    :drawer="{
      mask: {
        blur: false,
      },
    }"
  >
    <a-modal />
    <a-drawer />
  </a-config-provider>
</template>
```

### Tag Margin Adjustment

`antdv-next` removes the default margin at the end of the `Tag` component (previously, Tag had an additional `margin-inline-end` at the end). If your layout or custom styles depend on this behavior, please use the `tag.styles` option in `ConfigProvider` to supplement it:

```vue
<template>
  <a-config-provider
    :tag="{
      styles: {
        root: {
          marginInlineEnd: '8px',
        },
      },
    }"
  >
    <a-tag>Tag A</a-tag>
    <a-tag>Tag B</a-tag>
    <a-tag>Tag C</a-tag>
  </a-config-provider>
</template>
```

### Tooltip Adjustments

The `overlay` slot has been removed. Use `popupRender` instead.

### Form Adjustments

- Removed `a-form-rest` to cancel passive collection of components. By default, we do not actively collect components inside `a-form-item` as form fields, and you need to manually specify them through the `name` attribute.

## Upgrade Impact Investigation Checklist

To ensure that your project runs normally after upgrading to `antdv-next`, please refer to the following checklist and confirm each item:

- **Vue Version**: It is recommended to use `vue@3.5.x`.
- **@ant-design/icons Upgrade**: Confirm that the `@ant-design/icons` version has been upgraded to `@antdv-next/icons` to match `antdv-next`.
- **Browser Compatibility**: Confirm that the target user browsers are modern browsers and support CSS variables.
- **Custom Style Check**: If you have CSS customizations targeting internal DOM nodes of components, verify that they still work under `antdv-next`.
- **Overlay Mask Configuration**: Check if Modal, Drawer, and other overlay components need to disable the `mask` blur effect. If not needed, keep the default.
- **Build Tool Configuration**: Confirm that there are no errors after the upgrade build, and that CSS variables and CSS-in-JS work properly.
- **Console Warnings**: Run the application and observe the console, handling all `legacy API` prompts.

## Encountering Issues

If you encounter problems during the upgrade process, please provide feedback on [GitHub issues](https://github.com/antdv-next/antdv-next/issues/). We will respond as soon as possible and improve the relevant documentation.

---
Title: Nuxt
URL: https://www.antdv-next.com/docs/vue/nuxt.md
---

`@antdv-next/nuxt` is the official Nuxt module for `antdv-next`.

## Version Requirements

- Nuxt >= 4.0.0
- Vue >= 3.5.0
- antdv-next >= 1.0.4
- @antdv-next/icons >= 1.0.1

## Installation

```shell
npx nuxi@latest module add @antdv-next/nuxt
```

Or install dependencies manually:

<InstallDependencies
  npm='$ npm i -D @antdv-next/nuxt antdv-next @antdv-next/icons'
  yarn='$ yarn add -D @antdv-next/nuxt antdv-next @antdv-next/icons'
  pnpm='$ pnpm add -D @antdv-next/nuxt antdv-next @antdv-next/icons'
  bun='$ bun add -D @antdv-next/nuxt antdv-next @antdv-next/icons'
/>

## Configuration

```ts
export default defineNuxtConfig({
  modules: ['@antdv-next/nuxt'],
  antd: {
    icon: true,
  },
})
```

The module config key is `antd`.

## Usage

```vue
<template>
  <a-button type="primary">Primary</a-button>
  <HomeOutlined />
</template>
```

By default, components are registered with prefix `A`, for example `AButton`, `ATable`, and `AQrcode`.

## Styles

Add reset styles:

```ts
export default defineNuxtConfig({
  css: ['antdv-next/dist/reset.css'],
})
```

If you use zero-runtime theme mode (recommended), also include:

```ts
export default defineNuxtConfig({
  css: [
    'antdv-next/dist/reset.css',
    'antdv-next/dist/antd.css',
  ],
})
```

## Options

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `boolean` | `false` | Enable auto-registration for `@antdv-next/icons`. |
| `prefix` | `string` | `'A'` | Prefix for all auto-registered components. |
| `include` | `ComponentName[]` | `undefined` | Only register listed components. Higher priority than `exclude`. |
| `exclude` | `ComponentName[]` | `undefined` | Exclude listed components when `include` is not set. |
| `includeIcons` | `IconName[]` | `undefined` | Only register listed icons. Higher priority than `excludeIcons`. |
| `excludeIcons` | `IconName[]` | `undefined` | Exclude listed icons when `includeIcons` is not set. |

Notes:

- `includeIcons` and `excludeIcons` work only when `icon` is enabled.
- `ComponentName` and `IconName` are exported from the module type definitions.

## Full Example

`assets/entry.css`

```css
@import "antdv-next/dist/reset.css";

```

```ts
export default defineNuxtConfig({
  modules: ['@antdv-next/nuxt'],
  css: ['~/assets/entry.css'],
  antd: {
    prefix: 'A',
    icon: true,
    include: ['Button', 'Table', 'QRCode'],
    includeIcons: ['HomeOutlined', 'SearchOutlined'],
  },
})
```

---
Title: Secondary Development
URL: https://www.antdv-next.com/docs/vue/secondary-development.md
---

If you want to build your own business component library, documentation site, and demo system on top of `antdv-next`, we provide a ready-to-use starter repository: [docs-base](https://github.com/antdv-next/docs-base).

This template is more than a basic scaffold. It combines component source code, documentation pages, a Markdown demo pipeline, and library build outputs in one project, making it suitable for teams that want to evolve and publish internal or public component libraries continuously.

## Template Repository

- GitHub: [https://github.com/antdv-next/docs-base](https://github.com/antdv-next/docs-base)
- Chinese README: [README.zh-CN.md](https://github.com/antdv-next/docs-base/blob/main/README.zh-CN.md)
- English README: [README.md](https://github.com/antdv-next/docs-base/blob/main/README.md)

## When to use it

Use this template when you want to:

- build a business-oriented component library based on `antdv-next`
- keep component source, demos, and documentation in one place
- ship typed Vue 3 components
- write docs in Markdown while embedding real Vue demos
- maintain Chinese and English docs with the same structure
- create your own theme system instead of inheriting a fixed visual style

## What is included

- Vue 3 + TypeScript + Vite
- `antdv-next` as the UI foundation
- preserved module output, bundled ESM, and UMD builds
- generated type declarations
- a custom Markdown-to-Vue docs pipeline
- live demo rendering, source extraction, and hot updates
- UnoCSS, Vue Router, Pinia, and Vue I18n integration
- sample components and documentation pages that you can extend directly

## One thing to do before you start

The template uses `@org/components` as a placeholder package name. Before secondary development, do a global search and replace for `@org/components` and switch it to your actual package name.

## Quick Start

### 1. Clone the template

```bash
git clone https://github.com/antdv-next/docs-base.git
cd docs-base
```

### 2. Install dependencies

```bash
pnpm install
```

### 3. Run the docs app

```bash
pnpm docs:dev
```

The local development site runs at [http://localhost:6878](http://localhost:6878) by default.

### 4. Build the library

```bash
pnpm build
```

Other useful commands:

```bash
pnpm docs:build
pnpm docs:preview
pnpm type-check
pnpm test:unit
```

## Recommended Workflow

### 1. Rename the package and publishing metadata

- replace `@org/components` globally
- update the package name and publish metadata in `package.json`

### 2. Build your business components

Create or adapt components under `components/`, and export them from `components/index.ts` so the public API stays explicit and stable.

### 3. Write documentation pages

Add Markdown pages under `docs/src/pages/`. The template auto-registers `.md` files as routes through `import.meta.glob`.

Recommended locale naming:

- `*.zh-CN.md`
- `*.en-US.md`

### 4. Add demos next to docs pages

Place demo files in a sibling `demo/` directory and reference them like this:

```md
<demo-group>
  <demo src="./demo/basic.vue">Basic example</demo>
</demo-group>
```

The docs pipeline will automatically:

- render the live Vue demo
- extract the source code
- generate highlighted code blocks
- hot-update demo metadata during development

## Project Structure

```text
.
├─ components/                 # Business component source
├─ docs/                       # Documentation app
│  ├─ src/pages/               # Markdown pages and home page
│  ├─ src/components/demo/     # Demo renderer and source viewer
│  └─ plugins/markdown/        # Markdown / demo transform pipeline
├─ vite.build.config.ts        # Preserve-module build
├─ vite.esm.config.ts          # Bundled ESM build
├─ vite.umd.config.ts          # UMD build
└─ global.d.ts                 # Global component typings
```

## Theme Notes

The template is intentionally theme-neutral. You can build your own brand style, design tokens, and component appearance on top of it. For the theming side, see [Customize Theme](/docs/vue/customize-theme).

## Who this template is for

If you do not want to maintain demos in a separate repo and prefer to keep:

- component implementation
- documentation pages
- live examples
- multilingual content
- build outputs

in a single codebase, `docs-base` is a practical starting point.

---
Title: Skills
URL: https://www.antdv-next.com/docs/vue/skills.md
---

Agent Skills are modular capabilities that extend AI functionality. Antdv Next Skills provide AI Agents with specialized knowledge of the Antdv Next component library, enabling AI to accurately understand and use components.

## What are Agent Skills?

Agent Skills are reusable, file-system based resources that provide AI Agents with domain-specific expertise: workflows, context, and best practices, transforming a general-purpose agent into an expert. Unlike prompts (which are conversation-level, one-time task instructions), **Skills are loaded on-demand without needing to repeat the same guidance across multiple conversations**.

### Why Use Antdv Next Skills?

**Key Benefits**:
- **Specialize AI**: Customize functionality for Antdv Next component development, making AI a component library expert
- **Reduce Repetition**: Create once, use automatically. No need to tell AI how to use components every time
- **Compose Capabilities**: Combine Skills to build complex component development workflows
- **Reduce Hallucinations**: Avoid AI generating non-existent Props or incorrect usage by providing real documentation and examples
- **Offline Available**: Skills localizes documentation content, ensuring stability and reliability without depending on external links

## How Skills Work

Skills leverage AI Agent's virtual machine environment to provide capabilities beyond what's possible with prompts alone. AI Agents run in a virtual machine with file system access, allowing Skills to exist as directories containing instructions, executable code, and reference materials.

This file-system based architecture supports **progressive disclosure**: AI Agents load information on-demand in stages, rather than consuming context upfront.

### Three-Level Loading Mechanism

Skills can contain three types of content, each loaded at different times:

| Level | Load Time | Token Cost | Content |
|---|---|---|---|
| **Level 1: Metadata** | Always (at startup) | ~100 tokens | `name` and `description` in YAML frontmatter |
| **Level 2: Instructions** | When Skill is triggered | < 5k tokens | SKILL.md body with instructions and guidance |
| **Level 3: Resources** | On-demand | Virtually unlimited | Bundled files executed via bash, not loaded into context |

**What does this mean?**
- AI Agent only knows at startup that "there's an Antdv Next Skill available to help with components"
- When you request "create a Button component", the AI loads the complete Button documentation
- If documentation references example code, AI reads those files on-demand
- Unused component documentation doesn't consume any context

> 💡 **Analogy**: Like an onboarding guide for a new team member. They know the guide exists (metadata), open relevant chapters when needed (instructions), and consult detailed appendices when necessary (resources).

## Installation

:::success Important Note
We recommend using Antdv Next Skill together with [Antfu's Skills Collection](https://github.com/antfu/skills) for better results. If you use `vue`, consider importing the `vue` skill and related skills to reduce AI hallucinations and ensure more standardized output!
:::

Install the Antdv Next skill set via Skills CLI:

```bash
npx skills add antdv-next/skills
```

## Usage

Once installed, AI Agents will **automatically use** Skills when you make requests related to Antdv Next components. For the most stable results, it's recommended to explicitly declare:

```
use antdv-next skill, <your requirement>
```

This explicitly triggers the skill; otherwise, activation may be unstable due to insufficient matching.

### Usage Examples

**Basic Component Development**:
```
use antdv-next skill, create a login page with form validation
```

**Complex Interactions**:
```
use antdv-next skill, implement a data table with search, pagination, and filtering
```

**Component Customization**:
```
use antdv-next skill, refactor the Button component according to AGENTS.md specifications, ensuring Props/Emits/Slots are correctly defined
```

**Problem Diagnosis**:
```
use antdv-next skill, why isn't my Form component validation working?
```

## Technical Implementation

### Skill Structure

Antdv Next Skills follows the standard Skill structure:

```yaml
---
name: antdv-next
description: Antdv Next component library development expert...
---

# Antdv Next Component Development

## Quick Start
[Component development workflow]

## API Conventions
[Props/Emits/Slots specifications]

## Examples
For specific component usage, see [references/components/](references/components/)
```

### Generation Process

1. **Documentation Extraction**: Extract component documentation markdown files from the playground
2. **Example Conversion**: Convert Vue SFC examples to markdown format
3. **Content Aggregation**: Copy documentation and examples to the `references/` directory
4. **Metadata Generation**: Create YAML frontmatter and main instructions
5. **Offline Optimization**: Ensure all content is available offline without depending on external links

The generation scripts support single-language output to reduce Skill size:

```bash
pnpm run generate:en  # Generate English version
pnpm run generate:zh  # Generate Chinese version
```

## Supported AI Platforms

Antdv Next Skills, as a **custom Skill**, can be used on multiple AI platforms:

1. Claude Code
2. Codex
3. Github Copilot
4. Cursor
5. Antigravity
6. ...

## Contributing

This project is an **early experiment** aimed at providing specialized skills for AI Agents working with Antdv Next. Feedback via [GitHub Issues](https://github.com/antdv-next/skills/issues) is welcome to help us improve coverage and accuracy.

---
Title: Tailwind CSS
URL: https://www.antdv-next.com/docs/vue/tailwindcss.md
---

Before anything else, wrap the `App.vue` entry with `a-app` so the runtime has a parent style container:

```vue
<template>
  <a-app>
    <router-view />
  </a-app>
</template>
```

If you want to keep using Tailwind CSS in an `antdv-next` project while aligning utility classes with Ant Design design tokens, use `@antdv-next/tailwind`.

This plugin maps Ant Design CSS variables into Tailwind's theme system, so utilities like `bg-primary`, `shadow-card`, and `text-h1` can still follow `antdv-next` runtime theming.

## Version Compatibility

`@antdv-next/tailwind` ships in lockstep with `antdv-next`. Pick the matching version from the table below:

| `antdv-next` | `@antdv-next/tailwind` | Notes |
| --- | --- | --- |
| `>=1.3.0` | `^1.1.0` | **Current recommended.** Spacing tokens are aligned with antdv 1.3.0 (`p-xxl`, `p-xxxl`, `m-xxxl` are removed) and many new semantic tokens are added (`primary-text`, `success-bg-hover`, `text-placeholder`, `bg-solid`, …). Also introduces the v4 namespace-safe entry `compat.css`. |
| `<1.3.0` | `<1.1.0` | antdv before 1.3.0 still exposes the old spacing tokens. Pinning `@antdv-next/tailwind@<1.1.0` avoids referencing variables that no longer exist. |

> When you bump `antdv-next` to 1.3.0, bump `@antdv-next/tailwind` to `>=1.1.0` together. If you are still on antdv-next 1.2.x or earlier, pin `@antdv-next/tailwind` to the 1.0.x line.

## Package Info

- Package: `@antdv-next/tailwind`
- `peerDependencies`: `tailwindcss >= 3.0.0`

## Installation

For antdv-next 1.3.0+:

```bash
pnpm add -D tailwindcss @antdv-next/tailwind@^1.1.0
```

For antdv-next 1.2.x and earlier:

```bash
pnpm add -D tailwindcss @antdv-next/tailwind@~1.0
```

## When to use it

This package is a good fit when:

- your project already uses Tailwind CSS
- you want utilities aligned with Ant Design design tokens
- you want to keep the Tailwind workflow while integrating `antdv-next` theme variables
- you need runtime theme switching instead of fixed build-time colors

If you prefer an UnoCSS-based approach, see the [UnoCSS](/docs/vue/unocss) guide.

## Tailwind CSS v4 (Recommended)

Tailwind CSS v4 wires the theme through the `@theme` mechanism. Starting from 1.1.0, `@antdv-next/tailwind` ships **two parallel entries**:

| Entry | Utility example | When to use |
| --- | --- | --- |
| `theme.css` (classic) | `bg-primary`, `p-lg`, `text-lg`, `shadow-card` | Existing projects; accept antdv tokens occupying Tailwind's native utility namespace |
| `compat.css` (**recommended**) | `bg-ant-primary`, `p-ant-lg`, `text-ant-lg`, `shadow-ant-card` (plus optional `a-bg-primary` etc. shortcuts) | New projects; avoid clashes with Tailwind built-in tokens or project-level custom tokens |

> For the design rationale, see [css-plugin Issue #7 (RFC)](https://github.com/antdv-next/css-plugin/issues/7).

### Option 1: Import the theme file directly

```css
@import "tailwindcss";

/* Pick one — classic entry */
@import "@antdv-next/tailwind/theme.css";

/* Or — namespace-safe entry (recommended) */
@import "@antdv-next/tailwind/compat.css";
```

### Option 2: Generate theme CSS dynamically

If you need a custom CSS variable prefix or namespace, use the generators exported from the `v4` entry:

```ts
import {
  generateCompatThemeCSS,
  generateThemeCSS,
} from '@antdv-next/tailwind/v4'

// Classic entry (default antPrefix='ant')
const css = generateThemeCSS({
  antPrefix: 'my-app',
})

// Namespace-safe entry
const compatCss = generateCompatThemeCSS({
  antPrefix: 'ant',             // antdv CSS variable prefix
  tokenPrefix: 'ant',           // produces --color-ant-primary, @utility p-ant-lg
  prefix: 'a',                  // also emits @utility a-bg-primary shortcuts
  allowPrefixedUtilities: true, // toggle the shortcuts above
})
```

### compat.css options

- `antPrefix`: the antdv-next CSS variable prefix (must match your `ConfigProvider` `prefixCls`)
- `tokenPrefix`: namespace injected into every Tailwind v4 theme token, e.g. `--color-ant-primary`, `--padding-ant-lg`, `--text-ant-lg`. Also emits `@utility p-ant-lg { padding: var(--padding-ant-lg) }` style safe directional utilities so Tailwind's native `p-*` is not overridden
- `prefix`: extra prefixed utility shortcuts (e.g. `a-bg-primary`, `a-p-lg`) bound directly to antdv variables — they do not depend on `tokenPrefix`
- `allowPrefixedUtilities`: toggle the prefixed shortcuts. Disable it to keep only the namespaced tokens in `@theme inline`

## Tailwind CSS v3

If you are still on Tailwind CSS v3, use the plugin form.

### Basic setup

```ts
import antdPlugin from '@antdv-next/tailwind'

export default {
  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
  plugins: [antdPlugin],
}
```

### Custom setup

```ts
import { createAntdPlugin } from '@antdv-next/tailwind'

export default {
  content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],
  plugins: [
    createAntdPlugin({
      antPrefix: 'ant',
    }),
  ],
}
```

## Usage Example

```vue
<template>
  <!-- Classic theme.css writing -->
  <div class="bg-primary text-white p-lg rounded-lg shadow-card">
    <h1 class="text-h1 text-primary">Classic theme.css</h1>
    <p class="text-text-secondary mt-sm">
      Tailwind utilities powered by Ant Design theme variables
    </p>
  </div>

  <!-- compat.css recommended writing (namespace-safe) -->
  <div class="bg-ant-primary text-ant-light-solid p-ant-lg rounded-ant-lg shadow-ant-card">
    <h1 class="text-ant-h1 color-ant-primary">Namespace safe</h1>
    <p class="color-ant-text-secondary mt-ant-sm">
      Doesn't collide with Tailwind built-in tokens
    </p>
  </div>

  <!-- compat.css also emits a-* prefixed shortcuts -->
  <div class="a-bg-primary a-color-white a-p-lg a-rounded-lg a-shadow-card">
    <h1 class="a-text-h1">Prefixed shortcut</h1>
  </div>
</template>
```

## Tailwind v4 Utility Mapping

| Category | Classic `theme.css` | Recommended `compat.css` | Shortcut |
| --- | --- | --- | --- |
| Color | `bg-primary`, `text-blue-5` | `bg-ant-primary`, `text-ant-blue-5` | `a-bg-primary`, `a-c-primary` |
| Padding | `p-lg`, `px-sm` | `p-ant-lg`, `px-ant-sm` | `a-p-lg`, `a-px-sm` |
| Margin | `m-lg`, `my-sm` | `m-ant-lg`, `my-ant-sm` | `a-m-lg`, `a-my-sm` |
| Radius | `rounded-lg` | `rounded-ant-lg` | `a-rounded-lg`, `a-rd-lg` |
| Font size | `text-h1` | `text-ant-h1` | `a-text-h1` |
| Shadow | `shadow-card` | `shadow-ant-card` | `a-shadow-card` |

## Common Utility Reference

### Colors and Backgrounds

| Classic `theme.css` | Namespace-safe `compat.css` | Description |
| --- | --- | --- |
| `bg-primary` | `bg-ant-primary` | Primary background color |
| `text-primary` | `color-ant-primary` | Primary text color |
| `bg-success` | `bg-ant-success` | Success background color |
| `text-text-secondary` | `color-ant-text-secondary` | Secondary text color |
| `bg-container` | `bg-ant-container` | Container background color |
| `border-border` | `border-ant-border` | Default border color |

### Spacing and Layout

| Classic | Namespace-safe | Description |
| --- | --- | --- |
| `p-lg` | `p-ant-lg` | Large padding |
| `px-md` | `px-ant-md` | Medium horizontal padding |
| `py-sm` | `py-ant-sm` | Small vertical padding |
| `m-md` | `m-ant-md` | Medium margin |
| `mt-sm` | `mt-ant-sm` | Small top margin |
| `rounded-lg` | `rounded-ant-lg` | Large border radius |

### Typography and Shadows

| Classic | Namespace-safe | Description |
| --- | --- | --- |
| `text-h1` | `text-ant-h1` | H1 title size |
| `text-lg` | `text-ant-lg` | Large text |
| `text-sm` | `text-ant-sm` | Small text |
| `shadow-card` | `shadow-ant-card` | Card shadow |
| `shadow-sec` | `shadow-ant-sec` | Secondary shadow |
| `shadow-ter` | `shadow-ant-ter` | Tertiary shadow |

## Spacing Tokens (aligned with antdv 1.3.0)

- Padding: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`
- Margin: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`

> Starting from 1.1.0, `p-xxl`, `p-xxxl`, and `m-xxxl` are no longer generated because antdv 1.3.0 removed the underlying CSS variables. If you are still on antdv-next 1.2.x or earlier, pin `@antdv-next/tailwind` to the 1.0.x line.

## New Tokens Added in 1.3.0 (available since 1.1.0)

The semantic token set is now fully aligned with antdv 1.3.0:

- Primary / Success / Warning / Error / Info each provide ten steps: `*-bg`, `*-bg-hover`, `*-border`, `*-border-hover`, `*-hover`, `*`, `*-active`, `*-text`, `*-text-hover`, `*-text-active`
- Error extras: `error-bg-filled-hover`, `error-bg-active`, `error-affix`
- Warning extras: `warning-affix`
- Text: `text-placeholder`, `text-disabled`, `text-heading`, `text-label`, `text-description`, `text-light-solid`
- Fill: `fill-content`, `fill-content-hover`, `fill-alter`
- Background: `container-disabled`, `spotlight`, `blur`, `solid`, `solid-hover`, `solid-active`
- Border: `border-disabled`, `border-bg`
- Icon: `icon`, `icon-hover`
- Misc: `highlight`, `white`

## Relation to Theming

This plugin relies on Ant Design CSS variables, so your app should already be wrapped with `ConfigProvider`. Combine it with [Customize Theme](/docs/vue/customize-theme) when you need to adjust tokens.

```vue
<script setup lang="ts">
import { ConfigProvider } from 'antdv-next'
</script>

<template>
  <ConfigProvider>
    <RouterView />
  </ConfigProvider>
</template>
```

## Notes

- For v4 the recommended path is importing `compat.css`: namespace-safe, no collisions with Tailwind built-in utilities. You can keep `theme.css` for existing projects.
- Starting from 1.1.0, `theme.css` no longer emits `p-xxl` / `p-xxxl` / `m-xxxl` so it stays consistent with antdv 1.3.0's actual CSS variables.
- Both v3 and v4 keep Tailwind global spacing behavior intact, so classes like `gap-*` and `max-w-*` still follow Tailwind defaults.
- If you change the CSS variable prefix, keep `antPrefix` aligned in the plugin / generator config.
- `compat.css`'s namespace defaults to `ant` (i.e. `bg-ant-primary`). Override it via `generateCompatThemeCSS({ tokenPrefix: 'antd' })` to get `bg-antd-primary` style utilities.

---
Title: UnoCSS
URL: https://www.antdv-next.com/docs/vue/unocss.md
---

Before anything else, wrap the `App.vue` entry with `a-app` so the runtime has a parent style container:

```vue
<template>
  <a-app>
    <router-view />
  </a-app>
</template>
```

If you want to use atomic utility classes in an `antdv-next` project and have those classes map directly to Ant Design CSS variables, use `@antdv-next/unocss`.

This package provides UnoCSS presets built around Ant Design design tokens. It is a good fit when you want to keep UnoCSS / Wind-style utilities while preserving runtime theming.

## Version Compatibility

`@antdv-next/unocss` ships in lockstep with `antdv-next`. Pick the matching version from the table below:

| `antdv-next` | `@antdv-next/unocss` | Notes |
| --- | --- | --- |
| `>=1.3.0` | `^1.1.0` | **Current recommended.** Spacing tokens are aligned with antdv 1.3.0 (`p-xxl`, `p-xxxl`, `m-xxxl` are removed) and many new semantic tokens are added (`primary-text`, `success-bg-hover`, `text-placeholder`, `bg-solid`, …). Also introduces the namespace-safe mode (`bg-ant-primary`). |
| `<1.3.0` | `<1.1.0` | antdv before 1.3.0 still exposes the old spacing tokens. Pinning `@antdv-next/unocss@<1.1.0` avoids generating utilities that point at variables which no longer exist. |

> When you bump `antdv-next` to 1.3.0, bump `@antdv-next/unocss` to `>=1.1.0` together. If you are still on antdv-next 1.2.x or earlier, pin `@antdv-next/unocss` to the 1.0.x line.

## Package Info

- Package: `@antdv-next/unocss`
- `peerDependencies`: `unocss >= 66.0.0`

## Installation

For antdv-next 1.3.0+:

```bash
pnpm add -D unocss @antdv-next/unocss@^1.1.0
```

For antdv-next 1.2.x and earlier:

```bash
pnpm add -D unocss @antdv-next/unocss@~1.0
```

## When to use it

This package fits well when:

- you are already using UnoCSS
- you want to keep UnoCSS / Wind-style utility syntax
- you want colors, radius, shadows, and typography utilities to follow `antdv-next` CSS variables
- you need runtime theme switching instead of build-time fixed values

If you are using Tailwind CSS, see the [Tailwind CSS](/docs/vue/tailwindcss) guide.

## Available Presets

### `presetAntd`

The default preset. It follows the regular UnoCSS Wind3-style structure and works for most UnoCSS projects.

```ts
// uno.config.ts
import { defineConfig } from 'unocss'
import { presetAntd } from '@antdv-next/unocss'

export default defineConfig({
  presets: [
    presetAntd({
      prefix: 'a',                  // class prefix, default: 'a'
      allowPrefixedUtilities: true, // keep a-* utilities, default: true
      allowUnprefixed: true,        // keep legacy bare classes like bg-primary, default: true
      antPrefix: 'ant',             // CSS variable prefix, default: 'ant'
      tokenPrefix: 'ant',           // namespace prefix, default: 'ant' (empty disables)
    }),
  ],
})
```

Theme keys:

- `colors`
- `borderRadius`
- `fontSize`
- `boxShadow`

### `presetAntdTailwind4`

If you want to keep UnoCSS but prefer Tailwind CSS v4-style theme key naming, use this preset.

```ts
// uno.config.ts
import { defineConfig } from 'unocss'
import { presetAntdTailwind4 } from '@antdv-next/unocss'

export default defineConfig({
  presets: [
    presetAntdTailwind4({
      prefix: 'a',
      allowPrefixedUtilities: true,
      allowUnprefixed: true,
      antPrefix: 'ant',
      tokenPrefix: 'ant',
    }),
  ],
})
```

Theme keys:

- `colors`
- `radius`
- `text`
- `shadow`
- `defaults`

## Which one should you choose

### Choose `presetAntd`

- when you already have an UnoCSS setup
- when you want to keep the standard UnoCSS theme structure
- when you are combining it with presets like Wind3 or Attributify

### Choose `presetAntdTailwind4`

- when you prefer Tailwind CSS v4-style naming
- when you are migrating from Tailwind v4 to UnoCSS or mixing both approaches
- when you want theme keys such as `radius`, `shadow`, and `text`

## Three Utility Patterns (since 1.1.0)

Both presets emit three parallel utility forms that can be toggled independently:

| Mode | Example | Control | Use when |
| --- | --- | --- | --- |
| **Prefixed (stable)** | `a-bg-primary`, `a-p-lg` | `allowPrefixedUtilities` (default `true`) | Most projects; clearly isolates antdv utilities |
| **Namespace-safe (preferred replacement for the legacy bare form)** | `bg-ant-primary`, `p-ant-lg` | `tokenPrefix` (default `'ant'`, empty disables) | You want short class names without polluting UnoCSS native tokens |
| **Legacy bare (back-compat)** | `bg-primary`, `p-lg` | `allowUnprefixed` (default `true`; will flip to `false` next major) | Existing projects only |

Example:

```vue
<template>
  <!-- Stable prefixed API -->
  <div class="a-bg-primary a-color-white a-p-lg a-rounded-lg a-shadow-card">
    Prefixed
  </div>

  <!-- Namespace-safe API (recommended) -->
  <div class="bg-ant-primary color-ant-white p-ant-lg rounded-ant-lg shadow-ant-card">
    Namespace safe
  </div>

  <!-- Legacy bare form (still works, but risks collisions) -->
  <div class="bg-primary color-white p-lg rounded-lg shadow-card">
    Legacy bare
  </div>
</template>
```

Important details:

- Text color uses `color-primary` or `c-primary` (or `color-ant-primary` / `c-ant-primary` in namespace mode)
- `text-*` is primarily for font size, e.g. `text-lg`, `text-h1` (in namespace mode: `text-ant-lg`)

If you want to allow only `a-*` and `*-ant-*` utilities while disabling the legacy bare form:

```ts
// uno.config.ts
import { defineConfig } from 'unocss'
import { presetAntd } from '@antdv-next/unocss'

export default defineConfig({
  presets: [
    presetAntd({
      allowUnprefixed: false, // disables bg-primary / text-sm style classes
      // allowPrefixedUtilities: true and tokenPrefix: 'ant' remain in effect
    }),
  ],
})
```

> `allowUnprefixed: false` only disables legacy bare classes — it **does not** rewrite theme keys. `a-bg-primary` and `bg-ant-primary` continue to work.

## Spacing Tokens (aligned with antdv 1.3.0)

- Padding: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`
- Margin: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`

> Starting from 1.1.0, `p-xxl`, `p-xxxl`, and `m-xxxl` are no longer generated because antdv 1.3.0 removed the underlying CSS variables. If you are still on antdv-next 1.2.x or earlier, pin `@antdv-next/unocss` to the 1.0.x line.

## Utility Examples

```vue
<template>
  <div class="a-bg-primary a-color-white a-p-lg a-rounded-lg a-shadow-card">
    Primary card
  </div>

  <div class="a-bg-container a-color-text a-px-md a-py-sm a-border-border a-rounded-sm">
    Container content
  </div>

  <div class="a-text-lg a-color-primary a-mt-sm">
    Heading text
  </div>
</template>
```

Common utility groups (each has `a-*`, `*-ant-*`, and bare forms):

- colors: `color-*`, `bg-*`, `border-*` (plus shorthand `b-*` and directional `bt-`, `bx-`, etc.)
- spacing: `m-*`, `p-*`, `mx-*`, `py-*`
- radius: `rounded-*`, `rd-*`
- shadows: `shadow-*`
- typography: `text-*`

## Common Utility Reference

### Colors and Backgrounds

| Prefixed | Namespace-safe | Description |
| --- | --- | --- |
| `a-bg-primary` | `bg-ant-primary` | Primary background |
| `a-bg-container` | `bg-ant-container` | Container background |
| `a-bg-success-bg` | `bg-ant-success-bg` | Light success background |
| `a-color-primary` | `color-ant-primary` | Primary text color |
| `a-color-text` | `color-ant-text` | Default text color |
| `a-color-text-secondary` | `color-ant-text-secondary` | Secondary text |
| `a-border-border` | `border-ant-border` | Default border |
| `a-border-t-primary` | `border-t-ant-primary` | Top primary border |

### Spacing and Layout

| Prefixed | Namespace-safe | Description |
| --- | --- | --- |
| `a-p-lg` | `p-ant-lg` | 24px padding |
| `a-px-md` | `px-ant-md` | 20px horizontal padding |
| `a-py-sm` | `py-ant-sm` | 12px vertical padding |
| `a-mt-sm` | `mt-ant-sm` | 12px top margin |
| `a-mx-lg` | `mx-ant-lg` | 24px horizontal margin |
| `a-my-xs` | `my-ant-xs` | 8px vertical margin |

### Radius, Shadow, Typography

| Prefixed | Namespace-safe | Description |
| --- | --- | --- |
| `a-rounded-sm` | `rounded-ant-sm` | Small radius |
| `a-rounded-lg` | `rounded-ant-lg` | Large radius |
| `a-rounded` | `rounded-ant` | Default radius |
| `a-shadow-card` | `shadow-ant-card` | Card shadow |
| `a-shadow` | `shadow-ant` | Default shadow |
| `a-text-lg` | `text-ant-lg` | Large text |
| `a-text-h1` | `text-ant-h1` | H1 title size |

## New Tokens Added in 1.3.0 (available since 1.1.0)

The semantic token set is now fully aligned with antdv 1.3.0:

- Primary / Success / Warning / Error / Info each provide ten steps: `*-bg`, `*-bg-hover`, `*-border`, `*-border-hover`, `*-hover`, `*`, `*-active`, `*-text`, `*-text-hover`, `*-text-active`
- Error extras: `error-bg-filled-hover`, `error-bg-active`, `error-affix`
- Warning extras: `warning-affix`
- Text: `text-placeholder`, `text-disabled`, `text-heading`, `text-label`, `text-description`, `text-light-solid`
- Fill: `fill-content`, `fill-content-hover`, `fill-alter`
- Background: `container-disabled`, `spotlight`, `blur`, `solid`, `solid-hover`, `solid-active`
- Border: `border-disabled`, `border-bg`
- Icon: `icon`, `icon-hover`
- Misc: `highlight`, `white`

## Theme and Variables

These presets map utilities to Ant Design CSS variables, so colors, radius, shadows, and typography follow the active theme automatically.

In practice, make sure your app is already wired with `ConfigProvider`, and combine it with [Customize Theme](/docs/vue/customize-theme) when you need to adjust design tokens.

## Notes

- The preset mainly customizes `m-*` / `p-*` related utilities and does not override UnoCSS global spacing behavior (`w-*`, `max-w-*`, `gap-*` keep their UnoCSS defaults).
- The default `prefix` is `a`, so generated classes usually look like `a-bg-primary` and `a-p-lg`.
- `allowUnprefixed` defaults to `true` today but will flip to `false` in the next major. Migrate to `a-*` or `*-ant-*` writers early.
- `allowUnprefixed: false` only disables the legacy bare form — it **does not** rewrite theme keys (`colors.primary` stays `colors.primary`).
- The default `antPrefix` is `ant`. If you customize your CSS variable prefix, keep this option aligned.
- The default `tokenPrefix` is `ant`. Override it (for example `'antd'`) to customize the namespace, or pass an empty string to disable namespace mode.

---
Title: Affix
URL: https://www.antdv-next.com/components/affix.md
---

## When To Use {#when-to-use}

On longer web pages, it's helpful to stick component into the viewport. This is common for menus and actions.

Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.

## Examples {#examples}

### Basic
The simplest usage.
```vue
<script lang="ts" setup>
import { ref } from 'vue'

const top = ref(100)
const bottom = ref(100)
</script>

<template>
  <a-affix :offset-top="top">
    <a-button type="primary" @click="() => top = top + 10">
      Affix top
    </a-button>
  </a-affix>
  <br>
  <a-affix :offset-bottom="bottom">
    <a-button type="primary" @click="() => bottom = bottom + 10">
      Affix bottom
    </a-button>
  </a-affix>
</template>
```
### Callback
Callback with affixed state.
```vue
<template>
  <a-affix :offset-top="120" @change="(affixed) => console.log(affixed)">
    <a-button>
      120px to affix top
    </a-button>
  </a-affix>
</template>
```
### Container to scroll.
Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const container = shallowRef()
</script>

<template>
  <div ref="container" style="width: 100%;height: 100px;overflow: auto;box-shadow: 0 0 0 1px #1677ff;scrollbar-width: thin;scrollbar-gutter: stable">
    <div style="width: 100%;height: 1000px">
      <a-affix :target="() => container">
        <a-button type="primary">
          Fixed at the top of container
        </a-button>
      </a-affix>
    </div>
  </div>
</template>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| offsetTop | Offset from the top of the viewport (in pixels) | number | 0 | - | × |
| offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - | - | × |
| target | Specifies the scrollable area DOM node | () =&gt; Window \| HTMLElement \| null | () =&gt; window | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback for when Affix state is changed | (affixed?: boolean) =&gt; void | - |

### Methods

| Method | Description | Type | Version |
| --- | --- | --- | --- |
| updatePosition | - | ReturnType&lt;typeof throttleByAnimationFrame&gt; | - |

**Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:

```html
<a-affix style="position: absolute;top: y; left: x">...</a-affix>
```

## Design Token {#design-token}

<ComponentTokenTable component="Affix"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### When binding container with `target` in Affix, elements sometimes move out of the container. {#faq-target-container}

We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to: <https://codesandbox.io/s/stupefied-maxwell-ophqnm?file=/index.js>

Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)

### When Affix is ​​used in a horizontal scroll container, the position of the element `left` is incorrect. {#faq-horizontal-scroll}

Affix is ​​generally only applicable to areas with one-way scrolling, and only supports usage in vertical scrolling containers. If you want to use it in a horizontal container, you can consider implementing with the native `position: sticky` property.

Related issues：[#29108](https://github.com/ant-design/ant-design/issues/29108)

---
Title: Alert
URL: https://www.antdv-next.com/components/alert.md
---

## When To Use {#when-to-use}

- When you need to show alert messages to users.
- When you need a persistent static container which is closable by user actions.

## Examples {#examples}

### Basic
The simplest usage for short messages.
```vue
<template>
  <a-alert title="Success Text" type="success" />
</template>
```
### More types
There are 4 types of Alert: `success`, `info`, `warning`, `error`.
```vue
<template>
  <a-alert title="Success Text" type="success" />
  <br>
  <a-alert title="Info Text" type="info" />
  <br>
  <a-alert title="Warning Text" type="warning" />
  <br>
  <a-alert title="Error Text" type="error" />
</template>
```
### Closable
To show close button.
```vue
<script setup lang="ts">
function onClose(e: MouseEvent) {
  console.log(e, 'I was closed.')
}
</script>

<template>
  <a-alert
    title="Warning Title"
    type="warning"
    :closable="{ 'aria-label': 'close' }"
    @close="onClose"
  />
  <br>
  <a-alert
    title="Success Title"
    type="success"
    :closable="{ 'aria-label': 'close' }"
    @close="onClose"
  />
  <br>
  <a-alert
    title="Info Title"
    type="info"
    :closable="{ 'aria-label': 'close' }"
    @close="onClose"
  />
  <br>
  <a-alert
    title="Error Title"
    type="error"
    :closable="{ 'aria-label': 'close' }"
    @close="onClose"
  />
</template>
```
### Description
Additional description for alert message.
```vue
<template>
  <a-alert
    title="Success Text"
    description="Success Description Success Description Success Description"
    type="success"
  />
  <br>
  <a-alert
    title="Info Text"
    description="Info Description Info Description Info Description Info Description"
    type="info"
  />
  <br>
  <a-alert
    title="Warning Text"
    description="Warning Description Warning Description Warning Description Warning Description"
    type="warning"
  />
  <br>
  <a-alert
    title="Error Text"
    description="Error Description Error Description Error Description Error Description"
    type="error"
  />
</template>
```
### Icon
A relevant icon will make information clearer and more friendly.
```vue
<template>
  <a-alert title="Success Tips" type="success" show-icon />
  <br>
  <a-alert title="Informational Notes" type="info" show-icon />
  <br>
  <a-alert title="Warning" type="warning" show-icon closable />
  <br>
  <a-alert title="Error" type="error" show-icon />
  <br>
  <a-alert
    title="Success Tips"
    description="Detailed description and advice about successful copywriting."
    type="success"
    show-icon
  />
  <br>
  <a-alert
    title="Informational Notes"
    description="Additional description and information about copywriting."
    type="info"
    show-icon
  />
  <br>
  <a-alert
    title="Warning"
    description="This is a warning notice about copywriting."
    type="warning"
    show-icon
    closable
  />
  <br>
  <a-alert
    title="Error"
    description="This is an error message about copywriting."
    type="error"
    show-icon
  />
</template>
```
### Banner
Display Alert as a banner at top of page.
```vue
<template>
  <a-alert title="Warning text" banner />
  <br>
  <a-alert
    title="Very long warning text warning text text text text text text text"
    banner
    closable
  />
  <br>
  <a-alert :show-icon="false" title="Warning text without icon" banner />
  <br>
  <a-alert type="error" title="Error text" banner />
</template>
```
### Loop Banner
Use CSS animation to create a loop banner.
```vue
<template>
  <a-alert banner>
    <template #title>
      <div class="alert-marquee">
        <div class="alert-marquee__content">
          I can be a Vue component, multiple components, or just some text.
        </div>
      </div>
    </template>
  </a-alert>
</template>

<style scoped>
.alert-marquee {
  overflow: hidden;
  white-space: nowrap;
}

.alert-marquee__content {
  display: inline-block;
  min-width: 100%;
  animation: alert-marquee 12s linear infinite;
}

.alert-marquee:hover .alert-marquee__content {
  animation-play-state: paused;
}

@keyframes alert-marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
```
### Smoothly Unmount
Smoothly unmount Alert upon close.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(true)

function handleAfterClose() {
  visible.value = false
}
</script>

<template>
  <a-alert
    v-if="visible"
    title="Alert Message Text"
    type="success"
    closable
    :after-close="handleAfterClose"
  />
  <p>click the close button to see the effect</p>
  <a-switch v-model:checked="visible" aria-label="Alert visibility" :disabled="visible" />
</template>
```
### Custom Icon
A relevant icon makes information clearer and more friendly.
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const icon = () => h(SmileOutlined)
</script>

<template>
  <a-alert :icon="icon" title="showIcon = false" type="success" />
  <br>
  <a-alert :icon="icon" title="Success Tips" type="success" show-icon />
  <br>
  <a-alert :icon="icon" title="Informational Notes" type="info" show-icon />
  <br>
  <a-alert :icon="icon" title="Warning" type="warning" show-icon />
  <br>
  <a-alert :icon="icon" title="Error" type="error" show-icon />
  <br>
  <a-alert
    :icon="icon"
    title="Success Tips"
    description="Detailed description and advice about successful copywriting."
    type="success"
    show-icon
  />
  <br>
  <a-alert
    :icon="icon"
    title="Informational Notes"
    description="Additional description and information about copywriting."
    type="info"
    show-icon
  />
  <br>
  <a-alert
    :icon="icon"
    title="Warning"
    description="This is a warning notice about copywriting."
    type="warning"
    show-icon
  />
  <br>
  <a-alert
    :icon="icon"
    title="Error"
    description="This is an error message about copywriting."
    type="error"
    show-icon
  />
</template>
```
### Custom action
Custom action.
```vue
<template>
  <a-alert
    title="Success Tips"
    type="success"
    show-icon
    closable
  >
    <template #action>
      <a-button type="text" size="small">
        UNDO
      </a-button>
    </template>
  </a-alert>
  <br>
  <a-alert
    title="Error Text"
    show-icon
    description="Error Description Error Description Error Description Error Description"
    type="error"
  >
    <template #action>
      <a-button size="small" danger>
        Detail
      </a-button>
    </template>
  </a-alert>
  <br>
  <a-alert
    title="Warning Text"
    type="warning"
    closable
  >
    <template #action>
      <a-button size="small" type="text">
        Done
      </a-button>
    </template>
  </a-alert>
  <br>
  <a-alert
    title="Info Text"
    description="Info Description Info Description Info Description Info Description"
    type="info"
    closable
  >
    <template #action>
      <a-flex vertical gap="small" :style="{ minWidth: '80px' }">
        <a-button size="small" type="primary" block>
          Accept
        </a-button>
        <a-button size="small" danger ghost block>
          Decline
        </a-button>
      </a-flex>
    </template>
  </a-alert>
</template>
```
### Component Token
Custom component token.
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const icon = () => h(SmileOutlined)
</script>

<template>
  <a-config-provider
    :theme="{
      components: {
        Alert: {
          withDescriptionIconSize: 32,
          withDescriptionPadding: 16,
        },
      },
    }"
  >
    <a-alert
      :icon="icon"
      title="Success Tips"
      description="Detailed description and advice about successful copywriting."
      type="success"
      show-icon
    />
  </a-config-provider>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Alert by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { AlertProps } from 'antdv-next'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const classes: AlertProps['classes'] = {
  root: 'demo-alert-root',
}

const stylesObject: AlertProps['styles'] = {
  icon: {
    fontSize: '18px',
  },
  section: {
    fontWeight: 500,
  },
}

const stylesFn: AlertProps['styles'] = (info) => {
  if (info?.props?.type === 'success') {
    return {
      root: {
        backgroundColor: 'rgba(82, 196, 26, 0.1)',
        borderColor: '#b7eb8f',
      },
      icon: {
        color: '#52c41a',
      },
    }
  }
  if (info?.props?.type === 'warning') {
    return {
      root: {
        backgroundColor: 'rgba(250, 173, 20, 0.1)',
        borderColor: '#ffe58f',
      },
      icon: {
        color: '#faad14',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="small">
    <a-alert
      title="Object styles"
      type="info"
      show-icon
      :classes="classes"
      :styles="stylesObject"
    >
      <template #action>
        <a-button size="small">
          Action
        </a-button>
      </template>
    </a-alert>
    <a-alert
      title="Function styles"
      type="success"
      show-icon
      :classes="classes"
      :styles="stylesFn"
    />
  </a-flex>
</template>

<style>
.demo-alert-root {
  border: 2px dashed v-bind('token.colorBorder');
  border-radius: v-bind('`${token.borderRadius}px`');
  padding: v-bind('`${token.paddingXS}px`');
}
</style>
```

## API

### Props {#props}

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | 'success' \| 'info' \| 'warning' \| 'error' | `info`, in `banner` mode default is `warning` | - | × |
| closable | The config of closable | ClosableType | `false` | - | ✓ |
| title | Content of Alert | VueNode | - | - | × |
| message | Content of Alert, please use `title` instead | VueNode | - | - | × |
| description | Additional content of Alert | VueNode | - | - | × |
| afterClose | Called when close animation is finished, please use `closable.afterClose` instead | () =&gt; void | - | - | × |
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | - | × |
| role | https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#aria-role-attribute | string | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | AlertClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | AlertStylesType | - | - | ✓ |
| banner | Whether to show as banner | boolean | false | - | × |
| icon | Custom icon, effective when `showIcon` is true | VueNode | - | - | × |
| successIcon | (Only supports global configuration) Custom success icon in Alert icon | VueNode | - | - | ✓ |
| infoIcon | (Only supports global configuration) Custom info icon in Alert icon | VueNode | - | - | ✓ |
| warningIcon | (Only supports global configuration) Custom warning icon in Alert icon | VueNode | - | - | ✓ |
| errorIcon | (Only supports global configuration) Custom error icon in Alert icon | VueNode | - | - | ✓ |
| closeIcon | - | VueNode | - | - | ✓ |
| action | The action of Alert | VueNode | - | - | × |
| id | - | string | - | - | × |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| close | Callback when close Alert | (e: any) =&gt; any | - |
| mouseenter | - | (e: any) =&gt; any | - |
| mouseleave | - | (e: any) =&gt; any | - |
| click | - | (e: any) =&gt; any | - |

### Slots {#slots}

| Slot        | Description | Type | Version |
|-------------| --- | --- | --- |
| message     | Content of Alert, please use `title` instead | () =&gt; any | - |
| title       | Content of Alert| () =&gt; any | - |
| description | Additional content of Alert | () =&gt; any | - |
| icon        | Custom icon, effective when `showIcon` is true | () =&gt; any | - |
| closeIcon   | Custom close icon | () =&gt; any | - |
| action      | The action of Alert | () =&gt; any | - |

### ClosableType {#closable-type}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| afterClose | Called when close animation is finished | () =&gt; void | - | - |
| closeIcon | Custom close icon | VueNode | - | - |
| disabled | Whether the close button is disabled | boolean | false | - |
| onClose | Callback when Alert is closed | (e: MouseEvent) =&gt; void | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Alert"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Anchor
URL: https://www.antdv-next.com/components/anchor.md
---

## When To Use {#when-to-use}

For displaying anchor hyperlinks on page and jumping between them.

> Notes for developers
>
> Anchor is implemented with a functional component. Some methods of obtaining `ref` and calling internal instance methods are invalid.

## Examples {#examples}

### Basic
The simplest usage.
```vue
<template>
  <a-row>
    <a-col :span="16">
      <div id="part-1" style="height: 100vh;background: rgba(255,0,0,0.02)" />
      <div id="part-2" style="height: 100vh;background: rgba(0,255,0,0.02)" />
      <div id="part-3" style="height: 100vh;background: rgba(0,0,255,0.02)" />
    </a-col>
    <a-col :span="8">
      <a-anchor
        :items="[
          {
            key: 'part-1',
            href: '#part-1',
            title: 'Part 1',
          },
          {
            key: 'part-2',
            href: '#part-2',
            title: 'Part 2',
          },
          {
            key: 'part-3',
            href: '#part-3',
            title: 'Part 3',
          },
        ]"
      />
    </a-col>
  </a-row>
</template>
```
### Horizontal Anchor
Horizontally aligned anchors
```vue
<template>
  <div>
    <div style="padding: 20px">
      <a-anchor
        direction="horizontal"
        :items="[
          {
            key: 'part-1',
            href: '#part-1',
            title: 'Part 1',
          },
          {
            key: 'part-2',
            href: '#part-2',
            title: 'Part 2',
          },
          {
            key: 'part-3',
            href: '#part-3',
            title: 'Part 3',
          },
        ]"
      />
    </div>
    <div>
      <div
        id="part-1"
        style="width: 100vw; height: 100vh; text-align: center; background: rgba(0, 255, 0, 0.02)"
      />
      <div
        id="part-2"
        style="width: 100vw; height: 100vh; text-align: center; background: rgba(0, 0, 255, 0.02)"
      />
      <div
        id="part-3"
        style="width: 100vw; height: 100vh; text-align: center; background: #fffbe9"
      />
    </div>
  </div>
</template>
```
### Static Anchor
Do not change state when page is scrolling.
```vue
<template>
  <a-anchor
    :affix="false"
    :items="[
      {
        key: '1',
        href: '#anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
        href: '#anchor-demo-static',
        title: 'Static demo',
      },
      {
        key: '3',
        href: '#api',
        title: 'API',
        children: [
          {
            key: '4',
            href: '#anchor-props',
            title: 'Anchor Props',
          },
          {
            key: '5',
            href: '#link-props',
            title: 'Link Props',
          },
        ],
      },
    ]"
  />
</template>
```
### Customize the onClick event
Clicking on an anchor does not record history.
```vue
<script setup lang="ts">
function handleClick(e: MouseEvent, link: {
  title: any
  href: string
}) {
  e.preventDefault()
  console.log(link)
}
</script>

<template>
  <a-anchor
    :affix="false"
    :items="[
      {
        key: '1',
        href: '#anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
        href: '#anchor-demo-static',
        title: 'Static demo',
      },
      {
        key: '3',
        href: '#api',
        title: 'API',
        children: [
          {
            key: '4',
            href: '#anchor-props',
            title: 'Anchor Props',
          },
          {
            key: '5',
            href: '#link-props',
            title: 'Link Props',
          },
        ],
      },
    ]"
    @click="handleClick"
  />
</template>
```
### Customize the anchor highlight
Customize the anchor highlight.
```vue
<script setup lang="ts">
const getCurrentAnchor = () => '#anchor-demo-static'
</script>

<template>
  <a-anchor
    :affix="false"
    :get-current-anchor="getCurrentAnchor"
    :items="[
      {
        key: '1',
        href: '#anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
        href: '#anchor-demo-static',
        title: 'Static demo',
      },
      {
        key: '3',
        href: '#api',
        title: 'API',
        children: [
          {
            key: '4',
            href: '#anchor-props',
            title: 'Anchor Props',
          },
          {
            key: '5',
            href: '#link-props',
            title: 'Link Props',
          },
        ],
      },

    ]"
  />
</template>
```
### Set Anchor scroll offset
Anchor target scroll to screen center.
```vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'

const topRef = ref<HTMLDivElement>()
const targetOffset = ref<number>()

const style = {
  height: '30vh',
  backgroundColor: 'rgba(0, 0, 0, 0.85)',
  position: 'fixed',
  top: 0,
  insetInlineStart: 0,
  width: '75%',
  color: '#fff',
} as const

onMounted(() => {
  targetOffset.value = topRef.value?.clientHeight
})
</script>

<template>
  <div>
    <a-row>
      <a-col :span="18">
        <div
          id="part-1"
          style="height: 100vh; background: rgba(255, 0, 0, 0.02); margin-top: 30vh"
        >
          Part 1
        </div>
        <div id="part-2" style="height: 100vh; background: rgba(0, 255, 0, 0.02)">
          Part 2
        </div>
        <div id="part-3" style="height: 100vh; background: rgba(0, 0, 255, 0.02)">
          Part 3
        </div>
      </a-col>
      <a-col :span="6">
        <a-anchor
          :target-offset="targetOffset"
          :items="[
            { key: 'part-1', href: '#part-1', title: 'Part 1' },
            { key: 'part-2', href: '#part-2', title: 'Part 2' },
            { key: 'part-3', href: '#part-3', title: 'Part 3' },
          ]"
        />
      </a-col>
    </a-row>
    <div ref="topRef" :style="style">
      <div>Fixed Top Block</div>
    </div>
  </div>
</template>
```
### Listening for anchor link change
Listening for anchor link change.
```vue
<script setup lang="ts">
function onChange(link: string) {
  console.log('Anchor:OnChange', link)
}
</script>

<template>
  <a-anchor
    :affix="false"
    :items="[
      {
        key: '1',
        href: '#anchor-demo-basic',
        title: 'Basic demo',
      },
      {
        key: '2',
        href: '#anchor-demo-static',
        title: 'Static demo',
      },
      {
        key: '3',
        href: '#api',
        title: 'API',
        children: [
          {
            key: '4',
            href: '#anchor-props',
            title: 'Anchor Props',
          },
          {
            key: '5',
            href: '#link-props',
            title: 'Link Props',
          },
        ],
      },
    ]"
    @change="onChange"
  />
</template>
```
### Replace href in history
Replace path in browser history, so back button returns to previous page instead of previous anchor item.
```vue
<template>
  <a-row>
    <a-col :span="16">
      <div id="part-1" style="height: 100vh; background: rgba(255, 0, 0, 0.02)" />
      <div id="part-2" style="height: 100vh; background: rgba(0, 255, 0, 0.02)" />
      <div id="part-3" style="height: 100vh; background: rgba(0, 0, 255, 0.02)" />
    </a-col>
    <a-col :span="8">
      <a-anchor
        replace
        :items="[
          {
            key: 'part-1',
            href: '#part-1',
            title: 'Part 1',
          },
          {
            key: 'part-2',
            href: '#part-2',
            title: 'Part 2',
          },
          {
            key: 'part-3',
            href: '#part-3',
            title: 'Part 3',
          },
        ]"
      />
    </a-col>
  </a-row>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Anchor by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { AnchorProps } from 'antdv-next'

const classesObject: AnchorProps['classes'] = {
  root: 'demo-anchor-root',
  item: 'demo-anchor-item',
  itemTitle: 'demo-anchor-title',
  indicator: 'demo-anchor-indicator',
}

const stylesFn: AnchorProps['styles'] = (info) => {
  if (info.props.direction === 'vertical') {
    return {
      root: {
        backgroundColor: 'rgba(255,251,230,0.5)',
        height: '100vh',
      },
    }
  }
  return {}
}

const items: NonNullable<AnchorProps['items']> = [
  {
    key: 'part-1',
    href: '#part-1',
    title: 'Part 1',
  },
  {
    key: 'part-2',
    href: '#part-2',
    title: 'Part 2',
  },
  {
    key: 'part-3',
    href: '#part-3',
    title: 'Part 3',
  },
]
</script>

<template>
  <a-row>
    <a-col :span="16">
      <div id="part-1" style="height: 100vh; background: rgba(255, 0, 0, 0.08)" />
      <div id="part-2" style="height: 100vh; background: rgba(0, 255, 0, 0.08)" />
      <div id="part-3" style="height: 100vh; background: rgba(0, 0, 255, 0.08)" />
    </a-col>
    <a-col :span="8">
      <a-anchor replace :items="items" :styles="stylesFn" :classes="classesObject" />
    </a-col>
  </a-row>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Anchor

#### Props {#anchor-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- |---| --- | --- | --- |
| affix | Fixed mode of Anchor | boolean \| Omit&lt;AffixProps, 'offsetTop' \| 'target' \| 'children'&gt; | true | | × |
| bounds | Bounding distance of anchor area | number | 5 | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;)=&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| getContainer | Scrolling container | () =&gt; HTMLElement | () =&gt; window | - | × |
| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) =&gt; string | - | - | × |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | - | × |
| showInkInFixed | Whether show ink-square when `affix={false}` | boolean| false | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;)=&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#anchor-demo-targetoffset) | number | - | - | × |
| items | Data configuration option content, support nesting through children | &#123; key, href, title, target, children &#125;\[] [see](#anchoritem) | - |  | × |
| direction | Set Anchor direction | `vertical` \| `horizontal`| `vertical` |  | × |
| replace | Replace items' href in browser history instead of pushing it | boolean | false |  | × |

#### Events {#anchor-events}

| Event | Description | Type                                                                 | Version |
| --- | --- |----------------------------------------------------------------------| --- |
| click | Set the handler to handle `click` event | (e: MouseEvent, link: &#123; title: VueNode, href: string &#125;) =&gt; void | - |
| change | Listening for anchor link change | (currentActiveLink: string) =&gt; void                               | - |

#### Slots {#anchor-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| item | Customize anchor item rendering | (item: AnchorItem) =&gt; any | - |

## Types

### AnchorItem

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| key | The unique identifier of the Anchor Link | string \| number | - | - |
| href | The target of hyperlink | string | - | - |
| target | Specifies where to display the linked URL | string | - | - |
| title | The content of hyperlink | VueNode | - | - |
| children | Nested Anchor Link, `Attention: This attribute does not support horizontal orientation` | [AnchorItem](#anchoritem)\[] | - | - |
| replace | Replace item href in browser history instead of pushing it | boolean | false | |

#### AnchorItemLink

We recommend using the items form instead.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| href | The target of hyperlink | string | - | - |
| target | Specifies where to display the linked URL | string | - | - |
| title | The content of hyperlink | VueNode | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Anchor" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### The `:target` pseudo-class of the destination element does not take effect as expected after anchor navigation. {#faq-target-pseudo-class}

For the purpose of page performance optimization, the implementation of anchor navigation has been changed from `window.location.href` to `window.history.pushState/replaceState`. Since `pushState/replaceState` does not trigger a page reload, the browser will not automatically update the matching state of the `:target` pseudo-class. To resolve this issue, you can manually construct the full URL: `href = window.location.origin + window.location.pathname + '#xxx'`.

Related issues: [#53143](https://github.com/ant-design/ant-design/issues/53143) [#54255](https://github.com/ant-design/ant-design/issues/54255)

---
Title: App
URL: https://www.antdv-next.com/components/app.md
---

## When To Use {#when-to-use}

- Provide reset styles based on `.ant-app` element.
- You could use static methods of `message/notification/Modal` form `useApp` without writing `contextHolder` manually.

## Examples {#examples}

### Basic
Get instance for `message`, `notification`, `modal`.
```vue
<script setup lang="ts">
import MyPage from './myPage.vue'
</script>

<template>
  <a-app>
    <MyPage />
  </a-app>
</template>
```
### Hooks config
Config for `message`, `notification`.
```vue
<script setup lang="ts">
import MyPage2 from './myPage2.vue'
</script>

<template>
  <a-app :message="{ maxCount: 1 }" :notification="{ placement: 'bottomLeft' }">
    <MyPage2 />
  </a-app>
</template>
```

```html
<!-- myPage.vue -->
<template>
  <a-space>
    <a-button type="primary" @click="showMessage">Open message</a-button>
    <a-button type="primary" @click="showModal">Open modal</a-button>
    <a-button type="primary" @click="showNotification">Open notification</a-button>
  </a-space>
</template>

<script setup lang="ts">
  import { App } from 'antdv-next';

  const { message, modal, notification } = App.useApp();

  const showMessage = () => {
    message.success('Success!');
  };

  const showModal = () => {
    modal.warning({
      title: 'This is a warning message',
      content: 'some messages...some messages...',
    });
  };

  const showNotification = () => {
    notification.info({
      message: `Notification topLeft`,
      description: 'Hello, Antdv Next!!',
      placement: 'topLeft',
    });
  };
</script>
```

```html
<!-- myPage2.vue -->
<script setup lang="ts">
  import { App } from 'antdv-next'

  const { message, modal, notification } = App.useApp();

  const showMessage = () => {
    message.success('Success!');
  };

  const showNotification = () => {
    notification.info({
      title: 'Notification',
      description: 'Hello, Antdv Next!!',
    });
  };
</script>

<template>
  <a-space wrap>
    <a-button type="primary" @click="showMessage">
      Message for only one
    </a-button>
    <a-button type="primary" @click="showNotification">
      Notification for bottomLeft
    </a-button>
  </a-space>
</template>

```

## How to use

### Basic usage

App provides upstream and downstream method calls through `provide/inject`, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.

Note: App.useApp must be available under App.

### Embedded usage scenarios (if not necessary, try not to do nesting)

```html
<a-app>
  <a-space>
    ...
    <a-app>...</a-app>
  </a-space>
</a-app>
```

#### Sequence with ConfigProvider

The App component can only use the token in the `ConfigProvider`, if you need to use the Token, the ConfigProvider and the App component must appear in pairs.

```html
<a-config-provider theme="{{ ... }}">
  <a-app>...</a-app>
</a-config-provider>
```

## API

### Property {#property}

Common props ref：[Common props](/docs/vue/common-props)


| Property     | Description                                               | Type               | Default | Version | [Global Config](/components/config-provider#component-config) |
| ------------ | --------------------------------------------------------- | ------------------ | ------- | ------- | --- |
| message      | Global config for Message                                 | MessageConfig      | -       |         | × |
| notification | Global config for Notification                            | NotificationConfig | -       |         | × |
| component    | Config render element, if`false` will not create DOM node | any                | div     |         | × |

## Design Token

<ComponentTokenTable component="App"></ComponentTokenTable>

## FAQ

### CSS Var doesn't work inside `<a-app :component="false">` {#faq-css-var-component-false}

Antdv Next uses CSS variables by default. App needs a valid HTML element to hold its CSS variable class name. When `component` is `false`, App only provides context without rendering a root DOM node, so no App root class name or default styles are applied. The `class`, `rootClass`, and `style` properties cannot be applied in this mode and trigger a development warning. Keep the default `div` or specify another valid element when these styles are required.

---
Title: AutoComplete
URL: https://www.antdv-next.com/components/auto-complete.md
---

## When To Use {#when-to-use}

- When you need an input box instead of a selector.
- When you need input suggestions or helping text.

The differences with Select are:

- AutoComplete is an input box with text hints, and users can type freely. The keyword is aiding **input**.
- Select is selecting among given choices. The keyword is **select**.

## Examples {#examples}

### Basic Usage
Basic Usage, set data source of autocomplete with `options` property.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const options = ref<{ value: string }[]>([])
const anotherOptions = ref<{ value: string }[]>([])

const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat) })

function getPanelValue(searchText: string) {
  return searchText
    ? [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]
    : []
}

function handleSearch(text: string) {
  options.value = getPanelValue(text)
}

function handleAnotherSearch(text: string) {
  anotherOptions.value = getPanelValue(text)
}

function handleSelect(data: string) {
  console.log('onSelect', data)
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-auto-complete
      :options="options"
      style="width: 200px"
      placeholder="input here"
      :show-search="{ onSearch: handleSearch }"
      @select="handleSelect"
    />
    <a-auto-complete
      v-model:value="value"
      :options="anotherOptions"
      style="width: 200px"
      placeholder="control mode"
      :show-search="{ onSearch: handleAnotherSearch }"
      @select="handleSelect"
    />
  </a-flex>
</template>
```
### Customized Options
You could set custom `Option` label
```vue
<script setup lang="ts">
import { ref } from 'vue'

const options = ref<{ label: string, value: string }[]>([])

function handleSearch(value: string) {
  if (!value || value.includes('@')) {
    options.value = []
    return
  }
  options.value = ['gmail.com', '163.com', 'qq.com'].map(domain => ({
    label: `${value}@${domain}`,
    value: `${value}@${domain}`,
  }))
}
</script>

<template>
  <a-auto-complete
    style="width: 200px"
    placeholder="input here"
    :show-search="{ onSearch: handleSearch }"
    :options="options"
  />
</template>
```
### Custom Input Component
Customize Input Component
```vue
<script setup lang="ts">
import { ref } from 'vue'

const options = ref<{ value: string }[]>([])

function handleSearch(value: string) {
  options.value = value
    ? [{ value }, { value: value + value }, { value: value + value + value }]
    : []
}

function handleKeyPress(ev: KeyboardEvent) {
  console.log('handleKeyPress', ev.key)
}

function handleSelect(value: string) {
  console.log('onSelect', value)
}
</script>

<template>
  <a-auto-complete
    :options="options"
    style="width: 220px"
    :show-search="{ onSearch: handleSearch }"
    @select="handleSelect"
  >
    <a-textarea
      placeholder="input here"
      class="custom"
      style="height: 50px"
      @keypress="handleKeyPress"
    />
  </a-auto-complete>
</template>
```
### Non-case-sensitive AutoComplete
A non-case-sensitive AutoComplete
```vue
<script setup lang="ts">
const options = [
  { value: 'Burns Bay Road' },
  { value: 'Downing Street' },
  { value: 'Wall Street' },
]

const showSearch = {
  filterOption: (inputValue: string, option?: { value?: string }) => {
    return (option?.value ?? '').toUpperCase().includes(inputValue.toUpperCase())
  },
}
</script>

<template>
  <a-auto-complete
    style="width: 200px"
    :options="options"
    placeholder="try to type `b`"
    :show-search="showSearch"
  />
</template>
```
### Lookup-Patterns - Certain Category
Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#lookup-patterns). Basic Usage, set options of autocomplete with `options` property.
```vue
<script setup lang="ts">
import { UserOutlined } from '@antdv-next/icons'
import { h } from 'vue'

function renderTitle(title: string) {
  return h(
    'div',
    {
      style: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      },
    },
    [
      title,
      h(
        'a',
        {
          href: 'https://www.google.com/search?q=antd',
          target: '_blank',
          rel: 'noopener noreferrer',
        },
        'more',
      ),
    ],
  )
}

function renderItem(title: string, count: number) {
  return {
    value: title,
    label: h(
      'div',
      {
        style: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        },
      },
      [
        title,
        h(
          'span',
          {
            style: {
              display: 'inline-flex',
              alignItems: 'center',
              gap: '4px',
            },
          },
          [h(UserOutlined), String(count)],
        ),
      ],
    ),
  }
}

const options = [
  {
    label: renderTitle('Libraries'),
    options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
  },
  {
    label: renderTitle('Solutions'),
    options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
  },
  {
    label: renderTitle('Articles'),
    options: [renderItem('AntDesign design language', 100000)],
  },
]
</script>

<template>
  <a-auto-complete
    :classes="{ popup: { root: 'certain-category-search-dropdown' } }"
    :popup-match-select-width="500"
    style="width: 250px"
    placeholder="input here"
    :options="options"
  >
    <a-input-search size="large" placeholder="input here" />
  </a-auto-complete>
</template>

<style>
.certain-category-search-dropdown .ant-select-item-group {
  color: #666;
  font-weight: bold;
}

.certain-category-search-dropdown .ant-select-item-group:not(:last-child) {
  border-bottom: 1px solid #f6f6f6;
}

.certain-category-search-dropdown .ant-select-item-option-grouped {
  padding-inline-start: 16px;
}

.certain-category-search-dropdown .ant-select-item-option.show-all {
  text-align: center;
  cursor: default;
}

.certain-category-search-dropdown .rc-virtual-list-holder {
  max-height: 300px;
}
</style>
```
### Lookup-Patterns - Uncertain Category
Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#lookup-patterns).
```vue
<script setup lang="ts">
import { h, ref } from 'vue'

const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min

function searchResult(query: string) {
  return Array.from({ length: getRandomInt(5) }).map((_, idx) => {
    const category = `${query}${idx}`
    return {
      value: category,
      label: h(
        'div',
        {
          style: {
            display: 'flex',
            justifyContent: 'space-between',
          },
        },
        [
          h('span', [
            `Found ${query} on `,
            h(
              'a',
              {
                href: `https://s.taobao.com/search?q=${query}`,
                target: '_blank',
                rel: 'noopener noreferrer',
              },
              category,
            ),
          ]),
          h('span', `${getRandomInt(200, 100)} results`),
        ],
      ),
    }
  })
}

const options = ref<{ value: string, label: any }[]>([])

function handleSearch(value: string) {
  options.value = value ? searchResult(value) : []
}

function handleSelect(value: string) {
  console.log('onSelect', value)
}
</script>

<template>
  <a-auto-complete
    :popup-match-select-width="252"
    style="width: 300px"
    :options="options"
    placeholder="input here"
    :show-search="{ onSearch: handleSearch }"
    @select="handleSelect"
  >
    <a-input-search size="large" placeholder="input here" enter-button />
  </a-auto-complete>
</template>
```
### Status
Add status to AutoComplete with `status`, which could be `error` or `warning`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const options = ref<{ value: string }[]>([])
const anotherOptions = ref<{ value: string }[]>([])

const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat) })

function getPanelValue(searchText: string) {
  return searchText
    ? [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]
    : []
}

function handleSearch(text: string) {
  options.value = getPanelValue(text)
}

function handleAnotherSearch(text: string) {
  anotherOptions.value = getPanelValue(text)
}
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-auto-complete
      :options="options"
      :show-search="{ onSearch: handleSearch }"
      status="error"
      style="width: 200px"
    />
    <a-auto-complete
      :options="anotherOptions"
      :show-search="{ onSearch: handleAnotherSearch }"
      status="warning"
      style="width: 200px"
    />
  </a-space>
</template>
```
### Variants
There are `outlined`, `filled`, `borderless`, and `underlined` variants to choose from.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const options = ref<{ value: string }[]>([])

const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat) })

function getPanelValue(searchText: string) {
  return searchText
    ? [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]
    : []
}

function handleSearch(text: string) {
  options.value = getPanelValue(text)
}

function handleSelect(value: string) {
  console.log('onSelect', value)
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-auto-complete
      :options="options"
      style="width: 200px"
      placeholder="Outlined"
      :show-search="{ onSearch: handleSearch }"
      @select="handleSelect"
    />
    <a-auto-complete
      :options="options"
      style="width: 200px"
      placeholder="Filled"
      :show-search="{ onSearch: handleSearch }"
      variant="filled"
      @select="handleSelect"
    />
    <a-auto-complete
      :options="options"
      style="width: 200px"
      placeholder="Borderless"
      :show-search="{ onSearch: handleSearch }"
      variant="borderless"
      @select="handleSelect"
    />
    <a-auto-complete
      :options="options"
      style="width: 200px"
      placeholder="Underlined"
      :show-search="{ onSearch: handleSearch }"
      variant="underlined"
      @select="handleSelect"
    />
  </a-flex>
</template>
```
### Customize clear button
Customize clear button
```vue
<script setup lang="ts">
import { CloseSquareFilled } from '@antdv-next/icons'
import { h, ref } from 'vue'

const options = ref<{ value: string }[]>([])

const mockVal = (str: string, repeat = 1) => ({ value: str.repeat(repeat) })

function getPanelValue(searchText: string) {
  return searchText
    ? [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]
    : []
}

function handleSearch(text: string) {
  options.value = getPanelValue(text)
}

const clearIcon = h(CloseSquareFilled)
</script>

<template>
  <a-flex vertical gap="medium">
    <a-auto-complete
      :options="options"
      style="width: 200px"
      :show-search="{ onSearch: handleSearch }"
      placeholder="UnClearable"
      :allow-clear="false"
    />
    <a-auto-complete
      :options="options"
      style="width: 200px"
      :show-search="{ onSearch: handleSearch }"
      placeholder="Customized clear icon"
      :allow-clear="{ clearIcon }"
    />
  </a-flex>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of AutoComplete by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const stylesObject = {
  popup: {
    root: {
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: '#1890ff',
    },
    list: {
      backgroundColor: 'rgba(240, 240, 240, 0.85)',
    },
    listItem: {
      color: '#272727',
    },
  },
}

function stylesFn({ props }: { props: { variant?: string } }) {
  if (props.variant === 'filled') {
    return {
      popup: {
        root: {
          borderWidth: '1px',
          borderStyle: 'solid',
          borderColor: '#ccc',
        },
        list: {
          backgroundColor: 'rgba(240, 240, 240, 0.85)',
        },
        listItem: {
          color: '#272727',
        },
      },
    }
  }
  return {}
}

const options = [
  { value: 'Burnaby' },
  { value: 'Seattle' },
  { value: 'Los Angeles' },
  { value: 'San Francisco' },
  { value: 'Meet student' },
]

const sharedProps = {
  options,
  classes: {
    root: 'auto-complete-style-root',
  },
  style: { width: '200px' },
}

const value = ref('')
</script>

<template>
  <a-flex vertical gap="medium">
    <a-auto-complete v-model:value="value" v-bind="sharedProps" placeholder="object styles" :styles="stylesObject" />
    <a-auto-complete
      v-model:value="value"
      v-bind="sharedProps"
      placeholder="function styles"
      :styles="stylesFn"
      variant="filled"
    />
  </a-flex>
</template>

<style>
.auto-complete-style-root {
  border-radius: 4px;
}
</style>
```
### Custom input with allowClear debug
Custom input with `allowClear` on hover debug.
```vue
<script setup lang="ts">
const options = [{ value: 'Burnaby' }, { value: 'Seattle' }, { value: 'Los Angeles' }]
</script>

<template>
  <a-flex vertical :gap="24" style="width: 300px">
    <a-auto-complete allow-clear default-value="Burnaby" :options="options">
      <a-input />
    </a-auto-complete>
    <a-auto-complete allow-clear default-value="Burnaby" :options="options">
      <a-textarea />
    </a-auto-complete>
  </a-flex>
</template>
```
### Disabled custom input debug
Disabled custom input debug.
```vue
<script setup lang="ts">
</script>

<template>
  <a-flex :gap="12" wrap>
    <a-input disabled placeholder="Regular Input" />
    <a-auto-complete disabled>
      <a-textarea disabled />
    </a-auto-complete>
    <a-select disabled :options="[]" />
  </a-flex>
</template>
```
### Filled custom input debug
Filled custom input debug.
```vue
<script setup lang="ts">
const options = [{ value: 'Burnaby' }, { value: 'Seattle' }, { value: 'Los Angeles' }]
</script>

<template>
  <a-flex :gap="24" wrap>
    <a-form layout="vertical" variant="filled" :style="{ width: '280px' }">
      <a-form-item label="AutoComplete TextArea">
        <a-auto-complete :options="options">
          <a-textarea placeholder="Custom TextArea" />
        </a-auto-complete>
      </a-form-item>
      <a-form-item label="Input TextArea">
        <a-textarea placeholder="Compare TextArea" />
      </a-form-item>
    </a-form>
  </a-flex>
</template>
```
### Disabled text colour in Form debug
Disabled text colour inside a Form, debug. Checks that the input text uses the disabled
colour both when the Form is disabled and when the component itself is.
```vue
<script setup lang="ts">
const options = [{ value: 'Disabled Value' }]
</script>

<template>
  <a-flex vertical :gap="12" :style="{ width: '240px' }">
    <a-form disabled>
      <a-form-item label="Form disabled" :style="{ marginBottom: 0 }">
        <a-auto-complete value="Disabled Value" :options="options" />
      </a-form-item>
    </a-form>
    <a-auto-complete disabled value="Disabled Value" :options="options" />
  </a-flex>
</template>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowClear | Show clear button | boolean \| &#123; clearIcon?: VueNode &#125; | false | - | × |
| backfill | If backfill selected item the input when using keyboard | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | × |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | - | × |
| disabled | Whether disabled select | boolean | false | - | × |
| getPopupContainer | Parent node of the dropdown. Default to body, if you encountered positioning problems during scroll, try changing to the scrollable area and position relative to it | (triggerNode: HTMLElement) =&gt; HTMLElement | () =&gt; document.body | - | × |
| labelRender | Customize selected label render | (props: LabelInValueType) =&gt; VueNode | - | - | × |
| notFoundContent | Specify content to show when no result matches | VueNode | - | - | × |
| open | Controlled open state of dropdown | boolean | - | - | × |
| options | Select options. Will get better perf than jsx definition | &#123; label: VueNode; value: string &#125;[] | - | - | × |
| optionRender | Customize the rendering dropdown options | (option: FlattenOptionData&lt;BaseOptionType&gt;, info: &#123; index: number &#125;) =&gt; VueNode | - | - | × |
| placeholder | The placeholder of input | string | - | - | × |
| popupMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | - | × |
| popupRender | Customize dropdown content | (menu: VNode) =&gt; VueNode | - | - | × |
| showSearch | Search configuration | boolean \| [SearchConfig](#showsearch) | true | - | × |
| size | The size of the input box | `large` \| `medium` \| `small` | - | - | × |
| status | Set validation status | `error` \| `warning` | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | × |
| value | Selected option, support `v-model:value` | string | - | - | × |
| variant | Variants of input | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | × |
| virtual | Disable virtual scroll when set to false | boolean | true | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| blur | Called when blur | (e: FocusEvent) =&gt; void | - |
| change | Called when selecting an option or changing input value | (value: string) =&gt; void | - |
| clear | Called when clear | () =&gt; void | - |
| focus | Called when focus | (e: FocusEvent) =&gt; void | - |
| inputKeydown | Called when key pressed | (e: KeyboardEvent) =&gt; void | - |
| openChange | Called when dropdown open | (open: boolean) =&gt; void | - |
| popupScroll | Called when dropdown scrolls | (e: UIEvent) =&gt; void | - |
| search | Called when searching items | (value: string) =&gt; void | - |
| select | Called when an option is selected, the params are option's value (or key) and option instance | (value: string, option: Option) =&gt; void | - |

### AutoComplete Methods {#methods}

| Name | Description | Version |
| --- | --- | --- |
| blur() | Remove focus | - |
| focus() | Get focus | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Customize input element, or provide `AutoComplete.Option` children | () =&gt; VueNode | - |
| labelRender | Customize selected label render | (props: LabelInValueType) =&gt; VueNode | - |
| notFoundContent | Specify content to show when no result matches | () =&gt; VueNode | - |
| optionRender | Customize the rendering dropdown options | (option: FlattenOptionData&lt;BaseOptionType&gt;, info: &#123; index: number &#125;) =&gt; VueNode | - |
| popupRender | Customize dropdown content | (menu: VNode) =&gt; VueNode | - |
| prefix | The custom prefix | () =&gt; VueNode | - |
| suffixIcon | The custom suffix icon | () =&gt; VueNode | - |

## Types

### showSearch

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| (inputValue: string, option?: Option) =&gt; boolean | true | - |
| onSearch | Called when searching items | (value: string) =&gt; void | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Select" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### Why doesn't the text composition system work well with onSearch in controlled mode? {#faq-controlled-onsearch-composition}

Please use `onChange` to manage control state. `onSearch` is used for searching input which is not the same as `onChange`. Besides, clicking on the option will not trigger the `onSearch` event.

Related issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)

### Why won't a controlled open AutoComplete display a drop-down menu when options are empty? {#faq-empty-options-controlled-open}

The AutoComplete component is essentially an extension of the Input form element. When the `options` property is empty, displaying empty text could mislead the user into believing the component is not operational, when in fact they are still able to input text. To avoid confusion, the `open` property will not display the drop-down menu when set to `true` and in combination with an empty `options` property. The `open` property must be used in conjunction with the `options` property.

---
Title: Avatar
URL: https://www.antdv-next.com/components/avatar.md
---

## When To Use {#when-to-use}

## Examples {#examples}

### Basic
Three sizes and two shapes are available.
```vue
<script setup lang="ts">
import { UserOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-space direction="vertical" :size="16">
    <a-space wrap :size="16">
      <a-avatar :size="64">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-avatar size="large">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-avatar>
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-avatar size="small">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-avatar :size="14">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
    </a-space>
    <a-space wrap :size="16">
      <a-avatar shape="square" :size="64">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-avatar shape="square" size="large">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-avatar shape="square">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-avatar shape="square" size="small">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-avatar shape="square" :size="14">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
    </a-space>
  </a-space>
</template>
```
### Type
Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
```vue
<script setup lang="ts">
import { UserOutlined } from '@antdv-next/icons'

const url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'
</script>

<template>
  <a-space :size="16" wrap>
    <a-avatar>
      <template #icon>
        <UserOutlined />
      </template>
    </a-avatar>
    <a-avatar>U</a-avatar>
    <a-avatar :size="40">
      USER
    </a-avatar>
    <a-avatar :src="url" />
    <a-avatar>
      <template #src>
        <img :src="url" alt="avatar" :draggable="false">
      </template>
    </a-avatar>
    <a-avatar style="background-color: #fde3cf; color: #f56a00;">
      U
    </a-avatar>
    <a-avatar style="background-color: #87d068;">
      <template #icon>
        <UserOutlined />
      </template>
    </a-avatar>
  </a-space>
</template>
```
### Autoset Font Size
For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. You can also use `gap` to set the unit distance between left and right sides.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const UserList = ['U', 'Lucy', 'Tom', 'Edward']
const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
const GapList = [4, 3, 2, 1]

const user = ref(UserList[0])
const color = ref(ColorList[0])
const gap = ref(GapList[0])

function changeUser() {
  const index = UserList.indexOf(user.value!)
  user.value = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
  color.value = index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]
}

function changeGap() {
  const index = GapList.indexOf(gap.value!)
  gap.value = index < GapList.length - 1 ? GapList[index + 1] : GapList[0]
}
</script>

<template>
  <div>
    <a-avatar
      :style="{ backgroundColor: color, verticalAlign: 'middle' }"
      size="large"
      :gap="gap"
    >
      {{ user }}
    </a-avatar>
    <a-button
      size="small"
      style="margin: 0 16px; vertical-align: middle;"
      @click="changeUser"
    >
      ChangeUser
    </a-button>
    <a-button
      size="small"
      style="vertical-align: middle;"
      @click="changeGap"
    >
      changeGap
    </a-button>
  </div>
</template>
```
### With Badge
Usually used for reminders and notifications.
```vue
<script setup lang="ts">
import { UserOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-space :size="24">
    <a-badge :count="1">
      <a-avatar shape="square">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
    </a-badge>
    <a-badge dot>
      <a-avatar shape="square">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
    </a-badge>
  </a-space>
</template>
```
### Avatar.Group
Avatar group display.
```vue
<script setup lang="ts">
import { AntdvNextOutlined, UserOutlined } from '@antdv-next/icons'
</script>

<template>
  <div>
    <a-avatar-group>
      <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
      <a href="https://ant.design">
        <a-avatar style="background-color: #f56a00;">
          K
        </a-avatar>
      </a>
      <a-tooltip title="Ant User" placement="top">
        <a-avatar style="background-color: #87d068;">
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
      </a-tooltip>
      <a-avatar style="background-color: #1677ff;">
        <template #icon>
          <AntdvNextOutlined />
        </template>
      </a-avatar>
    </a-avatar-group>
    <a-divider />
    <a-avatar-group
      :max="{
        count: 2,
        style: { color: '#f56a00', backgroundColor: '#fde3cf' },
      }"
    >
      <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />
      <a-avatar style="background-color: #f56a00;">
        K
      </a-avatar>
      <a-tooltip title="Ant User" placement="top">
        <a-avatar style="background-color: #87d068;">
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
      </a-tooltip>
      <a-avatar style="background-color: #1677ff;">
        <template #icon>
          <AntdvNextOutlined />
        </template>
      </a-avatar>
    </a-avatar-group>
    <a-divider />
    <a-avatar-group
      size="large"
      :max="{
        count: 2,
        style: { color: '#f56a00', backgroundColor: '#fde3cf' },
      }"
    >
      <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=3" />
      <a-avatar style="background-color: #f56a00;">
        K
      </a-avatar>
      <a-tooltip title="Ant User" placement="top">
        <a-avatar style="background-color: #87d068;">
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
      </a-tooltip>
      <a-avatar style="background-color: #1677ff;">
        <template #icon>
          <AntdvNextOutlined />
        </template>
      </a-avatar>
    </a-avatar-group>
    <a-divider />
    <a-avatar-group
      size="large"
      :max="{
        count: 2,
        style: { color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' },
        popover: { trigger: 'click' },
      }"
    >
      <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
      <a-avatar style="background-color: #f56a00;">
        K
      </a-avatar>
      <a-tooltip title="Ant User" placement="top">
        <a-avatar style="background-color: #87d068;">
          <template #icon>
            <UserOutlined />
          </template>
        </a-avatar>
      </a-tooltip>
      <a-avatar style="background-color: #1677ff;">
        <template #icon>
          <AntdvNextOutlined />
        </template>
      </a-avatar>
    </a-avatar-group>
    <a-divider />
    <a-avatar-group shape="square">
      <a-avatar style="background-color: #fde3cf;">
        A
      </a-avatar>
      <a-avatar style="background-color: #f56a00;">
        K
      </a-avatar>
      <a-avatar style="background-color: #87d068;">
        <template #icon>
          <UserOutlined />
        </template>
      </a-avatar>
      <a-avatar style="background-color: #1677ff;">
        <template #icon>
          <AntdvNextOutlined />
        </template>
      </a-avatar>
    </a-avatar-group>
  </div>
</template>
```
### maxCount includes overflow
Wrap `Avatar.Group` to add `overflowInFinal` prop. When enabled, `max.count` represents the total number of elements to display and reserves 1 slot for the overflow indicator.
```vue
<script setup lang="ts">
import type { AvatarGroupProps } from 'antdv-next'
import type { PropType, VNode } from 'vue'
import { AvatarGroup } from 'antdv-next'
import { defineComponent, Fragment, h, ref } from 'vue'

function flattenChildren(nodes: VNode[]): VNode[] {
  return nodes.flatMap(node =>
    node.type === Fragment && Array.isArray(node.children)
      ? flattenChildren(node.children as VNode[])
      : [node],
  )
}

const AvatarGroupOverflow = defineComponent({
  name: 'AvatarGroupOverflow',
  props: {
    overflowInFinal: { type: Boolean, default: false },
    max: { type: Object as PropType<AvatarGroupProps['max']>, default: undefined },
  },
  setup(props, { slots, attrs }) {
    return () => {
      const children = flattenChildren(slots.default?.() ?? [])
      const mergedMaxCount = props.max?.count ?? 3
      const reserveOverflowSlot = props.overflowInFinal && mergedMaxCount < children.length
      return h(
        AvatarGroup,
        {
          ...attrs,
          max: reserveOverflowSlot
            ? { ...props.max, count: Math.max(1, mergedMaxCount - 1) }
            : props.max,
        },
        () => children,
      )
    }
  },
})

const avatarCount = ref(4)
const enableOverflowInFinal = ref(true)
</script>

<template>
  <a-flex vertical gap="medium">
    <a-flex :gap="24" align="center">
      <span>Avatar count: </span>
      <a-input-number
        v-model:value="avatarCount"
        style="width: 120px"
        :min="2"
        :max="10"
        aria-label="Avatar count"
        mode="spinner"
      />
    </a-flex>
    <a-flex :gap="8" align="center">
      <span>overflowInFinal: </span>
      <a-switch v-model:checked="enableOverflowInFinal" aria-label="overflowInFinal" />
    </a-flex>
    <AvatarGroupOverflow
      :max="{
        count: 3,
        style: { backgroundColor: '#52c41a', color: '#fff' },
      }"
      :overflow-in-final="enableOverflowInFinal"
    >
      <a-avatar v-for="i in avatarCount" :key="i" style="background-color: #f56a00;">
        {{ String.fromCharCode(64 + i) }}
      </a-avatar>
    </AvatarGroupOverflow>
  </a-flex>
</template>
```
### Responsive Size
Avatar size can be automatically adjusted based on the screen size.
```vue
<script setup lang="ts">
import { AntdvNextOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-avatar
    :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }"
  >
    <template #icon>
      <AntdvNextOutlined />
    </template>
  </a-avatar>
</template>
```

## API

### Avatar

#### Props {#avatar-props}

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| shape | The shape of avatar | `circle` \| `square` | `circle` | - | × |
| size | The size of the avatar | number \| `large` \| `medium` \| `small` \| `{ xs: number, sm: number, ... }` | `medium` | - | × |
| gap | Letter type unit distance between left and right sides | number | 4 | -     | × |
| src | The address of the image for an image avatar or image element | VueNode | - | -     | × |
| srcSet | A list of sources to use for different screen resolutions | string | - | -     | × |
| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | true | - | × |
| icon | Custom icon type for an icon avatar | VueNode | - | -     | × |
| alt | This attribute defines the alternative text describing the image | string | - | -     | × |
| crossOrigin | CORS settings attributes | '' \| 'anonymous' \| 'use-credentials' | - | -     | × |
| onError | Handler when img load error, return false to prevent default fallback behavior | () =&gt; boolean | - | -     | × |

#### Events {#avatar-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | - | (e: MouseEvent) =&gt; void | - |

### Slots {#avatar-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| icon | Custom icon type for an icon avatar | () =&gt; any | - |
| src | The address of the image for an image avatar or image element | () =&gt; any | - |

### AvatarGroup

#### Props {#avatar-group-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| prefixCls | - | string | - | - |
| max | - | &#123;     count?: number     style?: CSSProperties     popover?: PopoverProps   &#125; | - | - |
| size | The size of the avatar | AvatarSize | `medium` | - |
| shape | The shape of avatar | 'circle' \| 'square' | `circle` | - |

## Design Token

<ComponentTokenTable component="Avatar" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Badge
URL: https://www.antdv-next.com/components/badge.md
---

## When To Use {#when-to-use}

Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.

## Examples {#examples}

### Basic
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
```vue
<script setup lang="ts">
import { ClockCircleOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-space size="medium">
    <a-badge :count="5">
      <a-avatar shape="square" size="large" />
    </a-badge>
    <a-badge :count="0" show-zero>
      <a-avatar shape="square" size="large" />
    </a-badge>
    <a-badge>
      <template #count>
        <ClockCircleOutlined style="color: #f5222d" />
      </template>
      <a-avatar shape="square" size="large" />
    </a-badge>
  </a-space>
</template>
```
### Standalone
Used in standalone when children is empty.
```vue
<script setup lang="ts">
import { ClockCircleOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <a-space>
    <a-switch v-model:checked="show" />
    <a-badge :count="show ? 11 : 0" show-zero color="#faad14" />
    <a-badge :count="show ? 25 : 0" />
    <a-badge :count="show ? 1 : 0">
      <template #count>
        <ClockCircleOutlined style="color: #f5222d" />
      </template>
    </a-badge>
    <a-badge
      class="site-badge-count-109"
      :count="show ? 109 : 0"
      :style="{ backgroundColor: '#52c41a' }"
    />
  </a-space>
</template>
```
### Overflow Count
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
```vue
<script setup lang="ts">
</script>

<template>
  <a-space size="large">
    <a-badge :count="99">
      <a-avatar shape="square" size="large" />
    </a-badge>
    <a-badge :count="100">
      <a-avatar shape="square" size="large" />
    </a-badge>
    <a-badge :count="99" :overflow-count="10">
      <a-avatar shape="square" size="large" />
    </a-badge>
    <a-badge :count="1000" :overflow-count="999">
      <a-avatar shape="square" size="large" />
    </a-badge>
  </a-space>
</template>
```
### Red badge
This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
```vue
<script setup lang="ts">
import { NotificationOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-space>
    <a-badge dot>
      <NotificationOutlined style="font-size: 16px" />
    </a-badge>
    <a-badge dot>
      <a href="#">Link something</a>
    </a-badge>
  </a-space>
</template>
```
### Dynamic
The count will be animated as it changes.
```vue
<script setup lang="ts">
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const count = ref(5)
const show = ref(true)

function increase() {
  count.value++
}

function decline() {
  let newCount = count.value - 1
  if (newCount < 0) {
    newCount = 0
  }
  count.value = newCount
}

function random() {
  const newCount = Math.floor(Math.random() * 100)
  count.value = newCount
}
</script>

<template>
  <a-space vertical>
    <a-space size="large">
      <a-badge :count="count">
        <a-avatar shape="square" size="large" />
      </a-badge>
      <a-space-compact>
        <a-button @click="decline">
          <template #icon>
            <MinusOutlined />
          </template>
        </a-button>
        <a-button @click="increase">
          <template #icon>
            <PlusOutlined />
          </template>
        </a-button>
        <a-button @click="random">
          <template #icon>
            <QuestionOutlined />
          </template>
        </a-button>
      </a-space-compact>
    </a-space>
    <a-space size="large">
      <a-badge :dot="show">
        <a-avatar shape="square" size="large" />
      </a-badge>
      <a-switch v-model:checked="show" />
    </a-space>
  </a-space>
</template>
```
### Clickable
The badge can be wrapped with `a` tag to make it linkable.
```vue
<script setup lang="ts">
</script>

<template>
  <a href="#">
    <a-badge :count="5">
      <a-avatar shape="square" size="large" />
    </a-badge>
  </a>
</template>
```
### Offset
Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
```vue
<script setup lang="ts">
</script>

<template>
  <a-badge :count="5" :offset="[10, 10]">
    <a-avatar shape="square" size="large" />
  </a-badge>
</template>
```
### Size
Set size of numeral Badge.
```vue
<script setup lang="ts">
</script>

<template>
  <a-space size="medium">
    <a-badge size="medium" :count="5">
      <a-avatar shape="square" size="large" />
    </a-badge>
    <a-badge size="small" :count="5">
      <a-avatar shape="square" size="large" />
    </a-badge>
  </a-space>
</template>
```
### Status
Standalone badge with status.
```vue
<script setup lang="ts">
</script>

<template>
  <a-space>
    <a-badge status="success" />
    <a-badge status="error" />
    <a-badge status="default" />
    <a-badge status="processing" />
    <a-badge status="warning" />
  </a-space>
  <br>
  <a-space vertical>
    <a-badge status="success" text="Success" />
    <a-badge status="error" text="Error" />
    <a-badge status="default" text="Default" />
    <a-badge status="processing" text="Processing" />
    <a-badge status="warning" text="Warning" />
  </a-space>
</template>
```
### Colorful Badge
We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
```vue
<script setup lang="ts">
const colors = [
  'pink',
  'red',
  'yellow',
  'orange',
  'cyan',
  'green',
  'blue',
  'purple',
  'geekblue',
  'magenta',
  'volcano',
  'gold',
  'lime',
]
</script>

<template>
  <a-divider orientation="left">
    Presets
  </a-divider>
  <a-space vertical>
    <a-badge v-for="color in colors" :key="color" :color="color" :text="color" />
  </a-space>
  <a-divider orientation="left">
    Custom
  </a-divider>
  <a-space vertical>
    <a-badge color="#f50" text="#f50" />
    <a-badge color="rgb(45, 183, 245)" text="rgb(45, 183, 245)" />
    <a-badge color="hsl(102, 53%, 61%)" text="hsl(102, 53%, 61%)" />
    <a-badge color="hwb(205 6% 9%)" text="hwb(205 6% 9%)" />
  </a-space>
</template>
```
### Ribbon
Use ribbon badge.
```vue
<script setup lang="ts">
</script>

<template>
  <a-space vertical size="medium" style="width: 100%">
    <a-badge-ribbon text="Hippies">
      <a-card title="Pushes open the window" size="small">
        and raises the spyglass.
      </a-card>
    </a-badge-ribbon>
    <a-badge-ribbon text="Hippies" color="pink">
      <a-card title="Pushes open the window" size="small">
        and raises the spyglass.
      </a-card>
    </a-badge-ribbon>
    <a-badge-ribbon text="Hippies" color="red">
      <a-card title="Pushes open the window" size="small">
        and raises the spyglass.
      </a-card>
    </a-badge-ribbon>
    <a-badge-ribbon text="Hippies" color="cyan">
      <a-card title="Pushes open the window" size="small">
        and raises the spyglass.
      </a-card>
    </a-badge-ribbon>
    <a-badge-ribbon text="Hippies" color="green">
      <a-card title="Pushes open the window" size="small">
        and raises the spyglass.
      </a-card>
    </a-badge-ribbon>
    <a-badge-ribbon text="Hippies" color="purple">
      <a-card title="Pushes open the window" size="small">
        and raises the spyglass.
      </a-card>
    </a-badge-ribbon>
    <a-badge-ribbon text="Hippies" color="volcano">
      <a-card title="Pushes open the window" size="small">
        and raises the spyglass.
      </a-card>
    </a-badge-ribbon>
    <a-badge-ribbon text="Hippies" color="magenta">
      <a-card title="Pushes open the window" size="small">
        and raises the spyglass.
      </a-card>
    </a-badge-ribbon>
  </a-space>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Badge by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
const badgeClasses = {
  indicator: 'custom-badge-indicator',
}

const ribbonClasses = {
  root: 'custom-ribbon-root',
}

const badgeStyles = {
  root: {
    borderRadius: '8px',
  },
}

const ribbonStyles = {
  indicator: {
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
  },
}

function badgeStylesFn(info: any) {
  if (info.props.size === 'medium') {
    return {
      indicator: {
        fontSize: '14px',
        backgroundColor: '#696FC7',
      },
    }
  }
  return {}
}

function ribbonStylesFn(info: any) {
  if (info.props.color === '#696FC7') {
    return {
      content: {
        fontWeight: 'bold',
      },
      indicator: {
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-space size="large" vertical>
    <a-flex gap="medium">
      <a-badge size="small" :count="5" :classes="badgeClasses" :styles="badgeStyles">
        <a-avatar shape="square" size="large" />
      </a-badge>
      <a-badge :count="5" :classes="badgeClasses" :styles="badgeStylesFn">
        <a-avatar shape="square" size="large" />
      </a-badge>
    </a-flex>
    <a-flex vertical gap="medium">
      <a-badge-ribbon text="Custom Ribbon" :classes="ribbonClasses" :styles="ribbonStyles">
        <a-card title="Card with custom ribbon" size="small">
          This card has a customized ribbon with semantic classes and styles.
        </a-card>
      </a-badge-ribbon>
      <a-badge-ribbon
        text="Custom Ribbon"
        color="#696FC7"
        :classes="ribbonClasses"
        :styles="ribbonStylesFn"
      >
        <a-card title="Card with custom ribbon" size="small">
          This card has a customized ribbon with semantic classes and styles.
        </a-card>
      </a-badge-ribbon>
    </a-flex>
  </a-space>
</template>

<style>
.custom-badge-indicator {
  font-size: 10px;
}
.custom-ribbon-root {
  width: 400px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
}
</style>
```
### Title
The badge will display `title` when hovered over, instead of `count`.
```vue
<script setup lang="ts">
</script>

<template>
  <a-space size="large">
    <a-badge :count="5" title="Custom hover text">
      <a-avatar shape="square" size="large" />
    </a-badge>
    <a-badge :count="-5" title="Negative">
      <a-avatar shape="square" size="large" />
    </a-badge>
  </a-space>
</template>
```

## API

### Props {#props}

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| count | Number to show in badge | VueNode | - | - | × |
| showZero | Whether to show badge when `count` is zero | boolean | false | - | × |
| overflowCount | Max count to show | number | 99 | - | × |
| dot | Whether to display a red dot instead of `count` | boolean | false | - | × |
| scrollNumberPrefixCls | - | string | - | - | × |
| status | Set Badge as a status dot | PresetStatusColorType | - | - | × |
| color | Customize Badge dot color | LiteralUnion&lt;PresetColorKey&gt; | - | - | × |
| text | If `status` is set, `text` sets the display text of the status `dot` | VueNode | - | - | × |
| size | If `count` is set, `size` sets the size of badge | `medium` \| `small` | - | - | × |
| offset | Set offset of the badge dot | [number \| string, number \| string] | - | - | × |
| title | Text to show when hovering over the badge; set `null` or `false` to remove the native title | string \| null \| false | - | null/false: 1.4.0 | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | BadgeClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | BadgeStylesType | - | - | ✓ |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| count | Customize the badge indicator content | () =&gt; any | - |
| text | If `status` is set, `text` sets the display text of the status `dot` | () =&gt; any | - |

## Semantic DOM

### Badge

<demo src="./demo/_semantic.vue" simplify></demo>

### BadgeRibbon

<demo src="./demo/_semantic_ribbon.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Badge" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: BorderBeam
URL: https://www.antdv-next.com/components/border-beam.md
---

## When To Use

- Use when a container needs stronger visual emphasis without introducing business state semantics.
- Suitable for login panels, recommendation cards, AI modules, and key CTA blocks.
- As a decorative effect, it should not replace focus rings, validation borders, or status feedback.

## Examples

### Basic
Basic usage. Wrap any container with `BorderBeam` to add a continuous decorative beam effect along its border.
```vue
<template>
  <div :style="{ width: '360px' }">
    <a-border-beam>
      <a-card title="Workspace overview">
        Review task status, deployment health, and recent automation activity in one panel.
      </a-card>
    </a-border-beam>
  </div>
</template>
```
### Show on hover
Hide the border beam by default, and reveal it when hovering over the container.
```vue
<script setup lang="ts">
import { theme } from 'antdv-next'

const { token } = theme.useToken()
</script>

<template>
  <a-border-beam>
    <a-card class="hover-card" title="Hover over the card">
      The border beam appears when the pointer moves over this card.
    </a-card>
  </a-border-beam>
</template>

<style scoped>
.hover-card {
  width: 360px;
}

.hover-card :deep(.ant-border-beam) {
  opacity: 0;
  transition: opacity v-bind('token.motionDurationMid');
}

.hover-card :deep(.ant-border-beam)::before {
  animation-play-state: paused;
}

.hover-card:hover :deep(.ant-border-beam) {
  opacity: 1;
}

.hover-card:hover :deep(.ant-border-beam)::before {
  animation-play-state: running;
}
</style>
```
### Multiple beams
Use `count` to set the number of beams. Multiple beams are evenly distributed around the container border. It should be a positive integer, and the default value is `1`.
```vue
<template>
  <a-flex vertical :gap="16">
    <a-border-beam :count="3">
      <a-card title="Multiple beams">
        Set count to distribute multiple beams evenly around the container border.
      </a-card>
    </a-border-beam>
    <a-border-beam :count="2">
      <a-card title="Multiple beams">
        Set count to distribute multiple beams evenly around the container border.
      </a-card>
    </a-border-beam>
  </a-flex>
</template>
```
### Custom Container
A custom container can also host `BorderBeam`. The beam layer is inserted into the child node and positioned with `position: absolute` along the container edge, so the host element needs to provide a positioning context. In most cases, set `position: relative`.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'

const panelStyle: CSSProperties = {
  position: 'relative',
  width: '420px',
  background: '#fff',
  border: '1px solid #f0f0f0',
  borderRadius: '8px',
}

const contentStyle: CSSProperties = {
  minHeight: '160px',
  padding: '24px',
  color: 'rgba(0, 0, 0, 0.88)',
  lineHeight: '1.5715',
}
</script>

<template>
  <a-border-beam>
    <div :style="panelStyle">
      <div :style="contentStyle">
        Review task status, deployment health, and recent automation activity in one custom
        container.
      </div>
    </div>
  </a-border-beam>
</template>
```
### Gradients
Use the `color` prop to feed BorderBeam a solid color string or an array of gradient stops. `percent` accepts values from `0` to `100`; BorderBeam reserves tail space for the transparent fade automatically.
```vue
<script setup lang="ts">
import type { BorderBeamGradient } from 'antdv-next'
import { computed, ref } from 'vue'

interface Preset {
  key: string
  name: string
  usage: string
  description: string
  color: BorderBeamGradient
}

const presets: Preset[] = [
  {
    key: 'ocean',
    name: 'Ocean',
    usage: 'Dashboard',
    description: 'A calm blue-green accent that works well for data views and cloud tooling.',
    color: [
      { color: '#1677ff', percent: 0 },
      { color: '#36cfc9', percent: 52 },
      { color: '#95de64', percent: 100 },
    ],
  },
  {
    key: 'sunset',
    name: 'Sunset',
    usage: 'Upgrade',
    description: 'A warm highlight for upgrade prompts, featured cards, and marketing blocks.',
    color: [
      { color: '#ff7a45', percent: 0 },
      { color: '#ff4d4f', percent: 49 },
      { color: '#ff85c0', percent: 100 },
    ],
  },
  {
    key: 'aurora',
    name: 'Aurora',
    usage: 'AI',
    description: 'A vivid cool-toned beam suited for AI assistants, copilots, and automation panels.',
    color: [
      { color: '#7c3aed', percent: 0 },
      { color: '#06b6d4', percent: 57 },
      { color: '#67e8f9', percent: 100 },
    ],
  },
  {
    key: 'forest',
    name: 'Forest',
    usage: 'Recommendation',
    description: 'A bright natural palette that feels good on recommendation and growth-oriented cards.',
    color: [
      { color: '#22c55e', percent: 0 },
      { color: '#a3e635', percent: 54 },
      { color: '#facc15', percent: 100 },
    ],
  },
  {
    key: 'ember',
    name: 'Ember',
    usage: 'Alert',
    description: 'A high-energy warm gradient for important alerts, launch cards, and hot paths.',
    color: [
      { color: '#fa541c', percent: 0 },
      { color: '#ff7875', percent: 46 },
      { color: '#ffd666', percent: 100 },
    ],
  },
  {
    key: 'nebula',
    name: 'Nebula',
    usage: 'Labs',
    description: 'A cool purple-pink mix that fits experimental modules and product lab surfaces.',
    color: [
      { color: '#2f54eb', percent: 0 },
      { color: '#722ed1', percent: 44 },
      { color: '#ff85c0', percent: 100 },
    ],
  },
]

const currentKey = ref<string>(presets[0].key)
const currentPreset = computed(() => presets.find(item => item.key === currentKey.value) ?? presets[0])
const segmentOptions = computed(() => presets.map(preset => ({ label: preset.name, value: preset.key })))
</script>

<template>
  <a-flex vertical :gap="16" :style="{ maxWidth: '480px' }">
    <a-segmented
      v-model:value="currentKey"
      block
      :options="segmentOptions"
    />
    <a-border-beam :color="currentPreset.color">
      <a-card
        :title="currentPreset.name"
        :styles="{ body: { display: 'flex', flexDirection: 'column', gap: '16px' } }"
      >
        <template #extra>
          <a-tag variant="filled">
            {{ currentPreset.usage }}
          </a-tag>
        </template>
        <a-typography-text type="secondary">
          {{ currentPreset.description }}
        </a-typography-text>
        <a-flex :gap="8" wrap>
          <a-tag
            v-for="item in currentPreset.color"
            :key="`${item.color}-${item.percent}`"
            :color="item.color"
            variant="filled"
          >
            {{ item.color }} · {{ item.percent }}%
          </a-tag>
        </a-flex>
        <a-typography-text type="secondary">
          Stop positions use the public 0-100 input range.
        </a-typography-text>
      </a-card>
    </a-border-beam>
  </a-flex>
</template>
```
### Duration
Use `duration` to control how many seconds the beam takes to complete one loop. The default is 6 seconds.
```vue
<script setup lang="ts">
const durations = [
  {
    name: 'Fast',
    seconds: 3,
    description: 'A quick loop for temporary highlights and active modules.',
  },
  {
    name: 'Default',
    seconds: 6,
    description: 'The original pacing for most emphasized containers.',
  },
  {
    name: 'Slow',
    seconds: 12,
    description: 'A calmer loop for persistent panels and ambient surfaces.',
  },
]
</script>

<template>
  <a-flex :gap="16" wrap>
    <template v-for="duration in durations" :key="duration.seconds">
      <div style="width: 220px">
        <a-border-beam :duration="duration.seconds">
          <a-card :title="duration.name">
            <template #extra>
              <a-tag variant="filled">
                {{ duration.seconds }}s
              </a-tag>
            </template>
            <a-typography-text>{{ duration.description }}</a-typography-text>
          </a-card>
        </a-border-beam>
      </div>
    </template>
  </a-flex>
</template>
```
### Size
Use `size` to control the size of the visible beam segment. The default is `100px`, and numbers are treated as pixels.
```vue
<script setup lang="ts">
const sizes: Array<{
  name: string
  size?: number | string
  bodyMinHeight: number
  description: string
  spanFull?: boolean
}> = [
  {
    name: 'Default',
    bodyMinHeight: 112,
    description: 'Uses the default 100px visible beam segment.',
  },
  {
    name: 'Compact',
    size: 56,
    bodyMinHeight: 112,
    description: 'Keeps the highlight shorter for dense card groups.',
  },
  {
    name: 'Extended',
    size: 160,
    bodyMinHeight: 192,
    description: 'Creates a longer highlight for wider feature panels.',
    spanFull: true,
  },
]
</script>

<template>
  <div :style="{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '32px', maxWidth: '960px' }">
    <template v-for="size in sizes" :key="size.name">
      <div :style="{ gridColumn: size.spanFull ? '1 / -1' : undefined }">
        <a-border-beam :size="size.size">
          <a-card
            :title="size.name"
            :style="{ minHeight: `${size.bodyMinHeight}px` }"
            :styles="{ body: { minHeight: size.bodyMinHeight, display: 'flex', alignItems: 'center' } }"
          >
            <template #extra>
              <a-tag variant="filled">
                {{ size.size ?? 100 }}px
              </a-tag>
            </template>
            <a-typography-text type="secondary">
              {{ size.description }}
            </a-typography-text>
          </a-card>
        </a-border-beam>
      </div>
    </template>
  </div>
</template>
```
### Line Width
Use `lineWidth` to adjust the beam width of an individual BorderBeam. The default value is `1px`, and numbers are treated as pixels.
```vue
<template>
  <div :style="{ width: '360px' }">
    <a-border-beam :line-width="2">
      <a-card title="Custom line width" style="border-width: 2px">
        Set lineWidth to match the border width of this container.
      </a-card>
    </a-border-beam>
  </div>
</template>
```
### Non-uniform radius
For clipped containers or non-uniform radii, the `outset` prop controls how far the beam sits outside the container edge. Set it to `0` to align the beam exactly with the container border.
```vue
<template>
  <div :style="{ width: '360px' }">
    <a-border-beam :outset="0">
      <a-card
        title="Activity stream"
        :style="{ borderRadius: '20px 20px 0 0', overflow: 'hidden' }"
        :styles="{ body: { display: 'flex', flexDirection: 'column', gap: '16px' } }"
      >
        <a-typography-text type="secondary">
          Use a multi-value <code>border-radius</code> like <code>20px 20px 0 0</code> to keep the beam aligned with non-uniform corners.
        </a-typography-text>
        <a-flex align="center" justify="space-between">
          <a-typography-text strong>
            12 running jobs
          </a-typography-text>
          <a-button type="primary">
            View queue
          </a-button>
        </a-flex>
      </a-card>
    </a-border-beam>
  </div>
</template>
```
### Component Token
Override the BorderBeam `lineWidth` token via `ConfigProvider` theme.components to adjust the beam thickness.
```vue
<script setup lang="ts">
const customTheme = {
  components: {
    BorderBeam: { lineWidth: 3 },
  },
}
</script>

<template>
  <a-flex :gap="24" wrap>
    <div :style="{ width: '320px' }">
      <a-border-beam>
        <a-card title="Default line width">
          <a-typography-text type="secondary">
            Uses the default global lineWidth token from the current theme.
          </a-typography-text>
        </a-card>
      </a-border-beam>
    </div>
    <a-config-provider :theme="customTheme">
      <div :style="{ width: '320px' }">
        <a-border-beam>
          <a-card title="Custom line width">
            <a-typography-text type="secondary">
              Override lineWidth from theme.token.
            </a-typography-text>
          </a-card>
        </a-border-beam>
      </div>
    </a-config-provider>
  </a-flex>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| color | Beam color configuration. Supports a single color string or gradient stops. `percent` uses the `0 ~ 100` input range and BorderBeam reserves tail space for the transparent fade | `string \| { color: string, percent: number }[]` | - | - | × |
| count | Number of beams | number | 1 | - | × |
| duration | Time in seconds for the beam to complete one loop | number | 6 | - | × |
| lineWidth | Width of the beam line. Numbers are treated as pixels | `number \| string` | `1px` | - | × |
| outset | Outset distance of the beam layer from the container edge. Set to `0` for clipped containers | `number \| string` | - | - | × |
| size | Size of the visible beam segment. Numbers are treated as pixels | `number \| string` | 100 | - | × |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Decorated content. Must be a single DOM element or a Vue component that forwards its ref to a DOM element | () => any | - |

## Design Token

<ComponentTokenTable component="BorderBeam"></ComponentTokenTable>

## FAQ

### How does BorderBeam behave when reduced motion is enabled? {#faq-reduced-motion}

`BorderBeam` treats the beam as a decorative effect. When `prefers-reduced-motion: reduce` is active, the beam effect is hidden.

### What does `percent` mean in `color`? {#faq-color-percent}

`percent` represents the authored stop position and accepts values from `0` to `100`. BorderBeam maps those stops into the visible beam segment and reserves the trailing area for transparent fade-out so the moving tail stays visible.

### `size` limits {#faq-size-limit}

`BorderBeam` creates the beam with a square gradient layer whose side length is `size`. The layer travels around the container border, and a mask exposes the areas where it overlaps the border. `size` sets the side length independently of the border path length.

Along a horizontal edge, the gradient layer extends about `size / 2` to either side of the edge. If `size` approaches or exceeds twice the mask overlay height, the square can cover both the top and bottom edges. The same geometry applies to the width while the beam travels along a vertical edge.

Keep `size` well below twice the shorter side of the mask overlay: `size < 2 × min(width, height)`. The mask overlay is usually close in size to the decorated container, while `outset` changes its dimensions. Border radius, `lineWidth`, and transparent areas in the gradient also affect the point at which the overlap becomes visible.

### Why is `BorderBeam` not working? {#faq-not-working}

`BorderBeam` needs to resolve the actual DOM node from the default slot and insert the beam layer into that node. Make sure the slot content is a native DOM element, or a Vue component that correctly forwards its `ref` to a DOM element. Otherwise BorderBeam cannot locate the real container and the beam cannot be rendered.

The beam layer is positioned with `position: absolute`, so the resolved DOM node also needs to provide a positioning context. In most cases, set `position: relative` on the wrapped element. BorderBeam does not inspect or patch the child positioning style for you.

For performance reasons, whether the slot can host the beam and its positioning information are resolved during initialization, and are not continuously updated when the child structure or positioning styles change later.

### How do I keep the beam radius aligned with my container? {#faq-radius}

`BorderBeam` renders the beam layer as a child of the actual container and directly inherits its radius through `border-radius: inherit`. For a single-container child such as `Card`, the beam automatically follows the container radius. For more complex child trees, make sure the radius is set on the actual container root.

The radius stays in sync through CSS inheritance, without being read or measured during initialization. Later changes made through `class`, responsive styles, or CSS variables are automatically reflected by the beam layer.

---
Title: Breadcrumb
URL: https://www.antdv-next.com/components/breadcrumb.md
---

## When To Use {#when-to-use}

- When the system has more than two layers in a hierarchy.
- When you need to inform the user of where they are.
- When the user may need to navigate back to a higher level.

## Examples {#examples}

### Basic Usage
The simplest use.
```vue
<script setup lang="ts">
const items = [
  {
    title: 'Home',
  },
  {
    title: 'Application Center',
    href: '',
  },
  {
    title: 'Application List',
    href: '',
  },
  {
    title: 'An Application',
  },
]
</script>

<template>
  <a-breadcrumb :items="items" />
</template>
```
### With an Icon
The icon should be placed in front of the text.
```vue
<script lang="ts" setup>
import type { BreadcrumbItemType } from 'antdv-next'
import { HomeOutlined, UserOutlined } from '@antdv-next/icons'

const items: BreadcrumbItemType[] = [
  {
    href: '',
  },
  {
    href: '',
  },
  {
    href: '',
  },
  {
    title: 'Application',
  },
]
</script>

<template>
  <a-breadcrumb :items="items">
    <template #titleRender="{ index }">
      <template v-if="index === 0">
        <HomeOutlined />
      </template>
      <template v-if="index === 1">
        <UserOutlined />
        <span>Application List</span>
      </template>
      <!-- Icons from third-party libraries (e.g. lucide) render as a bare `<svg>`
           rather than an `.anticon` wrapper. It stays centred with, and spaced
           from, the label. -->
      <template v-if="index === 2">
        <svg
          viewBox="0 0 24 24"
          width="1em"
          height="1em"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          aria-hidden="true"
        >
          <path d="M3 3v18h18" />
          <path d="M7 14l4-4 3 3 5-6" />
        </svg>
        <span>Dashboard</span>
      </template>
    </template>
  </a-breadcrumb>
</template>
```
### With Params
With route params.
```vue
<script setup lang="ts">
import type { BreadcrumbItemType } from 'antdv-next'

const items: BreadcrumbItemType[] = [
  {
    title: 'Users',
  },
  {
    title: ':id',
    href: '',
  },
]
</script>

<template>
  <a-breadcrumb :items="items" :params="{ id: 1 }" />
</template>
```
### Configuring the Separator
The separator can be customized by setting the separator property: `separator=">"`.
```vue
<script setup lang="ts">
const items = [
  {
    title: 'Home',
  },
  {
    title: 'Application Center',
    href: '',
  },
  {
    title: 'Application List',
    href: '',
  },
  {
    title: 'An Application',
  },
]
</script>

<template>
  <a-breadcrumb separator=">" :items="items" />
</template>
```
### Bread crumbs with drop down menu
Breadcrumbs support drop down menu.
```vue
<script setup lang="ts">
import { h } from 'vue'

const menuItems = [
  {
    key: '1',
    label: h('a', { target: '_blank', rel: 'noopener noreferrer', href: 'http://www.alipay.com/' }, 'General'),
  },
  {
    key: '2',
    label: h('a', { target: '_blank', rel: 'noopener noreferrer', href: 'http://www.taobao.com/' }, 'Layout'),
  },
  {
    key: '3',
    label: h('a', { target: '_blank', rel: 'noopener noreferrer', href: 'http://www.tmall.com/' }, 'Navigation'),
  },
]

const items = [
  {
    title: 'Antdv Next',
  },
  {
    title: 'Component',
    href: '',
  },
  {
    title: 'General',
    href: '',
    menu: { items: menuItems },
  },
  {
    title: 'Button',
  },
]
</script>

<template>
  <a-breadcrumb :items="items" />
</template>
```
### Configuring the Separator Independently
Customize separator for each other.
```vue
<script setup lang="ts">
import type { BreadcrumbItemType } from 'antdv-next'

const items: BreadcrumbItemType[] = [
  {
    title: 'Location',
  },
  {
    type: 'separator',
    separator: ':',
  },
  {
    href: '',
    title: 'Application Center',
  },
  {
    type: 'separator',
  },
  {
    href: '',
    title: 'Application List',
  },
  {
    type: 'separator',
  },
  {
    title: 'An Application',
  },
]
</script>

<template>
  <a-breadcrumb separator="" :items="items" />
</template>
```
### SFC Mode
Support SFC mode using `a-breadcrumb-item` and `a-breadcrumb-separator` with dropdown menu.
```vue
<script setup lang="ts">
import { h } from 'vue'

const menuItems = [
  {
    key: '1',
    label: h('a', { target: '_blank', rel: 'noopener noreferrer', href: 'http://www.alipay.com/' }, 'General'),
  },
  {
    key: '2',
    label: h('a', { target: '_blank', rel: 'noopener noreferrer', href: 'http://www.taobao.com/' }, 'Layout'),
  },
  {
    key: '3',
    label: h('a', { target: '_blank', rel: 'noopener noreferrer', href: 'http://www.tmall.com/' }, 'Navigation'),
  },
]
</script>

<template>
  <a-breadcrumb separator="">
    <a-breadcrumb-item>
      Antdv Next
    </a-breadcrumb-item>
    <a-breadcrumb-separator>
      >
    </a-breadcrumb-separator>
    <a-breadcrumb-item href="">
      Component
    </a-breadcrumb-item>
    <a-breadcrumb-separator />
    <a-breadcrumb-item href="" :menu="{ items: menuItems }">
      General
    </a-breadcrumb-item>
    <a-breadcrumb-separator />
    <a-breadcrumb-item>
      Button
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Breadcrumb by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { BreadcrumbProps } from 'antdv-next'

const classesObject = {
  root: 'demo-breadcrumb-root',
  item: 'demo-breadcrumb-item',
  separator: 'demo-breadcrumb-separator',
}

const stylesObject: BreadcrumbProps['styles'] = {
  root: { border: '1px solid #f0f0f0', padding: '8px', borderRadius: '4px' },
  item: { color: '#1890ff' },
  separator: { color: 'rgba(0, 0, 0, 0.45)' },
}

const stylesFn: BreadcrumbProps['styles'] = (info) => {
  const items = info.props.items || []
  if (items.length > 2) {
    return {
      root: { border: '1px solid #F5EFFF', padding: '8px', borderRadius: '4px' },
      item: { color: '#8F87F1' },
    }
  }
  return {}
}

const items = [
  { title: 'Antdv Next' },
  { title: 'Component' },
  { title: 'Breadcrumb' },
]
</script>

<template>
  <a-flex vertical gap="medium">
    <a-breadcrumb
      :classes="classesObject"
      :items="items.slice(0, 2)"
      :styles="stylesObject"
      aria-label="Breadcrumb with Object"
    />
    <a-breadcrumb
      :classes="classesObject"
      :items="items"
      :styles="stylesFn"
      aria-label="Breadcrumb with Function"
    />
  </a-flex>
</template>

<style scoped>
.demo-breadcrumb-root {
  padding: 8px;
  border-radius: 4px;
}

.demo-breadcrumb-item {
  color: #1890ff;
}

.demo-breadcrumb-separator {
  color: rgba(0, 0, 0, 0.45);
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: \{ props \})=> Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| dropdownIcon | Custom dropdown icon | VueNode | `<DownOutlined />` | - | ✓ |
| itemRender | Custom item renderer, work with vue-router | (route, params, routes, paths) =&gt; VueNode | - | - | × |
| params | Routing parameters | object | - | - | × |
| items | The routing stack information of router | [ItemType\[\]](#itemtype) | - | - | × |
| separator | Custom separator | VueNode | `/` | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: \{ props \})=> Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| clickItem | Triggered when clicking a breadcrumb item | (item: ItemType, event: MouseEvent) =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| itemRender | Custom item renderer, work with vue-router | (context: \{ route: ItemType, params: AnyObject, routes: ItemType[], paths: string[] \}) =&gt; any | - |
| titleRender | Custom title renderer | (params: \{ item: ItemType, index: number \}) =&gt; any | - |
| separator | Custom separator | () =&gt; any | - |
| menuLabelRender | Custom menu label renderer | (params: \{ item: ItemType, index: number, menu: MenuItem \}) =&gt; any | - |
| menuExtraRender | Custom menu extra content renderer | (params: \{ item: ItemType, index: number, menu: MenuItem \}) =&gt; any | - |

## Types {#types}

### ItemType {#itemtype}

> type ItemType = Omit&lt;RouteItemType, 'title' | 'path'&gt; | SeparatorType

### RouteItemType {#routeitemtype}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - | - |
| href | Target of hyperlink. Can not work with path | string | - | - |
| path | Connected path. Each path will connect with prev one. Can not work with href | string | - | - |
| menu | The menu props | [MenuProps](/components/menu#api) | - | - |
| onClick | Set the handler to handle click event | (e: MouseEvent) =&gt; void | - | - |
| title | item name | VueNode | - | - |

### SeparatorType {#separatortype}

```ts
const item = {
  type: 'separator', // Must have
  separator: '/',
}
```

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| type | Mark as separator | `separator` | - | - |
| separator | Custom separator | VueNode | `/` | - |

## Use with vue-router {#use-with-vue-router}

The link of Breadcrumb item targets `#` by default, you can use `itemRender` slot to make a vue-router Link.

```vue
<script setup lang="ts">
import type { BreadcrumbProps } from 'antdv-next'
import { RouterLink } from 'vue-router'

const items: BreadcrumbProps['items'] = [
  {
    path: '/index',
    title: 'home',
  },
  {
    path: '/first',
    title: 'first',
  },
  {
    path: '/second',
    title: 'second',
  },
]
</script>

<template>
  <a-breadcrumb :items="items">
    <template #itemRender="{ route, paths }">
      <RouterLink v-if="paths.length > 0" :to="`/${paths.join('/')}`">
        {{ route.title }}
      </RouterLink>
      <span v-else>{{ route.title }}</span>
    </template>
  </a-breadcrumb>
</template>
```

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Breadcrumb" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Button
URL: https://www.antdv-next.com/components/button.md
---

## When To Use {#when-to-use}

A button means an operation (or a series of operations). Clicking a button will trigger its corresponding business logic.

In Antdv Next we provide 5 types of button.

- 🔵 Primary button: used for the main action, there can be at most one primary button in a section.
- ⚪️ Default button: used for a series of actions without priority.
- 😶 Dashed button: commonly used for adding more actions.
- 🔤 Text button: used for the most secondary action.
- 🔗 Link button: used for external links.

And 4 other properties additionally.

- 🔴 `danger`: used for actions of risk, like deletion or authorization.
- 👻 `ghost`: used in situations with complex background, home pages usually.
- 🚫 `disabled`: used when actions are not available.
- 🔃 `loading`: adds a loading spinner in button, avoids multiple submits too.

## Examples {#examples}

### Syntactic sugar
Through the `type` syntactic sugar, use the preset button styles: `primary` buttons, `default` buttons, `dashed` buttons, `text` buttons, and `link` buttons.
```vue
<template>
  <a-flex gap="small" wrap>
    <a-button type="primary">
      Primary Button
    </a-button>
    <a-button>Default Button</a-button>
    <a-button type="dashed">
      Dashed Button
    </a-button>
    <a-button type="text">
      Text Button
    </a-button>
    <a-button type="link">
      Link Button
    </a-button>
  </a-flex>
</template>
```
### Color & Variant
You can set the `color` and `variant` attributes at the same time can derive more variant buttons.
```vue
<script setup lang="ts">
import { useResponsive } from 'antdv-next'

const { xl } = useResponsive()
</script>

<template>
  <a-config-provider :component-size="xl ? 'medium' : 'small'">
    <a-flex vertical gap="small">
      <a-flex gap="small" wrap>
        <a-button color="default" variant="solid">
          Solid
        </a-button>
        <a-button color="default" variant="outlined">
          Outlined
        </a-button>
        <a-button color="default" variant="dashed">
          Dashed
        </a-button>
        <a-button color="default" variant="filled">
          Filled
        </a-button>
        <a-button color="default" variant="text">
          Text
        </a-button>
        <a-button color="default" variant="link">
          Link
        </a-button>
      </a-flex>
      <a-flex gap="small" wrap>
        <a-button color="primary" variant="solid">
          Solid
        </a-button>
        <a-button color="primary" variant="outlined">
          Outlined
        </a-button>
        <a-button color="primary" variant="dashed">
          Dashed
        </a-button>
        <a-button color="primary" variant="filled">
          Filled
        </a-button>
        <a-button color="primary" variant="text">
          Text
        </a-button>
        <a-button color="primary" variant="link">
          Link
        </a-button>
      </a-flex>
      <a-flex gap="small" wrap>
        <a-button color="danger" variant="solid">
          Solid
        </a-button>
        <a-button color="danger" variant="outlined">
          Outlined
        </a-button>
        <a-button color="danger" variant="dashed">
          Dashed
        </a-button>
        <a-button color="danger" variant="filled">
          Filled
        </a-button>
        <a-button color="danger" variant="text">
          Text
        </a-button>
        <a-button color="danger" variant="link">
          Link
        </a-button>
      </a-flex>
      <a-flex gap="small" wrap>
        <a-button color="pink" variant="solid">
          Solid
        </a-button>
        <a-button color="pink" variant="outlined">
          Outlined
        </a-button>
        <a-button color="pink" variant="dashed">
          Dashed
        </a-button>
        <a-button color="pink" variant="filled">
          Filled
        </a-button>
        <a-button color="pink" variant="text">
          Text
        </a-button>
        <a-button color="pink" variant="link">
          Link
        </a-button>
      </a-flex>
      <a-flex gap="small" wrap>
        <a-button color="purple" variant="solid">
          Solid
        </a-button>
        <a-button color="purple" variant="outlined">
          Outlined
        </a-button>
        <a-button color="purple" variant="dashed">
          Dashed
        </a-button>
        <a-button color="purple" variant="filled">
          Filled
        </a-button>
        <a-button color="purple" variant="text">
          Text
        </a-button>
        <a-button color="purple" variant="link">
          Link
        </a-button>
      </a-flex>
      <a-flex gap="small" wrap>
        <a-button color="cyan" variant="solid">
          Solid
        </a-button>
        <a-button color="cyan" variant="outlined">
          Outlined
        </a-button>
        <a-button color="cyan" variant="dashed">
          Dashed
        </a-button>
        <a-button color="cyan" variant="filled">
          Filled
        </a-button>
        <a-button color="cyan" variant="text">
          Text
        </a-button>
        <a-button color="cyan" variant="link">
          Link
        </a-button>
      </a-flex>
    </a-flex>
  </a-config-provider>
</template>

<style scoped>

</style>
```
### Icon
You can add an icon using the `icon` prop/slot.
```vue
<script setup lang="ts">
import { SearchOutlined } from '@antdv-next/icons'
import { h } from 'vue'
</script>

<template>
  <a-flex gap="small" vertical>
    <a-flex wrap gap="small">
      <a-button type="primary" shape="circle" :icon="h(SearchOutlined)" />
      <a-button type="primary" shape="circle">
        A
      </a-button>
      <a-button type="primary" :icon="h(SearchOutlined)">
        Search
      </a-button>
      <a-button shape="circle" :icon="h(SearchOutlined)" />
      <a-button :icon="h(SearchOutlined)">
        Search
      </a-button>
    </a-flex>
    <a-flex wrap gap="small">
      <a-button shape="circle">
        <template #icon>
          <SearchOutlined />
        </template>
      </a-button>
      <a-button>
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </a-button>
      <a-button type="dashed" shape="circle">
        <template #icon>
          <SearchOutlined />
        </template>
      </a-button>
      <a-button type="dashed">
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </a-button>
      <a-button href="https://www.google.com" target="_blank">
        <template #icon>
          <SearchOutlined />
        </template>
      </a-button>
    </a-flex>
  </a-flex>
</template>
```
### Icon Placement
You can set the position of a button's icon by setting the `iconPlacement` to `start` or `end` respectively.
```vue
<script setup lang="ts">
import { SearchOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const position = ref<'start' | 'end'>('end')
</script>

<template>
  <a-space>
    <a-radio-group v-model:value="position">
      <a-radio-button value="start">
        start
      </a-radio-button>
      <a-radio-button value="end">
        end
      </a-radio-button>
    </a-radio-group>
  </a-space>
  <a-divider title-placement="start" plain>
    Preview
  </a-divider>
  <a-flex gap="small" vertical>
    <a-flex wrap gap="small">
      <a-tooltip title="search">
        <a-button type="primary" shape="circle">
          <template #icon>
            <SearchOutlined />
          </template>
        </a-button>
      </a-tooltip>
      <a-button type="primary" shape="circle">
        A
      </a-button>
      <a-button type="primary" :icon-placement="position">
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </a-button>
      <a-tooltip title="search">
        <a-button shape="circle">
          <template #icon>
            <SearchOutlined />
          </template>
        </a-button>
      </a-tooltip>
      <a-button :icon-placement="position">
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </a-button>
    </a-flex>
    <a-flex wrap gap="small">
      <a-tooltip title="search">
        <a-button shape="circle">
          <template #icon>
            <SearchOutlined />
          </template>
        </a-button>
      </a-tooltip>
      <a-button type="text" :icon-placement="position">
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </a-button>
      <a-tooltip title="search">
        <a-button type="dashed" shape="circle">
          <template #icon>
            <SearchOutlined />
          </template>
        </a-button>
      </a-tooltip>
      <a-button type="dashed" :icon-placement="position">
        <template #icon>
          <SearchOutlined />
        </template>
        Search
      </a-button>
      <a-button
        href="https://www.google.com"
        target="_blank"
        :icon-placement="position"
      >
        <template #icon>
          <SearchOutlined />
        </template>
      </a-button>
      <a-button type="primary" loading :icon-placement="position">
        Loading
      </a-button>
    </a-flex>
  </a-flex>
</template>
```
### Disabled
To mark a button as disabled, add the `disabled` property to the `Button`.
```vue
<template>
  <a-flex gap="small" align="flex-start" vertical>
    <a-flex gap="small">
      <a-button type="primary">
        Primary
      </a-button>
      <a-button type="primary" disabled>
        Primary(disabled)
      </a-button>
    </a-flex>
    <a-flex gap="small">
      <a-button>Default</a-button>
      <a-button disabled>
        Default(disabled)
      </a-button>
    </a-flex>
    <a-flex gap="small">
      <a-button type="dashed">
        Dashed
      </a-button>
      <a-button type="dashed" disabled>
        Dashed(disabled)
      </a-button>
    </a-flex>
    <a-flex gap="small">
      <a-button type="text">
        Text
      </a-button>
      <a-button type="text" disabled>
        Text(disabled)
      </a-button>
    </a-flex>
    <a-flex gap="small">
      <a-button type="link">
        Link
      </a-button>
      <a-button type="link" disabled>
        Link(disabled)
      </a-button>
    </a-flex>
    <a-flex gap="small">
      <a-button type="primary" href="https://antdv-next.com/index-cn">
        Href Primary
      </a-button>
      <a-button type="primary" href="https://antdv-next.com/index-cn" disabled>
        Href Primary(disabled)
      </a-button>
    </a-flex>
    <a-flex gap="small">
      <a-button danger>
        Danger Default
      </a-button>
      <a-button danger disabled>
        Danger Default(disabled)
      </a-button>
    </a-flex>
    <a-flex gap="small">
      <a-button danger type="text">
        Danger Text
      </a-button>
      <a-button danger type="text" disabled>
        Danger Text(disabled)
      </a-button>
    </a-flex>
    <a-flex gap="small">
      <a-button type="link" danger>
        Danger Link
      </a-button>
      <a-button type="link" danger disabled>
        Danger Link(disabled)
      </a-button>
    </a-flex>
    <a-flex gap="small" class="site-button-ghost-wrapper">
      <a-button ghost>
        Ghost
      </a-button>
      <a-button ghost disabled>
        Ghost(disabled)
      </a-button>
    </a-flex>
  </a-flex>
</template>
```
### Loading
A loading indicator can be added to a button by setting the `loading` property on the `Button`. The `loading.icon` can be used to customize the loading icon.
```vue
<script setup lang="ts">
import { PoweroffOutlined, SyncOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const loadings = ref<boolean[]>([])
function enterLoading(index: number) {
  loadings.value[index] = true
  setTimeout(() => {
    loadings.value[index] = false
  }, 3000)
}
</script>

<template>
  <a-flex gap="small" vertical>
    <a-flex gap="small" align="center" wrap>
      <a-button type="primary" loading>
        Loading
      </a-button>
      <a-button type="primary" size="small" loading>
        Loading
      </a-button>
      <a-button type="primary" loading>
        <template #icon>
          <PoweroffOutlined />
        </template>
      </a-button>
      <a-button type="primary" loading>
        Loading Icon
        <template #loadingIcon>
          <SyncOutlined spin />
        </template>
      </a-button>
    </a-flex>
    <a-flex gap="small" wrap>
      <a-button type="primary" :loading="loadings[0]" @click="enterLoading(0)">
        Icon Start
      </a-button>
      <a-button type="primary" :loading="loadings[2]" icon-placement="end" @click="enterLoading(2)">
        Icon End
      </a-button>
      <a-button type="primary" :loading="loadings[1]" @click="enterLoading(1)">
        Icon Replace
        <template #icon>
          <PoweroffOutlined />
        </template>
      </a-button>
      <a-button type="primary" :loading="loadings[3]" @click="enterLoading(3)">
        <template #icon>
          <PoweroffOutlined />
        </template>
      </a-button>
      <a-button type="primary" :loading="loadings[3]" @click="enterLoading(3)">
        <template #icon>
          <PoweroffOutlined />
        </template>
        <template #loadingIcon>
          <SyncOutlined spin />
        </template>
        Loading Icon
      </a-button>
    </a-flex>
  </a-flex>
</template>
```
### Size
Antdv Next supports three sizes of buttons: small, default and large.

If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
```vue
<script setup lang="ts">
import type { SizeType } from 'antdv-next'
import { DownloadOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const size = ref<SizeType>('large')
</script>

<template>
  <a-radio-group v-model:value="size">
    <a-radio-button value="large">
      Large
    </a-radio-button>
    <a-radio-button value="default">
      Default
    </a-radio-button>
    <a-radio-button value="small">
      Small
    </a-radio-button>
  </a-radio-group>
  <a-divider title-placement="start" plain>
    Preview
  </a-divider>
  <a-flex gap="small" align="flex-start" vertical>
    <a-flex gap="small" wrap>
      <a-button type="primary" :size="size">
        Primary
      </a-button>
      <a-button :size="size">
        Default
      </a-button>
      <a-button type="dashed" :size="size">
        Dashed
      </a-button>
    </a-flex>
    <a-button type="link" :size="size">
      Link
    </a-button>
    <a-flex gap="small" wrap>
      <a-button type="primary" :size="size">
        <template #icon>
          <DownloadOutlined />
        </template>
      </a-button>
      <a-button type="primary" shape="circle" :size="size">
        <template #icon>
          <DownloadOutlined />
        </template>
      </a-button>
      <a-button type="primary" shape="round" :size="size">
        <template #icon>
          <DownloadOutlined />
        </template>
      </a-button>
      <a-button type="primary" shape="round" :size="size">
        <template #icon>
          <DownloadOutlined />
        </template>
        Download
      </a-button>
      <a-button type="primary" :size="size">
        <template #icon>
          <DownloadOutlined />
        </template>
        Download
      </a-button>
    </a-flex>
  </a-flex>
</template>
```
### Ghost Button
The `ghost` property will make a button's background transparent, this is commonly used in colored background.
```vue
<template>
  <a-flex wrap gap="small" class="site-button-ghost-wrapper">
    <a-button type="primary" ghost>
      Primary
    </a-button>
    <a-button ghost>
      Default
    </a-button>
    <a-button type="dashed" ghost>
      Dashed
    </a-button>
    <a-button type="primary" danger ghost>
      Danger
    </a-button>
  </a-flex>
</template>
```
### Danger Buttons
The `danger` property renders a button with danger semantics and can be combined with any button type.
```vue
<template>
  <a-flex wrap gap="small">
    <a-button type="primary" danger>
      Primary
    </a-button>
    <a-button danger>
      Default
    </a-button>
    <a-button type="dashed" danger>
      Dashed
    </a-button>
    <a-button type="text" danger>
      Text
    </a-button>
    <a-button type="link" danger>
      Link
    </a-button>
  </a-flex>
</template>
```
### Block Button
The `block` property will make a button fit to its parent width.
```vue
<template>
  <a-flex vertical gap="small" style="width: 100%">
    <a-button type="primary" block>
      Primary
    </a-button>
    <a-button block>
      Default
    </a-button>
    <a-button type="dashed" block>
      Dashed
    </a-button>
    <a-button disabled block>
      disabled
    </a-button>
    <a-button type="text" block>
      text
    </a-button>
    <a-button type="link" block>
      Link
    </a-button>
  </a-flex>
</template>
```
### Multiple Buttons
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown](/components/dropdown/#dropdown-demo-dropdown-button).
```vue
<script setup lang="ts">
import type { MenuEmits } from 'antdv-next'
import { EllipsisOutlined } from '@antdv-next/icons'

const onMenuClick: MenuEmits['click'] = (e) => {
  console.log('click', e)
}

const items = [
  {
    key: '1',
    label: '1st item',
  },
  {
    key: '2',
    label: '2nd item',
  },
  {
    key: '3',
    label: '3rd item',
  },
]
</script>

<template>
  <a-flex align="flex-start" gap="small" vertical>
    <a-button type="primary">
      primary
    </a-button>
    <a-button>secondary</a-button>
    <a-space-compact>
      <a-button>Actions</a-button>
      <a-dropdown :menu="{ items, onClick: onMenuClick }" placement="bottomRight">
        <a-button>
          <template #icon>
            <EllipsisOutlined />
          </template>
        </a-button>
      </a-dropdown>
    </a-space-compact>
  </a-flex>
</template>
```
### Gradient Button
You can add custom styles by setting `button.classes` in ConfigProvider. This example shows how to add a gradient effect to buttons.
```vue
<script setup lang="ts">
import { AntdvNextOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-config-provider
    :button="{
      classes: {
        root: 'linear-gradient-button',
      },
    }"
  >
    <a-space>
      <a-button type="primary" size="large">
        <template #icon>
          <AntdvNextOutlined />
        </template>
        Gradient Button
      </a-button>
      <a-button size="large">
        Button
      </a-button>
    </a-space>
  </a-config-provider>
</template>

<style>
.linear-gradient-button.ant-btn-primary:not([disabled]):not(.ant-btn-dangerous) {
  position: relative;
}

.linear-gradient-button.ant-btn-primary:not([disabled]):not(.ant-btn-dangerous) > span {
  position: relative;
}

.linear-gradient-button.ant-btn-primary:not([disabled]):not(.ant-btn-dangerous)::before {
  content: '';
  background: linear-gradient(135deg, #6253e1, #04befe);
  position: absolute;
  inset: -1px;
  opacity: 1;
  transition: all 0.3s;
  border-radius: inherit;
}

.linear-gradient-button.ant-btn-primary:not([disabled]):not(.ant-btn-dangerous):hover::before {
  opacity: 0;
}
</style>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Button by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { ButtonProps } from 'antdv-next'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const classes: ButtonProps['classes'] = {
  root: 'demo-button-root',
  content: 'demo-button-content',
}

const stylesObject: ButtonProps['styles'] = {
  root: {
    boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)',
  },
}

const stylesFn: ButtonProps['styles'] = (info) => {
  if (info?.props?.type === 'primary') {
    return {
      root: {
        backgroundColor: '#171717',
      },
      content: {
        color: '#fff',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex gap="small">
    <a-button type="default" :classes="classes" :styles="stylesObject">
      Object
    </a-button>
    <a-button type="primary" :classes="classes" :styles="stylesFn">
      Function
    </a-button>
  </a-flex>
</template>

<style>
.demo-button-root {
  border: 1px solid v-bind('token.colorBorder');
  border-radius: v-bind('`${token.borderRadius}px`');
  padding: v-bind('`${token.paddingXS}px`') v-bind('`${token.padding}px`');
  height: auto;
}

.demo-button-content {
  color: v-bind('token.colorText');
}
</style>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

Different button styles generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| autoInsertSpace | We add a space between two Chinese characters by default. Set `autoInsertSpace` to `false` to disable. | boolean | `true` | - | ✓ |
| block | Option to fit button width to its parent width | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;)=&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| color | Set button color | `default` \| `primary` \| `danger` \| [PresetColors](#presetcolors) | - | - | ✓ |
| danger | Syntactic sugar. Set the danger status of button. Will follow `color` if provided | boolean | false | - | × |
| disabled | Disabled state of button | boolean | false | - | × |
| ghost | Make background transparent and invert text and border colors | boolean | false | - | × |
| href | Redirect url of link button | string | - | - | × |
| htmlType | Set the original html `type` of `button`, see: [HTML Standard](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | - | × |
| iconPlacement | Set the icon position of button | `start` \| `end` | `start` | - | × |
| loading | Set the loading status of button | boolean \| &#123; delay: number, icon: VueNode &#125; | false | - | × |
| loadingIcon | (Global config only) Set the loading icon of button | VueNode | `<LoadingOutlined />` | - | ✓ |
| shape | Can be used to set button shape | `default` \| `circle` \| `round` | `default` | - | ✓ |
| size | Set the size of button | `large` \| `medium` \| `small` | `medium` | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;)=&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |
| target | Same as target attribute of a, works when href is specified | string | - | - | × |
| type | Syntactic sugar. Set button type. Will follow `variant` & `color` if provided | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | - | × |
| variant | Set button variant | `outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link` | - | - | ✓ |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| `click` | Callback executed when button is clicked | `(event: MouseEvent) =&gt; void` | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | ---- | --- |
| `icon` | Set the icon component of button | - | - |
| `loadingIcon` | Set the loading icon component of button | - | - |

## Types

### PresetColors

> type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Button" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### How to choose type and color & variant? {#faq-type-color-variant}

Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first.

```vue
<template>
  <a-button type="primary">
    click
  </a-button>
</template>
```

Equivalent

```vue
<template>
  <a-button color="primary" variant="solid">
    click
  </a-button>
</template>
```

### How to close the click wave effect? {#faq-close-wave-effect}

If you don't need this feature, you can set `disabled` of `wave` in [ConfigProvider](/components/config-provider#api) as `true`.

```vue
<template>
  <a-config-provider :wave="{ disabled: true }">
    <a-button>click</a-button>
  </a-config-provider>
</template>
```

---
Title: Calendar
URL: https://www.antdv-next.com/components/calendar.md
---

## When To Use {#when-to-use}

When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.

## Examples {#examples}

### Basic
A basic calendar component with Year/Month switch.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef()
</script>

<template>
  <a-calendar v-model:value="value" />
</template>
```
### Notice Calendar
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
```vue
<script setup lang="ts">
import type { BadgeProps } from 'antdv-next'

function getListData(value: any) {
  let listData: { type: string, content: string }[] = [] // Specify the type of listData
  switch (value.date()) {
    case 8:
      listData = [
        { type: 'warning', content: 'This is warning event.' },
        { type: 'success', content: 'This is usual event.' },
      ]
      break
    case 10:
      listData = [
        { type: 'warning', content: 'This is warning event.' },
        { type: 'success', content: 'This is usual event.' },
        { type: 'error', content: 'This is error event.' },
      ]
      break
    case 15:
      listData = [
        { type: 'warning', content: 'This is warning event' },
        { type: 'success', content: 'This is very long usual event......' },
        { type: 'error', content: 'This is error event 1.' },
        { type: 'error', content: 'This is error event 2.' },
        { type: 'error', content: 'This is error event 3.' },
        { type: 'error', content: 'This is error event 4.' },
      ]
      break
    default:
  }
  return listData || []
}

function getMonthData(value: any) {
  if (value.month() === 8) {
    return 1394
  }
}
</script>

<template>
  <a-calendar>
    <template #cellRender="{ date, info }">
      <template v-if="info.type === 'date'">
        <ul class="events">
          <li v-for="item in getListData(date)" :key="item.content">
            <a-badge :status="item.type as BadgeProps['status']" :text="item.content" />
          </li>
        </ul>
      </template>
      <template v-else-if="info.type === 'month'">
        <div v-if="getMonthData(date)" class="notes-month">
          <section>{{ getMonthData(date) }}</section>
          <span>Backlog number</span>
        </div>
      </template>
    </template>
  </a-calendar>
</template>

<style scoped>
.events {
  margin: 0;
  padding: 0;
  list-style: none;
}

.events .ant-badge-status {
  width: 100%;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.notes-month {
  font-size: 28px;
  text-align: center;
}

.notes-month section {
  font-size: 28px;
}
</style>
```
### Card
Nested inside a container element for rendering in limited space.
```vue
<script setup lang="ts">
import type { CalendarProps } from 'antdv-next'
import type { Dayjs } from 'dayjs'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

function onPanelChange(value: Dayjs, mode: CalendarProps<Dayjs>['mode']) {
  console.log(value.format('YYYY-MM-DD'), mode)
}
</script>

<template>
  <div class="wrapStyle">
    <a-calendar :fullscreen="false" @panel-change="onPanelChange" />
  </div>
</template>

<style scoped>
.wrapStyle {
  width: 300px;
  border: 1px solid v-bind('token.colorBorder');
  border-radius: 8px;
}
</style>
```
### Selectable Calendar
A basic calendar component with Year/Month switch.
```vue
<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import { ref } from 'vue'

const date = ref(dayjs('2017-01-25T00:00:00Z'))
const selectedValue = ref(dayjs('2017-01-25T00:00:00Z'))
function onSelect(value: Dayjs) {
  selectedValue.value = value
}
</script>

<template>
  <a-alert :title="`You selected date: ${selectedValue?.format('YYYY-MM-DD')}`" />
  <a-calendar
    v-model:value="date"
    @select="onSelect"
  />
</template>
```
### Lunar Calendar
Display lunar calendar, solar terms and other information.
```vue
<script setup lang="ts">
import type { CalendarProps } from 'antdv-next'
import type { Dayjs } from 'dayjs'
import { theme } from 'antdv-next'
import dayjs from 'dayjs'
import { HolidayUtil, Lunar } from 'lunar-typescript'
import { ref } from 'vue'

const { token } = theme.useToken()
const selectDate = ref<Dayjs>(dayjs())
const panelDate = ref<Dayjs>(dayjs())
function getYearLabel(year: number) {
  const d = Lunar.fromDate(new Date(year + 1, 0))
  return `${d.getYearInChinese()}年（${d.getYearInGanZhi()}${d.getYearShengXiao()}年）`
}

function getMonthLabel(month: number, value: Dayjs) {
  const d = Lunar.fromDate(new Date(value.year(), month))
  const lunar = d.getMonthInChinese()
  return `${month + 1}月（${lunar}月）`
}

function getCellDate(date) {
  const d = Lunar.fromDate(date.toDate())
  const lunar = d.getDayInChinese()
  const solarTerm = d.getJieQi()
  const isWeekend = date.day() === 6 || date.day() === 0
  const h = HolidayUtil.getHoliday(date.get('year'), date.get('month') + 1, date.get('date'))
  const displayHoliday = h?.getTarget() === h?.getDay() ? h?.getName() : undefined
  return { lunar, solarTerm, displayHoliday, isWeekend }
}

function getCellMonth(date) {
  const d2 = Lunar.fromDate(new Date(date.get('year'), date.get('month')))
  const month = d2.getMonthInChinese()
  return month
}

function getMonthOptions(value) {
  const start = 0
  const end = 12
  const monthOptions = []

  let current = value.clone()
  const localeData = value.localeData()
  const months = []
  for (let i = 0; i < 12; i++) {
    current = current.month(i)
    months.push(localeData.monthsShort(current))
  }

  for (let i = start; i < end; i++) {
    monthOptions.push({
      label: getMonthLabel(i, value),
      value: i,
    })
  }
  return monthOptions
}

function getOptions(value) {
  const year = value.year()
  const options = []
  for (let i = year - 10; i < year + 10; i += 1) {
    options.push({
      label: getYearLabel(i),
      value: i,
    })
  }
  return options
}

function onPanelChange(value: Dayjs, mode: CalendarProps<Dayjs>['mode']) {
  console.log(value.format('YYYY-MM-DD'), mode)
  panelDate.value = value
}

function onHeaderChange(value: Dayjs, onChange: (value: Dayjs) => void) {
  panelDate.value = value
  onChange(value)
}

function onSelect(value) {
  selectDate.value = value
}
</script>

<template>
  <div class="wrapper">
    <a-calendar :fullscreen="false" @panel-change="onPanelChange" @select="onSelect">
      <template #fullCellRender="{ date, info }">
        <template v-if="info.type === 'date'">
          <div class="dateCell" :class="{ current: selectDate.isSame(date, 'date'), today: date.isSame(dayjs(), 'date') }">
            <div class="text">
              <span :class="{ weekend: getCellDate(date).isWeekend, gray: !panelDate.isSame(date, 'month') }">
                {{ date.get('date') }}
              </span>
              <template v-if="info.type === 'date'">
                <div class="lunar">
                  {{ getCellDate(date).displayHoliday || getCellDate(date).solarTerm || getCellDate(date).lunar }}
                </div>
              </template>
            </div>
          </div>
        </template>
        <template v-else-if="info.type === 'month'">
          <div class="monthCell" :class="{ monthCellCurrent: selectDate.isSame(date, 'month') }">
            {{ date.get('month') + 1 }}月（{{ getCellMonth(date) }} 月）
          </div>
        </template>
      </template>
      <template #headerRender="{ value, type, onChange, onTypeChange }">
        <a-row justify="end" :gutter="8" style="padding: 8px;">
          <a-col>
            <a-select size="small" :options="getOptions(value)" :value="value.year()" @change="(newYear) => onHeaderChange(value.clone().year(newYear), onChange)" />
          </a-col>
          <a-col>
            <a-select size="small" :options="getMonthOptions(value)" :value="value.month()" @change="(newMonth) => onHeaderChange(value.clone().month(newMonth), onChange)" />
          </a-col>
          <a-col>
            <a-radio-group size="small" :value="type" @change="(e) => onTypeChange(e.target.value)">
              <a-radio-button value="month">
                月
              </a-radio-button>
              <a-radio-button value="year">
                年
              </a-radio-button>
            </a-radio-group>
          </a-col>
        </a-row>
      </template>
    </a-calendar>
  </div>
</template>

<style scoped>
.wrapper {
  width: 450px;
  border: 1px solid v-bind('token.colorBorder');
  border-radius: 4px;
  padding: 5px;
}
.dateCell {
  position: relative;
}
.dateCell::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  max-width: 40px;
  max-height: 40px;
  background: transparent;
  transition: background-color 300ms;
  border-radius: 4px;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.dateCell:hover::before {
  background: v-bind('token.controlItemBgHover');
}
.current {
  color: v-bind('token.colorTextLightSolid');
}
.current::before {
  background: v-bind('token.colorPrimary');
}
.current:hover::before {
  background: v-bind('token.colorPrimary');
  opacity: 0.8;
}
.today::before {
  border: 1px solid v-bind('token.colorPrimary');
}
.text {
  position: relative;
  z-index: 1;
}
.lunar {
  color: v-bind('token.colorTextDescription');
  font-size: 12px;
}
.weekend {
  color: v-bind('token.colorError');
  &.gray {
    opacity: 0.4;
  }
}
.current .lunar,
.current .weekend {
  color: v-bind('token.colorTextLightSolid');
}
.monthCell {
  width: 120px;
  color: v-bind('token.colorText');
  border-radius: 4px;
  padding: 5px 0;
}
.monthCell:hover {
  background: v-bind('token.controlItemBgHover');
}
.monthCellCurrent {
  color: v-bind('token.colorTextLightSolid');
  background: v-bind('token.colorPrimary');
}
.monthCellCurrent:hover {
  background: v-bind('token.colorPrimary');
  opacity: 0.8;
}
</style>
```
### Show Week
Show week number in fullscreen calendar by setting `showWeek` prop to `true`.
```vue
<template>
  <a-calendar fullscreen show-week />
  <br>
  <a-calendar :fullscreen="false" show-week />
</template>
```
### Customize Header
Customize Calendar header content.
```vue
<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import { theme } from 'antdv-next'
import dayjs from 'dayjs'
import dayLocaleData from 'dayjs/plugin/localeData'
import 'dayjs/locale/zh-cn'

dayjs.extend(dayLocaleData)

const { token } = theme.useToken()
function getYearOptions(value: Dayjs) {
  const year = value.year()

  const yearOptions = Array.from({ length: 20 }, (_, i) => {
    const label = year - 10 + i
    return { label, value: label }
  })
  return yearOptions
}

function getMonthOptions(value: Dayjs) {
  const monthOptions = value
    .localeData()
    .monthsShort()
    .map((label, index) => ({
      label,
      value: index,
    }))
  return monthOptions
}
</script>

<template>
  <div class="wrapStyle">
    <a-calendar :fullscreen="false">
      <template #headerRender="{ value, type, onChange, onTypeChange }">
        <div style="padding: 8px;">
          <a-typography-title :level="4">
            Custom header
          </a-typography-title>
          <a-flex gap="8">
            <a-radio-group size="small" :value="type" @change="(e) => onTypeChange(e.target.value)">
              <a-radio-button value="month">
                Month
              </a-radio-button>
              <a-radio-button value="year">
                Year
              </a-radio-button>
            </a-radio-group>
            <a-select
              size="small"
              :popup-match-select-width="false"
              :value="value.year()"
              :options="getYearOptions(value)"
              @change="(newYear) => onChange(value.clone().year(newYear))"
            />
            <a-select
              size="small"
              :popup-match-select-width="false"
              :value="value.month()"
              :options="getMonthOptions(value)"
              @change="(newMonth) => onChange(value.clone().month(newMonth))"
            />
          </a-flex>
        </div>
      </template>
    </a-calendar>
  </div>
</template>

<style scoped>
.wrapStyle {
  width: 300px;
  border: 1px solid v-bind('token.colorBorder');
  border-radius: 8px;
}
</style>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Calendar by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { CalendarProps } from 'antdv-next'
import type { Dayjs } from 'dayjs'

const classes = {
  root: 'custom-calendar-root',
}

const stylesObject: CalendarProps<Dayjs>['styles'] = {
  root: {
    borderRadius: '8px',
    width: '600px',
  },
}

const stylesFunction: CalendarProps<Dayjs>['styles'] = (info) => {
  if (info.props.fullscreen) {
    return {
      root: {
        border: '2px solid #BDE3C3',
        borderRadius: '10px',
        backgroundColor: 'rgba(189,227,195, 0.3)',
      },
    } satisfies CalendarProps<Dayjs>['styles']
  }
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-calendar :fullscreen="false" :classes="classes" :styles="stylesObject" />
    <a-calendar :classes="classes" :styles="stylesFunction" />
  </a-flex>
</template>

<style scoped>
.custom-calendar-root {
  padding: 10px;
  background-color: #e6f4ff;
}
</style>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| prefixCls | - | string | - | - | × |
| rootClass | - | string | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | CalendarClassNamesType&lt;DateType&gt; | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | CalendarStylesType&lt;DateType&gt; | - | - | ✓ |
| locale | The calendar's locale | typeof enUS | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | - | × |
| validRange | To set valid range | [DateType, DateType] | - | - | × |
| disabledDate | Function that specifies the dates that cannot be selected, `currentDate` is same dayjs object as `value` prop which you [shouldn't mutate it](https://github.com/ant-design/ant-design/issues/30987) | (date: DateType) =&gt; boolean | - | - | × |
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | (date: DateType) =&gt; VueNode | - | - | × |
| dateCellRender | Deprecated. | (date: DateType) =&gt; VueNode | - | - | × |
| monthFullCellRender | Deprecated. | (date: DateType) =&gt; VueNode | - | - | × |
| monthCellRender | Deprecated. | (date: DateType) =&gt; VueNode | - | - | × |
| cellRender | Customize cell content | (date: DateType, info: any) =&gt; VueNode | - | - | × |
| fullCellRender | Customize cell content | (date: DateType, info: any) =&gt; VueNode | - | - | × |
| headerRender | Render custom header in panel | HeaderRender&lt;DateType&gt; | - | - | × |
| value | The current selected date, support `v-model:value` | DateType | - | - | × |
| defaultValue | The date selected by default | DateType | - | - | × |
| mode | The display mode of the calendar | CalendarMode | `month` | - | × |
| fullscreen | Whether to display in full-screen | boolean | true | - | × |
| showWeek | Whether to display week number | boolean | false | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback for when date changes | (date: DateType) =&gt; void | - |
| update:value | - | (date: DateType) =&gt; void | - |
| panelChange | Callback for when panel changes | (date: DateType, mode: CalendarMode) =&gt; void | - |
| select | Callback for when a date is selected, include source info | (date: DateType, selectInfo: SelectInfo) =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | (ctx: &#123; date: AnyObject &#125;) =&gt; any | - |
| dateCellRender | - | (ctx: &#123; date: AnyObject &#125;) =&gt; any | - |
| monthFullCellRender | - | (ctx: &#123; date: AnyObject &#125;) =&gt; any | - |
| monthCellRender | - | (ctx: &#123; date: AnyObject &#125;) =&gt; any | - |
| cellRender | Customize cell content | (ctx: &#123; date: AnyObject, info: any &#125;) =&gt; any | - |
| fullCellRender | Customize cell content | (ctx: &#123; date: AnyObject, info: any &#125;) =&gt; any | - |
| headerRender | Render custom header in panel | (config: &#123; value: AnyObject, type: CalendarMode, onChange: (date: AnyObject) =&gt; void, onTypeChange: (type: CalendarMode) =&gt; void &#125;) =&gt; any | - |

## Semantic DOM 

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Calendar" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Card
URL: https://www.antdv-next.com/components/card.md
---

## When To Use {#when-to-use}

A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

## Examples {#examples}

### Basic card
A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
```vue
<template>
  <a-space vertical :size="16">
    <a-card title="Default size card" style="width: 300px">
      <template #extra>
        <a href="#">More</a>
      </template>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
    <a-card size="small" title="Small size card" style="width: 300px">
      <template #extra>
        <a href="#">More</a>
      </template>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
  </a-space>
</template>
```
### No border
A borderless card on a gray background.
```vue
<template>
  <div class="w-full h-400px" style="background-color: rgb(240, 242, 245)">
    <a-card title="Card title" variant="borderless" style="width: 300px">
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
  </div>
</template>
```
### Simple card
A simple card only containing a content area.
```vue
<template>
  <a-card style="width: 300px">
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </a-card>
</template>

<style scoped>
p {
  margin: 0;
  padding: 0;
}
</style>
```
### Customized content
You can use `a-card-meta` to support more flexible content.
```vue
<template>
  <a-card hoverable variant="borderless" style="width: 240px">
    <template #cover>
      <img
        draggable="false"
        alt="example"
        src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
      >
    </template>
    <a-card-meta title="Europe Street beat" description="www.instagram.com" />
  </a-card>
</template>
```
### Card in column
Cards usually cooperate with grid column layout in overview page.
```vue
<template>
  <div class="w-full h-400px" style="background-color: rgb(240, 242, 245)">
    <a-row :gutter="16">
      <a-col :span="8">
        <a-card title="Card title" variant="borderless">
          Card content
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="Card title" variant="borderless">
          Card content
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="Card title" variant="borderless">
          Card content
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
```
### Loading card
Shows a loading indicator while the contents of the card is being fetched.
```vue
<script setup lang="ts">
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const loading = ref(true)
</script>

<template>
  <a-flex gap="medium" align="start" vertical>
    <a-switch aria-label="Show card content" :checked="!loading" @change="(checked: boolean) => loading = !checked" />
    <a-card :loading="loading" style="min-width: 300px">
      <template #actions>
        <EditOutlined key="edit" />
        <SettingOutlined key="setting" />
        <EllipsisOutlined key="ellipsis" />
      </template>
      <a-card-meta title="Card title">
        <template #avatar>
          <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
        </template>
        <template #description>
          <p>This is the description</p>
          <p>This is the description</p>
        </template>
      </a-card-meta>
    </a-card>
    <a-card :loading="loading" style="min-width: 300px">
      <template #actions>
        <EditOutlined key="edit" />
        <SettingOutlined key="setting" />
        <EllipsisOutlined key="ellipsis" />
      </template>
      <a-card-meta title="Card title">
        <template #avatar>
          <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />
        </template>
        <template #description>
          <p>This is the description</p>
          <p>This is the description</p>
        </template>
      </a-card-meta>
    </a-card>
  </a-flex>
</template>

<style scoped>
p {
  margin: 0;
  padding: 0;
}
</style>
```
### Grid card
Grid style card content.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'

const gridStyle: CSSProperties = {
  width: '25%',
  textAlign: 'center',
}
</script>

<template>
  <a-card title="Card Title">
    <a-card-grid :style="gridStyle">
      Content
    </a-card-grid>
    <a-card-grid :hoverable="false" :style="gridStyle">
      Content
    </a-card-grid>
    <a-card-grid :style="gridStyle">
      Content
    </a-card-grid>
    <a-card-grid :style="gridStyle">
      Content
    </a-card-grid>
    <a-card-grid :style="gridStyle">
      Content
    </a-card-grid>
    <a-card-grid :style="gridStyle">
      Content
    </a-card-grid>
    <a-card-grid :style="gridStyle">
      Content
    </a-card-grid>
  </a-card>
</template>
```
### Inner card
It can be placed inside the ordinary card to display the information of the multilevel structure.
```vue
<template>
  <a-card title="Card title">
    <a-card type="inner" title="Inner Card title">
      <template #extra>
        <a href="#">More</a>
      </template>
      Inner Card content
    </a-card>
    <a-card style="margin-top: 16px" type="inner" title="Inner Card title">
      <template #extra>
        <a href="#">More</a>
      </template>
      Inner Card content
    </a-card>
  </a-card>
</template>
```
### With tabs
More content can be hosted.
```vue
<script setup lang="ts">
import { computed, ref } from 'vue'

const tabList = [
  {
    key: 'tab1',
    tab: 'tab1',
  },
  {
    key: 'tab2',
    tab: 'tab2',
  },
]

const contentList: Record<string, string> = {
  tab1: 'content1',
  tab2: 'content2',
}

const tabListNoTitle = [
  {
    key: 'article',
    label: 'article',
  },
  {
    key: 'app',
    label: 'app',
  },
  {
    key: 'project',
    label: 'project',
  },
]

const contentListNoTitle: Record<string, string> = {
  article: 'article content',
  app: 'app content',
  project: 'project content',
}

const activeTabKey1 = ref('tab1')
const activeTabKey2 = ref('app')

function onTab1Change(key: string) {
  activeTabKey1.value = key
}

function onTab2Change(key: string) {
  activeTabKey2.value = key
}

const content1 = computed(() => contentList[activeTabKey1.value])
const content2 = computed(() => contentListNoTitle[activeTabKey2.value])
</script>

<template>
  <div>
    <a-card
      style="width: 100%"
      title="Card title"
      :tab-list="tabList"
      :active-tab-key="activeTabKey1"
      @tab-change="onTab1Change"
    >
      <template #extra>
        <a href="#">More</a>
      </template>
      <p>{{ content1 }}</p>
    </a-card>
    <br>
    <br>
    <a-card
      style="width: 100%"
      :tab-list="tabListNoTitle"
      :active-tab-key="activeTabKey2"
      :tab-props="{
        size: 'medium',
      }"
      @tab-change="onTab2Change"
    >
      <template #tabBarExtraContent>
        <a href="#">More</a>
      </template>
      <p>{{ content2 }}</p>
    </a-card>
  </div>
</template>
```
### Support more content configuration
A Card that supports `cover`, `avatar`, `title` and `description`.
```vue
<script setup lang="ts">
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-card style="width: 300px">
    <template #cover>
      <img
        draggable="false"
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      >
    </template>
    <template #actions>
      <SettingOutlined key="setting" />
      <EditOutlined key="edit" />
      <EllipsisOutlined key="ellipsis" />
    </template>
    <a-card-meta title="Card title" description="This is the description">
      <template #avatar>
        <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
      </template>
    </a-card-meta>
  </a-card>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Card by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { CardProps } from 'antdv-next'
import { EditOutlined, HeartOutlined, ShareAltOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'
import { computed } from 'vue'

const { token } = theme.useToken()

const classes = computed(() => ({
  root: 'custom-card-root',
  header: 'custom-card-header',
  body: 'custom-card-body',
}))

const stylesCard = computed(() => ({
  root: {
    boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
    borderRadius: '8px',
  },
  title: {
    fontSize: '16px',
    fontWeight: 500,
  },
}))

const stylesCardFn = computed(() => {
  return (info: { props: CardProps }) => {
    if (info.props.variant === 'outlined') {
      return {
        root: {
          borderColor: '#696FC7',
          boxShadow: '0 2px 8px #A7AAE1',
          borderRadius: '8px',
        },
        extra: {
          color: '#696FC7',
        },
        title: {
          fontSize: '16px',
          fontWeight: 500,
          color: '#A7AAE1',
        },
      }
    }
    return {}
  }
})

const stylesCardMeta = {
  title: {
    color: '#A7AAE1',
  },
  description: {
    color: '#A7AAE1',
  },
}
</script>

<template>
  <a-flex gap="medium">
    <a-card
      title="Object Card"
      :classes="classes"
      :styles="stylesCard"
      variant="borderless"
    >
      <template #extra>
        <a-button type="link">
          More
        </a-button>
      </template>
      <template #actions>
        <HeartOutlined key="heart" style="color: #ff6b6b" />
        <ShareAltOutlined key="share" style="color: #4ecdc4" />
        <EditOutlined key="edit" style="color: #45b7d1" />
      </template>
      <a-card-meta title="Object Card Meta title" description="This is the description">
        <template #avatar>
          <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
        </template>
      </a-card-meta>
    </a-card>
    <a-card
      title="Function Card"
      :classes="classes"
      :styles="stylesCardFn"
    >
      <template #extra>
        <a-button type="link" :styles="{ root: { color: '#A7AAE1' } }">
          More
        </a-button>
      </template>
      <template #actions>
        <HeartOutlined key="heart" style="color: #ff6b6b" />
        <ShareAltOutlined key="share" style="color: #4ecdc4" />
        <EditOutlined key="edit" style="color: #45b7d1" />
      </template>
      <a-card-meta
        title="Function Card Meta title"
        description="This is the description"
        :styles="stylesCardMeta"
      >
        <template #avatar>
          <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
        </template>
      </a-card-meta>
    </a-card>
  </a-flex>
</template>

<style scoped>
.custom-card-root {
  width: 300px;
  background-color: v-bind('token.colorBgContainer');
  border-radius: v-bind('`${token.borderRadiusLG}px`');
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid v-bind('token.colorBorderSecondary');
}

.custom-card-header {
  border-bottom: none;
  padding-bottom: 8px;
}

.custom-card-body {
  padding-top: 0;
}
</style>
```
### Cover and actions without body
```vue
<script setup lang="ts">
const cover = 'https://api.dicebear.com/7.x/miniavs/svg?seed=8'
</script>

<template>
  <a-card style="width: 300px">
    <template #cover>
      <img alt="example" :src="cover">
    </template>
    <template #actions>
      <span key="setting">setting</span>
      <span key="edit">edit</span>
    </template>
  </a-card>
</template>
```
### Debug button icon alignment in Card extra
Debug vertical alignment of button icons inside Card extra (#57727, #57896, #58428).
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
import { Popconfirm } from 'antdv-next'
import { h } from 'vue'

const InternalPopconfirm = Popconfirm._InternalPanelDoNotUseOrYouWillBeFired

const btnCls = {
  icon: 'card-btn-debug-icon',
  content: 'card-btn-debug-content',
}
</script>

<template>
  <a-config-provider :button="{ classes: btnCls }">
    <a-flex vertical gap="medium">
      <a-card class="line-card" title="#57727 Card extra">
        <template #extra>
          <a-button>
            <template #icon>
              <SmileOutlined />
            </template>
            Test
          </a-button>
        </template>
        Button in Card extra should be vertically centered with the title.
      </a-card>

      <a-card title="#57896 regression minimum case">
        <div class="simulate-57896">
          <div class="inline-buttons">
            <a-button>Cancel</a-button>
            <a-button type="primary" :icon="() => h(SmileOutlined)">
              Confirm
            </a-button>
          </div>
        </div>
      </a-card>

      <InternalPopconfirm
        title="Are you OK?"
        :ok-button-props="{ icon: () => h(SmileOutlined) }"
      />
    </a-flex>
  </a-config-provider>
</template>

<style>
.card-btn-debug-icon {
  background: rgba(255, 0, 0, 0.1);
}

.card-btn-debug-icon span {
  background: rgba(0, 255, 0, 0.5);
}

.card-btn-debug-content {
  background: rgba(0, 0, 255, 0.1);
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Card

#### Props {#card-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| title | Card title | VueNode | - | - | × |
| extra | Content to render in the top-right corner of the card | VueNode | - | - | × |
| bordered | Toggles rendering of the border around the card, please use `variant` instead | boolean | true | - | × |
| headStyle | Deprecated. | CSSProperties | - | - | × |
| bodyStyle | Deprecated. | CSSProperties | - | - | × |
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | - | × |
| hoverable | Lift up when hovering card | boolean | false | - | × |
| id | - | string | - | - | × |
| size | Size of card | CardSize | `medium` | - | × |
| type | Card style type, can be set to `inner` or not set | CardType | - | - | × |
| cover | Card cover | VueNode | - | - | × |
| actions | The action list, shows at the bottom of the Card | VueNode[] | - | - | × |
| tabList | List of TabPane's head | CardTabListType[] | - | - | × |
| tabBarExtraContent | Extra content in tab bar | VueNode \| &#123; [key: string]: VueNode &#125; | - | - | × |
| activeTabKey | Current TabPane's key | string | - | - | × |
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set | string | `The key of first tab` | - | × |
| tabProps | [Tabs](/components/tabs/#tabs) | Record&lt;string, any&gt; | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | CardClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | CardStylesType | - | - | ✓ |
| variant | Variants of Card | 'borderless' \| 'outlined' | `outlined` | - | ✓ |

#### Events {#card-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| tabChange | Callback when tab is switched | (key: string) =&gt; void | - |
| update:activeTabKey | - | (key: string) =&gt; void | - |

#### Slots {#card-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| title | Card title | () =&gt; any | - |
| extra | Content to render in the top-right corner of the card | () =&gt; any | - |
| cover | Card cover | () =&gt; any | - |
| actions | The action list, shows at the bottom of the Card | () =&gt; any | - |
| tabContentRender | - | TabsSlots['contentRender'] | - |
| tabLabelRender | - | TabsSlots['labelRender'] | - |
| tabBarExtraContent | Extra content in tab bar | () =&gt; any | - |

### CardGrid

#### Props {#card-grid-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| prefixCls | - | string | - | - |
| hoverable | Lift up when hovering card | boolean | false | - |

### CardMeta

#### Props {#card-meta-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| prefixCls | - | string | - | - | × |
| avatar | - | VueNode | - | - | × |
| title | Card title | VueNode | - | - | × |
| description | - | VueNode | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | CardMetaClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | CardMetaStylesType | - | - | ✓ |

#### Slots {#card-meta-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| avatar | Avatar | () =&gt; any | - |
| title | Title | () =&gt; any | - |
| description | Description | () =&gt; any | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Card" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Carousel
URL: https://www.antdv-next.com/components/carousel.md
---

## When To Use {#when-to-use}

- When there is a group of content on the same level.
- When there is insufficient content space, it can be used to save space in the form of a revolving door.
- Commonly used for a group of pictures/cards.

## Examples {#examples}

### Basic
Basic usage.
```vue
<script setup lang="ts">
function onChange(currentSlide: number) {
  console.log('current slide is', currentSlide)
}
</script>

<template>
  <a-carousel :after-change="onChange">
    <div>
      <h3 class="custom-carousel-item">
        1
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        2
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        3
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        4
      </h3>
    </div>
  </a-carousel>
</template>
```
### Position
There are 4 position options available.
```vue
<script setup lang="ts">
import type { CarouselProps } from 'antdv-next'
import { ref } from 'vue'

type DotPlacement = CarouselProps['dotPlacement']

const dotPlacement = ref<DotPlacement>('top')
</script>

<template>
  <a-radio-group v-model:value="dotPlacement" style="margin-bottom: 8px">
    <a-radio-button value="top">
      Top
    </a-radio-button>
    <a-radio-button value="bottom">
      Bottom
    </a-radio-button>
    <a-radio-button value="start">
      Start
    </a-radio-button>
    <a-radio-button value="end">
      End
    </a-radio-button>
  </a-radio-group>
  <a-carousel :dot-placement="dotPlacement">
    <div>
      <h3 class="custom-carousel-item">
        1
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        2
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        3
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        4
      </h3>
    </div>
  </a-carousel>
</template>
```
### Scroll automatically
Timing of scrolling to the next card/picture.
```vue
<template>
  <a-carousel autoplay>
    <div>
      <h3 class="custom-carousel-item">
        1
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        2
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        3
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        4
      </h3>
    </div>
  </a-carousel>
</template>
```
### Fade in
Slides use fade for transition.
```vue
<template>
  <a-carousel effect="fade">
    <div>
      <h3 class="custom-carousel-item">
        1
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        2
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        3
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        4
      </h3>
    </div>
  </a-carousel>
</template>
```
### Arrows for switching
Show the arrows for switching.
```vue
<template>
  <a-carousel arrows :infinite="false">
    <div>
      <h3 class="custom-carousel-item">
        1
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        2
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        3
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        4
      </h3>
    </div>
  </a-carousel>
  <br>
  <a-carousel arrows dot-placement="start" :infinite="false">
    <div>
      <h3 class="custom-carousel-item">
        1
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        2
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        3
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        4
      </h3>
    </div>
  </a-carousel>
</template>
```
### Progress of dots
Show progress of dots.
```vue
<template>
  <a-carousel :autoplay="{ dotDuration: true }" :autoplay-speed="5000">
    <div>
      <h3 class="custom-carousel-item">
        1
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        2
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        3
      </h3>
    </div>
    <div>
      <h3 class="custom-carousel-item">
        4
      </h3>
    </div>
  </a-carousel>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| effect | Transition effect | CarouselEffect | `scrollx` | - | × |
| id | - | string | - | - | × |
| slickGoTo | - | number | - | - | × |
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` `start` `end`, Please use `dotPlacement` instead | DotPlacement \| 'left' \| 'right' | `bottom` | - | × |
| dotPlacement | The position of the dots, which can be one of `top` `bottom` `start` `end` | DotPlacement | `bottom` | - | × |
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` | boolean \| &#123; class?: string &#125; | true | - | × |
| waitForAnimate | Whether to wait for the animation when switching | boolean | false | - | × |
| autoplay | Whether to scroll automatically, you can specify `autoplay=&#123;&#123; dotDuration: true &#125;&#125;` to display the progress bar | boolean \| &#123; dotDuration?: boolean &#125; | false | - | × |
| prevArrow | - | VueNode | - | - | × |
| nextArrow | - | VueNode | - | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| init | - | NonNullable&lt;Settings['onInit']&gt; | - |
| reInit | - | NonNullable&lt;Settings['onReInit']&gt; | - |
| edge | - | NonNullable&lt;Settings['onEdge']&gt; | - |
| swipe | - | NonNullable&lt;Settings['onSwipe']&gt; | - |
| lazyLoad | - | NonNullable&lt;Settings['onLazyLoad']&gt; | - |
| lazyLoadError | - | NonNullable&lt;Settings['onLazyLoadError']&gt; | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| prevArrow | - | () =&gt; any | - |
| nextArrow | - | () =&gt; any | - |

### Methods

| Method | Description | Type | Version |
| --- | --- | --- | --- |
| goTo | - | (slide: number, dontAnimate?: boolean) =&gt; void | - |
| next | - | () =&gt; void | - |
| prev | - | () =&gt; void | - |
| autoPlay | - | (playType?: 'update' \| 'leave' \| 'blur') =&gt; void | - |
| innerSlider | - | any | - |

## Design Token

<ComponentTokenTable component="Carousel" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Cascader
URL: https://www.antdv-next.com/components/cascader.md
---

## When To Use {#when-to-use}

- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
- When selecting from a large data set, with multi-stage classifications separated for easy selection.
- Chooses cascade items in one float layer for better user experience.

## Examples {#examples}

### Basic
Cascade selection box for selecting province/city/district.
```vue
<script setup lang="ts">
import { ref } from 'vue'

type Option = {
  value: string
  label: string
  children?: Option[]
} & Record<string, any>
const options: Option[] = [
  {
    'value': 'zhejiang',
    'label': 'Zhejiang',
    'aria-label': 'Zhejiang',
    'data-title': 'Zhejiang',
    'children': [
      {
        'value': 'hangzhou',
        'label': 'Hangzhou',
        'aria-label': 'Hangzhou',
        'data-title': 'Hangzhou',
        'children': [
          {
            'value': 'xihu',
            'label': 'West Lake',
            'aria-label': 'West Lake',
            'data-title': 'West Lake',
          },
        ],
      },
    ],
  },
  {
    'value': 'jiangsu',
    'label': 'Jiangsu',
    'aria-label': 'Jiangsu',
    'data-title': 'Jiangsu',
    'children': [
      {
        'value': 'nanjing',
        'label': 'Nanjing',
        'aria-label': 'Nanjing',
        'data-title': 'Nanjing',
        'children': [
          {
            'value': 'zhonghuamen',
            'label': 'Zhong Hua Men',
            'aria-label': 'Zhong Hua Men',
            'data-title': 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const val = ref()
</script>

<template>
  <a-cascader v-model:value="val" :options="options" placeholder="Please select" />
</template>
```
### Default value
Specifies default value by an array.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'

interface Option {
  value: string
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}
</script>

<template>
  <a-cascader :default-value="['zhejiang', 'hangzhou', 'xihu']" :options="options" @change="onChange" />
</template>
```
### Custom trigger
Separate trigger button and result.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'
import { ref } from 'vue'

interface Option {
  value: string
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
      },
    ],
  },
]

const text = ref('Unselect')

const onChange: CascaderEmits['change'] = (_value, selectedOptions) => {
  const labels = selectedOptions?.map(option => option.label).join(', ')
  text.value = labels || 'Unselect'
}
</script>

<template>
  <span>
    {{ text }}&nbsp;
    <a-cascader :options="options" @change="onChange">
      <a>Change city</a>
    </a-cascader>
  </span>
</template>
```
### Hover
Hover to expand sub menu, click to select option.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'

interface Option {
  value: string
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}

const displayRender = (labels: string[]) => labels[labels.length - 1]
</script>

<template>
  <a-cascader
    :options="options"
    expand-trigger="hover"
    :display-render="displayRender"
    @change="onChange"
  />
</template>
```
### Disabled option
Disable option by specifying the `disabled` property in `options`.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'

interface Option {
  value: string
  label: string
  disabled?: boolean
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    disabled: true,
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}
</script>

<template>
  <a-cascader :options="options" @change="onChange" />
</template>
```
### Change on select
Allows the selection of only parent options.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'
import { shallowRef } from 'vue'

interface Option {
  value: string
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hanzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}
const value = shallowRef()
</script>

<template>
  <a-cascader v-model:value="value" :options="options" change-on-select @change="onChange" />
</template>
```
### Multiple
Select multiple options. Disable the `checkbox` by adding the `disableCheckbox` property and selecting a specific item. The style of the disable can be modified by the className.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'

interface Option {
  value: string | number
  label: string
  children?: Option[]
  disableCheckbox?: boolean
}

const options: Option[] = [
  {
    label: 'Light',
    value: 'light',
    children: Array.from({ length: 20 }).map((_, index) => ({
      label: `Number ${index}`,
      value: index,
    })),
  },
  {
    label: 'Bamboo',
    value: 'bamboo',
    children: [
      {
        label: 'Little',
        value: 'little',
        children: [
          {
            label: 'Toy Fish',
            value: 'fish',
            disableCheckbox: true,
          },
          {
            label: 'Toy Cards',
            value: 'cards',
          },
          {
            label: 'Toy Bird',
            value: 'bird',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}
</script>

<template>
  <a-cascader
    style="width: 100%"
    :options="options"
    multiple
    max-tag-count="responsive"
    @change="onChange"
  />
</template>
```
### ShowCheckedStrategy
Shows a selected item in a box using `showCheckedStrategy`.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'
import { Cascader } from 'antdv-next'
import { shallowRef } from 'vue'

const SHOW_CHILD = Cascader.SHOW_CHILD

interface Option {
  value: string | number
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    label: 'Light',
    value: 'light',
    children: Array.from({ length: 20 }).map((_, index) => ({
      label: `Number ${index}`,
      value: index,
    })),
  },
  {
    label: 'Bamboo',
    value: 'bamboo',
    children: [
      {
        label: 'Little',
        value: 'little',
        children: [
          {
            label: 'Toy Fish',
            value: 'fish',
          },
          {
            label: 'Toy Cards',
            value: 'cards',
          },
          {
            label: 'Toy Bird',
            value: 'bird',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}
const value = shallowRef([
  ['bamboo', 'little', 'fish'],
  ['bamboo', 'little', 'cards'],
  ['bamboo', 'little', 'bird'],
] as any)

const value1 = shallowRef([['bamboo']])
</script>

<template>
  <a-cascader
    v-model:value="value"
    style="width: 100%"
    :options="options"
    multiple
    max-tag-count="responsive"
    :show-checked-strategy="SHOW_CHILD"
    @change="onChange"
  />
  <br>
  <br>
  <a-cascader
    v-model:value="value1"
    style="width: 100%"
    :options="options"
    multiple
    max-tag-count="responsive"
    @change="onChange"
  />
</template>
```
### Size
Cascade selection box of different sizes.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'

interface Option {
  value: string
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}
</script>

<template>
  <a-cascader size="large" :options="options" @change="onChange" />
  <br>
  <br>
  <a-cascader :options="options" @change="onChange" />
  <br>
  <br>
  <a-cascader size="small" :options="options" @change="onChange" />
  <br>
  <br>
</template>
```
### Custom render
For instance, add an external link after the selected value.
```vue
<script setup lang="ts">
interface Option {
  value: string
  label: string
  children?: Option[]
  code?: number
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
            code: 752100,
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
            code: 453400,
          },
        ],
      },
    ],
  },
]

function handleAreaClick(e: MouseEvent, label: string, option: Option) {
  e.stopPropagation()
  console.log('clicked', label, option)
}

function getSelectedOption(selectedOptions: Option[] | undefined, index: number) {
  return selectedOptions?.[index]
}

function handleLastClick(
  e: MouseEvent,
  label: string,
  selectedOptions: Option[] | undefined,
  index: number,
) {
  const option = selectedOptions?.[index]
  if (!option) {
    return
  }
  handleAreaClick(e, label, option)
}

function getLabelKey(label: string, selectedOptions: Option[] | undefined, index: number) {
  return getSelectedOption(selectedOptions, index)?.value ?? label
}
</script>

<template>
  <a-cascader
    :options="options"
    :default-value="['zhejiang', 'hangzhou', 'xihu']"
    style="width: 100%"
  >
    <template #displayRender="{ labels, selectedOptions }">
      <span v-for="(label, index) in labels" :key="getLabelKey(String(label), selectedOptions as any, index)">
        <template v-if="index === labels.length - 1">
          {{ label }}
          <template v-if="getSelectedOption(selectedOptions as any, index)?.code !== undefined">
            (
            <a
              @click="(e) => handleLastClick(e, String(label), selectedOptions as any, index)"
            >
              {{ getSelectedOption(selectedOptions as any, index)?.code }}
            </a>
            )
          </template>
        </template>
        <template v-else>
          {{ label }} /
        </template>
      </span>
    </template>
    <template #optionRender="option">
      <span>{{ option.label }} ({{ option.value }})</span>
    </template>
  </a-cascader>
</template>
```
### Search
Search and select options directly.

> Now, `Cascader[showSearch]` doesn't support search on server, more info [#5547](https://github.com/ant-design/ant-design/issues/5547)
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'

interface Option {
  value: string
  label: string
  children?: Option[]
  disabled?: boolean
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
          {
            value: 'xiasha',
            label: 'Xia Sha',
            disabled: true,
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua men',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value, selectedOptions) => {
  console.log(value, selectedOptions)
}

function handleSearch(value: string) {
  console.log(value)
}

function filter(inputValue: string, path: Option[]) {
  return path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()))
}
</script>

<template>
  <a-cascader
    :options="options"
    :show-search="{ filter, onSearch: handleSearch } as any"
    placeholder="Please select"
    @change="onChange"
  />
</template>
```
### Load Options Lazily
Load options lazily with `loadData`.

> Note: `loadData` cannot work with `showSearch`.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'
import { ref } from 'vue'

interface Option {
  value?: string | number | null
  label: string
  children?: Option[]
  isLeaf?: boolean
}

const optionLists: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
  },
]

const options = ref<Option[]>(optionLists)

const onChange: CascaderEmits['change'] = (value, selectedOptions) => {
  console.log(value, selectedOptions)
}

function loadData(selectedOptions: Option[]) {
  const targetOption = selectedOptions[selectedOptions.length - 1]

  setTimeout(() => {
    targetOption.children = [
      {
        label: `${targetOption.label} Dynamic 1`,
        value: 'dynamic1',
      },
      {
        label: `${targetOption.label} Dynamic 2`,
        value: 'dynamic2',
      },
    ]
    options.value = [...options.value]
  }, 1000)
}
</script>

<template>
  <a-cascader
    :options="options"
    :load-data="loadData"
    change-on-select
    @change="onChange"
  />
</template>
```
### Custom Field Names
Custom field names.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'

interface Option {
  code: string
  name: string
  items?: Option[]
}

const options: Option[] = [
  {
    code: 'zhejiang',
    name: 'Zhejiang',
    items: [
      {
        code: 'hangzhou',
        name: 'Hangzhou',
        items: [
          {
            code: 'xihu',
            name: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    code: 'jiangsu',
    name: 'Jiangsu',
    items: [
      {
        code: 'nanjing',
        name: 'Nanjing',
        items: [
          {
            code: 'zhonghuamen',
            name: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}
</script>

<template>
  <a-cascader
    :field-names="{ label: 'name', value: 'code', children: 'items' }"
    :options="options"
    placeholder="Please select"
    @change="onChange"
  />
</template>
```
### Prefix and Suffix
Use `prefix` to customize the prefix content, use `suffixIcon` to customize the selection box suffix icon, and use `expandIcon` to customize the current item expand icon.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'
import { SmileOutlined } from '@antdv-next/icons'
import { h } from 'vue'

interface Option {
  value: string
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}

const prefixIcon = h(SmileOutlined)
</script>

<template>
  <a-cascader
    :options="options"
    placeholder="Please select"
    @change="onChange"
  >
    <template #suffixIcon>
      <SmileOutlined />
    </template>
  </a-cascader>
  <br>
  <br>
  <a-cascader
    suffix-icon="ab"
    :options="options"
    placeholder="Please select"
    @change="onChange"
  />
  <br>
  <br>
  <a-cascader
    :options="options"
    placeholder="Please select"
    @change="onChange"
  >
    <template #expandIcon>
      <SmileOutlined />
    </template>
  </a-cascader>
  <br>
  <br>
  <a-cascader
    expand-icon="ab"
    :options="options"
    placeholder="Please select"
    @change="onChange"
  />
  <br>
  <br>
  <a-cascader
    :prefix="prefixIcon"
    :options="options"
    placeholder="Please select"
    @change="onChange"
  />
</template>
```
### Custom dropdown
Customize the dropdown menu via `popupRender`.
```vue
<script setup lang="ts">
interface Option {
  value: string
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <a-cascader :options="options" placeholder="Please select">
    <template #popupRender="menus">
      <component :is="menus" />
      <a-divider style="margin: 0" />
      <div style="padding: 8px">
        The footer is not very short.
      </div>
    </template>
  </a-cascader>
</template>
```
### Placement
You can manually specify the position of the popup via `placement`.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'

interface Option {
  value: string
  label: string
  children?: Option[]
}

const placement = shallowRef<Placement>('topLeft')

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <a-radio-group v-model:value="placement">
    <a-radio-button value="topLeft">
      topLeft
    </a-radio-button>
    <a-radio-button value="topRight">
      topRight
    </a-radio-button>
    <a-radio-button value="bottomLeft">
      bottomLeft
    </a-radio-button>
    <a-radio-button value="bottomRight">
      bottomRight
    </a-radio-button>
  </a-radio-group>
  <br>
  <br>
  <a-cascader :options="options" placeholder="Please select" :placement="placement" />
</template>
```
### Variants
Variants of Cascader, there are four variants: `outlined` `filled` `borderless` and `underlined`.
```vue
<template>
  <a-flex vertical gap="medium">
    <a-cascader placeholder="Please select" variant="borderless" />
    <a-cascader placeholder="Please select" variant="filled" />
    <a-cascader placeholder="Please select" variant="outlined" />
    <a-cascader placeholder="Please select" variant="underlined" />
  </a-flex>
</template>
```
### Status
Add status to Cascader with `status`, which could be `error` or `warning`.
```vue
<template>
  <a-space vertical>
    <a-cascader status="error" placeholder="Error" />
    <a-cascader status="warning" multiple placeholder="Warning multiple" />
  </a-space>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Cascader by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { CascaderEmits, CascaderProps } from 'antdv-next'

interface Option {
  value: string
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'meet-student',
    label: 'meet-student',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const classes: CascaderProps['classes'] = {
  root: 'cascader-demo-root',
}

const stylesObject: CascaderProps['styles'] = {
  prefix: {
    color: '#ccc',
  },
  suffix: {
    color: '#ccc',
  },
}

const stylesFn: CascaderProps['styles'] = ({ props }) => {
  if (props.variant === 'filled') {
    return {
      prefix: {
        color: '#1890ff',
      },
      suffix: {
        color: '#1890ff',
      },
      popup: {
        listItem: {
          color: '#1890ff',
        },
      },
    }
  }
  return {}
}

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-cascader
      :options="options"
      :classes="classes"
      :styles="stylesObject"
      placeholder="Object styles"
      prefix="🏠"
      @change="onChange"
    />
    <a-cascader
      :options="options"
      :classes="classes"
      :styles="stylesFn"
      placeholder="Function styles"
      variant="filled"
      prefix="✅"
      @change="onChange"
    />
  </a-flex>
</template>

<style scoped>
:deep(.cascader-demo-root) {
  border-radius: 8px;
  width: 300px;
}
</style>
```
### Panel
Used for inline view case.
```vue
<script setup lang="ts">
import type { CascaderEmits } from 'antdv-next'
import { ref } from 'vue'

interface Option {
  value: string | number
  label: string
  children?: Option[]
}

const options: Option[] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const disabled = ref(false)

const onChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}

const onMultipleChange: CascaderEmits['change'] = (value) => {
  console.log(value)
}
</script>

<template>
  <a-flex vertical gap="small" align="flex-start">
    <a-switch
      v-model:checked="disabled"
      checked-children="Enabled"
      un-checked-children="Disabled"
      aria-label="disabled switch"
    />
    <a-cascader-panel :options="options" :disabled="disabled" @change="onChange" />
    <a-cascader-panel multiple :options="options" :disabled="disabled" @change="onMultipleChange" />
    <a-cascader-panel />
  </a-flex>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowClear | Show clear button | boolean \| \{ clearIcon?: VueNode \} | true | - | × |
| changeOnSelect | Change value on each selection if set to true (always works when `multiple` is `true`) | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: \{ props \})=&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| disabled | Whether disabled select | boolean | false | - | × |
| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | - | × |
| fieldNames | Custom field name for label and value and children | object | \{ label: `label`, value: `value`, children: `children` \} | - | × |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () =&gt; document.body | - | × |
| loadData | To load option lazily, and it cannot work with `showSearch` | (selectedOptions) =&gt; void | - | - | × |
| loadingIcon | Customize the loading icon while options are loading lazily | VueNode | - | - | ✓ |
| maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| `responsive` | - | - | × |
| maxTagPlaceholder | Placeholder for not showing tags | VueNode \| function(omittedValues) | - | - | × |
| maxTagTextLength | Max tag text length to show | number | - | - | × |
| multiple | Support multiple or not | boolean | - | - | × |
| open | Set visible of cascader popup | boolean | - | - | × |
| options | The data options of cascade | [Option](#option)\[] | - | - | × |
| placeholder | The input placeholder | string | - | - | × |
| placement | Use preset popup align config from builtinPlacements | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | - | × |
| showCheckedStrategy | The way to show selected items in the box (only effective when `multiple` is `true`). `Cascader.SHOW_CHILD`: just show child treeNode. `Cascader.SHOW_PARENT`: just show parent treeNode (when all child treeNode under the parent treeNode are checked) | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | - | × |
| showSearch | Whether show search input in single mode | boolean \| [Object](#showsearch) | false | - | × |
| size | The input size | `large` \| `medium` \| `small` | `medium` | - | × |
| status | Set validation status | 'error' \| 'warning' | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: \{ props \})=&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |
| value | The selected value, support `v-model:value` | string\[] \| number\[] | - | - | × |
| variant | Variants of selector | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback when finishing cascader select | (value, selectedOptions) =&gt; void | - |
| openChange | Callback when popup shown or hidden | (open: boolean) =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| displayRender | The render function of displaying selected options | (label, selectedOptions) => VueNode | - |
| expandIcon | Customize the current item expand icon | VueNode | - |
| loadingIcon | Customize the loading icon while options are loading lazily | VueNode | - |
| notFoundContent | Specify content to show when no result matches | VueNode | - |
| optionRender | Customize the rendering dropdown options | (option: Option) => VueNode | - |
| popupRender | Customize dropdown content | (menus: VNode) => VueNode | - |
| prefix | The custom prefix | VueNode | - |
| removeIcon | The custom remove icon | VueNode | - |
| suffixIcon | The custom suffix icon | VueNode | - |
| tagRender | Custom render function for tags in `multiple` mode | (\{ label: string, onClose: function, value: string \}) =&gt; VueNode | - |

### Methods

| Method | Description | Version |
| --- | --- | --- |
| blur() | Remove focus | - |
| focus() | Get focus | - |

## Types

### showSearch

Fields for showSearch when it's an object:

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `multiple` is `true` | boolean | true | - |
| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | function(inputValue, path): boolean | - | - |
| limit | Set the count of filtered items | number \| false | 50 | - |
| matchInputWidth | Whether the width of list matches input, ([how it looks](https://github.com/ant-design/ant-design/issues/25779)) | boolean | true | - |
| render | Used to render filtered options | function(inputValue, path): VueNode | - | - |
| sort | Used to sort filtered options | function(a, b, inputValue) | - | - |
| searchValue | Set search value, Need work with `showSearch` | string | - | - |
| onSearch | The callback function triggered when input changed | (search: string) =&gt; void | - | - |

### Option

```typescript
interface Option {
  value: string | number
  label?: VueNode
  disabled?: boolean
  children?: Option[]
  // Determines if this is a leaf node(effective when `loadData` is specified).
  // `false` will force trade TreeNode as a parent node.
  // Show expand icon even if the current node has no children.
  isLeaf?: boolean
}
```

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Cascader"></ComponentTokenTable>

---
Title: Checkbox
URL: https://www.antdv-next.com/components/checkbox.md
---

## When To Use {#when-to-use}

## Examples {#examples}

### Basic
Basic usage of checkbox.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const checked = shallowRef(false)
</script>

<template>
  <a-checkbox v-model:checked="checked">
    Checkbox
  </a-checkbox>
</template>
```
### Disabled
Disabled checkbox.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const checked1 = ref(false)
const checked2 = ref(false)
const checked3 = ref(true)
</script>

<template>
  <a-checkbox v-model:checked="checked1" disabled />
  <br>
  <a-checkbox v-model:checked="checked2" disabled indeterminate />
  <br>
  <a-checkbox v-model:checked="checked3" disabled />
</template>
```
### Controlled Checkbox
Communicated with other components.
```vue
<script setup lang="ts">
import { computed, shallowRef } from 'vue'

const checked = shallowRef(true)
const disabled = shallowRef(false)

function toggleChecked() {
  checked.value = !checked.value
}

function toggleDisable() {
  disabled.value = !disabled.value
}

function onChange(e: any) {
  console.log('checked = ', e.target.checked)
  checked.value = e.target.checked
}

const label = computed(() => `${checked.value ? 'Checked' : 'Unchecked'}-${disabled.value ? 'Disabled' : 'Enabled'}`)
</script>

<template>
  <p style="margin-bottom: 20px">
    <a-checkbox
      :checked="checked"
      :disabled="disabled"
      @change="onChange"
    >
      {{ label }}
    </a-checkbox>
  </p>
  <p>
    <a-button type="primary" size="small" @click="toggleChecked">
      {{ !checked ? 'Check' : 'Uncheck' }}
    </a-button>
    <a-button style="margin: 0 10px" type="primary" size="small" @click="toggleDisable">
      {{ !disabled ? 'Disable' : 'Enable' }}
    </a-button>
  </p>
</template>
```
### Checkbox Group
Generate a group of checkboxes from an array.
```vue
<script setup lang="ts">
const plainOptions = ['Apple', 'Pear', 'Orange']

const options: any[] = [
  { label: 'Apple', value: 'Apple', className: 'label-1' },
  { label: 'Pear', value: 'Pear', className: 'label-2' },
  { label: 'Orange', value: 'Orange', className: 'label-3' },
]

const optionsWithDisabled: any[] = [
  { label: 'Apple', value: 'Apple', className: 'label-1' },
  { label: 'Pear', value: 'Pear', className: 'label-2' },
  { label: 'Orange', value: 'Orange', className: 'label-3', disabled: false },
]

function onChange(checkedValues: any[]) {
  console.log('checked = ', checkedValues)
}
</script>

<template>
  <a-checkbox-group :options="plainOptions" :default-value="['Apple']" @change="onChange" />
  <br>
  <br>
  <a-checkbox-group :options="options" :default-value="['Pear']" @change="onChange" />
  <br>
  <br>
  <a-checkbox-group disabled :options="optionsWithDisabled" :default-value="['Apple']" @change="onChange" />
</template>
```
### Check all
The `indeterminate` property can help you to achieve a 'check all' effect.
```vue
<script setup lang="ts">
import { computed, shallowRef } from 'vue'

const plainOptions = ['Apple', 'Pear', 'Orange']
const defaultCheckedList = ['Apple', 'Orange']

const checkedList = shallowRef<string[]>(defaultCheckedList)

const checkAll = computed(() => plainOptions.length === checkedList.value.length)
const indeterminate = computed(() => checkedList.value.length > 0 && checkedList.value.length < plainOptions.length)

function onChange(list: string[]) {
  checkedList.value = list
}

function onCheckAllChange(e: any) {
  checkedList.value = e.target.checked ? plainOptions : []
}
</script>

<template>
  <a-checkbox
    :indeterminate="indeterminate"
    :checked="checkAll"
    @change="onCheckAllChange"
  >
    Check all
  </a-checkbox>
  <a-divider />
  <a-checkbox-group
    :options="plainOptions"
    :value="checkedList"
    @change="onChange"
  />
</template>
```
### Use with Grid
We can use Checkbox and Grid in CheckboxGroup, to implement complex layout.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref([])

function onChange(checkedValues: any[]) {
  console.log('checked = ', checkedValues)
}
</script>

<template>
  <a-checkbox-group v-model:value="value" style="width: 100%" @change="onChange">
    <a-row>
      <a-col :span="8">
        <a-checkbox value="A">
          A
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="B">
          B
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="C">
          C
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="D">
          D
        </a-checkbox>
      </a-col>
      <a-col :span="8">
        <a-checkbox value="E">
          E
        </a-checkbox>
      </a-col>
    </a-row>
  </a-checkbox-group>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Checkbox by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { CheckboxProps } from 'antdv-next'
import { theme } from 'antdv-next'
import { ref } from 'vue'

const checked = ref(true)
const { token } = theme.useToken()

// Object styles — 静态样式对象
const stylesObject: CheckboxProps['styles'] = {
  icon: {
    borderRadius: '6px',
  },
  label: {
    color: 'blue',
  },
}

// Function classes — 根据 checked 状态动态返回类名
const classesFn: CheckboxProps['classes'] = (info) => {
  const base: Record<string, string> = {
    root: 'checkbox-demo-root',
    icon: 'checkbox-demo-icon',
    label: 'checkbox-demo-label',
  }
  if (info.props.checked) {
    return {
      root: base.root,
      icon: `${base.icon} checkbox-demo-icon-checked`,
      label: `${base.label} checkbox-demo-label-checked`,
    }
  }
  return base
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-checkbox :styles="stylesObject">
      Object styles
    </a-checkbox>
    <a-checkbox
      v-model:checked="checked"
      :classes="classesFn"
    >
      Function classes
    </a-checkbox>
  </a-flex>
</template>

<style>
.checkbox-demo-root {
  border-radius: v-bind('`${token.borderRadius}px`');
  background-color: v-bind('token.colorBgContainer');
}

.checkbox-demo-icon {
  border-color: v-bind('token.colorWarning') !important;
}

.checkbox-demo-icon-checked {
  background-color: v-bind('token.colorWarning') !important;
  border-color: v-bind('token.colorWarning') !important;
}

.checkbox-demo-label {
  color: v-bind('token.colorTextDisabled') !important;
  font-weight: bold;
}

.checkbox-demo-label-checked {
  color: v-bind('token.colorWarning') !important;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Checkbox

#### Props {#checkbox-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| checked | Specifies whether the checkbox is selected, support `v-model:checked` | string \| number \| boolean \| object | false | - | × |
| checkedValue | The value when checked | string \| number \| boolean \| object | true | - | × |
| defaultChecked | Whether to set the initial state | string \| number \| boolean \| object | false | - | × |
| disabled | If disable checkbox | boolean | false | - | × |
| indeterminate | The indeterminate checked state of checkbox | boolean | false | - | × |
| unCheckedValue | The value when unchecked | string \| number \| boolean \| object | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: \{ props \})=&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: \{ props \})=&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |

#### Events {#checkbox-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | The callback function that is triggered when the state changes | (e: CheckboxChangeEvent) =&gt; void | - |
| focus | Called when entering the component | function() | - |
| blur | Called when leaving the component | function() | - |

### CheckboxGroup

#### Props {#checkboxgroup-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| options | Specifies options | string\[] \| number\[] \| Option\[] | \[] | - |
| disabled | If disable all checkboxes | boolean | false | - |
| name | The `name` property of all `input[type="checkbox"]` children | string | - | - |
| value | Used for setting the currently selected value, support `v-model:value` | (string \| number \| boolean)\[] | \[] | - |
| labelRender | - | (params: &#123; item: CheckboxOptionType, index: number &#125;) =&gt; any | - | - |

#### Events {#checkboxgroup-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | The callback function that is triggered when the state changes | (checkedValue: T[]) =&gt; void | - |

#### Slots {#checkboxgroup-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| labelRender | - | (params: &#123; item: CheckboxOptionType, index: number &#125;) =&gt; any | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Checkbox" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Collapse
URL: https://www.antdv-next.com/components/collapse.md
---

## When To Use {#when-to-use}

- Can be used to group or hide complex regions to keep the page clean.
- `Accordion` is a special kind of `Collapse`, which allows only one panel to be expanded at a time.

## Examples {#examples}

### Collapse
By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
```vue
<script setup lang="ts">
import { h } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const items = [
  {
    key: '1',
    label: 'This is panel header 1',
    content: h('p', text),
  },
  {
    key: '2',
    label: 'This is panel header 2',
    content: h('p', text),
  },
  {
    key: '3',
    label: 'This is panel header 3',
    content: h('p', text),
  },
]

function onChange(key: string[]) {
  console.log(key)
}
</script>

<template>
  <a-collapse :items="items" :default-active-key="['1']" @change="onChange" />
</template>
```
### Size
Antdv Next supports a default collapse size as well as a large and small size.

If a large or small collapse is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a collapse with the default size.
```vue
<script setup lang="ts">
import { h } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const defaultItems = [
  {
    key: '1',
    label: 'This is default size panel header',
    content: h('p', text),
  },
]

const smallItems = [
  {
    key: '1',
    label: 'This is small size panel header',
    content: h('p', text),
  },
]

const largeItems = [
  {
    key: '1',
    label: 'This is large size panel header',
    content: h('p', text),
  },
]
</script>

<template>
  <a-divider title-placement="start">
    Default Size
  </a-divider>
  <a-collapse :items="defaultItems" />
  <a-divider title-placement="start">
    Small Size
  </a-divider>
  <a-collapse size="small" :items="smallItems" />
  <a-divider title-placement="start">
    Large Size
  </a-divider>
  <a-collapse size="large" :items="largeItems" />
</template>
```
### Accordion
In accordion mode, only one panel can be expanded at a time.
```vue
<script setup lang="ts">
import { h } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const items = [
  {
    key: '1',
    label: 'This is panel header 1',
    content: h('p', text),
  },
  {
    key: '2',
    label: 'This is panel header 2',
    content: h('p', text),
  },
  {
    key: '3',
    label: 'This is panel header 3',
    content: h('p', text),
  },
]
</script>

<template>
  <a-collapse accordion :items="items" />
</template>
```
### Nested panel
`Collapse` is nested inside the `Collapse`.
```vue
<script setup lang="ts">
import { Collapse } from 'antdv-next'
import { h } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const itemsNest = [
  {
    key: '1',
    label: 'This is panel nest panel',
    content: h('p', text),
  },
]

const items = [
  {
    key: '1',
    label: 'This is panel header 1',
    content: h(Collapse, { defaultActiveKey: ['1'], items: itemsNest }),
  },
  {
    key: '2',
    label: 'This is panel header 2',
    content: h('p', text),
  },
  {
    key: '3',
    label: 'This is panel header 3',
    content: h('p', text),
  },
]

function onChange(key: string[]) {
  console.log(key)
}
</script>

<template>
  <a-collapse :items="items" @change="onChange" />
</template>
```
### Borderless
A borderless style of Collapse.
```vue
<script setup lang="ts">
import { h } from 'vue'

const text
  = 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'

const items = [
  {
    key: '1',
    label: 'This is panel header 1',
    content: h('p', { style: { paddingInlineStart: '24px' } }, text),
  },
  {
    key: '2',
    label: 'This is panel header 2',
    content: h('p', { style: { paddingInlineStart: '24px' } }, text),
  },
  {
    key: '3',
    label: 'This is panel header 3',
    content: h('p', { style: { paddingInlineStart: '24px' } }, text),
  },
]
</script>

<template>
  <a-collapse :items="items" :bordered="false" :default-active-key="['1']" />
</template>
```
### Custom Panel
Customize the background, border, margin styles and icon for each panel.
```vue
<script setup lang="ts">
import type { CollapseProps } from 'antdv-next'
import type { CSSProperties } from 'vue'
import { CaretRightOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'
import { computed, h } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const { token } = theme.useToken()

const panelStyle = computed<CSSProperties>(() => ({
  marginBottom: '24px',
  background: token.colorFillAlter,
  borderRadius: token.borderRadiusLG,
  border: 'none',
}))

const items = computed(() => [
  {
    key: '1',
    label: 'This is panel header 1',
    content: h('p', text),
    style: panelStyle.value,
  },
  {
    key: '2',
    label: 'This is panel header 2',
    content: h('p', text),
    style: panelStyle.value,
  },
  {
    key: '3',
    label: 'This is panel header 3',
    content: h('p', text),
    style: panelStyle.value,
  },
])

const expandIcon: CollapseProps['expandIcon'] = (panelProps) => {
  return h(CaretRightOutlined, { rotate: panelProps.isActive ? 90 : 0 })
}
</script>

<template>
  <a-collapse
    :items="items"
    :bordered="false"
    :default-active-key="['1']"
    :expand-icon="expandIcon"
    :style="{ background: token.colorBgContainer }"
  />
</template>
```
### Panel Icon
The panel header can carry an icon, rendered here through the `labelRender` slot. Icons
from third-party libraries render as a bare `<svg>` and stay vertically centred with the
title text just the same.
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const items = [
  {
    key: '1',
    label: 'Panel with an Ant Design icon',
    content: h('p', text),
  },
  {
    key: '2',
    label: 'Panel with a third-party icon',
    content: h('p', text),
  },
]
</script>

<template>
  <a-collapse :items="items" :default-active-key="['1']">
    <template #labelRender="{ item }">
      <SmileOutlined v-if="item.key === '1'" />
      <!-- Icons from third-party libraries (e.g. lucide) render as a bare `<svg>`
           rather than an `.anticon` wrapper. It stays vertically centred with the
           title text. -->
      <svg
        v-else
        viewBox="0 0 24 24"
        width="1em"
        height="1em"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        aria-hidden="true"
      >
        <path d="M3 3v18h18" />
        <path d="M7 14l4-4 3 3 5-6" />
      </svg>
      {{ item.label }}
    </template>
  </a-collapse>
</template>
```
### SFC Mode
Support SFC mode with `a-collapse-panel`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const activeKeys = ref(['1'])
</script>

<template>
  <a-collapse v-model:active-key="activeKeys">
    <a-collapse-panel key="1" header="This is panel header 1">
      <p>
        A dog is a type of domesticated animal. Known for its loyalty and faithfulness.
      </p>
    </a-collapse-panel>
    <a-collapse-panel key="2">
      <template #header>
        <span>This is panel header 2</span>
      </template>
      <template #extra>
        <a-tag color="blue">
          Extra
        </a-tag>
      </template>
      <p>
        It can be found as a welcome guest in many households across the world.
      </p>
    </a-collapse-panel>
  </a-collapse>
</template>
```
### No arrow
You can hide the arrow icon by passing `showArrow=false` to the panel.
```vue
<script setup lang="ts">
import { h } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const items = [
  {
    key: '1',
    label: 'This is panel header with arrow icon',
    content: h('p', text),
  },
  {
    key: '2',
    label: 'This is panel header with no arrow icon',
    content: h('p', text),
    showArrow: false,
  },
]

function onChange(key: string[]) {
  console.log(key)
}
</script>

<template>
  <a-collapse :items="items" :default-active-key="['1']" @change="onChange" />
</template>
```
### Extra node
Render extra element in the top-right corner of each panel.
```vue
<script setup lang="ts">
import type { CollapseProps } from 'antdv-next'
import { SettingOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const expandIconPlacement = ref<CollapseProps['expandIconPlacement']>('start')

const placementOptions = [
  { label: 'start', value: 'start' },
  { label: 'end', value: 'end' },
]

function onChange(key: string[]) {
  console.log(key)
}

function genExtra() {
  return h(SettingOutlined, {
    onClick: (event: Event) => {
      event.stopPropagation()
    },
  })
}

const items = [
  {
    key: '1',
    label: 'This is panel header 1',
    content: h('div', text),
    extra: genExtra(),
  },
  {
    key: '2',
    label: 'This is panel header 2',
    content: h('div', text),
    extra: genExtra(),
  },
  {
    key: '3',
    label: 'This is panel header 3',
    content: h('div', text),
    extra: genExtra(),
  },
]
</script>

<template>
  <a-collapse
    :items="items"
    :default-active-key="['1']"
    :expand-icon-placement="expandIconPlacement"
    @change="onChange"
  />
  <br>
  <span>Expand Icon Placement: </span>
  <a-select v-model:value="expandIconPlacement" style="margin: 0 8px" :options="placementOptions" />
</template>
```
### Ghost Collapse
Making collapse's background transparent.
```vue
<script setup lang="ts">
import { h } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const items = [
  {
    key: '1',
    label: 'This is panel header 1',
    content: h('p', text),
  },
  {
    key: '2',
    label: 'This is panel header 2',
    content: h('p', text),
  },
  {
    key: '3',
    label: 'This is panel header 3',
    content: h('p', text),
  },
]
</script>

<template>
  <a-collapse :items="items" ghost :default-active-key="['1']" />
</template>
```
### Collapsible
Specify the trigger area of collapsible by `collapsible`.
```vue
<script setup lang="ts">
import { h } from 'vue'

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

const headerItems = [
  {
    key: '1',
    label: 'This panel can be collapsed by clicking text or icon',
    content: h('p', text),
  },
]

const iconItems = [
  {
    key: '1',
    label: 'This panel can only be collapsed by clicking icon',
    content: h('p', text),
  },
]

const disabledItems = [
  {
    key: '1',
    label: 'This panel can\'t be collapsed',
    content: h('p', text),
  },
]
</script>

<template>
  <a-space direction="vertical" size="large" style="width: 100%">
    <a-collapse
      collapsible="header"
      :default-active-key="['1']"
      :items="headerItems"
    />
    <a-collapse
      collapsible="icon"
      :default-active-key="['1']"
      :items="iconItems"
    />
    <a-collapse
      collapsible="disabled"
      :items="disabledItems"
    />
  </a-space>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Collapse by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { CollapseProps } from 'antdv-next'
import { h } from 'vue'

const text
  = 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.'

const element = h('p', text)

const items = [
  {
    key: '1',
    label: 'This is panel header 1',
    content: element,
  },
  {
    key: '2',
    label: 'This is panel header 2',
    content: element,
  },
  {
    key: '3',
    label: 'This is panel header 3',
    content: element,
  },
]

const classes: CollapseProps['classes'] = {
  root: 'demo-collapse-root',
}

const stylesObject: CollapseProps['styles'] = {
  root: {
    backgroundColor: '#fafafa',
    border: '1px solid #e0e0e0',
    borderRadius: '8px',
  },
  header: {
    backgroundColor: '#f0f0f0',
    padding: '12px 16px',
    color: '#141414',
  },
}

const stylesFn: CollapseProps['styles'] = (info) => {
  if (info?.props?.size === 'large') {
    return {
      root: {
        backgroundColor: '#fff',
        border: '1px solid #696FC7',
        borderRadius: '8px',
      },
      header: {
        backgroundColor: '#F5EFFF',
        padding: '12px 16px',
        color: '#141414',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-collapse :items="items" :classes="classes" :styles="stylesObject" :default-active-key="['1']" />
    <a-collapse :items="items" :classes="classes" :styles="stylesFn" size="large" :default-active-key="['2']" />
  </a-flex>
</template>

<style>
.demo-collapse-root {
  border-radius: 8px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Collapse

#### Props {#collapse-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| activeKey | Key of the active panel, support `v-model:active-key` | Array&lt;string \| number&gt; \| string \| number | No default value. In accordion mode, it's the key of the first panel | - | × |
| defaultActiveKey | Key of the initial active panel | Array&lt;string \| number&gt; \| string \| number | - | - | × |
| accordion | If true, Collapse renders as Accordion | boolean | false | - | × |
| destroyOnHidden | Destroy Inactive Panel | boolean | false | - | × |
| rootClass | Root container class | string | - | - | × |
| bordered | Toggles rendering of the border around the collapse block | boolean | true | - | × |
| expandIcon | Allow to customize collapse icon | (panelProps: PanelProps) =&gt; any | - | - | ✓ |
| expandIconPlacement | Set expand icon placement | `start` \| `end` | `start` | - | × |
| ghost | Make the collapse borderless and its background transparent | boolean | false | - | × |
| size | Set the size of collapse | SizeType | `medium` | - | × |
| collapsible | Specify how to trigger Collapse. Either by clicking icon or by clicking any area in header or disable collapse functionality itself | `header` \| `icon` \| `disabled` | - | - | × |
| labelRender | Custom render label | (params: &#123; item: CollapseItemType, index: number &#125;) =&gt; any | - | - | × |
| contentRender | Custom render content | (params: &#123; item: CollapseItemType, index: number &#125;) =&gt; any | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | CollapseClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | CollapseStylesType | - | - | ✓ |
| items | Collapse items content | CollapseItemType[] | - | - | × |

#### Events {#collapse-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback function executed when active panel is changed | (key: string[]) =&gt; void | - |

#### Slots {#collapse-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| expandIcon | Allow to customize collapse icon | (panelProps: PanelProps) =&gt; any | - |
| labelRender | - | (params: &#123; item: CollapseItemType, index: number &#125;) =&gt; any | - |
| contentRender | - | (params: &#123; item: CollapseItemType, index: number &#125;) =&gt; any | - |

### CollapsePanel {#collapsepanel}

#### Props {#collapsepanel-props}

Deprecated: when using items, prefer configuring panels with `items`.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| collapsible | Specify how to trigger Collapse. Either by clicking icon or by clicking any area in header or disable collapse functionality itself | `header` \| `icon` \| `disabled` | - | - |
| extra | The extra element in the corner | VueNode | - | - |
| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | - |
| header | Title of the panel | VueNode | - | - |
| key | Unique key identifying the panel from among its siblings | string \| number | - | - |
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | - |

#### Slots {#collapsepanel-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Body area content | VueNode | - |
| header | Title of the panel | VueNode | - |
| extra | The extra element in the corner | VueNode | - |

## Types

### ItemType

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| classes | Semantic structure class | Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - |
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | - |
| content | Body area content | VueNode | - | - |
| extra | The extra element in the corner | VueNode | - | - |
| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false | - |
| key | Unique key identifying the panel from among its siblings | string \| number | - | - |
| label | Title of the panel | VueNode | - | - |
| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true | - |
| styles | Semantic structure style | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Collapse"></ComponentTokenTable>

---
Title: ColorPicker
URL: https://www.antdv-next.com/components/color-picker.md
---

## When To Use {#when-to-use}

Used when the user needs to make a customized color selection.

## Examples {#examples}

### Basic Usage
Basic Usage.
```vue
<template>
  <a-color-picker default-value="#1677ff" />
</template>
```
### Trigger size
Antdv Next supports three trigger sizes: small, default and large.

If a large or small trigger is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a trigger with the default size.
```vue
<template>
  <a-space>
    <a-space vertical>
      <a-color-picker default-value="#1677ff" size="small" />
      <a-color-picker default-value="#1677ff" />
      <a-color-picker default-value="#1677ff" size="large" />
    </a-space>
    <a-space vertical>
      <a-color-picker default-value="#1677ff" size="small" show-text />
      <a-color-picker default-value="#1677ff" show-text />
      <a-color-picker default-value="#1677ff" size="large" show-text />
    </a-space>
  </a-space>
</template>
```
### controlled mode
Set the component to controlled mode. Will lock the display color if controlled by `onChangeComplete`.
```vue
<script setup lang="ts">
import type { Color, ColorValueType } from 'antdv-next'
import { shallowRef } from 'vue'

const color = shallowRef<ColorValueType>('#1677ff')

function handleChangeComplete(value: Color) {
  color.value = value
}
</script>

<template>
  <a-space>
    <a-color-picker v-model:value="color" />
    <a-color-picker :value="color" @change-complete="handleChangeComplete" />
  </a-space>
</template>
```
### Line Gradient
Set the color to a single or a gradient color via `mode`.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const DEFAULT_COLOR = [
  {
    color: 'rgb(16, 142, 233)',
    percent: 0,
  },
  {
    color: 'rgb(135, 208, 104)',
    percent: 100,
  },
]

const color = shallowRef(DEFAULT_COLOR.map(item => ({ ...item })))
const gradientOnly = shallowRef(DEFAULT_COLOR.map(item => ({ ...item })))

function handleChangeComplete(value: any) {
  console.log(value.toCssString())
}
</script>

<template>
  <a-space vertical>
    <a-color-picker
      v-model:value="color"
      allow-clear
      show-text
      :mode="['single', 'gradient']"
      @change-complete="handleChangeComplete"
    />
    <a-color-picker
      v-model:value="gradientOnly"
      allow-clear
      show-text
      mode="gradient"
      @change-complete="handleChangeComplete"
    />
  </a-space>
</template>
```
### Rendering Trigger Text
Renders the default text of the trigger, effective when `showText` is `true`. When customizing text, you can use `showText` as a function to return custom text.
```vue
<script setup lang="ts">
import { DownOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

const value = shallowRef('#1677ff')
const customTextColor = shallowRef('#1677ff')
const iconColor = shallowRef('#1677ff')
const open = shallowRef(false)
</script>

<template>
  <a-space vertical>
    <a-color-picker v-model:value="value" show-text allow-clear />
    <a-color-picker v-model:value="customTextColor">
      <template #showText="{ color }">
        <span>Custom Text ({{ color?.toHexString?.() }})</span>
      </template>
    </a-color-picker>
    <a-color-picker
      v-model:value="iconColor"
      v-model:open="open"
    >
      <template #showText>
        <DownOutlined :rotate="open ? 180 : 0" style="color: rgba(0, 0, 0, 0.25)" />
      </template>
    </a-color-picker>
  </a-space>
</template>
```
### Disable
Set to disabled state.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const color = shallowRef('#1677ff')
</script>

<template>
  <a-color-picker v-model:value="color" show-text disabled />
</template>
```
### Disabled Alpha
Disabled color alpha.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const color = shallowRef('#1677ff')
</script>

<template>
  <a-color-picker v-model:value="color" disabled-alpha />
</template>
```
### Clear Color
Clear Color.
```vue
<script setup lang="ts">
import type { ColorValueType } from 'antdv-next'
import { shallowRef } from 'vue'

const color = shallowRef<ColorValueType>('#1677ff')
</script>

<template>
  <a-color-picker v-model:value="color" allow-clear />
</template>
```
### Custom Trigger
Triggers for customizing color panels.
```vue
<script setup lang="ts">
import type { ColorValueType } from 'antdv-next'
import { computed, shallowRef } from 'vue'

type Color = Extract<ColorValueType, string | { cleared: any }>

const color = shallowRef<Color>('#1677ff')

const bgColor = computed(() => {
  return typeof color.value === 'string'
    ? color.value
    : color.value?.toHexString?.() ?? '#1677ff'
})
</script>

<template>
  <a-color-picker v-model:value="color">
    <a-button type="primary" :style="{ backgroundColor: bgColor }">
      open
    </a-button>
  </a-color-picker>
</template>
```
### Custom Trigger Event
Triggers event for customizing color panels, provide options `click` and `hover`.
```vue
<template>
  <a-color-picker default-value="#1677ff" trigger="hover" />
</template>
```
### Color Format
Encoding formats, support `HEX`, `HSB`, `RGB`.
```vue
<script setup lang="ts">
import type { ColorPickerProps, ColorValueType } from 'antdv-next'
import { computed, shallowRef } from 'vue'

type Color = Extract<ColorValueType, string | { cleared: any }>

type FormatType = ColorPickerProps['format']

const colorHex = shallowRef<Color>('#1677ff')
const formatHex = shallowRef<FormatType>('hex')

const hexString = computed(() => {
  return typeof colorHex.value === 'string' ? colorHex.value : colorHex.value?.toHexString?.() ?? ''
})

const colorHsb = shallowRef<Color>('hsb(215, 91%, 100%)')
const formatHsb = shallowRef<FormatType>('hsb')

const hsbString = computed(() => {
  return typeof colorHsb.value === 'string' ? colorHsb.value : colorHsb.value?.toHsbString?.() ?? ''
})

const colorRgb = shallowRef<Color>('rgb(22, 119, 255)')
const formatRgb = shallowRef<FormatType>('rgb')

const rgbString = computed(() => {
  return typeof colorRgb.value === 'string' ? colorRgb.value : colorRgb.value?.toRgbString?.() ?? ''
})
</script>

<template>
  <a-space vertical size="medium" style="display: flex">
    <a-space>
      <a-color-picker
        v-model:value="colorHex"
        v-model:format="formatHex"
      />
      <span>HEX: {{ hexString }}</span>
    </a-space>
    <a-space>
      <a-color-picker
        v-model:value="colorHsb"
        v-model:format="formatHsb"
      />
      <span>HSB: {{ hsbString }}</span>
    </a-space>
    <a-space>
      <a-color-picker
        v-model:value="colorRgb"
        v-model:format="formatRgb"
      />
      <span>RGB: {{ rgbString }}</span>
    </a-space>
  </a-space>
</template>
```
### Value Format
Use `valueFormat` to define the output value type of color, supporting `hex`, `rgb`, and `hsb`.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const hexValue = shallowRef('#1677ff')
const rgbValue = shallowRef('rgb(22, 119, 255)')
const hsbValue = shallowRef('hsb(215, 91%, 100%)')
</script>

<template>
  <a-space wrap size="large">
    <a-space direction="vertical" :size="8">
      <span>HEX String</span>
      <a-color-picker v-model:value="hexValue" value-format="hex" />
      <span>value: {{ hexValue }}</span>
    </a-space>

    <a-space direction="vertical" :size="8">
      <span>RGB String</span>
      <a-color-picker v-model:value="rgbValue" value-format="rgb" />
      <span>value: {{ rgbValue }}</span>
    </a-space>

    <a-space direction="vertical" :size="8">
      <span>HSB String</span>
      <a-color-picker v-model:value="hsbValue" value-format="hsb" />
      <span>value: {{ hsbValue }}</span>
    </a-space>
  </a-space>
</template>
```
### Preset Colors
Set the presets color of the color picker.
```vue
<script setup lang="ts">
import { generate, green, presetPalettes, red } from '@ant-design/colors'
import { theme } from 'antdv-next'
import { computed, shallowRef } from 'vue'

const { useToken } = theme
const { token } = useToken()

const color = shallowRef('#1677ff')

function genPresets(presets = presetPalettes) {
  return Object.entries(presets).map(([label, colors]) => ({
    label,
    colors,
    key: label,
  }))
}

const presets = computed(() => genPresets({
  primary: generate(token.value.colorPrimary),
  red,
  green,
}) as any[])
</script>

<template>
  <a-color-picker v-model:value="color" :presets="presets" />
</template>
```
### Custom Render Panel
Rendering of the free control panel via `panelRender`.
```vue
<script setup lang="ts">
import { cyan, generate, green, presetPalettes, red } from '@ant-design/colors'
import { theme } from 'antdv-next'
import { computed, shallowRef } from 'vue'

const { useToken } = theme
const { token } = useToken()

const color = shallowRef('#1677ff')
const layoutColor = shallowRef(token.value.colorPrimary)

function genPresets(presets = presetPalettes) {
  return Object.entries(presets).map(([label, colors]) => ({
    label,
    colors,
    key: label,
  }))
}

const presets = computed<any[]>(() => genPresets({
  primary: generate(token.value.colorPrimary),
  red,
  green,
  cyan,
}))
</script>

<template>
  <a-space vertical>
    <a-space>
      <span>Add title:</span>
      <a-color-picker v-model:value="color">
        <template #panelRender="{ panel }">
          <div class="custom-panel">
            <div style="font-size: 12px;color: rgba(0,0,0,.88);line-height: 20px;margin-bottom: 8px">
              Color Picker
            </div>
            <component :is="panel" />
          </div>
        </template>
      </a-color-picker>
    </a-space>
    <a-space>
      <span>Horizontal layout:</span>
      <a-color-picker
        v-model:value="layoutColor"
        :styles="{ popupOverlayInner: { width: '480px' } }"
        :presets="presets"
      >
        <template #panelRender="{ extra: { components } }">
          <a-row justify="space-between" :wrap="false">
            <a-col :span="12">
              <component :is="components.Presets" />
            </a-col>
            <a-divider vertical style="height: auto" />
            <a-col flex="auto">
              <component :is="components.Picker" />
            </a-col>
          </a-row>
        </template>
      </a-color-picker>
    </a-space>
  </a-space>
</template>

<style>
.custom-panel {
  width: 100%;
}
</style>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of ColorPicker by passing objects or functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const classes = { root: 'custom-color-picker' }

const color = shallowRef('#1677ff')
const colorLarge = shallowRef('#722ed1')

const stylesObject = {
  popup: {
    root: {
      border: '1px solid #fff',
    },
  },
}

function stylesFn(info: any) {
  if (info?.props?.size === 'large') {
    return {
      popup: {
        root: {
          border: '1px solid #722ed1',
        },
      },
    }
  }
  return {}
}
</script>

<template>
  <a-space size="medium" wrap>
    <a-color-picker
      v-model:value="color"
      :classes="classes"
      :styles="stylesObject"
      :arrow="false"
    />
    <a-color-picker
      v-model:value="colorLarge"
      size="large"
      :classes="classes"
      :styles="stylesFn"
      :arrow="false"
    />
  </a-space>
</template>

<style>
.custom-color-picker {
  border-radius: 8px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowClear | Allow clearing color selected | boolean | false | - | × |
| arrow | Configuration for popup arrow | boolean \| &#123; pointAtCenter: boolean &#125; | true | - | ✓ |
| autoAdjustOverflow | Auto adjust placement when popup is invisible | boolean \| AdjustOverflow | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | ColorPickerClassNamesType | - | - | ✓ |
| defaultFormat | Default format of color | ColorFormatType | `hex` | - | × |
| defaultValue | Default value of color | [ColorValueType](#colorvaluetype) | - | - | × |
| destroyOnHidden | Whether destroy dom when close | boolean | false | - | × |
| disabled | Disable ColorPicker | boolean | false | - | × |
| disabledAlpha | Disable Alpha | boolean | false | - | × |
| disabledFormat | Disable format of color | boolean | false | - | × |
| format | Format of color, support `v-model:format` | ColorFormatType | - | - | × |
| getPopupContainer | Specify container for popup | (triggerNode: HTMLElement) => HTMLElement | - | - | × |
| mode | Configure single or gradient color | ModeType \| ModeType[] | `single` | - | × |
| open | Whether to show popup, support `v-model:open` | boolean | - | - | × |
| placement | Placement of popup | TriggerPlacement | `bottomLeft` | - | × |
| presets | Preset colors | [PresetsItem](#presetsitem)[] | - | - | × |
| panelRender | Custom Render Panel | (params: &#123; panel: any, extra: &#123; components: &#123; Picker: any, Presets: any &#125; &#125; &#125;) => any | - | - | × |
| rootClass | Root container class | string | - | - | × |
| showText | Show color text | boolean \| ((params: &#123; color: Color &#125;) => any) | false | - | × |
| size | Setting the trigger size | SizeType | `medium` | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | ColorPickerStylesType | - | - | ✓ |
| trigger | ColorPicker trigger mode | TriggerType | `click` | - | × |
| valueFormat | Set the output format of color value, supporting `hex`, `rgb`, and `hsb`. After setting, `v-model:value` returns strings in the selected format. Demo: [Value Format](#color-picker-demo-value-format) | ColorFormatType | - | - | × |
| value | Value of color, support `v-model:value` | [ColorValueType](#colorvaluetype) | - | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback when `value` is changed | (value: Color, css: string) => void | - |
| clear | Called when clear | () => void | - |
| changeComplete | Called when color pick ends | (value: Color) => void | - |
| openChange | Callback when `open` is changed | (open: boolean) => void | - |
| formatChange | Callback when `format` is changed | (format?: ColorFormatType) => void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Trigger content | () => any | - |
| panelRender | Custom Render Panel | (params: &#123; panel: any, extra: &#123; components: &#123; Picker: any, Presets: any &#125; &#125; &#125;) => any | - |
| showText | Custom text rendering | (params: &#123; color: Color &#125;) => any | - |

## Types

### ColorValueType

```ts
type ColorValueType
  = | string
    | Color
    | { color: string | Color, percent: number }[]
    | null
```

### PresetsItem

```ts
interface PresetsItem {
  label: VueNode
  colors: ColorValueType[]
  defaultOpen?: boolean
  key?: Key
}
```

### Color

| Property | Description | Type | Version |
| --- | --- | --- | --- |
| toCssString | Convert to CSS support format | () => string | - |
| toHex | Convert to `hex` format characters, the return type like: `1677ff` | () => string | - |
| toHexString | Convert to `hex` format color string, the return type like: `#1677ff` | () => string | - |
| toHsb | Convert to `hsb` object | () => &#123; h: number, s: number, b: number, a: number &#125; | - |
| toHsbString | Convert to `hsb` format color string, the return type like: `hsb(215, 91%, 100%)` | () => string | - |
| toRgb | Convert to `rgb` object | () => &#123; r: number, g: number, b: number, a: number &#125; | - |
| toRgbString | Convert to `rgb` format color string, the return type like: `rgb(22, 119, 255)` | () => string | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="ColorPicker"></ComponentTokenTable>

## FAQ

### Questions about color assignment {#faq-color-assignment}

The value of the color selector supports both string color values and selector-generated `Color` objects. However, since there is a precision error when converting color strings of different formats to each other, it is recommended to use selector-generated `Color` objects for assignment operations in controlled scenarios, so that the precision problem can be avoided and the values are guaranteed to be accurate and the selector can work as expected.

---
Title: Component Changelog
URL: https://www.antdv-next.com/components/changelog.md
---

## V1.6.0

Release Date: 2026-10-02

This release is a performance pass: the derived design token chain is shared across component instances, style hooks resolve the token once, the wrapper layers forward only the props that are actually set to `@v-c/*`, Table hands `@v-c/table` referentially stable column config, and the delayed style-removal timer no longer keeps unmounted component trees in memory. On a production build, 1000 Buttons hot-mount in 116 ms instead of 157 ms with the heap down from 92 MB to 48 MB, 200 DatePickers go from 368 ms to 156 ms, and a 1000-row Table cold-mounts in 225 ms instead of 439 ms. `@antdv-next/cssinjs` 1.1.0 ships alongside with new public APIs, and `@v-c/util`, `trigger`, `picker`, `select`, `table`, `menu` and `tooltip` move to their matching stable releases; since the dependency floor moves as a whole, this is a minor release. It also advances ant-design upstream tracking to `820e1a8c2d` and fixes a batch of Form validation, Alert, Drawer, Descriptions, ColorPicker and ConfigProvider issues; the IDE web-types are now generated from `global.d.ts` and cover all 128 global components.

**⚡ Performance**

All numbers are production builds on the same machine (Apple M2 Pro, Chrome 154), 3 pages × 5 hot mounts averaged, compared with 1.5.6:

| scene | instances | hot mount ms | heap MB |
| --- | ---: | ---: | ---: |
| Button | 1000 | 157 → 116 | 92 → 48 |
| Input | 500 | 91 → 65 | 54 → 27 |
| Select | 500 | 305 → 200 | 80 → 77 |
| DatePicker | 200 | 368 → 156 | 61 → 47 |
| Menu (inline, 500 items) | 1 | 206 → 143 | 77 → 47 |
| Form (100 Form.Item + Input) | 1 | 84 → 57 | 40 → 21 |
| Table (1000 rows, cold mount) | 1 | 439 → 225 | 64 → 57 |
| typical admin page (menu + filter form + paginated table) | 1 | 50 → 38 | 18 → 13 |

* perf(theme): the derived design token is computed once per ConfigProvider / DesignTokenProvider / StyleProvider combination and shared by every component instance under it; previously each style hook rebuilt the whole derivation chain, and a Button paid for four of them. Computeds per component instance: Button 219 → 51, Input 263 → 65, FormItem + Input 901 → 178 (via `@antdv-next/cssinjs` 1.1.0)
* perf(theme): `genStyleHooks` resolves `useToken()` once and hands it to both the component style hook and the CSS variable register; `useStyleRegister` keeps a single computed (the cache path), `useBaseConfig` / `useComponentBaseConfig` return getter refs, and `usePrefix` / `useCSP` are memoized per config ref
* perf(date-picker, select, menu): the wrappers forward only the props that are set to `@v-c/picker`, `@v-c/select` and `@v-c/menu` instead of spreading every declared prop (mostly `undefined`) into layers that normalise them again; props normalisation and reactive proxy spreads used to account for about a third of DatePicker mount time
* perf(table): `InternalTable` hands `@v-c/table` referentially stable columns, column transforms and expandable config, and reuses the source column list when no column is `responsive`; these objects used to be rebuilt on every render, which `@v-c/table` treated as a column change and re-rendered every row and cell. Rows and cells now render exactly once per mount, 1000 rows cold mount 439 → 225 ms
* perf(semantic): `classes` / `styles` resolve the merged component props object only for the function form; plain objects no longer pay for a full spread per instance
* perf(form): a `validateDebounce` wait timer is released as soon as a newer event arrives or the item unmounts, so each Form.Item keeps at most one timer instead of one per keystroke
* fix(cssinjs): the 500 ms delayed style-removal timer now lives at module level and no longer retains the unmounted component tree (computeds, DOM refs, app root) through its closure. Heap retained 300 ms after unmounting 1000 Buttons drops from 79 MB to 2.4 MB; the 500 ms delay kept for Transition is unchanged
* perf(vc): `@v-c/trigger` 1.1.6 creates its alignment / position-tracking effects on first open, so closed Triggers no longer hold them; `@v-c/table` 1.3.4 keeps one hover memo per row instead of a computed per cell per render and measures the scrollbar only with `scroll.y` / `sticky`; `@v-c/picker` 1.5.2, `@v-c/select` 1.2.8, `@v-c/menu` 1.4.2 and `@v-c/tooltip` 1.1.4 forward only defined props between their layers and replace per-prop computeds with getter refs. Computeds per instance: Select 329 → 140, DatePicker 367 → 111, Menu item 262 → 70, Table row 47 → 9

**🐞 Fixes**

* fix(form): event-driven validation (change / blur / focus) honours `validateDebounce`: `validating` is published right away while the rules run after the wait; `validateFields`, `submit` and rule checks stay immediate ([#981](https://github.com/antdv-next/antdv-next/pull/981))
* fix(form): an async validation superseded by a newer one, `clearValidate` or `resetField` no longer writes its stale result; `resetField` no longer swallows the user's next change when the value did not actually change ([#977](https://github.com/antdv-next/antdv-next/pull/977))
* fix(table): Shift-clicking the selection checkbox triggers range selection and `rowSelection.onSelect` receives the click event instead of the change event; with `preserveSelectedRowKeys`, `onSelect` / `onSelectAll` / `onSelectMultiple` receive the preserved records that are no longer in the current data (#59449); the fixed selection header `z-index` matches ant-design ([#968](https://github.com/antdv-next/antdv-next/pull/968)); scrolling to the first row after pagination, sorting or filtering reads the scroll config merged with ConfigProvider `table.scroll` ([#969](https://github.com/antdv-next/antdv-next/pull/969))
* fix(alert): the object form of `closable` supports `onClose` / `afterClose` callbacks and `disabled`, ConfigProvider `alert.closeIcon` takes effect and the ref exposes `nativeElement` ([#971](https://github.com/antdv-next/antdv-next/pull/971), #59432); the close button's semantic class is no longer emitted twice and the icon's semantic class matches React (#59384)
* fix(drawer): `extra` renders as a direct child of the header instead of nesting inside `header-title` ([#975](https://github.com/antdv-next/antdv-next/pull/975)); the never-implemented `afterOpenChange` event declaration and docs are removed ([#976](https://github.com/antdv-next/antdv-next/pull/976))
* fix(descriptions): in bordered mode the semantic `classes` / `styles` apply to the cell instead of the inner `span`, and `attrs.style` is merged in ([#972](https://github.com/antdv-next/antdv-next/pull/972)); an empty label / content no longer renders an empty `span` ([#973](https://github.com/antdv-next/antdv-next/pull/973))
* fix(color-picker): `class` / `style` and other attrs go to the trigger instead of the panel ([#966](https://github.com/antdv-next/antdv-next/pull/966)); clearing the colour no longer emits `change` and `update:value` twice ([#964](https://github.com/antdv-next/antdv-next/pull/964)); the `showText` function and slot receive `{ color }` instead of a double-wrapped object ([#962](https://github.com/antdv-next/antdv-next/pull/962), [#963](https://github.com/antdv-next/antdv-next/pull/963))
* fix(config-provider): the `popupMatchSelectWidth`, `popupOverflow`, `calendar`, `carousel`, `cardMeta`, `ribbon` and `warning` configs reach the components ([#967](https://github.com/antdv-next/antdv-next/pull/967))
* fix(date-picker): consume ConfigProvider `datePicker.allowClear` / `clearIcon` ([#970](https://github.com/antdv-next/antdv-next/pull/970)); RangePicker reads the `DatePicker` locale instead of the `Calendar` one ([#978](https://github.com/antdv-next/antdv-next/pull/978))
* fix(card): fall back to `tabProps.defaultActiveKey` when `defaultActiveTabKey` is not set ([#978](https://github.com/antdv-next/antdv-next/pull/978))
* fix(cascader): ConfigProvider `cascader.clearIcon` no longer triggers the deprecated `clearIcon` warning
* fix(dropdown, tooltip, popover): a plain-text or Fragment default slot on the trigger is wrapped in a `span`, so the popup still opens when there is no element to attach events to ([#979](https://github.com/antdv-next/antdv-next/pull/979))
* fix(select, dropdown, mentions): the `_InternalPanelDoNotUseOrYouWillBeFired` pure panels no longer leak undeclared attrs onto the wrapper `div` ([#980](https://github.com/antdv-next/antdv-next/pull/980))
* fix(float-button): `update:open` is emitted only when the open state actually changes ([#983](https://github.com/antdv-next/antdv-next/pull/983))
* fix(flex): ConfigProvider `flex.style` is applied to the rendered style ([#982](https://github.com/antdv-next/antdv-next/pull/982))
* fix(carousel): vertical carousels are no longer mirrored in RTL, including when the orientation comes from `dotPlacement` (#59436)
* fix(mentions, tree-select): the empty state calls `renderEmpty` with the correct component names `Mentions` / `TreeSelect` (#59364)
* fix(breadcrumb): menu item links no longer get an `undefined` prefix when there is no `href` (#59423)
* fix(tree): DirectoryTree Shift range selection works again with numeric keys (#59375)
* fix(transfer): removing items in one-way mode clears the right-hand selection (#59428)
* fix(types): resolve the type errors vue-tsc reported in the sources: `useLocale` returns a readonly tuple, and a few internal types in Carousel, Table, Tag, Timeline and FormItem are tightened without runtime changes

**📖 Documentation**

* docs(table): the three `scroll` fields are marked as supporting global config; docs(form): document that the `horizontal` layout stacks labels above controls at viewports of `575px` or less, and how to customise that through the `xs` settings of `labelCol` / `wrapperCol` (#59398, #59417)

**🧰 Infrastructure & Dependencies**

* chore(cssinjs): `@antdv-next/cssinjs` 1.1.0 adds `createGlobalCache` + `useGlobalCacheEntry` (a shareable reactive cache entry plus per-instance reference counting), `createCacheToken`, and the `GlobalCacheEntry` and `UseToken` type exports; `onCacheRemove` callbacks receive the `StyleContextProps` as a third argument so they can be module-level functions instead of closures over the hook scope
* chore(deps): upgrade `@v-c/util` 1.3.2 (adds `pickDefined`), `@v-c/trigger` 1.1.6, `@v-c/picker` 1.5.2, `@v-c/select` 1.2.8, `@v-c/table` 1.3.4, `@v-c/menu` 1.4.2, `@v-c/tooltip` 1.1.4, `@v-c/notification` 2.0.5 (repeated pauses no longer bill the paused span into the elapsed time) and `@v-c/tree-select` 1.1.3
* chore(web-types): the IDE web-types are generated with `global.d.ts` as the single source of tags and cover all 128 global components (25 of them, such as the layout sections, radio, textarea, tab pane and table column, had no entry before, and 17 pseudo tags like `a-参数` were emitted); doc headings resolve to real components, `~~prop~~` rows are marked deprecated, `extends` can omit parent items, and markdown escapes and entities in attribute types are cleaned up (`Record<K, V>` is no longer stripped as an HTML tag); `a-textarea` goes from 3 to 24 attributes and zh descriptions cover 1603 / 1685 attributes; `global.d.ts` declares `AListy`, `ATableColumnGroup`, `ACheckableTagGroup`, `AMentionsOption` and `AMenuDivider` ([#965](https://github.com/antdv-next/antdv-next/issues/965))
* chore(perf): add the `tests/perf` reactive-count regression test (computeds / watchers / child components per component instance, failing above the committed baseline), the `pnpm bench` browser benchmark (headless Chrome over CDP, reporting cold / hot mount time, mounted heap, heap retained after unmount and interaction time, with `--profile` recording a CPU profile) and the `VC_LOCAL` alias for testing against local `@v-c/*` builds
* chore(sync): ant-design upstream tracking advances to `820e1a8c2d` (after 6.6.5); incidental deprecated API usages in tests migrate to the current APIs

## V1.5.6

Release Date: 2026-09-25

This release fixes popups that land in the wrong place for one frame when the page carries a global transition style: a common "reduced motion" reset takes effect when the OS asks for reduced motion (e.g. Windows with "Animation effects" turned off), and popups aligned to the right or bottom such as Dropdown, Select and Tooltip used to paint their first frame at the viewport edge before jumping into place. It also upgrades a batch of `@v-c/*` foundation packages: the time panel gains keyboard navigation and screen-reader semantics, Tab and `autoFocus` move focus into the Dropdown menu, and DatePicker's default dayjs config loads in native Node ESM. Collapse `v-model:active-key` now updates, and the Menu event types are exported.

**✨ Features**

* feat(time-picker, date-picker): keyboard navigation in the time panel — Arrow Up / Down move the cursor and skip disabled cells, Enter / Space select it; time columns and cells get `listbox` / `option` semantics with localized labels (via `@v-c/picker` 1.5.0)
* feat(listy): a function `rowKey` receives the item's index in `items` as its second argument; grouping does not change it (via `@v-c/listy` 1.2.0)
* feat(menu): export the `MenuInfo` and `SelectInfo` event types ([#961](https://github.com/antdv-next/antdv-next/pull/961), [#693](https://github.com/antdv-next/antdv-next/issues/693))

**🐞 Fixes**

* fix(trigger): with a global `transition-duration` on the page (e.g. the common `prefers-reduced-motion` reset), right- or bottom-aligned popups (a `bottomRight` Dropdown, a `top` Tooltip, …) no longer paint their first frame at the viewport edge; the Tooltip frame could also make the page briefly scrollable (via `@v-c/trigger` 1.1.5)
* fix(dropdown): pressing Tab while the popup is open moves focus into the menu instead of closing it, also when the menu is wrapped in another element; `autoFocus` now works and focuses without scrolling the page, matching antd (via `@v-c/dropdown` 1.1.1)
* fix(menu): calling `focus()` through the ref no longer throws (via `@v-c/menu` 1.4.1)
* fix(date-picker): the default dayjs config loads in native Node ESM (e.g. when SSR externalizes dependencies) instead of failing with `ERR_MODULE_NOT_FOUND` (via `@v-c/picker` 1.5.0)
* fix(collapse): the `v-model:active-key` binding updates as expected ([#960](https://github.com/antdv-next/antdv-next/pull/960))

**📖 Documentation**

* docs(faq): add ["Why do popups have no animation, or flash at the viewport edge before settling?"](/docs/vue/faq#popup-animation-missing-with-reduced-motion), covering how the reduced-motion reset affects popups, the OS settings that trigger it, how to check it and how to fix it

**🧰 Infrastructure & Dependencies**

* chore(deps): upgrade `@v-c/trigger` 1.1.5, `@v-c/util` 1.3.1, `@v-c/menu` 1.4.1, `@v-c/dropdown` 1.1.1, `@v-c/listy` 1.2.0 and `@v-c/picker` 1.5.0. In `@v-c/util`, `dynamicCSS` no longer throws when the page has no `<head>` / `<body>`, and `set` no longer mutates the source object when removing a nested value
* chore(build): the UMD bundles now read the global names of `dayjs` and its plugins and locales from dayjs's own UMD files, so they always match the dayjs builds on the CDN (`@v-c/picker` 1.5.0 imports dayjs plugins with a `.js` extension); the post-build browser bundle check verifies the global every external dependency of the UMD bundles reads, and the build fails on an external without a configured global instead of letting the bundler guess its name

## V1.5.5

Release Date: 2026-09-25

This release advances ant-design upstream tracking to the master after **6.6.5** (`2a04506177`) and starts tracking `ant-design/cssinjs-util`. Table gains resizable columns, Tabs adds `scrollPosition`, Message supports `stack`, and Splitter can animate collapsing; `@antdv-next/cssinjs` 1.0.7 ships alongside it, adding `extraCssVarPrefixCls` to `genStyleHooks` and a CSP `nonce` on CSS variable styles. It also fixes a batch of Vue-adaptation issues: kebab-case `<a-table-column>` attributes being ignored, string / array `style` values throwing, props leaking to the DOM in several components, slots and events not taking effect in Avatar / Alert / Breadcrumb / Cascader / Card and others, and Checkbox / Radio `id`, `name` and `blur` not reaching the native input.

**✨ Features**

* feat(table): columns support `resizable` drag-to-resize with a new `resizeColumn` event `(width, column, columnKey)`, using `minWidth` as the lower bound; group columns do not accept `resizable` and are resized through their leaf columns ([#327](https://github.com/antdv-next/antdv-next/issues/327))
* feat(tabs): add `scrollPosition` to control how the active tab is scrolled into view when switching ([#954](https://github.com/antdv-next/antdv-next/pull/954), [#916](https://github.com/antdv-next/antdv-next/pull/916), #39433)
* feat(message): add the `stack` option, and fix semantic `list` class / style forwarding and the reactivity of holder config ([#927](https://github.com/antdv-next/antdv-next/pull/927))
* feat(splitter): add `collapsible.motion`; when enabled, collapsing is animated with the global `motionDurationSlow` and `motionEaseInOut` tokens ([#913](https://github.com/antdv-next/antdv-next/pull/913))
* feat(cssinjs): `genStyleHooks` gains an `extraCssVarPrefixCls` option that takes an array or `({ prefixCls, rootCls }) => string[]` to inject component CSS variables for extra classes; the function form is re-evaluated when `prefixCls` changes (ant-design/cssinjs-util#36, #37)

**🐞 Fixes**

* fix(table): kebab-case `<a-table-column>` attributes such as `data-index` and `min-width` are now resolved instead of rendering empty cells; a bare `resizable` attribute is treated as `true` ([#945](https://github.com/antdv-next/antdv-next/pull/945))
* fix(table): with `preserveSelectedRowKeys`, selecting across pages no longer drops initially selected records from `rowSelection.onChange` ([#881](https://github.com/antdv-next/antdv-next/pull/881)); support semantic pagination styling through Table's `pagination.classes` / `pagination.styles` ([#849](https://github.com/antdv-next/antdv-next/pull/849)); RTL now comes from ConfigProvider `direction` only, matching ant-design ([#907](https://github.com/antdv-next/antdv-next/pull/907)); columns hidden by `responsive` still apply a controlled `filteredValue` ([#886](https://github.com/antdv-next/antdv-next/pull/886), #59198)
* fix(card): rename the embedded Tabs class to `ant-card-head-tabs` so style overrides apply again ([#937](https://github.com/antdv-next/antdv-next/pull/937)); semantic `classes` / `styles` functions receive the resolved `variant` ([#939](https://github.com/antdv-next/antdv-next/pull/939)); the `tabBarExtraContent` slot takes priority over the prop of the same name ([#941](https://github.com/antdv-next/antdv-next/pull/941))
* fix(avatar): fall back to `icon` or the default slot when the image fails to load ([#889](https://github.com/antdv-next/antdv-next/pull/889)), and reset that fallback when only `srcSet` changes ([#908](https://github.com/antdv-next/antdv-next/pull/908)); emit `click` when clicked ([#906](https://github.com/antdv-next/antdv-next/pull/906)); expose `nativeElement` via ref and export an `AvatarRef` type ([#909](https://github.com/antdv-next/antdv-next/pull/909))
* fix(badge): the horizontal `offset` is no longer flipped under RTL ([#912](https://github.com/antdv-next/antdv-next/pull/912)); fractional horizontal offsets are no longer truncated ([#948](https://github.com/antdv-next/antdv-next/pull/948), #59314); hide the badge when `text="0"` and `showZero` is not set ([#911](https://github.com/antdv-next/antdv-next/pull/911))
* fix(cascader): make the `loadingIcon` prop work and support a `loadingIcon` slot ([#946](https://github.com/antdv-next/antdv-next/pull/946)); make the top-level `clearIcon` take effect ([#953](https://github.com/antdv-next/antdv-next/pull/953)); stop `dropdownStyle` leaking into DOM attributes ([#952](https://github.com/antdv-next/antdv-next/pull/952))
* fix(alert): the `icon` slot is honored instead of always falling back to the default icon ([#898](https://github.com/antdv-next/antdv-next/pull/898)); the close animation plays with a custom `prefixCls` ([#899](https://github.com/antdv-next/antdv-next/pull/899))
* fix(breadcrumb): emit `clickItem` when an item is clicked ([#928](https://github.com/antdv-next/antdv-next/pull/928)); a menu item's `label` takes priority over `title` ([#929](https://github.com/antdv-next/antdv-next/pull/929))
* fix(input): no border flash when switching away from the borderless variant at runtime ([#862](https://github.com/antdv-next/antdv-next/pull/862), #59269); restore the Input.Password visibility-toggle icon styles ([#938](https://github.com/antdv-next/antdv-next/pull/938), #57271)
* fix(input-number): align `allowClear` behavior and clear-icon styles with Input, support ConfigProvider config, and fix the layout with controls, suffix and spinner mode ([#876](https://github.com/antdv-next/antdv-next/pull/876), #59251)
* fix(date-picker, time-picker): the `#prefix` slot now renders; complete RangePicker slot types and export `TimeRangePickerSlots`, and warn on the deprecated `addon` slot as well ([#863](https://github.com/antdv-next/antdv-next/pull/863))
* fix(upload): `customRequest` and `defaultRequest` types allow returning an `{ abort }` handle (#59382); file names are no longer focusable buttons when no preview handler is registered ([#924](https://github.com/antdv-next/antdv-next/pull/924), #59295); `Upload.Dragger` keeps the height from `style` when `height` is unset and applies a numeric `height` in pixels ([#923](https://github.com/antdv-next/antdv-next/pull/923), #59319)
* fix(transfer): with search enabled, Shift selection only applies to filtered items ([#947](https://github.com/antdv-next/antdv-next/pull/947), #59348); clear stale selections when `dataSource` keys change type ([#886](https://github.com/antdv-next/antdv-next/pull/886), #59166); the `footer` callback and slot always receive `{ direction }` ([#922](https://github.com/antdv-next/antdv-next/pull/922), #59303)
* fix(tree): DirectoryTree Shift range selection skips `disabled` and `selectable: false` nodes (#59341)
* fix(typography): when editable with a `triggerType` that includes `'text'`, clicking the text starts editing and still emits `click` (#59325)
* fix(checkbox, radio): CheckboxGroup no longer includes removed options' values in `change` / `update:value`, and keeps registration in sync when `value` or `skipGroup` changes ([#894](https://github.com/antdv-next/antdv-next/pull/894)); Checkbox and Radio `id` and `name` now reach the native `<input>` and `blur` is emitted, so Form `validateTrigger: 'blur'` works (via `@v-c/checkbox` 1.0.2)
* fix: Result, Message, Notification, Avatar and Modal keep a numeric `0` as custom content instead of falling back to the built-in icon ([#917](https://github.com/antdv-next/antdv-next/pull/917), #59153); Form.Item `extra` ([#920](https://github.com/antdv-next/antdv-next/pull/920), #59289) and Descriptions `title` / `extra` ([#919](https://github.com/antdv-next/antdv-next/pull/919), #59125) render when they are `0`
* fix: string or array `style` values no longer fail or throw in Avatar, Modal, Tree, Transfer and Typography ([#943](https://github.com/antdv-next/antdv-next/pull/943)); FloatButton, Listy and Tour widen their `style` type to `StyleValue` ([#955](https://github.com/antdv-next/antdv-next/pull/955))
* fix(rate, carousel, collapse): Rate `size` ([#902](https://github.com/antdv-next/antdv-next/pull/902)), Carousel `effect` ([#942](https://github.com/antdv-next/antdv-next/pull/942)) and the Collapse panel `content` ([#959](https://github.com/antdv-next/antdv-next/pull/959)) no longer leak into DOM attributes; Rate `direction` and Carousel `verticalSwiping` are removed from the types, since they always come from ConfigProvider and `vertical` respectively (#59379, #59366)
* fix(color-picker): stop mutating user-provided presets while rendering ([#857](https://github.com/antdv-next/antdv-next/pull/857), #59272); when `disabled`, the clear button is no longer clickable, focusable or hover-highlighted ([#886](https://github.com/antdv-next/antdv-next/pull/886), #59164)
* fix(notification): `list` / `listContent` semantic classes and styles configured via `useNotification` and ConfigProvider are now applied ([#936](https://github.com/antdv-next/antdv-next/pull/936))
* fix(button): `variant="solid"` renders solid primary again instead of falling back to outlined ([#934](https://github.com/antdv-next/antdv-next/pull/934))
* fix(tabs): Tabs inherits ConfigProvider `direction`, fixing RTL layout inside `App` ([#884](https://github.com/antdv-next/antdv-next/pull/884))
* fix(tour): button callbacks receive the click event ([#949](https://github.com/antdv-next/antdv-next/pull/949), #59332)
* fix(anchor): fix external-link navigation, per-link `targetOffset` highlighting, and competing scroll animations on repeated clicks ([#900](https://github.com/antdv-next/antdv-next/pull/900))
* fix(auto-complete): `focus()`, `blur()` and `scrollTo()` are available via ref ([#905](https://github.com/antdv-next/antdv-next/pull/905))
* fix(splitter): panel sizes respect `min` / `max` again after the container is resized ([#886](https://github.com/antdv-next/antdv-next/pull/886), #59084)
* fix(skeleton): numeric element sizes are applied in pixels ([#865](https://github.com/antdv-next/antdv-next/pull/865))
* fix(statistic): format correctly when `precision` is `NaN`, and do not throw on a non-function `valueRender` ([#933](https://github.com/antdv-next/antdv-next/pull/933))
* fix(affix): fix the always-`false` style comparison in `lazyUpdatePosition` so scroll frames skip redundant measurement ([#896](https://github.com/antdv-next/antdv-next/pull/896))
* fix(theme): `fontHeight`, `fontHeightSM` and `fontHeightLG` follow custom `fontSize` / `lineHeight` tokens ([#918](https://github.com/antdv-next/antdv-next/pull/918), #59298)
* fix(tooltip): narrow the `motion` type to the supported `{ name?: string }` ([#926](https://github.com/antdv-next/antdv-next/pull/926), #59288)
* fix(drawer): using the deprecated `destroyOnClose` now warns and points to `destroyOnHidden` ([#921](https://github.com/antdv-next/antdv-next/pull/921), #59299); correct misdirected deprecation warnings and annotations in Drawer, Cascader, Select, TreeSelect, Button and Slider ([#935](https://github.com/antdv-next/antdv-next/pull/935)); remove leftover upstream version numbers and React references from warnings and comments ([#944](https://github.com/antdv-next/antdv-next/pull/944))
* fix(float-button, mentions): mark `BackTopProps` and Mentions `OptionProps` as deprecated and add a `FloatButtonBackTopProps` alias ([#886](https://github.com/antdv-next/antdv-next/pull/886), #58949)
* fix(locale): fill in missing DatePicker placeholders and Carousel accessibility labels for multiple locales ([#950](https://github.com/antdv-next/antdv-next/pull/950), #59351)
* fix(cssinjs): with CSP enabled, component CSS variable style tags now carry the `nonce` too (ant-design/cssinjs-util#38)

**📖 Documentation**

* docs: zh-CN and en-US docs now share the same heading structure and anchors; zh-CN headings declare the same ids as their en-US counterparts, and search-index anchors match the rendered pages ([#957](https://github.com/antdv-next/antdv-next/pull/957))
* docs: normalize semantic class terminology and Semantic DOM headings ([#874](https://github.com/antdv-next/antdv-next/pull/874), [#872](https://github.com/antdv-next/antdv-next/pull/872)); normalize component version markers and remove leftover upstream version references ([#877](https://github.com/antdv-next/antdv-next/pull/877), [#895](https://github.com/antdv-next/antdv-next/pull/895)); fix semantic preview highlights, borders, placeholders, clear buttons and popup coverage ([#914](https://github.com/antdv-next/antdv-next/pull/914), [#871](https://github.com/antdv-next/antdv-next/pull/871), [#870](https://github.com/antdv-next/antdv-next/pull/870), [#869](https://github.com/antdv-next/antdv-next/pull/869), [#904](https://github.com/antdv-next/antdv-next/pull/904), [#856](https://github.com/antdv-next/antdv-next/pull/856), [#867](https://github.com/antdv-next/antdv-next/pull/867)); complete the Mentions API docs and popup semantic preview ([#910](https://github.com/antdv-next/antdv-next/pull/910)); document how Tooltip realigns after layout changes ([#925](https://github.com/antdv-next/antdv-next/pull/925), #59304)
* docs: the Button loading demo shows an end icon ([#873](https://github.com/antdv-next/antdv-next/pull/873)), the icon demo shows both the `icon` prop and the `#icon` slot ([#930](https://github.com/antdv-next/antdv-next/pull/930)), and the danger demo is reworded ([#890](https://github.com/antdv-next/antdv-next/pull/890)); each group in the Checkbox group demo switches independently ([#887](https://github.com/antdv-next/antdv-next/pull/887)); QRCode demos use the project logo ([#878](https://github.com/antdv-next/antdv-next/pull/878)); Table notes that resizable columns need numeric widths
* docs: correct the Divider `plain` default ([#861](https://github.com/antdv-next/antdv-next/pull/861)) and the Masonry en-US frontmatter that broke the search-index build ([#891](https://github.com/antdv-next/antdv-next/pull/891)); the components overview shows Not Found when a search has no results ([#868](https://github.com/antdv-next/antdv-next/pull/868)) and the zh-CN overview gets its border beam effect back ([#866](https://github.com/antdv-next/antdv-next/pull/866)); extract document heading metadata ([#864](https://github.com/antdv-next/antdv-next/pull/864)); wrap the demo container in ThemeProvider to silence an injection warning ([#882](https://github.com/antdv-next/antdv-next/pull/882))

**🧰 Infrastructure & Dependencies**

* chore(sync): advance ant-design upstream tracking to master `2a04506177` after **6.6.5**, porting the fixes from 6.6.4, 6.6.5 and later that apply to the Vue implementation; start tracking `ant-design/cssinjs-util`, synced to v2.1.2
* chore(deps): release `@antdv-next/cssinjs` 1.0.7 with the `extraCssVarPrefixCls` and CSP `nonce` changes above
* chore(deps): upgrade `@v-c/*`, including `@v-c/tabs` 1.4.2 (`scrollPosition`), `@v-c/table` 1.3.3 (column resizing), `@v-c/checkbox` 1.0.2, `@v-c/slider` 1.1.4 (pushable fixes), `@v-c/virtual-list` 1.1.2 (Tree virtual scroll no longer keeps auto-scrolling after a drag ends), `@v-c/mentions` 1.2.3 (default filtering restored when `filterOption` is not passed), `@v-c/trigger` 1.1.4 (popups realign when their target moves), `@v-c/mutate-observer` 1.0.3 and `@v-c/util` 1.3.0 ([#916](https://github.com/antdv-next/antdv-next/pull/916), [#932](https://github.com/antdv-next/antdv-next/pull/932))
* chore(build): upgrade `vite-plugin-tsx-resolve-types` to 1.1.2 and enable `ignoreTypes` so event-handler types are no longer resolved into runtime props; upgrade UnoCSS to 66.10.5 ([#956](https://github.com/antdv-next/antdv-next/pull/956))
* ci: the size report compares only the final `antd.js` / `antd.esm.js` bundles and runs on every PR ([#860](https://github.com/antdv-next/antdv-next/pull/860)); whitelist PR title types for the semantic check ([#931](https://github.com/antdv-next/antdv-next/pull/931))
* test: adapt the cssinjs hydration test to Vitest 5; remove the Calendar lunar test that asserted on demo source text ([#903](https://github.com/antdv-next/antdv-next/pull/903))

## V1.5.4

Release Date: 2026-09-10

This release advances ant-design upstream tracking to **6.6.3** (`5d20a26a2b`). InputNumber gains `allowClear` and a fix for `defaultValue` never taking effect; size naming is unified to `medium` (`middle` keeps working); the `@v-c/*` foundation packages are upgraded across the board with Dropdown migrating internally to the `open` / `onOpenChange` API. It also ports a batch of upstream fixes: Modal cancel-button callbacks, mask config being mutated, Segmented selected-text color lag, uncontrolled DirectoryTree expansion, numeric `0` content mistaken for empty, plus locale and accessibility gaps. The test infrastructure moves to Vitest 5.

**✨ Features**

* feat(input-number): add `allowClear` (accepts a `{ clearIcon, disabled, label }` object), a `clearIcon` slot, a `clear` event and a `clear` semantic class / style, with clear-button styles; also fix `defaultValue` never being passed to the underlying component so the initial value was not shown
* feat: unify component size naming on `medium` and update every `middle` usage in docs and demos; Card `size="default"` is deprecated in favor of `medium` ([#810](https://github.com/antdv-next/antdv-next/pull/810))
* feat(slider): support `ariaDescribedByForHandle` to link `aria-describedby` on slider handles
* feat(docs): add a `/design.md` page and static file as the single source of design guidance for AI agents

**🐞 Fixes**

* fix(modal): keep calling `onCancel` when `cancelButtonProps.onClick` is provided; both handlers now run (#59255)
* fix(modal, drawer): stop writing `closable` back into a user-provided `mask` object, so dialogs sharing one config object no longer affect each other ([#826](https://github.com/antdv-next/antdv-next/pull/826), #59233)
* fix(form): prevent `Form.Item` controls from shrinking in vertical layout (#59263)
* fix(table): vertically center cell content in virtual tables (#59260); support empty-string values in tree filters ([#809](https://github.com/antdv-next/antdv-next/pull/809), #59141)
* fix(tabs): apply `styles.popup.root` to the "more" dropdown (#59221)
* fix(segmented): switch the selected item's text color in sync with the thumb motion instead of lagging behind (#59046, via `@v-c/segmented` 1.0.5)
* fix(descriptions): preserve item state after reordering when an item's `key` is `0` (#59064)
* fix(tree): DirectoryTree syncs its internal expanded state when `expandedKeys` is not provided, so Shift range selection no longer uses stale state (#59076)
* fix(watermark): skip drawing when the clip size is `0` to avoid zero-sized canvas errors (#59077)
* fix(menu): the horizontal item underline no longer intercepts the pointer, so moving along the bottom edge into a submenu does not close it (#59088)
* fix(drawer): render the header when only `extra` is provided, and treat `0` as a valid `title` / `extra` (#59089)
* fix(alert, empty, statistic): render titles, descriptions, actions, prefixes and suffixes whose content is the number `0` (#59094, #59101)
* fix(skeleton, steps): hide the Skeleton image placeholder SVG from assistive technology; mark the Steps progress icon as a `progressbar` ([#851](https://github.com/antdv-next/antdv-next/pull/851), [#819](https://github.com/antdv-next/antdv-next/pull/819), #59107, #59073)
* fix(config-provider): nested and isolated theme configs inherit `zeroRuntime` ([#844](https://github.com/antdv-next/antdv-next/pull/844), #59250)
* fix(input): Search keeps custom `enterButton` `onMousedown` / `onClick` handlers and no longer fires them twice ([#832](https://github.com/antdv-next/antdv-next/pull/832), #59180); Password respects a controlled `visibilityToggle.visible` ([#808](https://github.com/antdv-next/antdv-next/pull/808), #59168); Password and Tag ignore key-repeat activations ([#802](https://github.com/antdv-next/antdv-next/pull/802), [#803](https://github.com/antdv-next/antdv-next/pull/803), #59135, #59134)
* fix(tag): CheckableTag.Group clears the selection when the controlled `value` is `null`
* fix(float-button): add an invisible hover bridge between the trigger and the popup so hover-triggered menus no longer flicker while the pointer moves ([#836](https://github.com/antdv-next/antdv-next/pull/836))
* fix(breadcrumb): stop mutating the user-provided `menu` config object ([#842](https://github.com/antdv-next/antdv-next/pull/842))
* fix(anchor): align the `click` event signature and parameter names to `(e, link: { title, href })` ([#843](https://github.com/antdv-next/antdv-next/pull/843))
* fix(radio): semantic `classes` / `styles` callbacks receive the correct `checked` and `disabled` state ([#815](https://github.com/antdv-next/antdv-next/pull/815))
* fix(dropdown, select, cascader, tree-select, auto-complete): `popupRender` may return strings, arrays and other non-element nodes; the type is widened to any `VueNode` ([#817](https://github.com/antdv-next/antdv-next/pull/817), #59207)
* fix(date-picker, locale): use `DD.MM.YYYY` field formats for German ([#831](https://github.com/antdv-next/antdv-next/pull/831), #59151); fill in year / quarter / month / week placeholders for 32 locales ([#822](https://github.com/antdv-next/antdv-next/pull/822), #59219); add localized Carousel prev / next labels to 45 locales ([#823](https://github.com/antdv-next/antdv-next/pull/823), #59218); correct Traditional Chinese picker and gradient terms (#59129)

**📖 Documentation**

* docs: align zh-CN and en-US structure and API tables across all components, fix parity issues on Cascader, Collapse, Icon, Input and Layout, and repair broken heading anchors ([#853](https://github.com/antdv-next/antdv-next/pull/853), [#850](https://github.com/antdv-next/antdv-next/pull/850), [#846](https://github.com/antdv-next/antdv-next/pull/846), [#852](https://github.com/antdv-next/antdv-next/pull/852), [#821](https://github.com/antdv-next/antdv-next/pull/821))
* docs: unify `openChange` parameter names ([#827](https://github.com/antdv-next/antdv-next/pull/827), #59236); document the `listy` ConfigProvider config ([#812](https://github.com/antdv-next/antdv-next/pull/812), #59202); add es_US and sq_AL to the i18n docs ([#816](https://github.com/antdv-next/antdv-next/pull/816)); correct the Table filter icon default ([#818](https://github.com/antdv-next/antdv-next/pull/818)), Grid / Splitter API metadata ([#828](https://github.com/antdv-next/antdv-next/pull/828)), the Breadcrumb `itemRender` slot signature ([#841](https://github.com/antdv-next/antdv-next/pull/841)), Rate `defaultValue` ([#837](https://github.com/antdv-next/antdv-next/pull/837)), Badge `count` ([#820](https://github.com/antdv-next/antdv-next/pull/820)), the Alert page ([#830](https://github.com/antdv-next/antdv-next/pull/830)) and Statistic milliseconds wording (#59102)
* docs: add FAQ entries on SVG icon alignment and Vue renderable-content behavior ([#829](https://github.com/antdv-next/antdv-next/pull/829), [#807](https://github.com/antdv-next/antdv-next/pull/807)); align the getting-started guides ([#825](https://github.com/antdv-next/antdv-next/pull/825)); categorize brand icon variants correctly on the Icons page ([#811](https://github.com/antdv-next/antdv-next/pull/811))
* docs(site): move to the shared `@antdv-next/docs-plugins` package and CodeDemo component ([#797](https://github.com/antdv-next/antdv-next/pull/797), [#824](https://github.com/antdv-next/antdv-next/pull/824)); stop sponsor popovers when payment buttons are disabled, fix the pro-components link and awesome page ([#848](https://github.com/antdv-next/antdv-next/pull/848), [#847](https://github.com/antdv-next/antdv-next/pull/847)); add a 404 catch-all route

**🧰 Infrastructure & Dependencies**

* chore(sync): advance ant-design upstream tracking to **6.6.3** at `5d20a26a2b`, porting the fixes applicable to the Vue implementation in this release
* chore(deps): upgrade the foundation packages, including `@v-c/util` 1.2.0, `@v-c/dropdown` 1.1.0, `@v-c/picker` 1.4.0, `@v-c/input-number` 1.1.0, `@v-c/upload` 1.1.0, `@v-c/listy` 1.1.0, `@v-c/menu` 1.4.0, `@v-c/table` 1.3.0, `@v-c/tabs` 1.3.1, `@v-c/tree` 1.2.2, `@v-c/notification` 2.0.4 and `@v-c/select` 1.2.6; Dropdown now uses `open` / `onOpenChange` and DatePicker passes `suffix` internally, with no public API change
* chore(test): move the test toolchain to Vitest 5.0.0 (with `@vitest/ui` and `@vitest/coverage-v8`), Vite 8.3 and `@vue/test-utils` 2.5
* ci: add a package size report workflow with fork PR support and exclude locale bundles from the size check ([#801](https://github.com/antdv-next/antdv-next/pull/801), [#838](https://github.com/antdv-next/antdv-next/pull/838), [#855](https://github.com/antdv-next/antdv-next/pull/855))

## V1.5.3

Release Date: 2026-08-29

This release advances ant-design upstream tracking to **6.6.2** (`621b63dff5`) and brings in a focused round of stability, typing and accessibility fixes. Component work covers numeric `0` content being mistaken for empty, stale responsive Grid alignment classes, Checkbox disabled-state precedence, Select / AutoComplete popup event forwarding, GIF preview resource cleanup in Upload, Menu collapse transitions and RTL navigation in Image. The documentation site also gains CLI, MCP and AI-agent integration guides and now generates contributor data during the build.

**🐞 Fixes**

* fix: render numeric `0` correctly in Breadcrumb separators, Card titles/extras/covers and Meta, FloatButton content, Segmented labels and Tag content; Form labels no longer treat `0` as empty either ([#789](https://github.com/antdv-next/antdv-next/pull/789), [#784](https://github.com/antdv-next/antdv-next/pull/784), #59117, #59079)
* fix(grid): remove stale alignment classes when responsive `align` / `justify` moves to an unmatched breakpoint or is cleared, instead of retaining an outdated layout state ([#781](https://github.com/antdv-next/antdv-next/pull/781), #59066)
* fix(checkbox): resolve `disabled` from Checkbox itself before Checkbox.Group and then the ConfigProvider global context, allowing local settings to override their parent correctly ([#788](https://github.com/antdv-next/antdv-next/pull/788), #59109)
* fix(table): preserve custom `keydown` handlers supplied through `onHeaderCell` on sortable headers while retaining built-in keyboard sorting ([#783](https://github.com/antdv-next/antdv-next/pull/783), #59078)
* fix(transfer): disable select-all when every visible search result is disabled, avoiding an actionable-looking control that cannot select anything ([#790](https://github.com/antdv-next/antdv-next/pull/790), #59121)
* fix(upload): release the temporary canvas after generating a GIF thumbnail so repeated previews do not accumulate unused canvas resources ([#791](https://github.com/antdv-next/antdv-next/pull/791), #59137)
* fix(select, auto-complete): stop exposing or forwarding the internal `onPopupVisibleChange` callback through DOM attrs; AutoComplete now emits `openChange` or the compatible `dropdownVisibleChange` according to the listener actually provided ([#792](https://github.com/antdv-next/antdv-next/pull/792), #59142)
* fix(tag): give CheckableTag.Group's component-level `classes` / `styles` priority over inherited ConfigProvider semantic config, so local customization is not overwritten globally ([#785](https://github.com/antdv-next/antdv-next/pull/785), #59087)
* fix(dropdown, menu): when a hover-triggered Dropdown contains a SubMenu, its root popup now closes normally after the pointer leaves the submenu popup directly for empty page space; also scope the inline-collapse padding-transition override to root menu items so other Menu modes retain their existing animation ([#793](https://github.com/antdv-next/antdv-next/issues/793), [#795](https://github.com/antdv-next/antdv-next/pull/795), #59085)
* fix(image): pass direction-aware icons into PreviewGroup's merged config so RTL navigation uses a right arrow for previous and a left arrow for next ([#796](https://github.com/antdv-next/antdv-next/pull/796), #59145)
* fix(steps): mark Steps panel arrows as decorative and hide them from assistive technology, preventing meaningless screen-reader announcements ([#787](https://github.com/antdv-next/antdv-next/pull/787), #59105)
* fix(alert): narrow ConfigProvider's global Alert `closable` option to the type actually supported at runtime, removing properties that were declared but ineffective ([#786](https://github.com/antdv-next/antdv-next/pull/786), #59100)

**📖 Documentation**

* docs: add bilingual guides for the CLI, MCP integration and using the component library with AI agents, together with the corresponding documentation navigation
* docs(site): generate static contributor JSON from the GitHub API during the documentation build for a more accurate and stable contributor list ([#779](https://github.com/antdv-next/antdv-next/pull/779))
* fix(docs): repair the broken interaction in the Listy drag-sorting demo and add regression coverage ([#770](https://github.com/antdv-next/antdv-next/pull/770))
* docs: remove nonexistent `update:open` event entries from the FloatButton, Modal and Tooltip documentation

**🧰 Infrastructure & Dependencies**

* chore(sync): advance ant-design upstream tracking to **6.6.2** at `621b63dff5`, porting the fixes applicable to the Vue implementation in this release
* chore(deps): upgrade `@v-c/menu` to 1.3.1 and `@v-c/trigger` to 1.1.1 to fix hover-triggered menu collapse behavior
* test(transfer): add regression coverage ensuring pagination remains on a valid page after the result set becomes empty ([#782](https://github.com/antdv-next/antdv-next/pull/782), #59074)

## V1.5.2

Release Date: 2026-08-21

This release advances the ant-design upstream sync through **6.6.1** and onward to `e216c46b1e`. It focuses on stability and accessibility: Form fixes rapid-validation layout shifts, vertical-layout offsets and conditional children being remounted; Table, Transfer, Anchor and Radio correct duplicate callbacks or interaction semantics; and Carousel, Modal, Notification and Upload gain localized accessible labels. Published packages now also include design-token metadata for direct consumption by theming tools.

**✨ Features**

* feat(build): ship `token.json` and `token-meta.json` under `dist/version`, with `antdv-next/version/token.json` and `antdv-next/version/token-meta.json` export paths for theme editors and design tools
* feat(carousel): localize the default previous/next arrow `aria-label` values through ConfigProvider locale instead of hard-coding English `prev` / `next` (#59014)

**🐞 Fixes**

* fix(form): retain the compensated bottom margin while validation errors switch rapidly, preventing form height fluctuation (#59008); preserve Form's `labelCol.offset` in vertical layout (#58981)
* fix(form): keep the FormItem child array shape stable so conditionally rendering a sibling no longer remounts form controls or loses their input and internal state ([#764](https://github.com/antdv-next/antdv-next/pull/764))
* fix(form, locale): correct placeholders in the number, string and array `min` validation messages (#58965)
* fix(table): avoid duplicate callbacks when a filter menu closes; preserve caller-controlled close and confirm semantics for custom `filterDropdown`; restore first-row radii when the header is hidden (#59023, #57035)
* fix(transfer): honor component-level `locale.remove` for one-way removal buttons; emit `onSearch` only once when clearing the search input (#58955, #59016)
* fix(upload): preserve files added while an asynchronous removal is pending; use localized `title` and `aria-label` values for preview, download and remove actions ([#724](https://github.com/antdv-next/antdv-next/pull/724), #58953)
* fix(radio): fire an option's own `onChange` before the group-level `change` when Radio.Group renders from `options` ([#716](https://github.com/antdv-next/antdv-next/pull/716))
* fix(anchor): avoid duplicate `change` emissions when `getCurrentAnchor` is provided while retaining reactive tracking inside the function (#58834)
* fix(menu): prevent Tooltip flashes when an inline menu collapses while hovered, remove icon jitter during collapse, and resolve the conflicting `SubMenuProps.title` type (#58865, #59018, [#759](https://github.com/antdv-next/antdv-next/pull/759))
* fix(color-picker): keep color selection draggable after clearing; apply trigger description text styling from `styles.description` instead of mistakenly reading `classes.description` (#58995)
* fix(float-button): keep the BackTop scroll-progress ring visible whenever the button is shown (#58982)
* fix(notification, modal): localize close-button names and pass the global locale to the static Notification API; restore the default `24px` bottom offset instead of mistakenly using the `4.5`-second default duration ([#756](https://github.com/antdv-next/antdv-next/pull/756), #58957)
* fix(collapse, date-picker): hide decorative collapse arrows and range separators from screen readers to prevent duplicate announcements ([#741](https://github.com/antdv-next/antdv-next/pull/741), [#740](https://github.com/antdv-next/antdv-next/pull/740))
* fix(tree): handle a node key of `0` correctly in DirectoryTree range selection ([#757](https://github.com/antdv-next/antdv-next/pull/757))
* fix(select): keep customized inputs aligned while hovering the clear button ([#727](https://github.com/antdv-next/antdv-next/pull/727))

**💄 Styles**

* fix(listy): improve virtual scrollbar track hover feedback (#58964)

**📖 Documentation**

* docs(listy): add a drag-sorting demo; add a Select multiple-fields search demo ([#768](https://github.com/antdv-next/antdv-next/pull/768))
* fix(docs): prevent demo edits from being reverted after lazy HTTP loading and isolate each demo's TypeScript / JavaScript toggle state ([#765](https://github.com/antdv-next/antdv-next/pull/765), [#766](https://github.com/antdv-next/antdv-next/pull/766))
* docs: sync upstream API tables and heading anchors, clarify Form label association, Alert accessibility and the Transfer locale default, and add a Qixi festival easter-egg page

**🧰 Infrastructure & Dependencies**

* chore(sync): sync ant-design **6.6.1** and subsequent changes through `e216c46b1e`
* chore(deps): upgrade `@v-c/select` to 1.2.4 and `@v-c/pagination` to 1.1.1
* build: generate the docs site's `antd.css` at build time instead of committing the generated asset; update tsdown external-dependency configuration for the newer API

## V1.5.1

Release Date: 2026-08-14

This release advances the ant-design upstream sync to **6.6.0** (`a5bbbf962d`, [#703](https://github.com/antdv-next/antdv-next/pull/703), [#710](https://github.com/antdv-next/antdv-next/pull/710)). Two main threads: the full 6.6.0 sync — `nativeElement` refs across ~20 components, Tree `scrollTo` auto-expand, Table expandable `forceRender`, a BackTop scroll-progress ring, global tooltip delays and input variant config via ConfigProvider — and a focused round of **Form fixes and enhancements**: rule resolution and duplicate-validation fixes, aria attributes, and render-function validation messages — `message` now accepts a render function, so displayed errors update reactively on locale switch without re-validating.

**✨ Features**

* feat: expose `nativeElement` refs on ~20 components — Avatar.Group, Badge.Ribbon, Breadcrumb, Calendar, Card.Grid, Card.Meta, Carousel, Descriptions, Divider, Empty, FloatButton.Group, QRCode, Result, Skeleton, Space.Compact, Spin, Splitter, Transfer and Watermark — with the ref types exported from the entry (#58627~#58667)
* feat(form): rule `message` accepts a render function `() => VueNode`; it is kept as-is through validation and only invoked while rendering the error, so any reactive state it reads (locale, i18n, ...) updates the displayed message without re-running validators; works with form-level and computed `rules` as well ([#714](https://github.com/antdv-next/antdv-next/pull/714))
* feat(tree): `scrollTo` supports `autoExpand`, add `Tree.useTree` and export `TreeInstance` / `UseTreeConfig` (#58841)
* feat(table): support `forceRender` for expandable rows (#58860)
* feat(float-button): BackTop gains `showProgress`, rendering scroll progress as a ring (#58894)
* feat(pagination): add `components.sizeChanger` to customize the size changer (#58831)
* feat(mentions): support `popupRender` to customize the dropdown (#58582)
* feat(input): ConfigProvider variant config supports the `inputSearch` / `inputPassword` / `otp` subcomponents, each resolving its own config first (#58784)
* feat(tooltip, popover, popconfirm): `mouseEnterDelay` / `mouseLeaveDelay` configurable globally via ConfigProvider (#58892)
* feat(theme): add the `focusOutline` seed token for shared focus styles, honored by Input, Select, Rate, Splitter and Steps; Alert gains a `borderRadius` component token (#58647, #58708, #57765)
* feat(image): preview supports `wheel` to control mouse-wheel zoom (`@v-c/image@1.1.0`, #58728)
* feat(border-beam): add `count` to configure the number of beams, evenly distributed (#58691)
* feat(locale): add Albanian `sq_AL`; refine Traditional Chinese terminology and use Taiwan week wording in DatePicker (#58618, #58947, #58951)

**🐞 Fixes**

* fix(form): rules combining `required` and `type` no longer run type validation twice; FormItem `required` no longer derives a validation rule and only drives the required mark, aligning with antd
* fix(form): function rules resolve with the form instance as argument and are re-resolved on every validation, so they can read the latest external state
* fix(form): form controls now carry `aria-required` and link help and error text via `aria-describedby`
* fix(table): an explicitly placed `Table.EXPAND_COLUMN` no longer loses its identity through `ref()` / `reactive()` proxies, removing the phantom empty column (`@v-c/table@1.2.0`)
* fix(tree-select): preserve the selection state of disabled child nodes (`@v-c/tree-select@1.1.2`)
* fix(select): the clear icon is reachable by keyboard (`@v-c/select@1.2.1`)
* fix(virtual-list): `scrollTo({ key })` resolves against the latest data and retries after a data update (`@v-c/virtual-list@1.1.1`)
* fix(carousel): keep the current slide when children are added instead of resetting to the first (#58845)
* fix(drawer): support a disabled close button (#58853)
* fix: correct semantic style priority — ConfigProvider's root `style` now sits between context styles and component styles across 20+ components including Badge, Calendar, ColorPicker, DatePicker, Drawer, Dropdown and Modal; also fixes Divider spreading the whole semantic styles object onto its root, Masonry dropping component-level `styles.root`, and the message Holder merge order (#58550, #58564)
* fix(config-provider): the `inputSearch` component config previously never reached the context and was silently dead; it now applies
* fix(typography): restore the interactive ellipsis tooltip — hovering the popup no longer dismisses it (#58661, #58722)
* fix(button): align loading icon styles, dropping the redundant centering and block declarations (#58712)
* fix(types): export the missing `UploadRef`, `StatisticRef` and `SliderRef` types (#58700, #58798)
* fix(site): harden mainland China detection for the docs site switch

**💄 Styles**

* fix(select, table, tree): virtual scrollbars gain `cursor: pointer` and hover feedback (#58658, #58679)

**📖 Documentation**

* docs: add the design system documentation ([#707](https://github.com/antdv-next/antdv-next/pull/707)) and refresh the getting-started guide
* feat(docs): support multi-file demo tabs in the code panel
* docs: add demos for Avatar `overflowInFinal`, reactive Form validation messages and Tabs `more.popupRender`; document the Image preview `wheel` prop

**🧰 Dependencies**

* chore(sync): sync ant-design **6.6.0** upstream changes ([#703](https://github.com/antdv-next/antdv-next/pull/703), [#710](https://github.com/antdv-next/antdv-next/pull/710))
* chore(deps): upgrade `@v-c/virtual-list@1.1.1`, `@v-c/tree@1.2.0`, `@v-c/select@1.2.1`, `@v-c/tree-select@1.1.2`, `@v-c/table@1.2.0`, `@v-c/image@1.1.0`
* refactor: Button's delayed loading, Slider's tooltip toggle, Upload's progress reveal and Typography's copy feedback all move onto the shared `useDelayState` (#58690)

## V1.5.0

Release Date: 2026-08-07

This release advances the ant-design upstream sync to **6.5.4** (`5ade9944d6`) and introduces the experimental **Listy** virtual-list component. Listy targets long and grouped lists with virtual scrolling, sticky group headers, semantic styling and imperative scrolling, while BorderBeam gains controls for animation duration, beam width and beam size. It also fixes Layout Sider custom triggers, controlled Segmented values, invalid Checkbox options, reduced-motion behavior in BackTop and more.

**✨ Features**

* feat(listy): add the experimental Listy component with standard and virtual lists, grouped data and sticky headers, infinite-loading scenarios, semantic `classes` / `styles`, and a `scrollTo` API for scrolling to a position, item or group ([#670](https://github.com/antdv-next/antdv-next/pull/670))
* feat(border-beam): add `duration`, `lineWidth` and `size` to control animation duration, beam width and beam size respectively; add demos for these options and custom containers

**🐞 Fixes**

* fix(layout): support both a `trigger` prop and slot on Layout Sider; restore the default trigger when neither is supplied, and allow an explicit `null` to hide it
* fix(segmented): in controlled mode, keep the selected item on the controlled value when the consumer does not update `value` after `change`, instead of incorrectly switching to the clicked item; upgrade the primitive to `@v-c/segmented@1.0.4`
* fix(alert): an object-valued `closable` now enables closing even when it does not provide `closeIcon`
* fix(checkbox): Checkbox Group ignores `null` / `undefined` options and options without a valid `value`, avoiding invalid checkbox items
* fix(float-button): BackTop jumps to the top without animation when the user enables `prefers-reduced-motion`; the shared `scrollTo` utility now also supports zero-duration scrolling and cancellation of unfinished animations
* fix(app): with CSS variables and `component={false}`, only warn when root classes or styles would actually be dropped (#58876)
* fix(border-beam): fall back to default border information when `getComputedStyle` throws on the host element, preventing BorderBeam from breaking the component tree
* fix(types): correct the DatePicker semantic return value and Tour `actionsRender` declarations to match the actual component-level APIs

**📖 Documentation**

* docs(listy): add Chinese and English component docs with demos for basic usage, virtual scrolling, grouping, imperative scrolling, rich content, infinite loading and semantic styling
* perf(docs): load component demo source only when the code panel is expanded, so the browser no longer parses every demo's source and highlighted output during page initialization; development HMR remains supported and loaded source is reused across collapse and re-expand

**🧰 Dependencies**

* chore(sync): sync upstream changes from ant-design **6.5.4**
* chore(deps): add `@v-c/listy@1.0.2` and upgrade `@v-c/picker` to 1.3.2 ([#684](https://github.com/antdv-next/antdv-next/pull/684)), `@v-c/segmented` to 1.0.4 and `@v-c/table` to 1.1.9

## V1.4.6

Release Date: 2026-08-03

This release advances the ant-design sync from **6.5.1** all the way past **6.5.3** (`49c4a03cc9`) and upgrades all twelve `@v-c/*` primitives ([#668](https://github.com/antdv-next/antdv-next/pull/668), [#678](https://github.com/antdv-next/antdv-next/pull/678), [#681](https://github.com/antdv-next/antdv-next/pull/681)).

Two threads are worth calling out. The first is the **RangePicker interaction refactor**: upstream fixed "an unconfirmed range must not be submitted on blur" inside `@rc-component/picker`, so we rewrote the whole interaction state machine in `@v-c/picker@1.3.0`, which lands here with the dependency bump. The second is the chain of adjustments that followed **turning the clear affordance from a `<span>` into a `<button>`** — the browser's default control chrome had to be reset, the button had to become visible and outlined under keyboard focus, and a suffix holding focus must not be hidden. antd has not caught up here yet (its `rc-select` still renders a non-focusable `<span>`), so this repo carries the accessibility work first.

**🐞 Fixes**

* fix(date-picker): blur no longer submits an unconfirmed partial range when using `showTime` with `allowEmpty`. Comes from the RangePicker interaction-flow refactor in `@v-c/picker@1.3.0`, where every interaction is resolved into a single action before anything executes, so event sources no longer submit or reset values on their own ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58803)
* fix(slider): `onFocus` / `onBlur` no longer fire more than once. Vue's `cloneVNode` merges `on*` props into an array and invokes each one — React's `cloneElement` overwrites — so an explicit dispatch on top of that duplicated the callback. The two paths are also asymmetric: `@v-c/slider`'s `Handle` declares `onFocus` as a prop but never `onBlur` ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58711)
* fix(table): selecting all data no longer picks up disabled rows on other pages. It relied on `checkboxPropsMap`, which only covers the current page, so records elsewhere had no `disabled` entry and read as selectable ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58843)
* fix(table): keep `dataIndex` accessible on the columns union ([#673](https://github.com/antdv-next/antdv-next/pull/673))
* fix(transfer): deselect-all is correct while filtering. It compared key counts, but filtering narrows the keys to the visible items, so a fully-checked list read as unchecked ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58844)
* fix(transfer): preserve the disabled state of custom actions ([#668](https://github.com/antdv-next/antdv-next/pull/668), #58718)
* fix(input): `Input.OTP` no longer renders the original value when `mask` is a string — the mask overlay was effectively doing nothing — and an explicitly supplied `type` now wins over the mask-derived one ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58805, #58835)
* fix(input): hide the `Input.TextArea` resize handle on touch devices ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58812)
* fix(select): suffix icons and selected content no longer overlap the clear icon under custom theme colours ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58581)
* fix(select): the clear button is reachable by keyboard — visible and outlined on focus, and a custom suffix holding focus is no longer hidden. The clear affordance is a focusable `<button>` now, and `pointer-events: none` does not take it out of the tab order ([#681](https://github.com/antdv-next/antdv-next/pull/681))
* fix(auto-complete): the disabled text colour now reaches the input — it has to be set through the CSS variable rather than `color`, which never reaches a customized input ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58838)
* fix(spin): a standalone `Spin` nested inside another one is no longer pulled out of flow by the outer centring styles ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58801)
* fix(typography): the editable textarea's font size now matches the content being edited ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58551)
* fix(upload): default download links open with `noopener`, so newly opened tabs can no longer reach the opener page ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58817)

**💄 Styles**

* fix(date-picker, select): reset the browser's default button chrome on the clear icon. It is a `<button>` now, so without the reset its grey background, border, padding and own font showed through ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58403)
* fix: bare `<svg>` icons from third-party libraries now sit vertically centred with their labels in Tabs, Segmented, Breadcrumb, Collapse and Tag. An `<svg>` has no baseline of its own, so it is aligned by its bottom margin edge and rides above the text; `display: inline-block` additionally keeps it aligned under a reset that forces `svg { display: block }`, such as Tailwind Preflight ([#681](https://github.com/antdv-next/antdv-next/pull/681), #58847, #58862, #58868, #58869, #58870; Tag via [#668](https://github.com/antdv-next/antdv-next/pull/668), #58723)
* fix(style): complete the Icon base styles when `theme.zeroRuntime` or CSS layers are enabled ([#678](https://github.com/antdv-next/antdv-next/pull/678), #58763)
* fix(style): respect the `lineType` token in Button, ColorPicker, Select and Space borders ([#668](https://github.com/antdv-next/antdv-next/pull/668), #58755)
* fix(tree): respect the `margin-inline-start` design token in `showLine` ([#668](https://github.com/antdv-next/antdv-next/pull/668), #58745)
* fix(table): preserve the nested table's top border inside custom content ([#668](https://github.com/antdv-next/antdv-next/pull/668), #58746)

**📖 Documentation**

* docs(faq): note that in-DOM template lowercasing breaks camelCase slots on CDN ([#671](https://github.com/antdv-next/antdv-next/pull/671))
* feat(docs): supplement the Upload demo
* docs: add a Collapse panel-icon demo rendered through the `labelRender` slot, covering third-party bare `<svg>` icons ([#681](https://github.com/antdv-next/antdv-next/pull/681))
* docs: fix the English introduction and release blog links

**🧰 Infrastructure**

* chore: upgrade all twelve `@v-c/*` dependencies — util 1.1.0, trigger 1.1.0, tooltip 1.1.0, menu 1.3.0, dropdown 1.0.5, select 1.2.0, tabs 1.3.0, mentions 1.2.0, input-number 1.0.7, tree 1.1.3, pagination 1.1.0, picker 1.3.0 ([#681](https://github.com/antdv-next/antdv-next/pull/681))
* test: regenerate snapshots in a UTC+8 timezone. Some had absorbed the generating machine's timezone and reported spurious failures elsewhere ([#681](https://github.com/antdv-next/antdv-next/pull/681))

## V1.4.5

Release Date: 2026-07-21

Hotfix for the browser (CDN) bundles shipped in 1.4.4. The UMD/ESM builds referenced `process.env.NODE_ENV`, which does not exist in the browser, so loading `dist/antd.js` from unpkg/jsdelivr threw `ReferenceError: process is not defined` and the whole bundle failed. Fixing that surfaced a second problem: `app.use(window.antd)` never registered any components because the plugin's `install` was nested one level deeper on the global.

**🐞 Fixes**

* fix(build): define `process.env.NODE_ENV` in the browser-facing bundles (`antd.js`, `antd.esm.js`, `antd-with-locales.js`, `antd-with-locales.esm.js`) so they no longer reference the missing `process` global. The bundler entry (`dist/index.js`) is left untouched so tree-shaking consumers keep their own dev/prod branches ([#667](https://github.com/antdv-next/antdv-next/pull/667), fixes [#666](https://github.com/antdv-next/antdv-next/issues/666))
* fix(build): expose `install` / `setPrefix` as named exports so the UMD/ESM global (`window.antd`) carries `install` at the top level; `app.use(window.antd)` now registers all components directly, without reaching for `window.antd.default` ([#667](https://github.com/antdv-next/antdv-next/pull/667))

**🧰 Infrastructure**

* build: add a post-build check that fails the build if any browser bundle references the `process` global unguarded, preventing this regression from shipping again ([#667](https://github.com/antdv-next/antdv-next/pull/667))

## V1.4.4

Release Date: 2026-07-20

This release advances the ant-design upstream sync past **6.5.1** to `78c3d84619` ([#658](https://github.com/antdv-next/antdv-next/pull/658), [#664](https://github.com/antdv-next/antdv-next/pull/664)). Its main theme is **APIs that were declared and documented but never actually wired up**: Form `getFieldInstance` always returned `undefined`, Timeline's three render props were ignored, and Tree's `rootStyle` was silently discarded. It also makes the style and token build scripts read component sources directly instead of bundled output.

**🐞 Fixes**

* fix(form): `getFieldInstance(name)` now returns the rendered control instance instead of always returning `undefined`. The registry key no longer goes through `getFieldId`, so lookups work whether or not the Form declares a `name`, and `focusField` now prefers the control's own `focus()` before falling back to the DOM node ([#665](https://github.com/antdv-next/antdv-next/pull/665), fixes [#663](https://github.com/antdv-next/antdv-next/issues/663))
* fix(timeline): wire up the `dotRender` / `labelRender` / `contentRender` props and slots — they were declared and documented but ignored by `useItems`, and leaked into the Steps pass-through. Slot results are normalized so a conditional slot that renders nothing correctly falls back to the item's `icon` / `title` / `content` ([#656](https://github.com/antdv-next/antdv-next/pull/656), fixes [#653](https://github.com/antdv-next/antdv-next/issues/653))
* fix(tabs): `labelRender` / `contentRender` now infer their item type from `items` instead of hard-coding `TabItem`, and `InstanceType<typeof Tabs>` keeps the exposed `TabsRef` ([#661](https://github.com/antdv-next/antdv-next/pull/661), fixes [#660](https://github.com/antdv-next/antdv-next/issues/660))
* fix(tree): restore `rootStyle` compatibility — it was inherited from the underlying props but silently overwritten by the semantic root style, making it a no-op. It now works again and is deprecated in favour of `styles.root` (#58709)
* fix(input): a custom Search `enterButton` now syncs `disabled` with the form context, and a `loading` supplied on the custom Button is no longer overwritten (#58726)
* fix(grid): support zero `flex` values — `:flex="0"` and responsive `:xs="{ flex: 0 }"` were dropped by a truthiness check (#58719)
* fix(tag): closing a link tag no longer triggers navigation (#58720)
* fix(splitter): correct percentage-based ARIA value ranges (#58702)
* fix(style): respect the `lineWidth` / `lineType` border tokens in Typography, Tree, Collapse and Layout instead of hardcoding `1px solid`; the rendered CSS is unchanged at the default theme and only differs once those tokens are customized (#58740, #58741, #58742, #58743)
* fix(segmented, radio): drop downstream-only `prefers-reduced-motion` styles that upstream never had, restoring parity with the React sources ([#654](https://github.com/antdv-next/antdv-next/pull/654))
* fix(wave): avoid touching global `window` in the `attachListener` watch callback, which runs on Vue's async scheduler and could fire after the environment is torn down ([#662](https://github.com/antdv-next/antdv-next/pull/662))

**📖 Docs**

* docs(timeline): add a `dotRender` demo ([#656](https://github.com/antdv-next/antdv-next/pull/656))
* docs(input-number): add a feedback suffix debug demo (#58703)
* docs(anchor): correct the `offsetTop` default value (#58710)
* docs(select): preserve the typed search text in the remote users demo (#58736)
* docs(table): fix the English API links ([#657](https://github.com/antdv-next/antdv-next/pull/657))

**🧰 Infrastructure**

* refactor(build): `build:style` and `build:token-statistic` now load component sources through a vite SSR runner instead of importing `dist/components.js`, so a stale build can no longer produce outdated CSS or token statistics. Both outputs were verified identical to the dist-based runs ([#654](https://github.com/antdv-next/antdv-next/pull/654))

## V1.4.3

Release Date: 2026-07-15

Hotfix for a style regression introduced in 1.4.2 while syncing upstream [ant-design#58685](https://github.com/ant-design/ant-design/pull/58685): after `genNoMotionStyle` expanded to `&::before / &::after`, six call sites that already live inside pseudo-element selectors produced invalid double pseudo-element selectors such as `.ant-border-beam::before::before` — browsers silently drop these rules (so `prefers-reduced-motion` never took effect there), and lightningcss-based static CSS minification fails the build outright.

**🐞 Fixes**

* fix(style): add a flat `genNoMotionRawStyle` variant and use it at the six pseudo-element call sites in Switch / Segmented / Radio / Checkbox / BorderBeam, removing the invalid `::before::before` selectors and restoring `prefers-reduced-motion` behavior there ([#651](https://github.com/antdv-next/antdv-next/pull/651))

**🧰 Infrastructure**

* ci: bump node to 24 in GitHub Actions workflows
* chore: regenerate the static style output

## V1.4.2

Release Date: 2026-07-14

This release advances the ant-design upstream sync to **6.5.1** ([#644](https://github.com/antdv-next/antdv-next/pull/644), [#647](https://github.com/antdv-next/antdv-next/pull/647), [#650](https://github.com/antdv-next/antdv-next/pull/650)) and focuses on **TypeScript type infrastructure** (generic constructor exports, type inference in `h()` usage). It also fixes a batch of component issues — Switch label centering and bare attribute parsing, AutoComplete filled background stacking, Modal lazy rendering — and upgrades `@v-c/table` 1.1.8, `@v-c/util` 1.0.21 and other dependencies.

**✨ Features**

* feat(types): export generic constructor types for Transfer / Cascader / TreeSelect / Segmented, enabling full generic inference in `h()` and TSX
* feat(ecosystem): add the antdv-next-tiptap rich-text editor to the Awesome page

**🐞 Fixes**

* fix(switch): center label content with flex instead of aligning it to the text baseline, fixing the upward offset of icon content (#58672)
* fix(switch, checkbox): bare `checked` / `default-checked` template attributes now correctly resolve to `true` (previously parsed as an empty string and rendered unchecked)
* fix(input): prevent the Search button focus outline from being covered by adjacent elements (#58615)
* fix(auto-complete): avoid duplicate filled background on custom input components (#58669)
* fix(motion): `prefers-reduced-motion` now also disables transitions/animations on `::before` / `::after` pseudo elements (#58685)
* fix(modal): keep default slot rendering lazy while loading; apply `styles.body` of Modal methods to the content
* fix(pagination): keep the size changer width inside Form.Item
* fix(button): align icons inside Card extra
* fix(descriptions): restore view width in shrink-to-fit containers
* fix(date-picker): expose `nativeElement` as an element instead of a function
* fix(config-provider): component-level `classes` / `styles` config is no longer silently inferred as `any` ([#642](https://github.com/antdv-next/antdv-next/pull/642)); force `zeroRuntime` when the cssinjs layer is enabled
* fix(locale): complete missing locale fields
* fix(types): fix lost contextual callback types in `h()` usage, unresolvable `h(Table, props)`, and clean up remaining type errors in component sources
* fix(deps): bump `@v-c/util` to 1.0.21, fixing Select dropdown misalignment inside Space.Compact under vue 3.5.39
* build: externalize `@vueuse/core` to silence rolldown build warnings

**📖 Docs**

* docs(layout): add a "Collapsible overlay" demo (#58566)
* docs(grid): document the semantic difference between number and string values of Col `flex` (#58624)
* docs(border-beam): add a "Show on hover" demo (#58683)
* docs(auto-complete): add a filled custom input debug demo (#58669)
* docs(table): add an auto-height demo, a performance troubleshooting FAQ (Vue DevTools), `change` event typing examples, and more
* docs(notification): add a fixed-width usage FAQ
* docs(site): add an "All" filter to icon search; add Serene / Dashboard preview themes; align component overview card hover with ant-design

**🧰 Dependencies**

* chore(deps): bump `@v-c/table` ^1.1.8, `@v-c/virtual-list` ^1.1.0, `@v-c/mentions` ^1.1.2, `@v-c/util` ^1.0.21, `@antdv-next/happy-work-theme` 1.0.1

## V1.4.1

Release Date: 2026-07-02

This release mainly fixes **vue 3.5.39 compatibility issues** ([vuejs/core#14985](https://github.com/vuejs/core/pull/14985) changed when function refs are invoked): overlay components (Tooltip/Popover/Popconfirm/Dropdown) mis-positioning and dropping the first-open animation, message/notification notices stacking on top of each other, and Masonry layout breakage. It also adds a component meta block to the component doc pages and refines the icon overview.

**🐞 Fixes**

* fix: fix overlay components mis-positioning / losing the first-open animation under the vue 3.5.39 production build (Tooltip / Popover / Popconfirm / Dropdown) — via `@v-c/trigger` 1.0.18 (#623)
* fix: fix **message / notification notices stacking** on top of each other under vue 3.5.39 (first-frame height measurement failed) — via `@v-c/notification` 2.0.2 (#623)
* fix(masonry): fix Masonry layout breakage caused by failed item height measurement under vue 3.5.39; resolve via `createElementRef` (#623)
* fix(deps): add `@v-c/notification` to overrides to drop the stale version left in the lockfile

**📖 Docs**

* docs: add a component meta block (import / feedback / docs / version) to component doc pages, aligning with ant-design
* docs(icon): categorize the newly added AI / brand icons under the brand group, tag them as "added in 1.4.0", and surface them first

**🧪 Tests**

* test(drawer): add a regression test for Watermark inheritance inside Drawer (vue 3.5.39)

**🧰 Dependencies**

* chore(deps): bump vue to `^3.5.39`; `@v-c/trigger` 1.0.18, `@v-c/notification` 2.0.2, `@v-c/util` 1.0.20 and related toolchain deps

## V1.4.0

Release Date: 2026-06-30

This release advances the ant-design upstream sync to **6.5.0**, bringing a batch of new features and semantic capabilities: **Modal `scrollLock`**, **Dropdown left/right placements**, **Steps `maxCount` collapsing**, **Slider per-handle disabling (`boolean[]` in Range mode)**, **DatePicker/RangePicker `clear` event**, **Watermark per-line fonts**, **Layout Sider semantic `classes`/`styles`** and **Tabs `body` semantic structure**; it also unifies the **root semantic style priority** across 30+ components. Multiple upstream fixes are synced as well, and the `@v-c` chain is upgraded (picker 1.2.0 / select 1.1.3 / tabs 1.2.1).

**✨ Features**

* feat: sync ant-design upstream changes (6.4.5 → 6.5.0) — [#621](https://github.com/antdv-next/antdv-next/pull/621)
* feat(modal): add `scrollLock` to control body scroll lock while open (#58256)
* feat(dropdown): support `left`/`right` placements (#58437)
* feat(steps): add `maxCount` collapse mode for dense step items (#57987)
* feat(slider): support disabling individual handles via `boolean[]` in Range mode (#57982)
* feat(date-picker): emit `clear` when the clear button is clicked (#58403)
* feat(watermark): `content` supports per-line font styles for multi-line watermarks (#57886)
* feat(layout): support semantic `classes`/`styles` (`root`/`body`) for Sider (#57938)
* feat(tabs): sync `body`/`content` semantic DOM rename and the `body` semantic (#58521)
* feat(collapse): support size padding tokens for header/content (#58436)
* feat(badge): allow removing the native title via `title` `null`/`false` (#58209)
* feat(input): support `tabIndex` for the Password visibility toggle (#58458)
* feat(config-provider): support Form `labelWrap` configuration (#58035)
* feat(config-provider): pass `theme.zeroRuntime` to the icon context (#58517)
* feat: unify root semantic style priority across 30+ components (#58474)

**🐞 Fixes**

* fix(form): restore `Form.Item` `help={false}` behavior (#58558)
* fix(table): honor `defaultSortOrder` on responsive columns (#58008)
* fix(table): keep the sticky header top border and drop the extra fixed-right line in bordered mode (#58451 #58516)
* fix(table): support forwarding aria attributes through `getCheckboxProps` (#58275)
* fix(input,select): add a focus outline for borderless inputs (#58250)
* fix(input): align the Search button height and the compact small control height (#58411 #58525)
* fix(select): refine single-mode open-state labelRender dimming; do not create disabled tags; numeric popup width (#58288 #58518 #58511)
* fix(float-button): prevent a disabled `FloatButton.Group` from opening the hover menu (#58513)
* fix(alert): fix the CSS specificity for icon vertical alignment with description (#57915)
* fix(upload): switch default file/picture icons from TwoTone to Outlined, aligning with upstream (#58497)
* fix(config-provider): forward collapse/otp/anchor/splitter component config
* fix(layout): pass the effective collapsed state to Sider semantic callbacks
* fix(watermark): keep the default 120×64 size for empty content to avoid a 0×0 draw error
* fix(locale): correct ja-JP Typography expand/collapse labels (#58563)

**🧪 Tests**

* test(menu): cover `itemData` in click/select/deselect callbacks (#58197)
* test: add cross-component tests for root semantic style priority

**🧰 Dependencies**

* chore(deps): upgrade `@antdv-next/icons` to 1.1.1 (new icons + `zeroRuntime` support to skip runtime style injection)
* chore(deps): upgrade the `@v-c` chain — picker 1.2.0 / select 1.1.3 / tabs 1.2.1

## V1.3.7

Release Date: 2026-06-25

This release advances the ant-design upstream sync to **6.4.5** and backfills the missing fixes (#58234 / #58214 / #58314 / #58371 / #58339), makes **Tabs panes mount lazily**, fixes **Pagination not emitting the update event in some scenarios** and **Table overriding the consumer's `components.header.table` when merging aria props**, and upgrades the `@v-c` chain (table 1.1.6 cell memo, virtual-list 1.0.9 height perf) for better performance.

**🐞 Fixes**

* fix: sync ant-design upstream changes (6.4.4 → 6.4.5) — [#613](https://github.com/antdv-next/antdv-next/pull/613)
* fix(tabs): lazily mount panes via `@v-c/tabs` 1.1.1 — [#612](https://github.com/antdv-next/antdv-next/pull/612)
* fix(pagination): some scenarios did not trigger the update event
* fix(table): preserve the consumer's `components.header.table` when merging aria props
* fix: sync ant-design upstream fixes (#58234 #58214 #58314 #58371 #58339)
* docs(locale): fill missing nb_NO (Norwegian) keys (#58439)

**🔧 Types**

* refactor(table): add a typed contract to HeaderTable

**🧪 Tests**

* test: reduce spurious deprecation warnings in demos and tests
* test: update snapshots

**🧰 Dependencies**

* chore(deps): upgrade the `@v-c` chain — table 1.1.6 (cell memo) + virtual-list 1.0.9 (height perf) — [#609](https://github.com/antdv-next/antdv-next/pull/609)
* chore: upgrade dependencies

## V1.3.6

Release Date: 2026-06-18

This release fixes **Segmented rendering an empty icon node for options without an icon**, **Dropdown not forwarding `menu`'s `classes` / `styles` / `rootClass`** and **Input emitting a duplicate `class` attribute**, relaxes the Form form-level `rules` type to a recursive `RulesMap`, and refines the DirectoryTree typing while bumping dependencies.

**🐞 Fixes**

* fix(segmented): no longer render an empty `.ant-segmented-item-icon` node for options without an `icon`, aligning with React ant-design (#600) — [#601](https://github.com/antdv-next/antdv-next/pull/601)
* fix(dropdown): forward `menu`'s `classes` / `styles` / `rootClass` to the overlay Menu instead of having them overridden by the explicit semantic classes (#599) — [#601](https://github.com/antdv-next/antdv-next/pull/601)
* fix(input): fix the duplicate `class` attribute

**🔧 Types**

* refactor(form): relax the form-level `rules` type to a recursive `RulesMap` so nested (`{ user: { email: [...] } }`) and indexed (`{ list: { 0: [...] } }`) configs type-check without casts — [#601](https://github.com/antdv-next/antdv-next/pull/601)
* perf(tree): refine DirectoryTree typing

**🧪 Tests**

* test: update Space and Transfer snapshots

**🧰 Dependencies**

* chore: upgrade dependencies

## V1.3.5

Release Date: 2026-06-13

This release fixes **Form.Item triggering a no-op meta update with a fresh meta object on every focus/blur, re-rendering its child** — combined with inline object props (e.g. `:show-time`) this reset DatePicker's in-panel draft selection, making the OK confirm impossible inside a-form-item — and bumps `@v-c/picker` for the companion fix.

**🐞 Fixes**

* fix(form): skip no-op meta updates to avoid re-rendering FormItem children (fixes DatePicker in-panel draft selection being reset inside a-form-item) — [#597](https://github.com/antdv-next/antdv-next/pull/597)

**🧰 Dependencies**

* chore(deps): bump `@v-c/picker` to ^1.1.3 for the companion fix where a parent re-render passing equivalent-but-new props reset the draft selection (antdv-next #597)
* chore: update the docs-site css

## V1.3.4

Release Date: 2026-06-12

This release advances the ant-design upstream sync to **6.4.4 (`b32376a31b`)** — back-fills every fix and companion test missed from the 6.4.4 changelog, **adds a "Global Config" column to every component API doc** and simplifies the ConfigProvider component-config section. It also introduces the **Form `useForm` / `useFormInstance`** hooks, fixes **popup misplacement under transformed ancestors** and the **Enter key mis-selecting on dropdown open in Select**, and bumps the `@v-c/*` dependencies to their released sync versions.

**✨ Features**

* feat(form): add `useForm` / `useFormInstance` hooks and align `validateFields` options with rc-field-form — [#586](https://github.com/antdv-next/antdv-next/pull/586)

**🐞 Fixes**

* fix(trigger): fix popup misplacement when an ancestor has a transform, and bump `@v-c` deps (dialog@1.2.0 / menu@1.2.0 / pagination@1.0.1 / picker@1.1.2 / select@1.1.1 / table@1.1.4); select@1.1.1 fixes the Enter key mis-selecting the first option right as the dropdown opens (#594) — [#595](https://github.com/antdv-next/antdv-next/pull/595)
* fix(slider): prevent text selection on adjacent content when dragging the handle in Safari (antd #58024) — [#596](https://github.com/antdv-next/antdv-next/pull/596)
* fix(splitter): show the collapse bar when the collapse button is keyboard-focused and support keyboard collapsing (antd #58060) — [#596](https://github.com/antdv-next/antdv-next/pull/596)
* fix(upload): consume the global `progress` config from ConfigProvider and keep the default progress style when unset (antd #58126) — [#596](https://github.com/antdv-next/antdv-next/pull/596)
* fix(notification): skip rendering the title node when `title` is empty so the close button no longer overlaps the description (antd #58096) — [#596](https://github.com/antdv-next/antdv-next/pull/596)
* fix(collapse): align with antd v6 so `expandIconPlacement` takes effect — [#592](https://github.com/antdv-next/antdv-next/pull/592)
* fix(modal): bump `@v-c/dialog` to 1.1.1 to fix `forceRender` — [#582](https://github.com/antdv-next/antdv-next/pull/582)
* fix(descriptions): fix label styles not applied in non-bordered mode — [#580](https://github.com/antdv-next/antdv-next/pull/580)
* fix(popconfirm): fix the `confirm` prop value not rendering — [#577](https://github.com/antdv-next/antdv-next/pull/577)
* fix(menu): bump `@v-c/menu` to 1.1.3 to fix large-menu toggle jank, with regression tests — [#587](https://github.com/antdv-next/antdv-next/pull/587) / [#589](https://github.com/antdv-next/antdv-next/pull/589)
* fix(menu): keep the collapsed menu icon aligned before the collapse animation plays (antd #58271)
* fix(radio): fix vertical Radio.Group button radius and adjacent borders (antd #58317)
* fix(tour): keep the previous-button hover text readable in primary mode (antd #58311)
* fix(auto-complete): restrict the `showSearch` type to prevent unsupported Select props leaking (antd #58104)
* fix(popover, popconfirm): keep rendering when `title` or `content` is the number `0` (antd #58296)
* fix(icon): keep the spin animation working with multiple `iconPrefixCls` (antd #58253)
* fix(locale): align `en_GB` texts with `en_US` (antd #58224)
* fix(calendar): align lunar demo selected and panel month colors, and fix year selection
* fix(docs): hide debug demo anchors in production

**💄 Styles**

* style: deepen the `boxShadowTertiary` shadow for better visibility on light backgrounds, affecting Card / Tour / Segmented (antd #58205)

**🧪 Tests**

* test: back-fill upstream companion tests for the Descriptions responsive `column` cascade, ColorPicker / Tag keyboard accessibility and Transfer root attribute passthrough (antd #58058 / #58040 / #58067 / #58166) — [#596](https://github.com/antdv-next/antdv-next/pull/596)
* test(tree-select): align focus tests with the `focusin` event semantics — [#595](https://github.com/antdv-next/antdv-next/pull/595)

**📝 Documentation**

* docs: add a "Global Config" column to every component API table marking props configurable via the ConfigProvider component config, and simplify the ConfigProvider component-config section into a key list (antd #58265 / #58290 / #58278) — [#596](https://github.com/antdv-next/antdv-next/pull/596)
* docs(form): demonstrate nested name-path field entries in the `global-state` demo (antd #58327) — [#596](https://github.com/antdv-next/antdv-next/pull/596)
* docs(date-picker): switch the basic demo to Flex layout (antd #58320) — [#596](https://github.com/antdv-next/antdv-next/pull/596)
* docs(progress): fix grammar in the `steps` description (antd #58325) — [#596](https://github.com/antdv-next/antdv-next/pull/596)
* docs: sync upstream doc and demo updates, and polish the docs-site page-turning navigation

## V1.3.3

Release Date: 2026-06-03

This release **syncs the ant-design 6.4.3 → 8b5c356f fix/feat batch into the main package** — Tooltip / Popover arrow drop-shadow, Checkbox / Modal / Result / Popconfirm / Select / DatePicker / Empty styles, Transfer / Tree / Table / Descriptions / Tabs behavior, and locale additions — **bumps the `@v-c/*` dependencies to their released sync versions**, fixes a **Menu `itemData` DOM leak**, and introduces a **debug-demo mechanism for the docs site** (visible in development, hidden in production).

**✨ Features**

* feat(docs): hide debug demos in the production build and give debug demos a purple border — [#568](https://github.com/antdv-next/antdv-next/pull/568)

**🐞 Fixes**

* fix(tooltip, popover): use drop-shadow for the arrow so it no longer stacks with the container shadow (antd #57988) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(checkbox): avoid lingering hover border style on touch devices (antd #58085) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(modal): correct footer button alignment when `confirmLoading` is true (antd #58120) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(result, popconfirm): correct status icon color inheritance (antd #58157) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(select): keep selected option active style themed and avoid disabled customize input background stacking (antd #58069 / #58114) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(date-picker, time-picker): make the clear button keyboard accessible (antd #58132) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(empty): use design tokens for SVG colors to support dark mode (antd #58152) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(tree): default `DirectoryTree` `defaultExpandParent` to `true` (antd #58068) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(table): add `presentation` role to the filter dropdown wrapper (antd #58164) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(descriptions): avoid inflated width inside a `max-content` ancestor (antd #58203) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(tabs): correct the more-dropdown motion direction when the placement flips (antd #58202) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(form): treat `help={false}` as no help (antd #58160) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(menu): do not leak the `itemData` prop to the DOM element — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* fix(locale): add Tour translations to `km_KH` and QRCode / ColorPicker translations to `pt_BR` (antd #58140 / #58188) — [#568](https://github.com/antdv-next/antdv-next/pull/568)

**⚡ Performance**

* perf(transfer): combine enabled key iteration (antd #58168) — [#568](https://github.com/antdv-next/antdv-next/pull/568)

**📝 Documentation**

* docs: register existing debug demos, sync the Table / AutoComplete demos (antd #58134 / #58114) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* docs(rate): drop native `className` / `style` rows from the API table (antd #58196) — [#568](https://github.com/antdv-next/antdv-next/pull/568)
* docs: align `CLAUDE.md` with `AGENTS.md` to keep repo guidance consistent — [#567](https://github.com/antdv-next/antdv-next/pull/567)

**🛠 Refactor & Maintenance**

* build(deps): bump `@v-c` trigger / menu / virtual-list to their released sync versions — [#568](https://github.com/antdv-next/antdv-next/pull/568)

**🧪 Tests**

* test(radio): cover uncontrolled checked state (antd #57917) — [#568](https://github.com/antdv-next/antdv-next/pull/568)

**Full Changelog**: [antdv-next@1.3.2...antdv-next@1.3.3](https://github.com/antdv-next/antdv-next/compare/antdv-next@1.3.2...antdv-next@1.3.3)

## V1.3.2

Release Date: 2026-06-03

This patch release **fixes a batch of component issues (TimePicker / DatePicker / Pagination / Switch / Tour / Upload / Modal), syncs ant-design master accessibility and responsive fixes**, and updates the `@v-c/table` dependency.

**🐞 Fixes**

* fix(time-picker): console error when clearing values — [#562](https://github.com/antdv-next/antdv-next/pull/562)
* fix(date-picker): the `inputReadonly` property passed is invalid — [#561](https://github.com/antdv-next/antdv-next/pull/561)
* fix(pagination): text line break overflow in some scenarios — [#557](https://github.com/antdv-next/antdv-next/pull/557)
* fix(switch): emit the `click` event from the Switch component — [#556](https://github.com/antdv-next/antdv-next/pull/556)
* fix(tour): exclude `children` from the button props spread to avoid a Vue DOM warning — [#555](https://github.com/antdv-next/antdv-next/pull/555)
* fix(upload): partial slots of `UploadDragger` are not properly transmitted through — [#553](https://github.com/antdv-next/antdv-next/pull/553)
* fix: sync ant-design master accessibility and responsive fixes — [#549](https://github.com/antdv-next/antdv-next/pull/549)
* fix(modal): support global config locale — [#546](https://github.com/antdv-next/antdv-next/pull/546)

**📝 Documentation**

* docs(image): supplement `focusTrap` — [#565](https://github.com/antdv-next/antdv-next/pull/565)
* docs(carousel): remove the missing component token demo — [#564](https://github.com/antdv-next/antdv-next/pull/564)
* docs(tabs): replace `children` with `content` — [#559](https://github.com/antdv-next/antdv-next/pull/559)
* docs(readme): improve contribution steps — [#551](https://github.com/antdv-next/antdv-next/pull/551)

**🛠 Refactor & Maintenance**

* chore(deps): update `@v-c/table` to 1.1.3 — [#550](https://github.com/antdv-next/antdv-next/pull/550)
* chore(deps): update `@v-c/table` to 1.1.2 — [#548](https://github.com/antdv-next/antdv-next/pull/548)

**Full Changelog**: [antdv-next@1.3.1...antdv-next@1.3.2](https://github.com/antdv-next/antdv-next/compare/antdv-next@1.3.1...antdv-next@1.3.2)

## V1.3.1

Release Date: 2026-05-20

This patch release **syncs the ant-design 6.4.3 P1 fixes (Result / DatePicker / Select), backports the upstream 6.4.3 Table / Mentions performance improvements**, and fixes an **Image runtime warning**.

**🐞 Fixes**

* fix: sync ant-design 6.4.3 P1 fixes (Result / DatePicker / Select) — [#541](https://github.com/antdv-next/antdv-next/pull/541)
* fix: fix image warning — [#539](https://github.com/antdv-next/antdv-next/pull/539)

**⚡ Performance**

* perf(table): sync ant-design 6.4.3 Table perf and `FilterResetProps` rename — [#542](https://github.com/antdv-next/antdv-next/pull/542)
* perf(mentions): sync ant-design 6.4.3 `getMentions` reduce iteration — [#543](https://github.com/antdv-next/antdv-next/pull/543)

**🧪 Tests**

* test(Table): add a test case for the `table-demo-expand-sticky` table component — [#540](https://github.com/antdv-next/antdv-next/pull/540)

**Full Changelog**: [antdv-next@1.3.0...antdv-next@1.3.1](https://github.com/antdv-next/antdv-next/compare/antdv-next@1.3.0...antdv-next@1.3.1)

## V1.3.0

Release Date: 2026-05-16

This release focuses on **syncing ant-design to 6.4.2, introducing the new BorderBeam component, migrating Notification / Message / Typography to antd v2 semantic structure, and expanding ConfigProvider coverage**, while also fixing **TypeScript bundler deep-subpath type resolution, Message transition mismatch, Notification close button spacing when title is empty, and Image popup.close semantic key naming**.

> ⚠️ This release contains breaking changes — see the **Breaking Changes** section below.

**✨ Features**

* feat: sync ant-design@6.4.2, covering Calendar / Splitter / Image / Wave / Modal / Drawer / ConfigProvider / Table / Tabs / Form / Menu / Tag / Tree / Tour / Typography / Notification / Message
* feat(border-beam): introduce the BorderBeam glow border component with docs, demos, and unit tests
* feat(typography): migrate to antd 6.4 v2 semantic structure; add `actions.placement` for action button group position; new `root` / `actions` / `action` / `textarea` semantic keys
* feat(notification): upgrade to vc-notification@2 with full v2 semantic slots `title` / `description` / `icon` / `actions` / `progress` / `close`; add `_InternalListDoNotUseOrYouWillBeFired` internal component for doc previews
* feat(message): sync antd 6.4 v2 semantic structure (`title` / `wrapper` / `list` / `listContent`); add `_InternalListDoNotUseOrYouWillBeFired`
* feat(form): add `help` / `helpItem` / `extra` semantic class and style support
* feat(transfer): add nested `source` / `target` semantic overrides — customize `section` / `header` / `title` / `body` / `list` / `item` / `itemIcon` / `itemContent` / `footer` per side
* feat(calendar): add `itemContent` semantic class and style
* feat(modal, tour, tag, popconfirm, image, statistic, tree, tree-select, input, popconfirm): add `close` / `icon` / `clear` / `value` / `itemSwitcher` semantic class/style support
* feat(config-provider): extend global component config for Select `allowClear` / `showSearch` / `loadingIcon`, DatePicker / TimePicker `allowClear` / `clearIcon`, Modal infoIcon/successIcon/warningIcon/errorIcon, Upload `progress` / `accept`, Modal / Drawer `focusable`, Mentions `allowClear`, Cascader icons, and more
* feat(menu): refresh item extra layout and tooltip padding
* feat(mentions): wire the popup z-index through `useZIndex`
* feat(cascader): support ConfigProvider `searchIcon` / `clearIcon` / `removeIcon` / `suffixIcon`
* feat(table): support ConfigProvider column defaults with per-column merge
* feat: upgrade vc-notification@2.0.0-rc.4, vc-input@1.1.0-rc.3, vc-picker@1.1.0-rc.3, vc-table@1.1.0-rc.2, vc-select@1.1.0-rc.1, vc-slider@1.1.0-rc.1, vc-resize-observer@1.1.0-rc.1, vc-tour@1.1.0-rc.2 etc.

**💥 Breaking Changes**

* **typography**: `classes.copy` / `classes.edit` / `classes.expand` / `classes.content` (and matching `styles.*`) are removed. Migrate to the unified `classes.action` / `styles.action` (single action button) and `classes.actions` / `styles.actions` (actions container).
* **message**: `classes.content` / `styles.content` are removed — use `classes.title` / `styles.title` instead. DOM moves from `notice-description > .custom-content` to `notice-title`, and the type modifier class moves from the root to `notice-wrapper`.
* **transfer**: `classes.source` / `classes.target` change from flat strings to nested objects. The old `classes={ source: 'foo' }` becomes `classes={ source: { section: 'foo' } }`.
* **image**: `classes.popup.closeIcon` / `styles.popup.closeIcon` are renamed to `popup.close` / `popup.close`, aligning with the underlying vc-image naming.

**🐞 Fixes**

* fix(pkg): add `index.d.ts` fallback to the `./dist/*` subpath exports — resolves TypeScript `moduleResolution: bundler` / `nodenext` failing to resolve deep type imports
* fix(message): switch the transition class from `move-up` to `fade`, restoring antd 6.x enter/leave animation
* fix(message): promote the icon from inline description into the v2 icon semantic slot
* fix(notification): pad description with `padding-inline-end` when the notice is closable but has no title — prevents the close button from overlapping description text
* fix(notification): position via `--notification-top` / `--notification-bottom` CSS variables to stop the holder from spanning full height
* fix(notification, message): re-add the v1 icon-wrapper class for backward compatibility
* fix(notification): in vc-notification, drop the broken onClose array merge and the invalid TransitionGroup tag (vc-notification 2.0.0-rc.2/rc.3 follow-ups)
* fix(border-beam): adjust the `offsetPath` corner radius from `200px` to `100px` so the beam no longer breaks at corners

**📝 Documentation & Demos**

* docs: add Notification / Message / Typography / Form / Transfer / Tag / Tour / Modal / Image / Calendar / Statistic / Tree / TreeSelect / Input / Popconfirm semantic DOM preview demos with bilingual locale copy
* docs(notification, message): refactor the style-class demo to match React 6.4's green/red function-style example
* docs(border-beam): add zh-CN / en-US component docs, demos, and sidebar registration

**🔄 Internal**

* upgrade vc-notification to 2.0.0-rc.4 (full v2 semantic structure + height patcher fix + leave animation fix)
* bump vc-input / vc-picker / vc-select / vc-table / vc-slider / vc-resize-observer / vc-tour / vc-notification rc versions — see catalog for details
* upgrade vc-overflow to 1.1.0-rc.1 (RTL logical offset fix)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.2.2...antdv-next@1.3.0

## V1.2.2

Release Date: 2026-04-28

This release focuses on **adding previous/next page navigation, supporting Table generic mode, and syncing the latest antd implementation up to 6.3.7**, while also **fixing Masonry slot typing, Card empty content rendering, Button motion, Form field behavior, and Table virtual scroll header synchronization**. It also improves the docs sidebar, Descriptions docs, column resize guidance, and synchronized documentation content.

**✨ Features**

* feat: add previous and next page turning by @selicens in [#491](https://github.com/antdv-next/antdv-next/pull/491)
* feat: support Table generic mode by @aibayanyu20 in [#496](https://github.com/antdv-next/antdv-next/pull/496)
* feat: sync antd by @aibayanyu20 in [#505](https://github.com/antdv-next/antdv-next/pull/505)
* feat: sync antd@6.3.7 by @aibayanyu20 in [#507](https://github.com/antdv-next/antdv-next/pull/507)

**🐞 Fixes**

* fix(masonry): add generic type support for the `itemRender` slot data field by @ayangweb in [#490](https://github.com/antdv-next/antdv-next/pull/490)
* fix(card): skip the empty body wrapper when there is no content by @ayangweb in [#493](https://github.com/antdv-next/antdv-next/pull/493)
* fix: fix Button motion by @aibayanyu20 in [#495](https://github.com/antdv-next/antdv-next/pull/495)
* fix: fix Form using the origin name incorrectly by @aibayanyu20 in [#498](https://github.com/antdv-next/antdv-next/pull/498)
* fix: fix Table header scroll not taking effect in virtual mode by @aibayanyu20 in [#499](https://github.com/antdv-next/antdv-next/pull/499)
* fix: fix Form auto-complete not taking effect by @aibayanyu20 in [#504](https://github.com/antdv-next/antdv-next/pull/504)

**📝 Documentation**

* docs(menu): optimize the sidebar to support opening links in a new tab by @cc-hearts in [#485](https://github.com/antdv-next/antdv-next/pull/485)
* docs(descriptions): update the Descriptions component documentation by @jiangrong-devops in [#501](https://github.com/antdv-next/antdv-next/pull/501)
* docs: fix unexpected sorting when adjusting column width by @think-gem in [#502](https://github.com/antdv-next/antdv-next/pull/502)
* docs: sync docs by @aibayanyu20 in [#506](https://github.com/antdv-next/antdv-next/pull/506)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.2.1...antdv-next@1.2.2

## V1.2.1

Release Date: 2026-04-20

This release focuses on **fixing interaction and rendering issues across Drawer, Transfer, Affix, layer-mode icon colors, and static method locale support**, while also **improving the docs site, syncing Transfer examples and migration docs, and adding related links together with updated test snapshots**.

**🐞 Fixes**

* fix(drawer): fix `afterOpenChange` being triggered twice during initial mount by @selicens in [#466](https://github.com/antdv-next/antdv-next/pull/466)
* fix(Transfer): fix the Transfer default slot rendering empty content when used on a node without a specified `direction` by @jiangrong-devops in [#471](https://github.com/antdv-next/antdv-next/pull/471)
* fix(drawer): preserve Esc-to-close behavior when `getContainer` is `false` by @ffgenius in [#470](https://github.com/antdv-next/antdv-next/pull/470)
* fix(affix): use content height for the placeholder to fix incorrect placeholder sizing by @william-xue in [#478](https://github.com/antdv-next/antdv-next/pull/478)
* fix: fix layer-mode icon colors not taking effect and static methods not supporting locale by @aibayanyu20 in [#481](https://github.com/antdv-next/antdv-next/pull/481)

**📝 Documentation**

* docs: optimize the docs site by @selicens in [#467](https://github.com/antdv-next/antdv-next/pull/467)
* docs(Transfer): sync the antd Transfer component example docs by @jiangrong-devops in [#476](https://github.com/antdv-next/antdv-next/pull/476)
* docs: update the `migration-antdv-next` docs by @think-gem in [#474](https://github.com/antdv-next/antdv-next/pull/474)
* docs: revert the migration docs update by @selicens in [#480](https://github.com/antdv-next/antdv-next/pull/480)
* docs: add related links by @aibayanyu20 in [#486](https://github.com/antdv-next/antdv-next/pull/486)

**🛠 Refactor & Maintenance**

* test(image): update snapshots for the `alt` attribute fix by @cc-hearts in [#479](https://github.com/antdv-next/antdv-next/pull/479)

---

**👏 New Contributors**

Thanks to the following contributor for their first contribution:

* @think-gem in [#474](https://github.com/antdv-next/antdv-next/pull/474)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.2.0...antdv-next@1.2.1

## V1.2.0

Release Date: 2026-04-15

This release focuses on **exposing missing Select instance methods, syncing the latest antd-related implementation, and fixing type, layout, and interaction issues across Breadcrumb, Space, Tree, Upload, and ConfigProvider**, while also **improving the Spin migration docs, icon/message doc copy, the LLMs docs generation workflow, and static asset maintenance**.

**✨ Features**

* feat(select): expose `blur`, `focus`, and `scrollTo` methods by @selicens in [#448](https://github.com/antdv-next/antdv-next/pull/448)
* feat: sync antd by @aibayanyu20 in [#460](https://github.com/antdv-next/antdv-next/pull/460)

**🐞 Fixes**

* fix: fix Breadcrumb slot typing by @aibayanyu20 in [#447](https://github.com/antdv-next/antdv-next/pull/447)
* fix(space): prevent `Space.Addon` content from wrapping by @selicens in [#452](https://github.com/antdv-next/antdv-next/pull/452)
* fix(Tree): fix checkbox alignment when the parent node content spans multiple lines in Tree by @jiangrong-devops in [#431](https://github.com/antdv-next/antdv-next/pull/431)
* fix: fix Upload link navigation and update dependencies by @aibayanyu20 in [#453](https://github.com/antdv-next/antdv-next/pull/453)
* fix: fix Select `getPopupContainer` from ConfigProvider not taking effect by @aibayanyu20 in [#456](https://github.com/antdv-next/antdv-next/pull/456)
* fix: fix ConfigProvider extended props not taking effect by @aibayanyu20 in [#459](https://github.com/antdv-next/antdv-next/pull/459)

**📝 Documentation**

* perf(docs): improve the LLMs docs generation workflow path by @cc-hearts in [#444](https://github.com/antdv-next/antdv-next/pull/444)
* docs(spin): add Description API and migration docs by @selicens in [#449](https://github.com/antdv-next/antdv-next/pull/449)
* fix: fix icon and message display copy in docs by @cc-hearts in [#454](https://github.com/antdv-next/antdv-next/pull/454)
* fix: correct a zh-CN typo in the Timeline docs by @jasonren0403 in [#457](https://github.com/antdv-next/antdv-next/pull/457)

**🛠 Refactor & Maintenance**

* chore(image): update image source paths by @selicens in [#445](https://github.com/antdv-next/antdv-next/pull/445)

---

**👏 New Contributors**

Thanks to the following contributor for their first contribution:

* @jasonren0403 in [#457](https://github.com/antdv-next/antdv-next/pull/457)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.1.9...antdv-next@1.2.0


## V1.1.9

This release focuses on **fixing class duplication, missing styles, and form label behavior across Tabs, Menu, FormItem, and Image**, while also **improving style completeness in SSR rendering scenarios and optimizing type performance**.

**🐞 Fixes**

* fix(tabs): fix duplicated class names by @selicens in [#435](https://github.com/antdv-next/antdv-next/pull/435)
* fix: fix missing Menu styles in SSR rendering mode by @aibayanyu20 in [#437](https://github.com/antdv-next/antdv-next/pull/437)
* fix: fix FormItem label not taking effect by @aibayanyu20 in [#441](https://github.com/antdv-next/antdv-next/pull/441)

**🛠 Refactor & Maintenance**

* chore(image): update image source paths by @selicens in [#436](https://github.com/antdv-next/antdv-next/pull/436)
* perf: optimize type performance by @aibayanyu20 in [#442](https://github.com/antdv-next/antdv-next/pull/442)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.1.8...antdv-next@1.1.9


## V1.1.8

This release focuses on **fixing IME input handling, style/class passthrough, and touch interactions across Input, ConfigProvider, Image, and TimePicker**, while also **improving docs layout, Tabs examples, release announcement content, and GitHub edit links**. It also introduces the initial Pro project setup and adds Claude Code collaboration guidance together with related CI workflows.

**✨ Features**

* feat: initialize the Pro project by @aibayanyu20 in [#422](https://github.com/antdv-next/antdv-next/pull/422)

**🐞 Fixes**

* fix(input): add an IME composition guard for Input and support the `changeOnComposing` prop by @shiqkuangsan in [#417](https://github.com/antdv-next/antdv-next/pull/417)
* fix: fix `style` and `class` passthrough in ConfigProvider by @aibayanyu20 in [#420](https://github.com/antdv-next/antdv-next/pull/420)
* fix(image): fix abnormal button styles in the image preview footer by @selicens in [#430](https://github.com/antdv-next/antdv-next/pull/430)
* fix: fix TimePicker columns not scrolling on touch devices by @aibayanyu20 in [#433](https://github.com/antdv-next/antdv-next/pull/433)

**📝 Documentation**

* docs(tabs): update the draggable Tabs documentation example by @jiangrong-devops in [#412](https://github.com/antdv-next/antdv-next/pull/412)
* docs(blog): optimize the release announcement content and English translation by @TAYUN in [#413](https://github.com/antdv-next/antdv-next/pull/413)
* fix(docs): correct the GitHub edit path in the documentation by @lonewolfyx in [#415](https://github.com/antdv-next/antdv-next/pull/415)
* fix(docs): fix left alignment in the documentation layout by @ouyang108 in [#425](https://github.com/antdv-next/antdv-next/pull/425)
* fix(docs): align dark theme tokens and background styles for the docs sider menu by @ffgenius in [#428](https://github.com/antdv-next/antdv-next/pull/428)

**🛠 Refactor & Maintenance**

* chore: update dependencies by @aibayanyu20 in [#416](https://github.com/antdv-next/antdv-next/pull/416)
* chore: add `CLAUDE.md` for Claude Code collaboration guidance by @shiqkuangsan in [#418](https://github.com/antdv-next/antdv-next/pull/418)
* ci: add Claude Code workflows by @shiqkuangsan in [#419](https://github.com/antdv-next/antdv-next/pull/419)

---

**👏 New Contributors**

Thanks to the following contributors for their first contributions:

* @lonewolfyx in [#415](https://github.com/antdv-next/antdv-next/pull/415)
* @TAYUN in [#413](https://github.com/antdv-next/antdv-next/pull/413)
* @ouyang108 in [#425](https://github.com/antdv-next/antdv-next/pull/425)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.1.7...antdv-next@1.1.8


## V1.1.7

This release focuses on **fixing rendering, styling, and interaction details across cssinjs, Tree, Transfer, Image, Table, and Menu**, while also **improving mobile responsiveness in the docs site, icon search interaction, and several documentation descriptions and repository links**. It also syncs part of the behavior with antd 6.3.4.

**🐞 Fixes**

* fix(cssinjs): fix cssinjs render delay and sync related cssinjs implementation by @aibayanyu20 in [#403](https://github.com/antdv-next/antdv-next/pull/403)
* fix: fix invalid i18n for icon category titles by @selicens in [#404](https://github.com/antdv-next/antdv-next/pull/404)
* fix(popconfirm): fix invalid padding in the `style-class` demo container by @selicens in [#405](https://github.com/antdv-next/antdv-next/pull/405)
* fix(Tree): sync antd 6.3.4 and correct the custom `switcherIcon` class when `showLine` is enabled by @selicens in [#407](https://github.com/antdv-next/antdv-next/pull/407)
* fix(transfer): sync antd 6.3.4 and handle non-string `render` results when rendering items by @selicens in [#408](https://github.com/antdv-next/antdv-next/pull/408)
* fix: sync antd 6.3.4 and apply custom hover color to SubMenu parent items by @selicens in [#409](https://github.com/antdv-next/antdv-next/pull/409)
* fix(image): sync antd 6.3.4 and support `fetchPriority` prop passthrough by @selicens in [#410](https://github.com/antdv-next/antdv-next/pull/410)
* fix(table): fix controlled Popover in column titles being rendered twice when scroll is enabled by @aibayanyu20 in [#411](https://github.com/antdv-next/antdv-next/pull/411)

**📝 Documentation**

* docs: update key descriptions from React to Vue and add column key notes by @jiangrong-devops in [#399](https://github.com/antdv-next/antdv-next/pull/399)
* feat(docs): add mobile responsive adaptation for the docs site by @william-xue in [#400](https://github.com/antdv-next/antdv-next/pull/400)
* docs(icon): scroll to the icon list after searching by @z-kunf in [#401](https://github.com/antdv-next/antdv-next/pull/401)
* docs: update the documentation repository URL by @ayangweb in [#406](https://github.com/antdv-next/antdv-next/pull/406)

---

**👏 New Contributors**

Thanks to the following contributors for their first contributions:

* @william-xue in [#400](https://github.com/antdv-next/antdv-next/pull/400)
* @ayangweb in [#406](https://github.com/antdv-next/antdv-next/pull/406)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.1.6...antdv-next@1.1.7


## V1.1.6

This release focuses on **fixing styling and interaction details across Menu, Divider, and Image**, while also **improving the Modal docs, dark-mode contrast logic, and the theme preview experience**. It also adds dark-themed payment QR codes to the sponsor page to expand community support options.

**✨ Features**

* feat(sponsor): add darkingtail payment QR codes with dark-theme presentation by @darkingtail in [#395](https://github.com/antdv-next/antdv-next/pull/395)
* feat(preview-theme): use `antdv-style` for theme preview and support copying theme code by @ffgenius in [#397](https://github.com/antdv-next/antdv-next/pull/397)

**🐞 Fixes**

* fix(menu): align collapsed icons when using custom `collapsedIconSize` by @wxfengg in [#385](https://github.com/antdv-next/antdv-next/pull/385)
* fix: fix focus trap by @aibayanyu20 in [#389](https://github.com/antdv-next/antdv-next/pull/389)
* fix(divider): fix `class` attrs not being applied correctly when passed through attrs by @cc-hearts in [#394](https://github.com/antdv-next/antdv-next/pull/394)
* fix: fix initial Menu highlight state by @aibayanyu20 in [#396](https://github.com/antdv-next/antdv-next/pull/396)
* fix(image): fix mask blur behavior when `mask` is `true` by @448847482 in [#398](https://github.com/antdv-next/antdv-next/pull/398)

**📝 Documentation**

* docs: fix missing Modal documentation parameters by @jauqasx in [#388](https://github.com/antdv-next/antdv-next/pull/388)
* fix(docs): refine theme picker contrast logic for dark mode by @wxfengg in [#392](https://github.com/antdv-next/antdv-next/pull/392)

---

**👏 New Contributors**

Thanks to the following contributors for their first contributions:

* @wxfengg in [#385](https://github.com/antdv-next/antdv-next/pull/385)
* @448847482 in [#398](https://github.com/antdv-next/antdv-next/pull/398)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.1.5...antdv-next@1.1.6


## V1.1.5

This release focuses on **fixing rendering, styling, and interaction issues across Select, Layout, Grid, Form, and Image**, while also **improving local Playground debugging and expanding documentation content**. It also adds a WeChat official account QR code entry and includes documentation description updates together with a dynamic placeholder fix.

**✨ Features**

* feat(playground): add `VC_LOCAL` mode for local `@v-c/*` package debugging by @shiqkuangsan in [#371](https://github.com/antdv-next/antdv-next/pull/371)
* feat: add WeChat official account QR code by @selicens in [#380](https://github.com/antdv-next/antdv-next/pull/380)

**🐞 Fixes**

* fix: fix Select render error by @aibayanyu20 in [#370](https://github.com/antdv-next/antdv-next/pull/370)
* fix(style): improve Link `focus-visible` outline for accessibility by @darkingtail in [#376](https://github.com/antdv-next/antdv-next/pull/376)
* fix(grid): add `xxxl` breakpoint to media size mapping by @darkingtail in [#378](https://github.com/antdv-next/antdv-next/pull/378)
* fix(form): remove hardcoded SimSun font from required mark by @darkingtail in [#377](https://github.com/antdv-next/antdv-next/pull/377)
* fix(image): improve preview mask blur transition and movable cursor styles by @darkingtail in [#375](https://github.com/antdv-next/antdv-next/pull/375)
* fix: fix duplicate Layout class application by @aibayanyu20 in [#379](https://github.com/antdv-next/antdv-next/pull/379)
* fix: fix dynamic placeholder by @Rascal-Coder in [#383](https://github.com/antdv-next/antdv-next/pull/383)

**📝 Documentation**

* docs(table): document Table props performance notes by @cc-hearts in [#373](https://github.com/antdv-next/antdv-next/pull/373)
* docs: sync and fix index page descriptions (zh-CN & en-US) by @jauqasx in [#374](https://github.com/antdv-next/antdv-next/pull/374)

---

**👏 New Contributors**

Thanks to the following contributor for their first contribution:

* @jauqasx in [#374](https://github.com/antdv-next/antdv-next/pull/374)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.1.4...antdv-next@1.1.5


## V1.1.4

This release focuses on **adding SFC usage examples for Menu and Collapse together with a theme editor integration**, **fixing interaction and style issues in Input.Search and TreeSelect**, and **improving SSR performance while upgrading parts of the tooling stack**. It also includes several documentation rendering and compatibility fixes.

**✨ Features**

* feat(editor): use antd theme editor by @ffgenius in [#365](https://github.com/antdv-next/antdv-next/pull/365)
* feat: add SFC usage for Menu and Collapse by @aibayanyu20 in [#366](https://github.com/antdv-next/antdv-next/pull/366)

**🐞 Fixes**

* fix: fix TreeSelect hover style by @aibayanyu20 in [#362](https://github.com/antdv-next/antdv-next/pull/362)
* fix: fix Input.Search triggering the clear event twice by @aibayanyu20 in [#361](https://github.com/antdv-next/antdv-next/pull/361)

**📝 Documentation**

* docs(input): supplement `clearIcon` slot docs by @selicens in [#355](https://github.com/antdv-next/antdv-next/pull/355)
* docs: fix compatibility notes for lower Chrome versions by @aibayanyu20 in [#357](https://github.com/antdv-next/antdv-next/pull/357)
* docs(table): fix Table docs render error by @cc-hearts in [#363](https://github.com/antdv-next/antdv-next/pull/363)
* docs(drawer/tabs/time-picker/upload): fix render errors in related docs by @cc-hearts in [#364](https://github.com/antdv-next/antdv-next/pull/364)
* docs: fix and update documentation content by @aibayanyu20 in [#367](https://github.com/antdv-next/antdv-next/pull/367)

**🛠 Refactor & Maintenance**

* perf: improve SSR performance by @aibayanyu20 in [#356](https://github.com/antdv-next/antdv-next/pull/356)
* chore: bump Vite version and update dependencies by @cc-hearts in [#359](https://github.com/antdv-next/antdv-next/pull/359)
* chore: bump Vitest version by @cc-hearts in [#360](https://github.com/antdv-next/antdv-next/pull/360)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.1.3...antdv-next@1.1.4


## V1.1.3

This release focuses on **fixing behavior issues in Select, Form, InputNumber, and Splitter**, while also **syncing Timeline details with antd 6.3.2**. It also improves the docs site with a direct entry to open demos in Playground for easier debugging and inspection.

**✨ Features**

* feat: sync Timeline `showLine` alignment with custom `titleHeight` from antd 6.3.2 by @selicens in [#346](https://github.com/antdv-next/antdv-next/pull/346)

**🐞 Fixes**

* fix: fix Select abnormal value handling by @aibayanyu20 in [#340](https://github.com/antdv-next/antdv-next/pull/340)
* fix: fix Select class parsing in DOM attributes by @aibayanyu20 in [#343](https://github.com/antdv-next/antdv-next/pull/343)
* fix(splitter): fix incorrect size calculation when partially controlled by @darkingtail in [#347](https://github.com/antdv-next/antdv-next/pull/347)
* fix: fix InputNumber cursor restore not taking effect in `format` scenarios by @aibayanyu20 in [#352](https://github.com/antdv-next/antdv-next/pull/352)
* fix: fix Form `rules.validateTrigger` errors and support the new `tel` rule by @aibayanyu20 in [#350](https://github.com/antdv-next/antdv-next/pull/350)

**📝 Documentation**

* docs: add an entry to open demos in Playground from the docs site by @aibayanyu20 in [#339](https://github.com/antdv-next/antdv-next/pull/339)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.1.1...antdv-next@1.1.3


## V1.1.1

This release focuses on **improving API parity with Ant Design**, **expanding slot/SFC support for more components**, and **fixing behavior issues across Modal, Menu, Tree, Slider, Switch, Skeleton, and more**. It also adds broader unit test coverage and updates the documentation site.

**✨ Features**

* feat: support SFC item components for Timeline / Descriptions / Breadcrumb, and enhance Menu slot rendering with docs/tests by @aibayanyu20 in [#295](https://github.com/antdv-next/antdv-next/pull/295)
* feat: Form.Item now supports `tooltip` / `help` / `label` / `extra` slots by @aibayanyu20 in [#301](https://github.com/antdv-next/antdv-next/pull/301)
* feat: add `MaskType` by @mengxianghan in [#318](https://github.com/antdv-next/antdv-next/pull/318)
* feat: sync Progress and theme preview behavior with antd by @han1548772930 in [#329](https://github.com/antdv-next/antdv-next/pull/329)
* feat: sync `sizeType` by @aibayanyu20 in [#338](https://github.com/antdv-next/antdv-next/pull/338)

**🐞 Fixes**

* fix(tour): preserve step-level semantic classes in `panelRender` by @shiqkuangsan in [#291](https://github.com/antdv-next/antdv-next/pull/291)
* fix(slider): correct `tabindex` prop name to `tabIndex` by @shiqkuangsan in [#296](https://github.com/antdv-next/antdv-next/pull/296)
* fix: validate Message uses label correctly by @Rascal-Coder in [#305](https://github.com/antdv-next/antdv-next/pull/305)
* fix: fix Menu keyPath order being reversed by @aibayanyu20 in [#311](https://github.com/antdv-next/antdv-next/pull/311)
* fix(modal): fix default blur mode not taking effect and update related description by @mengxianghan in [#314](https://github.com/antdv-next/antdv-next/pull/314)
* fix: fix Tooltip icon rendering by @aibayanyu20 in [#313](https://github.com/antdv-next/antdv-next/pull/313)
* fix(modal): add `KeyboardEvent` support to `onCancel` type by @utianhuan666 in [#324](https://github.com/antdv-next/antdv-next/pull/324)
* fix: fix Form.Item ref inheritance by @aibayanyu20 in [#325](https://github.com/antdv-next/antdv-next/pull/325)
* fix: fix Switch controlled mode by @aibayanyu20 in [#328](https://github.com/antdv-next/antdv-next/pull/328)
* fix: fix Tree `checkedKeys` object handling by @aibayanyu20 in [#333](https://github.com/antdv-next/antdv-next/pull/333)
* fix: fix Segmented motion by @aibayanyu20 in [#334](https://github.com/antdv-next/antdv-next/pull/334)
* fix: fix Skeleton size not taking effect by @aibayanyu20 in [#337](https://github.com/antdv-next/antdv-next/pull/337)

**🧪 Tests**

This release adds unit tests for Tabs, Tour, ColorPicker, cssinjs, Slider, Table, Image, FloatButton, and TimePicker.

* test(tabs): add unit tests by @shiqkuangsan in [#290](https://github.com/antdv-next/antdv-next/pull/290)
* test: add ColorPicker unit tests and cssinjs unit tests by @aibayanyu20 in [#292](https://github.com/antdv-next/antdv-next/pull/292)
* test(tour): add unit tests by @shiqkuangsan in [#294](https://github.com/antdv-next/antdv-next/pull/294)
* test(slider): add unit tests by @shiqkuangsan in [#298](https://github.com/antdv-next/antdv-next/pull/298)
* test(table): add unit tests by @shiqkuangsan in [#302](https://github.com/antdv-next/antdv-next/pull/302)
* test(image): add unit tests by @darkingtail in [#307](https://github.com/antdv-next/antdv-next/pull/307)
* test(float-button): add unit tests by @darkingtail in [#306](https://github.com/antdv-next/antdv-next/pull/306)
* test(time-picker): add unit tests by @shiqkuangsan in [#308](https://github.com/antdv-next/antdv-next/pull/308)

**📝 Documentation**

* docs: add SEO performance improvements by @aibayanyu20 in [#293](https://github.com/antdv-next/antdv-next/pull/293)
* docs(covers): correct the QRCode property name to `QrCode` (camel case) by @utianhuan666 in [#299](https://github.com/antdv-next/antdv-next/pull/299)
* docs: update docs and LLM script by @aibayanyu20 in [#322](https://github.com/antdv-next/antdv-next/pull/322)
* docs(table): add column documentation by @cc-hearts in [#336](https://github.com/antdv-next/antdv-next/pull/336)

**🛠 Refactor & Maintenance**

* chore(cascader): bump version by @cc-hearts in [#304](https://github.com/antdv-next/antdv-next/pull/304)
* fix: remove duplicate `initMotionCommonLeave` function by @utianhuan666 in [#323](https://github.com/antdv-next/antdv-next/pull/323)
* fix(deps): bump `@v-c/select` to `^1.0.17` by @shiqkuangsan in [#326](https://github.com/antdv-next/antdv-next/pull/326)

---

**👏 New Contributors**

Thanks to the following contributor for their first contribution:

* @mengxianghan in [#314](https://github.com/antdv-next/antdv-next/pull/314)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.1.0...antdv-next@1.1.1


## V1.1.0

This release focuses on **syncing with antd v6.3.1**, **fixing component behavior and accessibility issues**, and **expanding unit test coverage** across more components. It also includes documentation updates, CI/script maintenance, and sponsor/readme improvements.

**✨ Features**

* feat(sponsor): optimize the style of the custom amount input box by @ffgenius in [#250](https://github.com/antdv-next/antdv-next/pull/250)
* feat: sync antd 6.3.1 by @ffgenius in [#269](https://github.com/antdv-next/antdv-next/pull/269)
* feat(readme): change contributor image to Open Collective link by @ffgenius in [#274](https://github.com/antdv-next/antdv-next/pull/274)
* feat: perf prop types by @aibayanyu20 in [#278](https://github.com/antdv-next/antdv-next/pull/278)

**🐞 Fixes**

* fix(cascader): add missing deprecated warning for `popupClassName` by @darkingtail in [#242](https://github.com/antdv-next/antdv-next/pull/242)
* fix(collapse): use `prefixCls.value` in CollapsePanel no-arrow class by @shiqkuangsan in [#244](https://github.com/antdv-next/antdv-next/pull/244)
* fix: fix form directive not effect & add test unit by @aibayanyu20 in [#243](https://github.com/antdv-next/antdv-next/pull/243)
* fix(tree): relax `treeData` type to accept custom data nodes by @darkingtail in [#260](https://github.com/antdv-next/antdv-next/pull/260)
* fix(pagination): fix change event trigger by @cc-hearts in [#265](https://github.com/antdv-next/antdv-next/pull/265)
* fix(image): cover slot not rendered when preview mask is configured by @shiqkuangsan in [#272](https://github.com/antdv-next/antdv-next/pull/272)
* fix(skeleton): synchronise the DOM element styles of Skeleton by @utianhuan666 in [#258](https://github.com/antdv-next/antdv-next/pull/258)
* fix(checkbox): support controlled state for checkbox by @cc-hearts in [#275](https://github.com/antdv-next/antdv-next/pull/275)
* fix(notification): correct expose key mismatch for `classNames` by @shiqkuangsan in [#279](https://github.com/antdv-next/antdv-next/pull/279)
* fix(a11y): apply `prefers-reduced-motion` to Radio and Segmented by @darkingtail in [#281](https://github.com/antdv-next/antdv-next/pull/281)
* fix(auto-complete): fix default display of custom input placeholder by @cc-hearts in [#283](https://github.com/antdv-next/antdv-next/pull/283)
* fix(tabs): fix dead onPrevClick/onNextClick deprecation warning by @shiqkuangsan in [#287](https://github.com/antdv-next/antdv-next/pull/287)
* fix(tabs): fix `renderTabBar` prop variable shadowing by @shiqkuangsan in [#286](https://github.com/antdv-next/antdv-next/pull/286)
* fix: fix slick height by @aibayanyu20 in [#288](https://github.com/antdv-next/antdv-next/pull/288)
* fix: fix table loading & no data empty state by @aibayanyu20 in [#289](https://github.com/antdv-next/antdv-next/pull/289)

**🧪 Tests**

This release adds unit tests for DatePicker, Progress, Collapse, Popconfirm, Drawer, Message, Dropdown, Mentions, and Notification.

* test(date-picker): add unit test by @aibayanyu20 in [#233](https://github.com/antdv-next/antdv-next/pull/233)
* test(progress): add unit tests for Progress component by @darkingtail in [#246](https://github.com/antdv-next/antdv-next/pull/246)
* test(collapse): add unit tests for Collapse component by @shiqkuangsan in [#247](https://github.com/antdv-next/antdv-next/pull/247)
* test(popconfirm): add unit tests for Popconfirm component by @darkingtail in [#248](https://github.com/antdv-next/antdv-next/pull/248)
* test(drawer): add unit tests for Drawer component by @darkingtail in [#252](https://github.com/antdv-next/antdv-next/pull/252)
* test(message): add unit tests for Message component by @darkingtail in [#263](https://github.com/antdv-next/antdv-next/pull/263)
* test(dropdown): add unit tests for Dropdown component by @shiqkuangsan in [#266](https://github.com/antdv-next/antdv-next/pull/266)
* test(mentions): add unit tests for Mentions component by @shiqkuangsan in [#270](https://github.com/antdv-next/antdv-next/pull/270)
* test(notification): add unit tests for Notification component by @shiqkuangsan in [#284](https://github.com/antdv-next/antdv-next/pull/284)

**📝 Documentation**

* fix(docs): adjust scrollbar width styling for modal lock by @han1548772930 in [#245](https://github.com/antdv-next/antdv-next/pull/245)
* docs: add examples for browser import by @selicens in [#255](https://github.com/antdv-next/antdv-next/pull/255)
* docs(typography): fix formatting of `enterIcon` prop description by @wujighostking in [#262](https://github.com/antdv-next/antdv-next/pull/262)
* docs(cascader): supplement semantic DOM and add unit tests by @ffgenius in [#261](https://github.com/antdv-next/antdv-next/pull/261)
* chore(docs): add sponsor qrcode for shiqkuangsan by @shiqkuangsan in [#271](https://github.com/antdv-next/antdv-next/pull/271)

**🛠 Refactor & Maintenance**

* ci: change docs scripts generate by @aibayanyu20 in [#249](https://github.com/antdv-next/antdv-next/pull/249)
* chore(select/image/util): bump version by @cc-hearts in [#277](https://github.com/antdv-next/antdv-next/pull/277)

---

**👏 New Contributors**

Thanks to the following contributors for their first contributions:

* @han1548772930 in [#245](https://github.com/antdv-next/antdv-next/pull/245)
* @utianhuan666 in [#258](https://github.com/antdv-next/antdv-next/pull/258)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.0.5...antdv-next@1.1.0


## V1.0.5

This release focuses on **fixing component interaction and data flow issues**, while also **expanding unit test coverage** for more components. It includes fixes for Tooltip, DatePicker, Autocomplete, Select, Descriptions, and app-level class/style handling.

**🐞 Fixes**

* fix: passive clear of `v-model` value not working by @aibayanyu20 in [#228](https://github.com/antdv-next/antdv-next/pull/228)
* fix(tooltip): fix incorrect position calculation when arrow is displayed by @cc-hearts in [#231](https://github.com/antdv-next/antdv-next/pull/231)
* fix: improve two-way binding and one-way data flow handling by @aibayanyu20 in [#230](https://github.com/antdv-next/antdv-next/pull/230)
* fix: fix app class & style ref deconstruction by @aibayanyu20 in [#232](https://github.com/antdv-next/antdv-next/pull/232)
* fix: Autocomplete input clears automatically when pressing Enter by @aibayanyu20 in [#234](https://github.com/antdv-next/antdv-next/pull/234)
* fix(descriptions): render `id` prop on root element by @shiqkuangsan in [#236](https://github.com/antdv-next/antdv-next/pull/236)
* fix: DatePicker manual clear not working by @aibayanyu20 in [#237](https://github.com/antdv-next/antdv-next/pull/237)
* fix: fix Select `showSearchConfig` by @aibayanyu20 in [#240](https://github.com/antdv-next/antdv-next/pull/240)

**🧪 Tests**

This release adds unit tests for Splitter, Steps, and Popover to improve regression protection.

* test(splitter): add unit test by @cc-hearts in [#227](https://github.com/antdv-next/antdv-next/pull/227)
* test(steps): add unit tests by @z-kunf in [#222](https://github.com/antdv-next/antdv-next/pull/222)
* test(popover): add unit tests for Popover component by @shiqkuangsan in [#239](https://github.com/antdv-next/antdv-next/pull/239)

---

**👏 New Contributors**

Thanks to the following contributors for their first contributions:

* @z-kunf in [#222](https://github.com/antdv-next/antdv-next/pull/222)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.0.4...antdv-next@1.0.5


## V1.0.4

This release focuses on **expanding unit test coverage**, **fixing component behavior issues**, and **improving docs/playground tooling**. It also includes style sync updates, project structure refinements, and **improved Nuxt compatibility**.

**✨ Features**

* feat: add ts & js code source by @cc-hearts in [#187](https://github.com/antdv-next/antdv-next/pull/187)
* feat(playground): add playground for debugging by @cc-hearts in [#192](https://github.com/antdv-next/antdv-next/pull/192)
* feat: sync antd style by @aibayanyu20 in [#223](https://github.com/antdv-next/antdv-next/pull/223)
* Nuxt compatibility improvements (cssinjs priority / order attr fix) by @aibayanyu20 in [#217](https://github.com/antdv-next/antdv-next/pull/217)

**🐞 Fixes**

* fix(colorPicker): `arrow` is invalid by @ffgenius in [#182](https://github.com/antdv-next/antdv-next/pull/182)
* fix: resolve `verify-commit.js` failure in git worktrees by @shiqkuangsan in [#193](https://github.com/antdv-next/antdv-next/pull/193)
* fix(config-provider): add missing masonry config to `PASSED_PROPS` by @shiqkuangsan in [#198](https://github.com/antdv-next/antdv-next/pull/198)
* fix(tabs): unresponsive `content` and slot `content` behavior by @ming4762 in [#197](https://github.com/antdv-next/antdv-next/pull/197)
* fix: update `demoTest` path after playground restructure by @shiqkuangsan in [#201](https://github.com/antdv-next/antdv-next/pull/201)
* fix(calendar): use correct `Dayjs` type and `v-model:value` in select demo by @shiqkuangsan in [#202](https://github.com/antdv-next/antdv-next/pull/202)
* fix: fix select hover range by @aibayanyu20 in [#207](https://github.com/antdv-next/antdv-next/pull/207)
* fix(card): emit `update:activeTabKey` and add unit tests by @darkingtail in [#213](https://github.com/antdv-next/antdv-next/pull/213)
* fix(tree-select): avoid duplicate event transmission by @ming4762 in [#210](https://github.com/antdv-next/antdv-next/pull/210)

**🧪 Tests**

This release adds and expands unit tests for multiple components, improving overall test coverage and regression protection.

* test(skeleton): add unit tests by @shiqkuangsan in [#183](https://github.com/antdv-next/antdv-next/pull/183)
* test(typography): add wrapper and semantic tests by @shiqkuangsan in [#194](https://github.com/antdv-next/antdv-next/pull/194)
* test(statistic): add unit tests by @shiqkuangsan in [#191](https://github.com/antdv-next/antdv-next/pull/191)
* test(spin): add unit tests by @shiqkuangsan in [#189](https://github.com/antdv-next/antdv-next/pull/189)
* test(tag): add unit tests by @shiqkuangsan in [#190](https://github.com/antdv-next/antdv-next/pull/190)
* test(masonry): add unit tests by @shiqkuangsan in [#204](https://github.com/antdv-next/antdv-next/pull/204)
* test(timeline): add unit tests by @shiqkuangsan in [#205](https://github.com/antdv-next/antdv-next/pull/205)
* test(tooltip): add tooltip unit test by @cc-hearts in [#211](https://github.com/antdv-next/antdv-next/pull/211)
* test(checkbox): add unit tests for Checkbox and CheckboxGroup by @darkingtail in [#216](https://github.com/antdv-next/antdv-next/pull/216)
* test(cascader): add unit tests for Cascader and CascaderPanel by @darkingtail in [#215](https://github.com/antdv-next/antdv-next/pull/215)
* test(carousel): add unit tests for Carousel by @darkingtail in [#214](https://github.com/antdv-next/antdv-next/pull/214)
* test(grid): add unit tests for Row and Col components by @shiqkuangsan in [#218](https://github.com/antdv-next/antdv-next/pull/218)
* test(radio): add unit tests for Radio, RadioGroup, RadioButton by @shiqkuangsan in [#219](https://github.com/antdv-next/antdv-next/pull/219)
* test(descriptions): add unit tests for Descriptions component by @shiqkuangsan in [#220](https://github.com/antdv-next/antdv-next/pull/220)

**📝 Documentation**

* docs: support layer mode by @aibayanyu20 in [#186](https://github.com/antdv-next/antdv-next/pull/186)
* docs: support sponsor by @aibayanyu20 in [#208](https://github.com/antdv-next/antdv-next/pull/208)

**🛠 Refactor & Maintenance**

* refactor: optimize project structure by @ffgenius in [#195](https://github.com/antdv-next/antdv-next/pull/195)

---

**👏 New Contributors**

Thanks to the following contributors for their first contributions:

* @ming4762 in [#197](https://github.com/antdv-next/antdv-next/pull/197)

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.0.3...antdv-next@1.0.4


## V1.0.3

This release mainly focuses on **improving test coverage, fixing documentation issues, and enhancing overall stability**. It also syncs with antd v6.3.0 and includes performance optimizations for css-in-js.

**✨ Features**

* Sync with **antd v6.3.0** and optimize css-in-js performance (#163)
* SSR support, and add `valueFormat` support for ColorPicker / TimePicker / DatePicker (#177)
* Sync Skeleton component (#171)
* Documentation site now supports custom themes (#166, #178)
* Add unit tests for Avatar and AvatarGroup (#126)

**🐞 Fixes**

* Fix trigger not closing on click (#134)
* Fix hidden cancel button in info/success/warning modals (#167)
* Fix TreeSelect multi-checkbox style issues (#169)
* Fix progress animation overflow (#173)
* Fix inverted responsive collapse logic in Layout Sider (#158, #155)
* Fix eslint config type errors (#142)
* Fix incorrect variable reference (#180)

**🧪 Tests**

This release significantly expands component test coverage and semantic DOM tests, including:

Avatar, Badge, Breadcrumb, Button, Calendar, Divider, Empty, Flex, Input, InputNumber, Layout, QRCode, Rate, Result, Segmented, Space, Switch, Transfer, Tree, TreeSelect, and more.

Related PRs: #128, #130, #136, #137, #140, #143, #145, #147, #148, #151, #154, #156, #159, #160, #161, #162, #172, #175, #176

**📝 Documentation**

* Fix API documentation formatting issues for DatePicker, Select, Upload, Drawer, Image, Anchor, Pagination, and more
* Update breakpoint and collapse callback types in Layout documentation
* Fix Grid documentation syntax
* Fix FloatButton API examples
* Update Button documentation links

Related PRs: #131, #132, #133, #135, #138, #139, #144, #146, #150, #153, #164, #181

---

**👏 New Contributors**

Thanks to the following contributors for their first contributions:

* @Darkingtail
* @shiqkuangsan
* @wujighostking
* @rookie-orange

**Full Changelog**
https://github.com/antdv-next/antdv-next/compare/antdv-next@1.0.2...antdv-next@1.0.3


## V1.0.2 

**Features**

* feat: Sync with Ant Design v6.2.3 by @aibayanyu20 in [#102](https://github.com/antdv-next/antdv-next/pull/102)
* feat: Add `prepare` script by @qianYuanJ in [#109](https://github.com/antdv-next/antdv-next/pull/109)
* docs: Add global search by @aibayanyu20 in [#122](https://github.com/antdv-next/antdv-next/pull/122)

**Bug Fixes**

* fix(input-number): Resolve min/max responsiveness issue and remove console output by @selicens in [#104](https://github.com/antdv-next/antdv-next/pull/104)
* fix: Correct CSS variable calculation error by @ffgenius in [#107](https://github.com/antdv-next/antdv-next/pull/107)
* fix: Restore Vue Language Tools event hints by @aibayanyu20 in [#108](https://github.com/antdv-next/antdv-next/pull/108)
* fix: Fix RangePicker issues by @aibayanyu20 in [#112](https://github.com/antdv-next/antdv-next/pull/112)
* fix(popconfirm): Fix invalid async close behavior when using Promise by @selicens in [#114](https://github.com/antdv-next/antdv-next/pull/114)
* fix: Set default menu title to avoid `null` by @aibayanyu20 in [#125](https://github.com/antdv-next/antdv-next/pull/125)

**Refactor & Maintenance**

* refactor(i18n): Centralize i18n files by @ffgenius in [#116](https://github.com/antdv-next/antdv-next/pull/116)
* chore(i18n): Extract inline locales into centralized files by @ffgenius in [#124](https://github.com/antdv-next/antdv-next/pull/124)
* chore: Update documentation by @yushi0114 in [#111](https://github.com/antdv-next/antdv-next/pull/111)

**Tests**

* test(typography): Add tests by @cc-hearts in [#115](https://github.com/antdv-next/antdv-next/pull/115)
* test(auto-complete): Add unit tests and improve semantic DOM coverage by @ffgenius in [#119](https://github.com/antdv-next/antdv-next/pull/119)
* test(select): Add unit tests and improve semantic DOM coverage by @ffgenius in [#121](https://github.com/antdv-next/antdv-next/pull/121)

**Documentation**

* docs: Fix typo in the Vite usage section by @dzzzzzy in [#118](https://github.com/antdv-next/antdv-next/pull/118)
* fix(docs): Correct typo in the i18n chapter by @dzzzzzy in [#120](https://github.com/antdv-next/antdv-next/pull/120)

**New Contributors**

* @qianYuanJ made their first contribution in [#109](https://github.com/antdv-next/antdv-next/pull/109)
* @yushi0114 made their first contribution in [#111](https://github.com/antdv-next/antdv-next/pull/111)
* @dzzzzzy made their first contribution in [#118](https://github.com/antdv-next/antdv-next/pull/118)

**Full Changelog**
[https://github.com/antdv-next/antdv-next/compare/antdv-next@1.0.1...antdv-next@1.0.2](https://github.com/antdv-next/antdv-next/compare/antdv-next@1.0.1...antdv-next@1.0.2)



## V1.0.0 - 2026-02-03

- Synchronized update to Ant Design v6.2.2
- Fixed several known issues and improved component stability
- Replaced `classNames` → `classes`
- Optimized `Select.Option` to use `options` instead, with the same optimization applied to all Select-type components
- Optimized `Checkbox.Group` to use `options` instead
- Optimized `Radio.Group` to use `options` instead
- For more details, please refer to the [Migration Guide](/docs/vue/migration-antdv-next)

---
Title: Components Overview
URL: https://www.antdv-next.com/components/overview.md
---

`antd` provides plenty of UI components to enrich your web applications, and we will improve components experience consistently.

<ComponentOverview></ComponentOverview>

---
Title: ConfigProvider
URL: https://www.antdv-next.com/components/config-provider.md
---

## When To Use

Provide global configuration for components, such as locale, direction, size, theme, or wave effect.

## Usage

This component provides a configuration to all Vue components underneath itself via provide/inject.

```vue
<template>
  <a-config-provider direction="rtl">
    <App />
  </a-config-provider>
</template>
```

### Content Security Policy {#csp}

Some components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:

```vue
<template>
  <a-config-provider :csp="{ nonce: 'YourNonceCode' }">
    <a-button>My Button</a-button>
  </a-config-provider>
</template>
```

## Examples

### Locale
Components which need localization support are listed here, you can toggle the language in the demo.
```vue
<script setup lang="ts">
import type { ConfigProviderProps, TableProps, TourStepItem, UploadFile } from 'antdv-next'

import { EllipsisOutlined } from '@antdv-next/icons'
import { Modal, theme } from 'antdv-next'
import enUS from 'antdv-next/locale/en_US'
import zhCN from 'antdv-next/locale/zh_CN'
import dayjs from 'dayjs'
import { reactive, ref, shallowRef, watch } from 'vue'
import 'dayjs/locale/zh-cn'

type Locale = ConfigProviderProps['locale']

dayjs.locale('en')

const { token } = theme.useToken()

const localeName = ref<'en-US' | 'zh-CN'>('en-US')

const locale = ref<Locale>(enUS)
const open = ref(false)
const tourOpen = ref(false)
const tourRef1 = shallowRef()
const tourRef2 = shallowRef()
const tourRef3 = shallowRef()

watch(localeName, (next) => {
  dayjs.locale(next === 'zh-CN' ? 'zh-cn' : 'en')
  locale.value = next === 'zh-CN' ? zhCN : enUS
})

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [{ text: 'filter1', value: 'filter1' }],
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
]

const steps: TourStepItem[] = [
  {
    title: 'Upload File',
    description: 'Put your files here.',
    target: tourRef1,
  },
  {
    title: 'Save',
    description: 'Save your changes.',
    target: tourRef2,
  },
  {
    title: 'Other Actions',
    description: 'Click to see other actions.',
    target: tourRef3,
  },
]

const fileList = ref<UploadFile[]>([
  {
    uid: '-1',
    name: 'image.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-2',
    percent: 50,
    name: 'image.png',
    status: 'uploading',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-3',
    name: 'image.png',
    status: 'error',
  },
])

const formState = reactive({
  username: '',
  age: 100,
})

const selectOptions = [
  { label: 'jack', value: 'jack' },
  { label: 'lucy', value: 'lucy' },
]

function showModal() {
  open.value = true
}

function hideModal() {
  open.value = false
}

function info() {
  Modal.info({
    title: 'some info',
    content: 'some info',
  })
}

function confirm() {
  Modal.confirm({
    title: 'some info',
    content: 'some info',
  })
}
</script>

<template>
  <div style="margin-bottom: 16px;">
    <span style="margin-inline-end: 16px;">Change locale of components:</span>
    <a-radio-group v-model:value="localeName">
      <a-radio-button value="en-US">
        English
      </a-radio-button>
      <a-radio-button value="zh-CN">
        中文
      </a-radio-button>
    </a-radio-group>
  </div>
  <a-config-provider :locale="locale">
    <a-space
      vertical
      :size="[0, 16]"
      :style="{
        width: '100%',
        paddingTop: '16px',
        borderTop: `1px solid ${token.colorBorder}`,
      }"
    >
      <a-pagination :default-current="1" :total="50" show-size-changer />
      <a-space wrap>
        <a-select show-search style="width: 200px" :options="selectOptions" />
        <a-date-picker />
        <a-time-picker />
        <a-range-picker />
      </a-space>
      <a-space wrap>
        <a-button type="primary" @click="showModal">
          Show Modal
        </a-button>
        <a-button @click="info">
          Show info
        </a-button>
        <a-button @click="confirm">
          Show confirm
        </a-button>
        <a-popconfirm title="Question?">
          <a href="#">Click to confirm</a>
        </a-popconfirm>
      </a-space>
      <a-transfer :data-source="[]" show-search :target-keys="[]" />
      <div :style="{ width: '320px', border: `1px solid ${token.colorBorder}`, borderRadius: '8px' }">
        <a-calendar :fullscreen="false" :value="dayjs()" />
      </div>
      <a-form
        :model="formState"
        auto-complete="off"
        :label-col="{ sm: { span: 4 } }"
        :wrapper-col="{ span: 6 }"
      >
        <a-form-item label="Username" name="username" :rules="[{ required: true }]">
          <a-input v-model:value="formState.username" :style="{ width: '200px' }" />
        </a-form-item>
        <a-form-item
          label="Age"
          name="age"
          :rules="[{ type: 'number', min: 0, max: 99 }]"
        >
          <a-input-number v-model:value="formState.age" :style="{ width: '200px' }" />
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 2, span: 6 }">
          <a-button type="primary" html-type="submit">
            Submit
          </a-button>
        </a-form-item>
      </a-form>
      <a-table :data-source="[]" :columns="columns" />
      <a-modal v-model:open="open" title="Locale Modal" @cancel="hideModal">
        <p>Locale Modal</p>
      </a-modal>
      <a-space wrap :size="80">
        <a-qrcode value="https://ant.design/" status="expired" @refresh="() => console.log('refresh')" />
        <a-image
          :width="160"
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        />
      </a-space>
      <a-upload v-model:file-list="fileList" list-type="picture-card">
        <div style="padding: 8px 0">
          Upload
        </div>
      </a-upload>
      <a-divider title-placement="start">
        Tour
      </a-divider>
      <a-button type="primary" @click="tourOpen = true">
        Begin Tour
      </a-button>
      <a-space>
        <a-button ref="tourRef1">
          Upload
        </a-button>
        <a-button ref="tourRef2" type="primary">
          Save
        </a-button>
        <a-button ref="tourRef3">
          <template #icon>
            <EllipsisOutlined />
          </template>
        </a-button>
      </a-space>
      <a-tour v-model:open="tourOpen" :steps="steps" />
    </a-space>
  </a-config-provider>
</template>
```
### Direction
Components which support rtl direction are listed here, you can toggle the direction in the demo.
```vue
<script setup lang="ts">
import type { ConfigProviderProps, TreeDataNode, TreeSelectEmits } from 'antdv-next'
import {
  DownloadOutlined,
  LeftOutlined,
  MinusOutlined,
  PlusOutlined,
  RightOutlined,
  SearchOutlined,
  SmileOutlined,
} from '@antdv-next/icons'
import { computed, ref } from 'vue'

type DirectionType = ConfigProviderProps['direction']

type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'

const direction = ref<DirectionType>('ltr')
const placement = computed<Placement>(() => (direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft'))

const currentStep = ref(0)
const rateValue = ref(2.5)
const modalOpen = ref(false)
const badgeCount = ref(5)
const showBadge = ref(true)

const cascaderOptions = [
  {
    value: 'tehran',
    label: 'تهران',
    children: [
      {
        value: 'tehran-c',
        label: 'تهران',
        children: [
          {
            value: 'saadat-abad',
            label: 'سعادت آباد',
          },
        ],
      },
    ],
  },
  {
    value: 'ardabil',
    label: 'اردبیل',
    children: [
      {
        value: 'ardabil-c',
        label: 'اردبیل',
        children: [
          {
            value: 'pirmadar',
            label: 'پیرمادر',
          },
        ],
      },
    ],
  },
  {
    value: 'gilan',
    label: 'گیلان',
    children: [
      {
        value: 'rasht',
        label: 'رشت',
        children: [
          {
            value: 'district-3',
            label: 'منطقه ۳',
          },
        ],
      },
    ],
  },
]

const treeData: TreeDataNode[] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ title: 'sss', key: '0-0-1-0' }],
      },
    ],
  },
]

const treeSelectData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'my leaf',
            title: 'my leaf',
          },
          {
            value: 'your leaf',
            title: 'your leaf',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'random3',
            title: 'random3',
          },
        ],
      },
    ],
  },
]

const treeSelectValue = ref()

function cascaderFilter(inputValue: string, path: { label: string }[]) {
  return path.some(option => option.label.toLowerCase().includes(inputValue.toLowerCase()))
}

function onCascaderChange(value: any) {
  console.log(value)
}

function showModal() {
  modalOpen.value = true
}

function handleModalOk() {
  modalOpen.value = false
}

function handleModalCancel() {
  modalOpen.value = false
}

function onStepsChange(nextStep: number) {
  currentStep.value = nextStep
}

function increaseBadge() {
  badgeCount.value += 1
}

function declineBadge() {
  badgeCount.value = Math.max(badgeCount.value - 1, 0)
}

const handleTreeSelectScroll: TreeSelectEmits['popupScroll'] = (e) => {
  console.log('popup scroll', e)
}
</script>

<template>
  <div style="margin-bottom: 16px;">
    <span style="margin-inline-end: 16px;">Change direction of components:</span>
    <a-radio-group v-model:value="direction">
      <a-radio-button value="ltr">
        LTR
      </a-radio-button>
      <a-radio-button value="rtl">
        RTL
      </a-radio-button>
    </a-radio-group>
  </div>
  <a-config-provider :direction="direction">
    <div class="direction-components">
      <a-row>
        <a-col :span="24">
          <a-divider title-placement="start">
            Cascader example
          </a-divider>
          <a-cascader
            :options="cascaderOptions"
            placeholder="یک مورد انتخاب کنید"
            :placement="placement"
            @change="onCascaderChange"
          >
            <template #suffixIcon>
              <SearchOutlined />
            </template>
          </a-cascader>
          &nbsp;&nbsp;&nbsp;&nbsp;With search:&nbsp;&nbsp;
          <a-cascader
            :options="cascaderOptions"
            placeholder="Select an item"
            :placement="placement"
            :show-search="{ filter: cascaderFilter } as any"
            @change="onCascaderChange"
          >
            <template #suffixIcon>
              <SmileOutlined />
            </template>
          </a-cascader>
        </a-col>
      </a-row>
      <br>
      <a-row>
        <a-col :span="12">
          <a-divider title-placement="start">
            Switch example
          </a-divider>
          &nbsp;&nbsp;
          <a-switch default-checked />
          &nbsp;&nbsp;
          <a-switch default-checked loading />
          &nbsp;&nbsp;
          <a-switch loading size="small" />
        </a-col>
        <a-col :span="12">
          <a-divider title-placement="start">
            Radio Group example
          </a-divider>
          <a-radio-group default-value="c" button-style="solid">
            <a-radio-button value="a">
              تهران
            </a-radio-button>
            <a-radio-button value="b" disabled>
              اصفهان
            </a-radio-button>
            <a-radio-button value="c">
              فارس
            </a-radio-button>
            <a-radio-button value="d">
              خوزستان
            </a-radio-button>
          </a-radio-group>
        </a-col>
      </a-row>
      <br>
      <a-row>
        <a-col :span="12">
          <a-divider title-placement="start">
            Button example
          </a-divider>
          <div class="button-demo">
            <a-button type="primary">
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>
            <a-button type="primary" shape="circle">
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>
            <a-button type="primary" shape="round">
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>
            <a-button type="primary" shape="round">
              <template #icon>
                <DownloadOutlined />
              </template>
              Download
            </a-button>
            <a-button type="primary">
              <template #icon>
                <DownloadOutlined />
              </template>
              Download
            </a-button>
            <br>
            <a-space-compact>
              <a-button type="primary">
                <template #icon>
                  <LeftOutlined />
                </template>
                Backward
              </a-button>
              <a-button type="primary" icon-placement="end">
                <template #icon>
                  <RightOutlined />
                </template>
                Forward
              </a-button>
            </a-space-compact>
            <a-button type="primary" loading>
              Loading
            </a-button>
            <a-button type="primary" size="small" loading>
              Loading
            </a-button>
          </div>
        </a-col>
        <a-col :span="12">
          <a-divider title-placement="start">
            Tree example
          </a-divider>
          <a-tree
            show-line
            checkable
            :default-expanded-keys="['0-0-0', '0-0-1']"
            :default-selected-keys="['0-0-0', '0-0-1']"
            :default-checked-keys="['0-0-0', '0-0-1']"
            :tree-data="treeData"
          >
            <template #titleRender="{ key, title }">
              <template v-if="key === '0-0-1-0'">
                <span style="color: #1677ff">{{ title }}</span>
              </template>
            </template>
          </a-tree>
        </a-col>
      </a-row>
      <br>
      <a-row>
        <a-col :span="24">
          <a-divider title-placement="start">
            Input (Space.Compact) example
          </a-divider>
          <a-space-compact size="large">
            <a-input style="width: 120px" default-value="0571" />
            <a-input style="width: 200px" default-value="26888888" />
          </a-space-compact>
          <br>
          <a-space-compact>
            <a-input style="width: 20%" default-value="0571" />
            <a-input style="width: 30%" default-value="26888888" />
          </a-space-compact>
          <br>
          <a-space-compact>
            <a-select
              default-value="Option1"
              :options="[
                { label: 'Option1', value: 'Option1' },
                { label: 'Option2', value: 'Option2' },
              ]"
            />
            <a-input style="width: 50%" default-value="input content" />
            <a-input-number />
          </a-space-compact>
          <br>
          <a-input-search placeholder="input search text" enter-button="Search" size="large" />
          <br>
          <br>
          <div style="margin-bottom: 16px">
            <a-space-compact>
              <a-select
                default-value="Http://"
                style="width: 90px"
                :options="[
                  { label: 'Http://', value: 'Http://' },
                  { label: 'Https://', value: 'Https://' },
                ]"
              />
              <a-input default-value="mysite" />
              <a-select
                default-value=".com"
                style="width: 80px"
                :options="[
                  { label: '.com', value: '.com' },
                  { label: '.jp', value: '.jp' },
                  { label: '.cn', value: '.cn' },
                  { label: '.org', value: '.org' },
                ]"
              />
            </a-space-compact>
          </div>
          <br>
          <a-row>
            <a-col :span="12">
              <a-divider title-placement="start">
                Select example
              </a-divider>
              <a-space wrap>
                <a-select
                  mode="multiple"
                  :default-value="['مورچه']"
                  style="width: 120px"
                  :options="[
                    { label: 'jack', value: 'jack' },
                    { label: 'مورچه', value: 'مورچه' },
                    { label: 'disabled', value: 'disabled', disabled: true },
                    { label: 'yiminghe', value: 'Yiminghe' },
                  ]"
                />
                <a-select
                  disabled
                  default-value="مورچه"
                  style="width: 120px"
                  :options="[{ label: 'مورچه', value: 'مورچه' }]"
                />
                <a-select
                  loading
                  default-value="مورچه"
                  style="width: 120px"
                  :options="[{ label: 'مورچه', value: 'مورچه' }]"
                />
                <a-select
                  show-search
                  style="width: 200px"
                  placeholder="Select a person"
                  :options="[
                    { label: 'jack', value: 'jack' },
                    { label: 'سعید', value: 'سعید' },
                    { label: 'Tom', value: 'tom' },
                  ]"
                />
              </a-space>
            </a-col>
            <a-col :span="12">
              <a-divider title-placement="start">
                TreeSelect example
              </a-divider>
              <a-tree-select
                v-model:value="treeSelectValue"
                show-search
                style="width: 100%"
                :tree-data="treeSelectData"
                :styles="{
                  popup: {
                    root: { maxHeight: '400px', overflow: 'auto' },
                  },
                }"
                placeholder="Please select"
                allow-clear
                tree-default-expand-all
                @popup-scroll="handleTreeSelectScroll"
              >
                <template #treeTitleRender="item">
                  <template v-if="item.value === 'random3'">
                    <b style="color: #08c">sss</b>
                  </template>
                </template>
              </a-tree-select>
            </a-col>
          </a-row>
          <br>
          <a-row>
            <a-col :span="24">
              <a-divider title-placement="start">
                Modal example
              </a-divider>
              <a-button type="primary" @click="showModal">
                Open Modal
              </a-button>
              <a-modal
                v-model:open="modalOpen"
                title="پنچره ساده"
                @ok="handleModalOk"
                @cancel="handleModalCancel"
              >
                <p>نگاشته‌های خود را اینجا قراردهید</p>
                <p>نگاشته‌های خود را اینجا قراردهید</p>
                <p>نگاشته‌های خود را اینجا قراردهید</p>
              </a-modal>
            </a-col>
          </a-row>
          <br>
          <a-row>
            <a-col :span="24">
              <a-divider title-placement="start">
                Steps example
              </a-divider>
              <a-steps
                type="dot"
                :current="currentStep"
                :items="[
                  { title: 'Finished', content: 'This is a description.' },
                  { title: 'In Progress', content: 'This is a description.' },
                  { title: 'Waiting', content: 'This is a description.' },
                ]"
              />
              <br>
              <a-steps
                :current="currentStep"
                :items="[
                  { title: 'Step 1', content: 'This is a description.' },
                  { title: 'Step 2', content: 'This is a description.' },
                  { title: 'Step 3', content: 'This is a description.' },
                ]"
                @change="onStepsChange"
              />
            </a-col>
          </a-row>
          <br>
          <a-row>
            <a-col :span="12">
              <a-divider title-placement="start">
                Rate example
              </a-divider>
              <a-rate v-model:value="rateValue" allow-half />
              <br>
              <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
              supported after
              <a href="https://github.com/react-component/rate" target="_blank" rel="noreferrer">rc-rate</a>
              implement rtl support.
            </a-col>
            <a-col :span="12">
              <a-divider title-placement="start">
                Badge example
              </a-divider>
              <a-badge :count="badgeCount">
                <a href="#" class="head-example" />
              </a-badge>
              <a-space-compact>
                <a-button @click="declineBadge">
                  <template #icon>
                    <MinusOutlined />
                  </template>
                </a-button>
                <a-button @click="increaseBadge">
                  <template #icon>
                    <PlusOutlined />
                  </template>
                </a-button>
              </a-space-compact>
              <div style="margin-top: 12px;">
                <a-badge :dot="showBadge">
                  <a href="#" class="head-example" />
                </a-badge>
                <a-switch v-model:checked="showBadge" />
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
      <br>
      <br>
      <a-row>
        <a-col :span="24">
          <a-divider title-placement="start">
            Pagination example
          </a-divider>
          <a-pagination :default-current="3" :total="500" show-size-changer />
        </a-col>
      </a-row>
      <br>
      <a-row>
        <a-col :span="24">
          <a-divider title-placement="start">
            Grid System example
          </a-divider>
          <div class="grid-demo">
            <div class="code-box-demo">
              <p>
                <strong>* Note:</strong> Every calculation in RTL grid system is from right side
                (offset, push, etc.)
              </p>
              <a-row>
                <a-col :span="8">
                  col-8
                </a-col>
                <a-col :span="8" :offset="8">
                  col-8
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="6" :offset="6">
                  col-6 col-offset-6
                </a-col>
                <a-col :span="6" :offset="6">
                  col-6 col-offset-6
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12" :offset="6">
                  col-12 col-offset-6
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="18" :push="6">
                  col-18 col-push-6
                </a-col>
                <a-col :span="6" :pull="18">
                  col-6 col-pull-18
                </a-col>
              </a-row>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-config-provider>
</template>

<style scoped>
:deep(.button-demo .ant-btn),
:deep(.button-demo .ant-btn-group) {
  margin-inline-end: 8px;
  margin-bottom: 12px;
}

:deep(.button-demo .ant-btn-group > .ant-btn),
:deep(.button-demo .ant-btn-group > span > .ant-btn) {
  margin-inline-end: 0;
  margin-inline-start: 0;
}

.head-example {
  display: inline-block;
  width: 42px;
  height: 42px;
  vertical-align: middle;
  background: #eee;
  border-radius: 4px;
}

:deep(.ant-badge:not(.ant-badge-not-a-wrapper)) {
  margin-inline-end: 20px;
}

:deep(.ant-badge-rtl:not(.ant-badge-not-a-wrapper)) {
  margin-inline-end: 0;
  margin-inline-start: 20px;
}
</style>
```
### Component size
Config component default size.
```vue
<script setup lang="ts">
import type { ConfigProviderProps, TableProps } from 'antdv-next'
import { ref } from 'vue'

type SizeType = ConfigProviderProps['componentSize']

const componentSize = ref<SizeType>('small')

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
]

const dataSource = [
  { key: '1', name: 'John Brown', age: 32 },
  { key: '2', name: 'Jim Green', age: 42 },
  { key: '3', name: 'Joe Black', age: 32 },
]

const tabItems = [
  {
    label: 'Tab 1',
    key: '1',
    children: 'Content of Tab Pane 1',
  },
  {
    label: 'Tab 2',
    key: '2',
    children: 'Content of Tab Pane 2',
  },
  {
    label: 'Tab 3',
    key: '3',
    children: 'Content of Tab Pane 3',
  },
]
</script>

<template>
  <a-radio-group v-model:value="componentSize">
    <a-radio-button value="small">
      Small
    </a-radio-button>
    <a-radio-button value="medium">
      Medium
    </a-radio-button>
    <a-radio-button value="large">
      Large
    </a-radio-button>
  </a-radio-group>
  <a-divider />
  <a-config-provider :component-size="componentSize">
    <a-space vertical :size="[0, 16]" style="width: 100%">
      <a-input />
      <a-tabs default-active-key="1" :items="tabItems" />
      <a-input-search allow-clear />
      <a-textarea allow-clear />
      <a-select default-value="demo" :options="[{ value: 'demo' }]" />
      <a-date-picker />
      <a-range-picker />
      <a-button>Button</a-button>
      <a-card title="Card">
        <a-table :columns="columns" :data-source="dataSource" />
      </a-card>
    </a-space>
  </a-config-provider>
</template>
```
### Theme
Modify theme by `theme` prop.
```vue
<script setup lang="ts">
import type { Color } from 'antdv-next'
import { computed, reactive } from 'vue'

interface ThemeData {
  borderRadius: number
  colorPrimary: string
  Button?: {
    colorPrimary: string
    algorithm?: boolean
  }
}

const formState = reactive<ThemeData>({
  borderRadius: 6,
  colorPrimary: '#1677ff',
  Button: {
    colorPrimary: '#00B96B',
    algorithm: false,
  },
})

const themeConfig = computed(() => ({
  token: {
    colorPrimary: formState.colorPrimary,
    borderRadius: formState.borderRadius,
  },
  components: {
    Button: {
      colorPrimary: formState.Button?.colorPrimary,
      algorithm: formState.Button?.algorithm,
    },
  },
}))

function handlePrimaryChange(color: Color) {
  formState.colorPrimary = color.toHexString()
}

function handleButtonColorChange(color: Color) {
  if (!formState.Button) {
    formState.Button = { colorPrimary: color.toHexString() }
    return
  }
  formState.Button.colorPrimary = color.toHexString()
}
</script>

<template>
  <div>
    <a-config-provider :theme="themeConfig">
      <a-space>
        <a-input />
        <a-button type="primary">
          Button
        </a-button>
      </a-space>
    </a-config-provider>
    <a-divider />
    <a-form
      :model="formState"
      name="theme"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-item name="colorPrimary" label="Primary Color">
        <a-color-picker :value="formState.colorPrimary" @change-complete="handlePrimaryChange" />
      </a-form-item>
      <a-form-item name="borderRadius" label="Border Radius">
        <a-input-number v-model:value="formState.borderRadius" />
      </a-form-item>
      <a-form-item label="Button">
        <a-form-item :name="['Button', 'algorithm']" label="algorithm" :label-col="{ span: 6 }">
          <a-switch v-model:checked="formState.Button!.algorithm" />
        </a-form-item>
        <a-form-item :name="['Button', 'colorPrimary']" label="Primary Color" :label-col="{ span: 6 }">
          <a-color-picker :value="formState.Button?.colorPrimary" @change-complete="handleButtonColorChange" />
        </a-form-item>
      </a-form-item>
      <a-form-item name="submit" :wrapper-col="{ offset: 4, span: 20 }">
        <a-button type="primary">
          Submit
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
```
### Custom Wave
Wave effect brings dynamic. Use `component` to determine which component use it. You can also use HappyProvider from [`@ant-design/happy-work-theme`](https://github.com/ant-design/happy-work-theme) to implement dynamic wave effect.
```vue
<script setup lang="ts">
import type { ConfigProviderProps } from 'antdv-next'

function createHolder(node: HTMLElement) {
  const { borderWidth } = getComputedStyle(node)
  const borderWidthNum = Number.parseInt(borderWidth, 10)

  const div = document.createElement('div')
  div.style.position = 'absolute'
  div.style.inset = `-${borderWidthNum}px`
  div.style.borderRadius = 'inherit'
  div.style.background = 'transparent'
  div.style.zIndex = '999'
  div.style.pointerEvents = 'none'
  div.style.overflow = 'hidden'
  node.appendChild(div)

  return div
}

function createDot(holder: HTMLElement, color: string, left: number, top: number, size = 0) {
  const dot = document.createElement('div')
  dot.style.position = 'absolute'
  dot.style.left = `${left}px`
  dot.style.top = `${top}px`
  dot.style.width = `${size}px`
  dot.style.height = `${size}px`
  dot.style.borderRadius = '50%'
  dot.style.background = color
  dot.style.transform = 'translate3d(-50%, -50%, 0)'
  dot.style.transition = 'all 1s ease-out'
  holder.appendChild(dot)
  return dot
}

type WaveConfig = NonNullable<ConfigProviderProps['wave']>

const showInsetEffect: WaveConfig['showEffect'] = (node: HTMLElement, { event, component }: { event: MouseEvent, component?: string }) => {
  if (component !== 'Button') {
    return
  }

  const holder = createHolder(node)
  const rect = holder.getBoundingClientRect()
  const left = event.clientX - rect.left
  const top = event.clientY - rect.top

  const dot = createDot(holder, 'rgba(255, 255, 255, 0.65)', left, top)

  requestAnimationFrame(() => {
    dot.ontransitionend = () => {
      holder.remove()
    }

    dot.style.width = '200px'
    dot.style.height = '200px'
    dot.style.opacity = '0'
  })
}

const showShakeEffect: WaveConfig['showEffect'] = (node: HTMLElement, { component }: { component?: string }) => {
  if (component !== 'Button') {
    return
  }

  const seq = [0, -15, 15, -5, 5, 0]
  const itv = 10
  let steps = 0

  const loop = () => {
    cancelAnimationFrame((node as any).effectTimeout)
    ;(node as any).effectTimeout = requestAnimationFrame(() => {
      const currentStep = Math.floor(steps / itv)
      const current = seq[currentStep]
      const next = seq[currentStep + 1]

      if (current === undefined || next === undefined || next === null) {
        node.style.transform = ''
        node.style.transition = ''
        return
      }

      const angle = current + ((next - current) / itv) * (steps % itv)

      node.style.transform = `rotate(${angle}deg)`
      node.style.transition = 'none'

      steps += 1
      loop()
    })
  }

  loop()
}

const showHappyEffect: WaveConfig['showEffect'] = (node: HTMLElement, { event, component }: { event: MouseEvent, component?: string }) => {
  if (component !== 'Button') {
    return
  }

  const holder = createHolder(node)
  const rect = holder.getBoundingClientRect()
  const left = event.clientX - rect.left
  const top = event.clientY - rect.top
  const color = `hsl(${Math.floor(Math.random() * 360)}, 80%, 70%)`

  const dot = createDot(holder, color, left, top, 16)

  requestAnimationFrame(() => {
    dot.ontransitionend = () => {
      holder.remove()
    }
    dot.style.width = '220px'
    dot.style.height = '220px'
    dot.style.opacity = '0'
  })
}

const configs: Array<{ name: string, wave: WaveConfig }> = [
  { name: 'Disabled', wave: { disabled: true } },
  { name: 'Default', wave: {} },
  { name: 'Inset', wave: { showEffect: showInsetEffect } },
  { name: 'Shake', wave: { showEffect: showShakeEffect } },
  { name: 'Happy', wave: { showEffect: showHappyEffect } },
]
</script>

<template>
  <a-flex gap="large" wrap>
    <a-config-provider v-for="item in configs" :key="item.name" :wave="item.wave">
      <a-button type="primary">
        {{ item.name }}
      </a-button>
    </a-config-provider>
  </a-flex>
</template>
```
### Static function
Use `holderRender` to set the `Provider` for the static methods `message`,`modal`,`notification`.
```vue
<script setup lang="ts">
import { StyleProvider } from '@antdv-next/cssinjs'
import { ExclamationCircleFilled } from '@antdv-next/icons'
import { App, ConfigProvider, message, Modal, notification } from 'antdv-next'
import { h, onBeforeUnmount, onMounted } from 'vue'

function holderRender(children: any) {
  return h(
    StyleProvider,
    { hashPriority: 'high' },
    () => h(
      ConfigProvider,
      { componentSize: 'small' },
      {
        default: () => h(App, { message: { maxCount: 1 }, notification: { maxCount: 1 } }, () => children),
      },
    ),
  )
}

onMounted(() => {
  ;(ConfigProvider as any).config({ holderRender })
})

onBeforeUnmount(() => {
  ;(ConfigProvider as any).config({ holderRender: undefined })
})

function showMessage() {
  message.info('This is a normal message')
}

function showNotification() {
  notification.open({
    title: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  })
}

function showModal() {
  Modal.confirm({
    title: 'Do you want to delete these items?',
    icon: h(ExclamationCircleFilled),
    content: 'Some descriptions',
  })
}
</script>

<template>
  <a-space>
    <a-button type="primary" @click="showMessage">
      message
    </a-button>
    <a-button type="primary" @click="showNotification">
      notification
    </a-button>
    <a-button type="primary" @click="showModal">
      Modal
    </a-button>
  </a-space>
</template>
```
### useConfig
Get the value of the parent `Provider`. Such as `DisabledContextProvider`, `SizeContextProvider`.
```vue
<script setup lang="ts">
import type { ConfigProviderProps } from 'antdv-next'
import { ref } from 'vue'
import ConfigDisplay from './use-config-display.vue'

type SizeType = ConfigProviderProps['componentSize']

const componentSize = ref<SizeType>('small')
const disabled = ref(true)
</script>

<template>
  <div>
    <a-space>
      <a-radio-group v-model:value="componentSize">
        <a-radio-button value="small">
          Small
        </a-radio-button>
        <a-radio-button value="medium">
          Medium
        </a-radio-button>
        <a-radio-button value="large">
          Large
        </a-radio-button>
      </a-radio-group>
      <a-checkbox v-model:checked="disabled">
        Form disabled
      </a-checkbox>
    </a-space>
    <a-divider />
    <a-config-provider :component-size="componentSize">
      <div class="example">
        <a-form :disabled="disabled">
          <ConfigDisplay />
        </a-form>
      </div>
    </a-config-provider>
  </div>
</template>
```
### Focus outline
Turn off the visible focus outline of all components globally with `theme.token.focusOutline`. Move across the controls below with the Tab key to compare.
```vue
<script setup lang="ts">
import { computed, ref } from 'vue'

const focusOutline = ref(true)

const themeConfig = computed(() => ({
  token: {
    focusOutline: focusOutline.value,
  },
}))

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'orange', label: 'Orange' },
  { value: 'banana', label: 'Banana' },
]

const current = ref(0)

function onStepChange(value: number) {
  current.value = value
}
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-space>
      focusOutline
      <a-switch v-model:checked="focusOutline" />
    </a-space>

    <a-config-provider :theme="themeConfig">
      <a-space direction="vertical" style="width: 100%">
        <a-input placeholder="Outlined" style="max-width: 240px" />
        <a-input variant="borderless" placeholder="Borderless" style="max-width: 240px" />
        <a-select :options="options" variant="borderless" placeholder="Borderless select" style="width: 240px" />
        <a-rate :default-value="3" />
        <a-steps
          :current="current"
          :items="[{ title: 'First' }, { title: 'Second' }, { title: 'Third' }]"
          @change="onStepChange"
        />
        <a-splitter style="height: 100px; border: 1px solid var(--ant-color-border)">
          <a-splitter-panel collapsible>
            First
          </a-splitter-panel>
          <a-splitter-panel>
            Second
          </a-splitter-panel>
        </a-splitter>
        <a-button>Button</a-button>
      </a-space>
    </a-config-provider>
  </a-space>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| componentDisabled | Config antd component `disabled` | boolean | - | - |
| componentSize | Config antd component size | `small` \| `medium` \| `large` | - | - |
| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | CSPConfig | - | - |
| direction | Set direction of layout. See [demo](#config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | - |
| getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | `(trigger?: HTMLElement) => HTMLElement \| ShadowRoot` | () => document.body | - |
| getTargetContainer | Config Affix, Anchor scroll target container | `() => HTMLElement \| Window \| ShadowRoot` | () => window | - |
| iconPrefixCls | Set icon prefix className | string | `anticon` | - |
| locale | Language package setting, you can find the packages in [antd/locale](http://unpkg.com/antd/locale/) | Locale | - | - |
| popupMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | - |
| popupOverflow | Select like component popup logic. Can set to show in viewport or follow window scroll | `viewport` \| `scroll` | `viewport` | - |
| prefixCls | Set prefix className | string | `ant` | - |
| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | (componentName?: string) => VueNode | - | - |
| theme | Set theme, ref [Customize Theme](/docs/vue/customize-theme) | ThemeConfig | - | - |
| variant | Set variant of data entry components | `outlined` \| `filled` \| `borderless` \| `underlined` | - | - |
| virtual | Disable virtual scroll when set to `false` | boolean | - | - |
| warning | Config warning level, when `strict` is `false`, it will aggregate deprecated information into a single message | WarningContextProps | - | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | (componentName?: string) => any | - |

### ConfigProvider.config() {#config}

Setting `Modal`, `Message`, `Notification` static config. Does not work on hooks.

```ts
import { App, ConfigProvider } from 'antdv-next'
import { h } from 'vue'

ConfigProvider.config({
  holderRender: children => h(
    ConfigProvider,
    {
      prefixCls: 'ant',
      iconPrefixCls: 'anticon',
      theme: { token: { colorPrimary: 'red' } },
    },
    () => h(App, null, () => children),
  ),
})
```

### useConfig() {#useconfig}

Get the value of the parent `Provider`, such as `DisabledContextProvider`, `SizeContextProvider`.

```ts
import { useConfig } from 'antdv-next/config-provider/context'

const config = useConfig()
const { componentDisabled, componentSize } = config.value
```

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| componentDisabled | antd component disabled state | boolean | - | - |
| componentSize | antd component size state | `small` \| `medium` \| `large` | - | - |

### Component Config

The following config keys set common props for corresponding components or global effects. See the related APIs for details:

- `alert`: [Alert](/components/alert#api)
- `anchor`: [Anchor](/components/anchor#api)
- `app`: [App](/components/app#api)
- `avatar`: [Avatar](/components/avatar#api)
- `badge`: [Badge](/components/badge#api)
- `borderBeam`: [BorderBeam](/components/border-beam#api)
- `breadcrumb`: [Breadcrumb](/components/breadcrumb#api)
- `button`: [Button](/components/button#api)
- `calendar`: [Calendar](/components/calendar#api)
- `card`: [Card](/components/card#api)
- `cardMeta`: [Card.Meta](/components/card#cardmeta)
- `carousel`: [Carousel](/components/carousel#api)
- `cascader`: [Cascader](/components/cascader#api)
- `checkbox`: [Checkbox](/components/checkbox#api)
- `collapse`: [Collapse](/components/collapse#api)
- `colorPicker`: [ColorPicker](/components/color-picker#api)
- `datePicker`: [DatePicker](/components/date-picker#api)
- `descriptions`: [Descriptions](/components/descriptions#api)
- `divider`: [Divider](/components/divider#api)
- `drawer`: [Drawer](/components/drawer#api)
- `dropdown`: [Dropdown](/components/dropdown#api)
- `empty`: [Empty](/components/empty#api)
- `flex`: [Flex](/components/flex#api)
- `floatButton`: [FloatButton](/components/float-button#api)
- `floatButtonGroup`: [FloatButton.Group](/components/float-button#floatbuttongroup)
- `form`: [Form](/components/form#api)
- `image`: [Image](/components/image#api)
- `input`: [Input](/components/input#input)
- `inputNumber`: [InputNumber](/components/input-number#api)
- `inputPassword`: [Input.Password](/components/input#input-password)
- `inputSearch`: [Input.Search](/components/input#input-search)
- `layout`: [Layout](/components/layout#api)
- `listy`: [Listy](/components/listy#api)
- `masonry`: [Masonry](/components/masonry#api)
- `mentions`: [Mentions](/components/mentions#api)
- `menu`: [Menu](/components/menu#api)
- `message`: [Message](/components/message#api)
- `modal`: [Modal](/components/modal#api)
- `notification`: [Notification](/components/notification#api)
- `otp`: [Input.OTP](/components/input#input-otp)
- `pagination`: [Pagination](/components/pagination#api)
- `popconfirm`: [Popconfirm](/components/popconfirm#api)
- `popover`: [Popover](/components/popover#api)
- `progress`: [Progress](/components/progress#api)
- `qrcode`: [QRCode](/components/qr-code#api)
- `radio`: [Radio](/components/radio#api)
- `rangePicker`: [RangePicker](/components/date-picker#rangepicker)
- `rate`: [Rate](/components/rate#api)
- `result`: [Result](/components/result#api)
- `ribbon`: [Badge.Ribbon](/components/badge#api)
- `segmented`: [Segmented](/components/segmented#api)
- `select`: [Select](/components/select#api)
- `skeleton`: [Skeleton](/components/skeleton#api)
- `slider`: [Slider](/components/slider#api)
- `space`: [Space](/components/space#api)
- `spin`: [Spin](/components/spin#api)
- `splitter`: [Splitter](/components/splitter#api)
- `statistic`: [Statistic](/components/statistic#api)
- `steps`: [Steps](/components/steps#api)
- `switch`: [Switch](/components/switch#api)
- `table`: [Table](/components/table#api)
- `tabs`: [Tabs](/components/tabs#api)
- `tag`: [Tag](/components/tag#api)
- `textArea`: [Input.TextArea](/components/input#input-textarea)
- `timeline`: [Timeline](/components/timeline#api)
- `timePicker`: [TimePicker](/components/time-picker#api)
- `tooltip`: [Tooltip](/components/tooltip#api)
- `tour`: [Tour](/components/tour#api)
- `transfer`: [Transfer](/components/transfer#api)
- `tree`: [Tree](/components/tree#api)
- `treeSelect`: [TreeSelect](/components/tree-select#api)
- `typography`: [Typography](/components/typography#api)
- `upload`: [Upload](/components/upload#api)
- `wave`: [WaveConfig](#api)

## FAQ

### How to contribute a new language? {#faq-add-locale}

See [Adding new language](/docs/vue/i18n).

### Date-related components locale is not working? {#faq-locale-not-work}

See FAQ [Date-related-components-locale-is-not-working?](/docs/vue/faq#date-related-components-locale-is-not-working)

### Modal throw error when setting `getPopupContainer`? {#faq-get-popup-container}

Related issue: <https://github.com/ant-design/ant-design/issues/19974>

When you config `getPopupContainer` to parentNode globally, Modal will throw error of `triggerNode is undefined` because it did not have a triggerNode. You can try the fix below.

```diff
 <ConfigProvider
-  getPopupContainer={triggerNode => triggerNode.parentNode}
+  getPopupContainer={node => {
+    if (node) {
+      return node.parentNode
+    }
+    return document.body
+  }}
 >
   <App />
 </ConfigProvider>
```

### Why can't ConfigProvider props (like `prefixCls` and `theme`) affect VueNode inside `message.info`, `notification.open`, `Modal.confirm`? {#faq-message-inherit}

Static methods create independent instances which cannot consume ConfigProvider context. Please prefer the hooks or App-provided instances.

### Locale is not working with Vite in production mode? {#faq-vite-locale-not-work}

Related issue: [#39045](https://github.com/ant-design/ant-design/issues/39045)

In production mode of Vite, default exports from cjs file should be used like this: `enUS.default`. So you can directly import locale from `es/` directory like `import enUS from 'antdv-next/es/locale/en_US'` to make dev and production have the same behavior.

### `prefixCls` priority(The former is covered by the latter) {#faq-prefixcls-priority}

1. ConfigProvider.config with prefixCls = prefix-1
2. ConfigProvider.config with holderRender (wraps ConfigProvider prefix-2)
3. message.config with prefixCls = prefix-3

---
Title: DatePicker
URL: https://www.antdv-next.com/components/date-picker.md
---

## When To Use
By clicking the input box, you can select a date from a popup calendar.

## Examples

### Basic
Basic use case. Users can select or input a date in a panel.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const date = shallowRef()
const week = shallowRef()
const month = shallowRef()
const year = shallowRef()
const quarter = shallowRef()
</script>

<template>
  <a-flex gap="small" justify="flex-start" align="flex-start" vertical>
    <a-date-picker v-model:value="date" />
    <a-date-picker v-model:value="week" picker="week" />
    <a-date-picker v-model:value="month" picker="month" />
    <a-date-picker v-model:value="quarter" picker="quarter" />
    <a-date-picker v-model:value="year" picker="year" />
  </a-flex>
</template>
```
### Range Picker
Set range picker type by `picker` prop.
```vue
<script lang="ts" setup>
import { shallowRef } from 'vue'

const date = shallowRef()
const week = shallowRef()
const month = shallowRef()
const quarter = shallowRef()
const year = shallowRef()
</script>

<template>
  <a-space vertical :size="12">
    <a-range-picker v-model:value="date" />
    <a-range-picker v-model:value="date" show-time />
    <a-range-picker v-model:value="week" picker="week" />
    <a-range-picker v-model:value="month" picker="month" />
    <a-range-picker v-model:value="quarter" picker="quarter" />
    <a-range-picker
      :id="{ start: 'startInput', end: 'endInput' }"
      v-model:value="year"
      picker="year"
      @focus="(_, info) => {
        console.log('Focus:', info.range)
      }"
      @blur="(_, info) => {
        console.log('Blur:', info.range)
      }"
    />
  </a-space>
</template>
```
### Multiple
Multiple selections. Does not support `showTime` and `picker="time"`.
```vue
<script setup lang="ts">
import type { DatePickerEmits } from 'antdv-next/date-picker/generatePicker/generateSinglePicker.tsx'
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import { shallowRef } from 'vue'

const defaultValue = [dayjs('2000-01-01'), dayjs('2000-01-03'), dayjs('2000-01-05')]
const smallValue = shallowRef([...defaultValue])
const middleValue = shallowRef([...defaultValue])
const largeValue = shallowRef([...defaultValue])

const handleChange: DatePickerEmits<Dayjs>['change'] = (date, dateString) => {
  console.log(date, dateString)
}
</script>

<template>
  <a-flex vertical gap="small">
    <a-date-picker
      v-model:value="smallValue"
      multiple
      size="small"
      max-tag-count="responsive"
      @change="handleChange"
    />
    <a-date-picker
      v-model:value="middleValue"
      multiple
      max-tag-count="responsive"
      @change="handleChange"
    />
    <a-date-picker
      v-model:value="largeValue"
      multiple
      size="large"
      max-tag-count="responsive"
      @change="handleChange"
    />
  </a-flex>
</template>
```
### Need Confirm
DatePicker will automatically determine whether to show a confirm button according to the `picker` property. You can also set the `needConfirm` property to determine whether to show a confirm button. When `needConfirm` is set, the user must click the confirm button to complete the selection. Otherwise, the selection will be submitted when the picker loses focus or selects a date.
```vue
<script setup lang="ts">
import type { DatePickerProps } from 'antdv-next'
import type { Dayjs } from 'dayjs'

const handleChange: DatePickerProps<Dayjs, false>['onChange'] = (date, dateString) => {
  console.log(date, dateString)
}
</script>

<template>
  <a-date-picker need-confirm @change="handleChange" />
</template>
```
### Switchable picker
Switch in different types of pickers by Select.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

type PickerType = 'time' | 'date' | 'week' | 'month' | 'quarter' | 'year'

const type = shallowRef<PickerType>('time')

const options = [
  { label: 'Time', value: 'time' },
  { label: 'Date', value: 'date' },
  { label: 'Week', value: 'week' },
  { label: 'Month', value: 'month' },
  { label: 'Quarter', value: 'quarter' },
  { label: 'Year', value: 'year' },
]

function handleChange(value: any) {
  console.log(value)
}
</script>

<template>
  <a-space>
    <a-select v-model:value="type" aria-label="Picker Type" :options="options" />
    <a-time-picker v-if="type === 'time'" @change="handleChange" />
    <a-date-picker v-else-if="type === 'date'" @change="handleChange" />
    <a-date-picker v-else :picker="type" @change="handleChange" />
  </a-space>
</template>
```
### Date Format
We can set the date format by `format`. When `format` is an array, the input box can be entered in any of the valid formats of the array.
```vue
<script setup lang="ts">
import type { DatePickerProps } from 'antdv-next'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import { shallowRef } from 'vue'

const dateFormat = 'YYYY/MM/DD'
const weekFormat = 'MM/DD'
const monthFormat = 'YYYY/MM'

/** Manually entering any of the following formats will perform date parsing */
const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY']

dayjs.extend(customParseFormat)

const customFormat: DatePickerProps['format'] = value =>
  `custom format: ${value.format(dateFormat)}`

const customWeekStartEndFormat: DatePickerProps['format'] = value =>
  `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
    .endOf('week')
    .format(weekFormat)}`

const basicValue = shallowRef(dayjs('2015/01/01', dateFormat))
const listValue = shallowRef(dayjs('01/01/2015', dateFormatList[0]))
const monthValue = shallowRef(dayjs('2015/01', monthFormat))
const weekValue = shallowRef(dayjs())
const rangeValue = shallowRef([
  dayjs('2015/01/01', dateFormat),
  dayjs('2015/01/01', dateFormat),
])
const customValue = shallowRef(dayjs('2015/01/01', dateFormat))
</script>

<template>
  <a-space vertical :size="12">
    <a-date-picker v-model:value="basicValue" :format="dateFormat" />
    <a-date-picker v-model:value="listValue" :format="dateFormatList" />
    <a-date-picker
      v-model:value="monthValue"
      picker="month"
      :format="monthFormat"
    />
    <a-date-picker v-model:value="weekValue" picker="week" :format="customWeekStartEndFormat" />
    <a-range-picker
      v-model:value="rangeValue"
      :format="dateFormat"
    />
    <a-date-picker v-model:value="customValue" :format="customFormat" />
  </a-space>
</template>
```
### Value Format
Use `valueFormat` to define the date value format. With it, `v-model:value` can directly use string values.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const singleValue = shallowRef<string | null>('2026-02-12')
const rangeValue = shallowRef<[string | null, string | null] | null>(['2026-02-01', '2026-02-12'])
</script>

<template>
  <a-space vertical :size="12">
    <a-space>
      <a-date-picker
        v-model:value="singleValue"
        value-format="YYYY-MM-DD"
        format="YYYY-MM-DD"
        allow-clear
      />
      <span>value: {{ singleValue ?? 'null' }}</span>
    </a-space>

    <a-space>
      <a-range-picker
        v-model:value="rangeValue"
        value-format="YYYY-MM-DD"
        format="YYYY-MM-DD"
        allow-clear
      />
      <span>value: {{ rangeValue ? `${rangeValue[0]} ~ ${rangeValue[1]}` : 'null' }}</span>
    </a-space>
  </a-space>
</template>
```
### Choose Time
This property provides an additional time selection. When `showTime` is an Object, its properties will be passed on to the built-in `TimePicker`.
```vue
<script setup lang="ts">
function handleOk(value: any) {
  console.log('onOk: ', value)
}

function handleChange(value: any, dateString: string | string[]) {
  console.log('Selected Time: ', value)
  console.log('Formatted Selected Time: ', dateString)
}
</script>

<template>
  <a-space vertical :size="12">
    <a-date-picker show-time @change="handleChange" @ok="handleOk" />
    <a-range-picker
      :show-time="{ format: 'HH:mm' }"
      format="YYYY-MM-DD HH:mm"
      @change="handleChange"
      @ok="handleOk"
    />
  </a-space>
</template>
```
### Mask Format
Align the date format. Switch the selection by arrow keys. Will try to align the date to the last valid date when blur.
```vue
<script setup lang="ts">
function handleChange(date: any, dateString: string | string[]) {
  console.log(date, dateString)
}
</script>

<template>
  <a-space vertical>
    <a-date-picker
      :format="{ format: 'YYYY-MM-DD', type: 'mask' }"
      @change="handleChange"
    />
    <a-date-picker
      :format="{ format: 'YYYY-MM-DD HH:mm:ss', type: 'mask' }"
      @change="handleChange"
    />
  </a-space>
</template>
```
### Limit Date Range
Limit the range of available dates by using `minDate` and `maxDate`.
```vue
<script setup lang="ts">
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import { shallowRef } from 'vue'

dayjs.extend(customParseFormat)

const dateFormat = 'YYYY-MM-DD'
const value = shallowRef(dayjs('2019-09-03', dateFormat))
</script>

<template>
  <a-date-picker
    v-model:value="value"
    :min-date="dayjs('2019-08-01', dateFormat)"
    :max-date="dayjs('2020-10-31', dateFormat)"
  />
</template>
```
### Disabled
A disabled state of the `DatePicker`. You can also set as array to disable one of input.
```vue
<script setup lang="ts">
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import { shallowRef } from 'vue'

dayjs.extend(customParseFormat)

const dateFormat = 'YYYY-MM-DD'
const disabledDateValue = shallowRef(dayjs('2015-06-06', dateFormat))
const disabledMonthValue = shallowRef(dayjs('2015-06', 'YYYY-MM'))
const disabledRangeValue = shallowRef([
  dayjs('2015-06-06', dateFormat),
  dayjs('2015-06-06', dateFormat),
])
const partiallyDisabledRangeValue = shallowRef([
  dayjs('2019-09-03', dateFormat),
  dayjs('2019-11-22', dateFormat),
])
const minMaxValue = shallowRef(dayjs('2019-09-03', dateFormat))
</script>

<template>
  <a-space vertical :size="12">
    <a-date-picker v-model:value="disabledDateValue" disabled />
    <a-date-picker v-model:value="disabledMonthValue" picker="month" disabled />
    <a-range-picker
      v-model:value="disabledRangeValue"
      disabled
    />
    <a-range-picker
      v-model:value="partiallyDisabledRangeValue"
      :disabled="[false, true]"
    />
    <a-date-picker
      v-model:value="minMaxValue"
      :min-date="dayjs('2019-06-01', dateFormat)"
      :max-date="dayjs('2020-06-30', dateFormat)"
    />
  </a-space>
</template>
```
### Disabled Date &amp; Time
Disable specific dates and times by using `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
```vue
<script setup lang="ts">
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'

dayjs.extend(customParseFormat)

function range(start: number, end: number) {
  const result: number[] = []
  for (let i = start; i < end; i++) {
    result.push(i)
  }
  return result
}

function disabledDate(current: any) {
  return current && current < dayjs().endOf('day')
}

function disabledDateForMonth(current: any) {
  return current && current < dayjs().startOf('month')
}

function disabledDateTime() {
  return {
    disabledHours: () => range(0, 24).splice(4, 20),
    disabledMinutes: () => range(30, 60),
    disabledSeconds: () => [55, 56],
  }
}

function disabledRangeTime(_: any, type: 'start' | 'end') {
  if (type === 'start') {
    return {
      disabledHours: () => range(0, 60).splice(4, 20),
      disabledMinutes: () => range(30, 60),
      disabledSeconds: () => [55, 56],
    }
  }
  return {
    disabledHours: () => range(0, 60).splice(20, 4),
    disabledMinutes: () => range(0, 31),
    disabledSeconds: () => [55, 56],
  }
}
</script>

<template>
  <a-space vertical :size="12">
    <a-date-picker
      format="YYYY-MM-DD HH:mm:ss"
      :disabled-date="disabledDate"
      :disabled-time="disabledDateTime"
      :show-time="{ defaultOpenValue: dayjs('00:00:00', 'HH:mm:ss') }"
    />
    <a-date-picker picker="month" :disabled-date="disabledDateForMonth" />
    <a-range-picker :disabled-date="disabledDate" />
    <a-range-picker
      :disabled-date="disabledDate"
      :disabled-time="disabledRangeTime"
      :show-time="{
        hideDisabledOptions: true,
        defaultOpenValue: [
          dayjs('00:00:00', 'HH:mm:ss'),
          dayjs('11:59:59', 'HH:mm:ss'),
        ],
      }"
      format="YYYY-MM-DD HH:mm:ss"
    />
  </a-space>
</template>
```
### Allow Empty
Allow empty for the RangePicker. It's useful when you need to keep the "to date".
```vue
<script setup lang="ts">
function handleChange(date: any, dateString: string | string[]) {
  console.log(date, dateString)
}
</script>

<template>
  <a-range-picker
    :placeholder="['Start Date', 'Till Now']"
    :allow-empty="[false, true]"
    @change="handleChange"
  />
</template>
```
### Select range dates
Using `info.from` of `disabledDate` to limit the dynamic date range selection.
```vue
<script setup lang="ts">
import type { DatePickerProps } from 'antdv-next'
import type { Dayjs } from 'dayjs'

const getYearMonth = (date: Dayjs) => date.year() * 12 + date.month()

const disabled7DaysDate: DatePickerProps['disabledDate'] = (current, { from, type }) => {
  if (from) {
    const minDate = from.add(-6, 'days')
    const maxDate = from.add(6, 'days')

    switch (type) {
      case 'year':
        return current.year() < minDate.year() || current.year() > maxDate.year()
      case 'month':
        return (
          getYearMonth(current) < getYearMonth(minDate)
          || getYearMonth(current) > getYearMonth(maxDate)
        )
      default:
        return Math.abs(current.diff(from, 'days')) >= 7
    }
  }

  return false
}

const disabled6MonthsDate: DatePickerProps['disabledDate'] = (current, { from, type }) => {
  if (from) {
    const minDate = from.add(-5, 'months')
    const maxDate = from.add(5, 'months')

    switch (type) {
      case 'year':
        return current.year() < minDate.year() || current.year() > maxDate.year()
      default:
        return (
          getYearMonth(current) < getYearMonth(minDate)
          || getYearMonth(current) > getYearMonth(maxDate)
        )
    }
  }

  return false
}
</script>

<template>
  <a-space vertical>
    <a-typography-title :level="5">
      7 days range
    </a-typography-title>
    <a-range-picker :disabled-date="disabled7DaysDate" />

    <a-typography-title :level="5">
      6 months range
    </a-typography-title>
    <a-range-picker picker="month" :disabled-date="disabled6MonthsDate" />
  </a-space>
</template>
```
### Preset Ranges
We can set preset ranges to RangePicker to improve user experience. Preset value supports callback function.
```vue
<script setup lang="ts">
import type { RangePickerProps } from 'antdv-next'
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import { h } from 'vue'

const rangePresets: RangePickerProps['presets'] = [
  { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
  { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
]

function handleChange(date: Dayjs | null) {
  if (date) {
    console.log('Date: ', date)
  }
  else {
    console.log('Clear')
  }
}

function handleRangeChange(dates: null | (Dayjs | null)[], dateStrings: string[]) {
  if (dates) {
    console.log('From: ', dates[0], ', to: ', dates[1])
    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
  }
  else {
    console.log('Clear')
  }
}
</script>

<template>
  <a-space vertical :size="12">
    <a-date-picker
      :presets="[
        { label: 'Yesterday', value: dayjs().add(-1, 'd') },
        { label: 'Last Week', value: dayjs().add(-7, 'd') },
        { label: 'Last Month', value: dayjs().add(-1, 'month') },
      ]"
      @change="handleChange"
    />
    <a-range-picker :presets="rangePresets" @change="handleRangeChange" />
    <a-range-picker
      :presets="[
        {
          label: h('span', { 'aria-label': 'Current Time to End of Day' }, 'Now ~ EOD'),
          value: () => [dayjs(), dayjs().endOf('day')],
        },
        ...rangePresets,
      ]"
      show-time
      format="YYYY/MM/DD HH:mm:ss"
      @change="handleRangeChange"
    />
  </a-space>
</template>
```
### Extra Footer
Render extra footer in panel for customized requirements.
```vue
<template>
  <a-space vertical :size="12">
    <a-date-picker>
      <template #renderExtraFooter>
        extra footer
      </template>
    </a-date-picker>
    <a-date-picker show-time>
      <template #renderExtraFooter>
        extra footer
      </template>
    </a-date-picker>
    <a-range-picker>
      <template #renderExtraFooter>
        extra footer
      </template>
    </a-range-picker>
    <a-range-picker show-time>
      <template #renderExtraFooter>
        extra footer
      </template>
    </a-range-picker>
    <a-date-picker picker="month">
      <template #renderExtraFooter>
        extra footer
      </template>
    </a-date-picker>
  </a-space>
</template>
```
### Three Sizes
The input box comes in three sizes: small, medium and large. The `medium` size will be used if `size` is omitted.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

type SizeType = 'large' | 'medium' | 'small'

const size = shallowRef<SizeType>('medium')
</script>

<template>
  <a-space vertical :size="12">
    <a-radio-group v-model:value="size">
      <a-radio-button value="large">
        Large
      </a-radio-button>
      <a-radio-button value="medium">
        medium
      </a-radio-button>
      <a-radio-button value="small">
        Small
      </a-radio-button>
    </a-radio-group>
    <a-date-picker :size="size" />
    <a-date-picker :size="size" picker="month" />
    <a-range-picker :size="size" />
    <a-date-picker :size="size" picker="week" />
  </a-space>
</template>
```
### Customized Cell Rendering
We can customize the rendering of the cells in the calendar by providing a `cellRender` slot to `DatePicker`.
```vue
<script setup lang="ts">
import { theme } from 'antdv-next'

const { token } = theme.useToken()
const highlightStyle = {
  border: `1px solid ${token.value.colorPrimary}`,
  borderRadius: '50%',
}
</script>

<template>
  <a-space vertical :size="12">
    <a-date-picker>
      <template #cellRender="{ current, info }">
        <component :is="info.originNode" v-if="info.type !== 'date'" />
        <div v-else class="ant-picker-cell-inner" :style="current.date() === 1 ? highlightStyle : {}">
          {{ current.date() }}
        </div>
      </template>
    </a-date-picker>
    <a-range-picker>
      <template #cellRender="{ current, info }">
        <component :is="info.originNode" v-if="info.type !== 'date'" />
        <div v-else class="ant-picker-cell-inner" :style="current.date() === 1 ? highlightStyle : {}">
          {{ current.date() }}
        </div>
      </template>
    </a-range-picker>
  </a-space>
</template>
```
### Customize Panel
Replace panel with `components`.
```vue
<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import type { PropType } from 'vue'
import dayjs from 'dayjs'
import { computed, defineComponent, h, ref, resolveComponent, watch } from 'vue'

const MyDatePanel = defineComponent({
  name: 'MyDatePanel',
  // The picker passes panel props (e.g. `prefixCls="ant-picker"`) to the custom
  // component; without this they would fall through to the root `<a-flex>` and make
  // Flex generate styles under the `ant-picker` prefix, clobbering the picker styles.
  inheritAttrs: false,
  props: {
    value: Object as PropType<Dayjs>,
    onSelect: Function as PropType<(value: Dayjs) => void>,
    onHover: Function as PropType<(value: Dayjs) => void>,
  },
  setup(props) {
    const startDate = dayjs().date(1).month(0)
    const innerValue = ref(props.value || startDate)

    watch(
      () => props.value,
      (value) => {
        if (value) {
          innerValue.value = value
        }
      },
    )

    const dateCount = computed(() => {
      const endDate = startDate.add(1, 'year').add(-1, 'day')
      return endDate.diff(startDate, 'day')
    })

    const sliderValue = computed(() => {
      const diff = innerValue.value.diff(startDate, 'day')
      return Math.min(Math.max(0, diff), dateCount.value)
    })

    const handleChange = (nextValue: number) => {
      const nextDate = startDate.add(nextValue, 'day')
      innerValue.value = nextDate
      props.onHover?.(nextDate)
    }

    const handleSelect = () => {
      props.onSelect?.(innerValue.value)
    }

    return () => {
      const Flex = resolveComponent('a-flex') as any
      const Slider = resolveComponent('a-slider') as any
      const Title = resolveComponent('a-typography-title') as any
      const Button = resolveComponent('a-button') as any

      return h(
        Flex,
        { vertical: true, gap: 'small', style: { padding: '16px' } },
        {
          default: () => [
            h(Title, { level: 4, style: { margin: 0 }, title: 'no, it\'s not' }, () => 'The BEST Picker Panel'),
            h(Slider, {
              min: 0,
              max: dateCount.value,
              value: sliderValue.value,
              onChange: handleChange,
              tooltip: {
                formatter: (nextValue?: number) =>
                  startDate.add(nextValue || 0, 'day').format('YYYY-MM-DD'),
              },
            }),
            h(Button, { type: 'primary', onClick: handleSelect }, () => 'That\'s It!'),
          ],
        },
      )
    }
  },
})

function handleChange(date: any, dateString: string | string[]) {
  console.log(date, dateString)
}
</script>

<template>
  <a-space vertical>
    <a-date-picker
      :show-now="false"
      :components="{ date: MyDatePanel }"
      @change="handleChange"
    />
  </a-space>
</template>
```
### External use panel
Custom menu, external selection panel.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import type { Dayjs } from 'dayjs'
import { DownOutlined } from '@antdv-next/icons'
import dayjs from 'dayjs'
import { computed, h, ref, resolveComponent } from 'vue'

const dateDropdownOpen = ref(false)
const datePanelOpen = ref(false)
const dateValue = ref<Dayjs | null>(dayjs())

const rangeDropdownOpen = ref(false)
const rangePanelOpen = ref(false)
const rangeValue = ref<[Dayjs, Dayjs] | null>([dayjs(), dayjs().add(1, 'day')])

const DatePicker = resolveComponent('a-date-picker') as any
const RangePicker = resolveComponent('a-range-picker') as any

const dateMenuItems = computed<MenuItemType[]>(() => [
  {
    key: 'today',
    label: 'Today',
    onClick() {
      dateValue.value = dayjs()
      dateDropdownOpen.value = false
    },
  },
  {
    key: 'tomorrow',
    label: 'Tomorrow',
    onClick() {
      dateValue.value = dayjs().add(1, 'day')
      dateDropdownOpen.value = false
    },
  },
  {
    key: 'custom-date',
    label: h(
      'div',
      {
        style: { position: 'relative', overflow: 'hidden' },
        onClick: (event: MouseEvent) => {
          event.stopPropagation()
          datePanelOpen.value = true
        },
      },
      [
        h('div', 'Customize'),
        h(
          'div',
          {
            onClick: (event: MouseEvent) => {
              event.stopPropagation()
            },
          },
          [
            h(DatePicker, {
              open: datePanelOpen.value,
              styles: {
                root: {
                  pointerEvents: 'none',
                  opacity: 0,
                  position: 'absolute',
                  bottom: -12,
                  insetInlineStart: 0,
                },
              },
              onChange: (value: Dayjs | null) => {
                dateValue.value = value
                dateDropdownOpen.value = false
                datePanelOpen.value = false
              },
            }),
          ],
        ),
      ],
    ),
  },
])

const rangeMenuItems = computed<MenuItemType[]>(() => [
  {
    key: '7',
    label: '7 days',
    onClick() {
      rangeValue.value = [dayjs(), dayjs().add(7, 'day')]
      rangeDropdownOpen.value = false
    },
  },
  {
    key: '30',
    label: '30 days',
    onClick() {
      rangeValue.value = [dayjs(), dayjs().add(30, 'day')]
      rangeDropdownOpen.value = false
    },
  },
  {
    key: 'custom-date',
    label: h(
      'div',
      {
        style: { position: 'relative', overflow: 'hidden' },
        onClick: (event: MouseEvent) => {
          event.stopPropagation()
          rangePanelOpen.value = true
        },
      },
      [
        h('div', 'Customize'),
        h(
          'div',
          {
            onClick: (event: MouseEvent) => {
              event.stopPropagation()
            },
          },
          [
            h(RangePicker, {
              open: rangePanelOpen.value,
              styles: {
                root: {
                  pointerEvents: 'none',
                  opacity: 0,
                  position: 'absolute',
                  bottom: 0,
                  insetInlineStart: 0,
                },
              },
              onChange: (ranges: [Dayjs, Dayjs] | null) => {
                if (ranges?.[0] && ranges?.[1]) {
                  rangeValue.value = [ranges[0], ranges[1]]
                }
                else {
                  rangeValue.value = null
                }
                rangeDropdownOpen.value = false
                rangePanelOpen.value = false
              },
            }),
          ],
        ),
      ],
    ),
  },
])

const dateMenu = computed(() => ({ items: dateMenuItems.value }))
const rangeMenu = computed(() => ({ items: rangeMenuItems.value }))

function handleDateOpenChange(nextOpen: boolean) {
  dateDropdownOpen.value = nextOpen
  if (!nextOpen) {
    datePanelOpen.value = false
  }
}

function handleRangeOpenChange(nextOpen: boolean) {
  rangeDropdownOpen.value = nextOpen
  if (!nextOpen) {
    rangePanelOpen.value = false
  }
}
</script>

<template>
  <div style="display: flex; gap: 20%;">
    <div>
      <div style="margin-bottom: 12px;">
        DatePicker
      </div>
      <a-dropdown
        arrow
        :open="dateDropdownOpen"
        :menu="dateMenu"
        :trigger="['click']"
        destroy-on-hidden
        @open-change="handleDateOpenChange"
      >
        <a @click.prevent>
          <a-space>
            <span>{{ dateValue?.format('YYYY-MM-DD') }}</span>
            <DownOutlined />
          </a-space>
        </a>
      </a-dropdown>
    </div>

    <div>
      <div style="margin-bottom: 12px;">
        RangePicker
      </div>
      <a-dropdown
        arrow
        :open="rangeDropdownOpen"
        :menu="rangeMenu"
        :trigger="['click']"
        destroy-on-hidden
        @open-change="handleRangeOpenChange"
      >
        <a @click.prevent>
          <a-space>
            <span>
              {{
                rangeValue
                  ? `${rangeValue[0].format('YYYY-MM-DD')} ~ ${rangeValue[1].format('YYYY-MM-DD')}`
                  : 'Select range'
              }}
            </span>
            <DownOutlined />
          </a-space>
        </a>
      </a-dropdown>
    </div>
  </div>
</template>
```
### Buddhist Era
Use `locale` to support special calendar format.
```vue
<script setup lang="ts">
import en from 'antdv-next/date-picker/locale/en_US'
import enUS from 'antdv-next/locale/en_US'
import dayjs from 'dayjs'
import buddhistEra from 'dayjs/plugin/buddhistEra'
import { shallowRef } from 'vue'

dayjs.extend(buddhistEra)

const buddhistLocale: typeof en = {
  ...en,
  lang: {
    ...en.lang,
    fieldDateFormat: 'BBBB-MM-DD',
    fieldDateTimeFormat: 'BBBB-MM-DD HH:mm:ss',
    yearFormat: 'BBBB',
    cellYearFormat: 'BBBB',
  },
}

const globalBuddhistLocale: typeof enUS = {
  ...enUS,
  DatePicker: {
    ...enUS.DatePicker!,
    lang: buddhistLocale.lang,
  },
}

const defaultValue = dayjs('2024-01-01')
const localeDateValue = shallowRef(defaultValue)
const localeDateTimeValue = shallowRef(defaultValue)
const providerDateValue = shallowRef(defaultValue)
const providerDateTimeValue = shallowRef(defaultValue)

function handleChange(_: any, dateStr: string | string[]) {
  console.log('onChange:', dateStr)
}
</script>

<template>
  <a-space vertical :size="12">
    <a-typography-title :level="4" style="margin: 0;" title="no, it's not">
      By locale props
    </a-typography-title>
    <a-date-picker v-model:value="localeDateValue" :locale="buddhistLocale" @change="handleChange" />
    <a-date-picker
      v-model:value="localeDateTimeValue"
      show-time
      :locale="buddhistLocale"
      @change="handleChange"
    />

    <a-typography-title :level="4" style="margin: 0;">
      By ConfigProvider
    </a-typography-title>
    <a-config-provider :locale="globalBuddhistLocale">
      <a-space vertical :size="12">
        <a-date-picker v-model:value="providerDateValue" @change="handleChange" />
        <a-date-picker v-model:value="providerDateTimeValue" show-time @change="handleChange" />
      </a-space>
    </a-config-provider>
  </a-space>
</template>
```
### Status
Add status to DatePicker with `status`, which could be `error` or `warning`.
```vue
<template>
  <a-space vertical style="width: 100%;">
    <a-date-picker status="error" style="width: 100%;" />
    <a-date-picker status="warning" style="width: 100%;" />
    <a-range-picker status="error" style="width: 100%;" />
    <a-range-picker status="warning" style="width: 100%;" />
  </a-space>
</template>
```
### Variants
Variants of DatePicker, there are four variants: `outlined` `filled` `borderless` and `underlined`.
```vue
<template>
  <a-flex vertical :gap="12">
    <a-flex :gap="8">
      <a-date-picker placeholder="Outlined" />
      <a-range-picker :placeholder="['Outlined Start', 'Outlined End']" />
    </a-flex>
    <a-flex :gap="8">
      <a-date-picker placeholder="Filled" variant="filled" />
      <a-range-picker :placeholder="['Filled Start', 'Filled End']" variant="filled" />
    </a-flex>
    <a-flex :gap="8">
      <a-date-picker placeholder="Borderless" variant="borderless" />
      <a-range-picker :placeholder="['Borderless Start', 'Borderless End']" variant="borderless" />
    </a-flex>
    <a-flex :gap="8">
      <a-date-picker placeholder="Underlined" variant="underlined" />
      <a-range-picker :placeholder="['Underlined Start', 'Underlined End']" variant="underlined" />
    </a-flex>
  </a-flex>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of DatePicker by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { DatePickerProps } from 'antdv-next'
import { theme } from 'antdv-next'

const { useToken } = theme
const { token } = useToken()

const customClasses = {
  root: 'custom-datepicker-root',
}

const stylesObject: DatePickerProps['styles'] = {
  input: { fontStyle: 'italic' },
  suffix: { opacity: 0.85 },
}

const stylesFn: DatePickerProps['styles'] = (info) => {
  if (info.props.size === 'large') {
    return {
      root: { borderColor: '#722ed1' },
      popup: {
        container: { border: '1px solid #722ed1', borderRadius: '8px' },
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-date-picker :classes="customClasses" :styles="stylesObject" placeholder="Object" />
    <a-date-picker :classes="customClasses" :styles="stylesFn" placeholder="Function" size="large" />
  </a-flex>
</template>

<style scoped>
.custom-datepicker-root {
  border: 1px solid v-bind('token.colorPrimary');
  width: 200px;
}
</style>
```
### Placement
You can manually specify the position of the popup via `placement`.
```vue
<script setup lang="ts">
import type { DatePickerProps } from 'antdv-next'
import { shallowRef } from 'vue'

type PlacementType = DatePickerProps['placement']

const placement = shallowRef<PlacementType>('topLeft')
</script>

<template>
  <a-space vertical :size="12">
    <a-radio-group v-model:value="placement">
      <a-radio-button value="topLeft">
        topLeft
      </a-radio-button>
      <a-radio-button value="topRight">
        topRight
      </a-radio-button>
      <a-radio-button value="bottomLeft">
        bottomLeft
      </a-radio-button>
      <a-radio-button value="bottomRight">
        bottomRight
      </a-radio-button>
    </a-radio-group>
    <a-date-picker :placement="placement" />
    <a-range-picker :placement="placement" />
  </a-space>
</template>
```
### Prefix and Suffix
Custom `prefix` and `suffixIcon`.
```vue
<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import { SmileOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const smileIcon = h(SmileOutlined)

function handleChange(date: Dayjs | (Dayjs | null)[] | null, dateString: string | string[] | null) {
  console.log(date, dateString)
}
</script>

<template>
  <a-space vertical :size="12">
    <a-date-picker :suffix-icon="smileIcon" @change="handleChange" />
    <a-date-picker :suffix-icon="smileIcon" picker="month" @change="handleChange" />
    <a-range-picker :suffix-icon="smileIcon" @change="handleChange" />
    <a-date-picker :suffix-icon="smileIcon" picker="week" @change="handleChange" />
    <a-date-picker suffix-icon="ab" @change="handleChange" />
    <a-date-picker suffix-icon="ab" picker="month" @change="handleChange" />
    <a-range-picker suffix-icon="ab" @change="handleChange" />
    <a-date-picker suffix-icon="ab" picker="week" @change="handleChange" />
    <a-date-picker :prefix="smileIcon" picker="week" @change="handleChange" />
    <a-date-picker prefix="Event Period" picker="week" @change="handleChange" />
    <a-range-picker :prefix="smileIcon" picker="week" @change="handleChange" />
    <a-range-picker prefix="Event Period" picker="week" @change="handleChange" />
  </a-space>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

There are five kinds of picker:

- DatePicker
- DatePicker[picker="month"]
- DatePicker[picker="week"]
- DatePicker[picker="year"]
- DatePicker[picker="quarter"]
- RangePicker

### Localization

The default locale is en-US, if you need to use other languages, recommend to use internationalized components provided by us at the entrance. Look at: [ConfigProvider](/components/config-provider/).

If there are special needs (only modifying single component language), Please use the property: locale. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json).

```vue
<script setup lang="ts">
import zhCN from 'antdv-next/locale/zh_CN'
import dayjs from 'dayjs'

import 'dayjs/locale/zh-cn'

dayjs.locale('zh-cn')
</script>

<template>
  <a-config-provider :locale="zhCN">
    <a-date-picker :default-value="dayjs('2015-01-01', 'YYYY-MM-DD')" />
  </a-config-provider>
</template>
```

### Common API

The following APIs are shared by DatePicker, RangePicker.

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowClear | Customize clear button | boolean \| \{ clearIcon?: VueNode \} | true | - | ✓ |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | - | ✓ |
| dateRender | Custom rendering function for date cells, Deprecated. Please use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => VueNode | - | - | × |
| cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: VueNode, today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => VueNode | - | - | × |
| components | Custom panels. A custom panel component should set `inheritAttrs: false`; otherwise the picker-injected props (e.g. `prefixCls`) fall through to its root node, causing child components (such as Flex) to emit styles under the wrong prefix and break the panel layout | Record<Panel \| 'input', Component> | - | - | × |
| defaultOpen | Initial open state of picker | boolean | - | - | × |
| disabled | Determine whether the DatePicker is disabled | boolean | false | - | × |
| disabledDate | Specify the date that cannot be selected | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | - | × |
| format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#date-picker-demo-format) | [formatType](#formattype) | [@rc-component/picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | - | × |
| valueFormat | Set the binding value format. After setting, `value`, `defaultValue`, and `v-model:value` can use formatted strings, and `change` returns strings in the same format. Demo: [Value Format](#date-picker-demo-value-format) | string | - | - | × |
| order | Auto order date when multiple or range selection | boolean | true | - | × |
| ~~popupClassName~~ | To customize the className of the popup calendar, use `classes.popup.root` instead | string | - | - | × |
| preserveInvalidOnBlur | Not clean input on blur even when the typing is invalidate | boolean | false | - | × |
| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | - | × |
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | - | × |
| locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | - | × |
| minDate | The minimum date, which also limits the range of panel switching | dayjs | - | - | × |
| maxDate | The maximum date, which also limits the range of panel switching | dayjs | - | - | × |
| mode | The picker panel mode（ [Cannot select year or month anymore?](/docs/vue/faq#when-set-mode-to-datepickerrangepicker-cannot-select-year-or-month-anymore) ) | `time` \| `date` \| `month` \| `year` \| `decade` | - | - | × |
| needConfirm | Need click confirm button to trigger value change. Default `false` when `multiple` | boolean | - | - | × |
| nextIcon | The custom next icon | VueNode | - | - | × |
| open | The open state of picker | boolean | - | - | × |
| panelRender | Customize panel render | (panelNode) => VueNode | - | - | × |
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | - | × |
| placeholder | The placeholder of date input | string \| [string, string] | - | - | × |
| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | - | × |
| ~~popupStyle~~ | To customize the style of the popup calendar, use `styles.popup.root` instead | CSSProperties | {} | - | × |
| prefix | The custom prefix | VueNode | - | - | × |
| presets | The preset ranges for quick selection, The preset value supports callback functions. | { label: VueNode, value: Dayjs \| (() => Dayjs) }[] | - | - | × |
| prevIcon | The custom prev icon | VueNode | - | - | × |
| previewValue | When the user selects the date hover option, the value of the input field undergoes a temporary change | false \| hover | hover | - | × |
| size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `medium` \| `small` | - | - | × |
| status | Set validation status | 'error' \| 'warning' | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - | ✓ |
| suffixIcon | The custom suffix icon | VueNode | - | - | ✓ |
| superNextIcon | The custom super next icon | VueNode | - | - | × |
| superPrevIcon | The custom super prev icon | VueNode | - | - | × |
| clearIcon | (Only supports global configuration) Custom clear icon | VueNode | - | - | ✓ |
| variant | Variants of picker | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |

### Common Methods

| Name | Description | Version |
| --- | --- | --- |
| blur() | Remove focus | - |
| focus() | Get focus | - |

### DatePicker

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultPickerValue | Default panel date, will be reset when panel open | [dayjs](https://day.js.org/) | - | - |
| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [dayjs](https://day.js.org/) | - | - |
| disabledTime | To specify the time that cannot be selected | function(date) | - | - |
| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM-DD` | - |
| multiple | Enable multiple selection. Not support `showTime` | boolean | false | - |
| pickerValue | Panel date. Used for controlled switching of panel date. Work with `onPanelChange` | [dayjs](https://day.js.org/) | - | - |
| renderExtraFooter | Render extra footer in panel | (mode) => VueNode | - | - |
| showNow | Show the fast access of current datetime | boolean | - | - |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | - |
| ~~showTime.defaultValue~~ | Use `showTime.defaultOpenValue` instead | [dayjs](https://day.js.org/) | dayjs() | - |
| showTime.defaultOpenValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | - |
| showWeek | Show week info when in DatePicker | boolean | false | - |
| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |

### DatePicker[picker=year]

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | - |
| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY` | - |
| multiple | Enable multiple selection | boolean | false | - |
| renderExtraFooter | Render extra footer in panel | () => VueNode | - | - |
| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |

### DatePicker[picker=quarter]


| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | - |
| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-\QQ` | - |
| multiple | Enable multiple selection | boolean | false | - |
| renderExtraFooter | Render extra footer in panel | () => VueNode | - | - |
| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |

### DatePicker[picker=month]

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | - |
| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM` | - |
| multiple | Enable multiple selection | boolean | false | - |
| renderExtraFooter | Render extra footer in panel | () => VueNode | - | - |
| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |

### DatePicker[picker=week]

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | To set default date | [dayjs](https://day.js.org/) | - | - |
| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-wo` | - |
| multiple | Enable multiple selection | boolean | false | - |
| renderExtraFooter | Render extra footer in panel | (mode) => VueNode | - | - |
| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/) | - | - |
| showWeek | Show week info when in DatePicker | boolean | true | - |

### RangePicker

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowEmpty | Allow start or end input leave empty | [boolean, boolean] | [false, false] | - | × |
| cellRender | Custom rendering function for picker cells | (current: dayjs, info: { originNode: VueNode, today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => VueNode | - | - | × |
| dateRender | Custom rendering function for date cells, Deprecated. Please use `cellRender` instead. | function(currentDate: dayjs, today: dayjs) => VueNode | - | - | × |
| defaultPickerValue | Default panel date, will be reset when panel open | [dayjs](https://day.js.org/)[] | - | - | × |
| defaultValue | To set default date | [dayjs](https://day.js.org/)[] | - | - | × |
| disabled | If disable start or end | [boolean, boolean] | - | - | × |
| disabledTime | To specify the time that cannot be selected |`function(date: dayjs, partial: start \| end, info: { from?: dayjs })`| - | - | × |
| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` | - | × |
| id | Config input ids | `{ start?: string, end?: string }` | - | - | × |
| pickerValue | Panel date. Used for controlled switching of panel date. Work with `onPanelChange` | [dayjs](https://day.js.org/)[] | - | - | × |
| presets | The preset ranges for quick selection, The preset value supports callback functions. | { label: VueNode, value: (Dayjs \| (() => Dayjs))[] }[] | - | - | × |
| renderExtraFooter | Render extra footer in panel | () => VueNode | - | - | × |
| separator | Set separator between inputs | VueNode | `<SwapRightOutlined />` | - | ✓ |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | - | × |
| ~~showTime.defaultValue~~ | Use `showTime.defaultOpenValue` instead | [dayjs](https://day.js.org/)[] | [dayjs(), dayjs()] | - | × |
| showTime.defaultOpenValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)[] | [dayjs(), dayjs()] | - | × |
| value | To set date, support `v-model:value` | [dayjs](https://day.js.org/)[] | - | - | × |

#### formatType

```typescript
import type { Dayjs } from 'dayjs'

type Generic = string
type GenericFn = (value: Dayjs) => string

export type FormatType
  = | Generic
    | GenericFn
    | Array<Generic | GenericFn>
    | {
      format: string
      type?: 'mask'
    }
```

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback function, can be executed when the selected time is changing | (date: Dayjs \| Dayjs[] \| null, dateString: string \| string[] \| null) => void | - |
| update:value | - | (date: Dayjs \| Dayjs[] \| null) => void | - |
| calendarChange | Callback function, can be executed when the start time or the end time of the range is changing. The `info` argument is available. | (dates: [Dayjs, Dayjs], dateStrings: [string, string], info: { range: 'start' \| 'end' }) => void | - |
| panelChange | Callback when picker panel mode is changed | (value: Dayjs, mode: PickerMode) => void | - |
| openChange | Callback function, can be executed whether the popup calendar is popped up or closed | (open: boolean) => void | - |
| ok | Callback when click ok button | () => void | - |
| clear | Callback when click clear button | () => void | 1.4.0 |
| select | - | (date: Dayjs) => void | - |
| focus | Trigger when get focus | (event: FocusEvent, info: { range: 'start' \| 'end' }) => void | - |
| blur | Trigger when lose focus | (event: FocusEvent, info: { range: 'start' \| 'end' }) => void | - |
| keydown | - | (event: KeyboardEvent, preventDefault: VoidFunction) => void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| prefix | The custom prefix | () => any | - |
| suffixIcon | The custom suffix icon | () => any | - |
| renderExtraFooter | Render extra footer in panel | (mode: PickerMode) => any | - |
| panelRender | Customize panel render | (originPanel: VueNode) => any | - |
| inputRender | - | (props: Record<string, any>) => any | - |
| cellRender | Custom rendering function for picker cells | (ctx: { current: AnyObject, info: any }) => any | - |
| dateRender | Custom rendering function for date cells, Deprecated. Please use `cellRender` instead. | (ctx: { date: AnyObject, today: AnyObject }) => any | - |
| monthCellRender | - | (ctx: { date: AnyObject, locale: any }) => any | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="DatePicker"></ComponentTokenTable>

## FAQ

### When set mode to DatePicker/RangePicker, cannot select year or month anymore? {#faq-mode-cannot-select}

Please refer [FAQ](/docs/vue/faq#when-set-mode-to-datepickerrangepicker-cannot-select-year-or-month-anymore)

### Why does the date picker switch to the date panel after selecting the year instead of the month panel? {#faq-year-to-date-panel}

After selecting the year, the system directly switches to the date panel instead of month panel. This design is intended to reduce the user's operational burden by allowing them to complete the year modification with just one click, without having to enter the month selection interface again. At the same time, it also avoids additional cognitive burden of remembering the month.

### How to use DatePicker with customize date library like dayjs? {#faq-custom-date-library}

Please refer [Use custom date library](/docs/vue/use-custom-date-library#datepicker)

### Why config dayjs.locale globally not work? {#faq-locale-not-work}

DatePicker default set `locale` as `en` in v4. You can config DatePicker `locale` prop or [ConfigProvider `locale`](/components/config-provider) prop instead.

#### Date-related components locale is not working?

See FAQ [Date-related-components-locale-is-not-working?](/docs/vue/faq#date-related-components-locale-is-not-working)

### How to modify start day of week? {#faq-week-start-day}

Please use correct [language](/docs/vue/i18n) ([#5605](https://github.com/ant-design/ant-design/issues/5605)), or update dayjs `locale` config:

- Example: <https://codesandbox.io/s/dayjs-day-of-week-x9tuj2?file=/demo.tsx>

```js
import dayjs from 'dayjs'

import updateLocale from 'dayjs/plugin/updateLocale'

import 'dayjs/locale/zh-cn'

dayjs.extend(updateLocale)
dayjs.updateLocale('zh-cn', {
  weekStart: 0,
})
```

### Why origin panel don't switch when using `panelRender`? {#faq-panel-render-switch}

When you change the layout of nodes by `panelRender`, React will unmount and re-mount it which reset the component state. You should keep the layout stable. Please ref [#27263](https://github.com/ant-design/ant-design/issues/27263) for more info.

### How to understand disabled time and date? {#faq-disabled-date-time}

Please refer to the blog ['Why is it so hard to disable the date?'](/docs/blog/picker), to learn how to use it.

---
Title: Descriptions
URL: https://www.antdv-next.com/components/descriptions.md
---

## When To Use

Commonly displayed on the details page.

## Examples

### Basic
Simplest Usage.
```vue
<script setup lang="ts">
const items = [
  {
    key: '1',
    label: 'UserName',
    content: 'Zhou Maomao',
  },
  {
    key: '2',
    label: 'Telephone',
    content: '1810000000',
  },
  {
    key: '3',
    label: 'Live',
    content: 'Hangzhou, Zhejiang',
  },
  {
    key: '4',
    label: 'Remark',
    content: 'empty',
  },
  {
    key: '5',
    label: 'Address',
    content: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
  },
]
</script>

<template>
  <a-descriptions title="User Info" :items="items" />
</template>
```
### border
Descriptions with border and background color.
```vue
<script setup lang="ts">
const items = [
  {
    key: '1',
    label: 'Product',
    content: 'Cloud Database',
  },
  {
    key: '2',
    label: 'Billing Mode',
    content: 'Prepaid',
  },
  {
    key: '3',
    label: 'Automatic Renewal',
    content: 'YES',
  },
  {
    key: '4',
    label: 'Order time',
    content: '2018-04-24 18:00:00',
  },
  {
    key: '5',
    label: 'Usage Time',
    content: '2019-04-24 18:00:00',
    span: 2,
  },
  {
    key: '6',
    label: 'Status',
    span: 3,
  },
  {
    key: '7',
    label: 'Negotiated Amount',
    content: '$80.00',
  },
  {
    key: '8',
    label: 'Discount',
    content: '$20.00',
  },
  {
    key: '9',
    label: 'Official Receipts',
    content: '$60.00',
  },
  {
    key: '10',
    label: 'Config Info',
  },
]
</script>

<template>
  <a-descriptions title="User Info" :items="items" bordered>
    <template #contentRender="{ index, item }">
      <template v-if="index === 5">
        <a-badge status="processing" text="running" />
      </template>
      <template v-if="item.key === '10'">
        Data disk type: MongoDB
        <br>
        Database version: 3.4
        <br>
        Package: dds.mongo.mid
        <br>
        Storage space: 10 GB
        <br>
        Replication factor: 3
        <br>
        Region: East China 1
        <br>
      </template>
    </template>
  </a-descriptions>
</template>
```
### Custom size
Custom sizes to fit in a variety of containers.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const size = ref<'large' | 'medium' | 'small'>('large')
const borderItems = [
  {
    key: '1',
    label: 'Product',
    content: 'Cloud Database',
  },
  {
    key: '2',
    label: 'Billing Mode',
    content: 'Prepaid',
  },
  {
    key: '3',
    label: 'Automatic Renewal',
    content: 'YES',
  },
  {
    key: '4',
    label: 'Order time',
    content: '2018-04-24 18:00:00',
  },
  {
    key: '5',
    label: 'Usage Time',
    content: '2019-04-24 18:00:00',
    span: 2,
  },
  {
    key: '6',
    label: 'Status',
    span: 3,
  },
  {
    key: '7',
    label: 'Negotiated Amount',
    content: '$80.00',
  },
  {
    key: '8',
    label: 'Discount',
    content: '$20.00',
  },
  {
    key: '9',
    label: 'Official Receipts',
    content: '$60.00',
  },
  {
    key: '10',
    label: 'Config Info',
  },
]

const items = [
  {
    key: '1',
    label: 'Product',
    content: 'Cloud Database',
  },
  {
    key: '2',
    label: 'Billing',
    content: 'Prepaid',
  },
  {
    key: '3',
    label: 'Time',
    content: '18:00:00',
  },
  {
    key: '4',
    label: 'Amount',
    content: '$80.00',
  },
  {
    key: '5',
    label: 'Discount',
    content: '$20.00',
  },
  {
    key: '6',
    label: 'Official',
    content: '$60.00',
  },
]
</script>

<template>
  <a-radio-group v-model:value="size">
    <a-radio value="large">
      large
    </a-radio>
    <a-radio value="medium">
      medium
    </a-radio>
    <a-radio value="small">
      small
    </a-radio>
  </a-radio-group>
  <br>
  <br>
  <a-descriptions title="User Info" :items="borderItems" bordered :size="size">
    <template #contentRender="{ index, item }">
      <template v-if="index === 5">
        <a-badge status="processing" text="running" />
      </template>
      <template v-if="item.key === '10'">
        Data disk type: MongoDB
        <br>
        Database version: 3.4
        <br>
        Package: dds.mongo.mid
        <br>
        Storage space: 10 GB
        <br>
        Replication factor: 3
        <br>
        Region: East China 1
        <br>
      </template>
    </template>
  </a-descriptions>
  <br>
  <br>
  <a-descriptions title="Custom Size" :items="items" :size="size">
    <template #extra>
      <a-button type="primary">
        Edit
      </a-button>
    </template>
  </a-descriptions>
</template>
```
### responsive
Responsive configuration enables perfect presentation on small screen devices.
```vue
<script setup lang="ts">
const items = [
  {
    label: 'Product',
    content: 'Cloud Database',
  },
  {
    label: 'Billing',
    content: 'Prepaid',
  },
  {
    label: 'Time',
    content: '18:00:00',
  },
  {
    label: 'Amount',
    content: '$80.00',
  },
  {
    label: 'Discount',
    span: { xl: 2, xxl: 2 },
    content: '$20.00',
  },
  {
    label: 'Official',
    span: { xl: 2, xxl: 2 },
    content: '$60.00',
  },
  {
    label: 'Config Info',
    span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
  },
  {
    label: 'Hardware Info',
    span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },
  },
]
</script>

<template>
  <a-descriptions title="Responsive Descriptions" bordered :column="{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }" :items="items">
    <template #contentRender="{ item }">
      <template v-if="item.label === 'Config Info'">
        Data disk type: MongoDB
        <br>
        Database version: 3.4
        <br>
        Package: dds.mongo.mid
      </template>
      <template v-else-if="item.label === 'Hardware Info'">
        CPU: 6 Core 3.5 GHz
        <br>
        Storage space: 10 GB
        <br>
        Replication factor: 3
        <br>
        Region: East China 1
      </template>
    </template>
  </a-descriptions>
</template>
```
### Vertical
Simplest Usage.
```vue
<script setup lang="ts">
const items = [
  {
    key: '1',
    label: 'UserName',
    content: 'Zhou Maomao',
  },
  {
    key: '2',
    label: 'Telephone',
    content: '1810000000',
  },
  {
    key: '3',
    label: 'Live',
    content: 'Hangzhou, Zhejiang',
  },
  {
    key: '4',
    label: 'Address',
    span: 2,
    content: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
  },
  {
    key: '5',
    label: 'Remark',
    content: 'empty',
  },
]
</script>

<template>
  <a-descriptions title="User Info" :items="items" layout="vertical" />
</template>
```
### Vertical border
Descriptions with border and background color.
```vue
<script setup lang="ts">
const items = [
  {
    key: '1',
    label: 'Product',
    content: 'Cloud Database',
  },
  {
    key: '2',
    label: 'Billing Mode',
    content: 'Prepaid',
  },
  {
    key: '3',
    label: 'Automatic Renewal',
    content: 'YES',
  },
  {
    key: '4',
    label: 'Order time',
    content: '2018-04-24 18:00:00',
  },
  {
    key: '5',
    label: 'Usage Time',
    content: '2019-04-24 18:00:00',
    span: 2,
  },
  {
    key: '6',
    label: 'Status',
    span: 3,
  },
  {
    key: '7',
    label: 'Negotiated Amount',
    content: '$80.00',
  },
  {
    key: '8',
    label: 'Discount',
    content: '$20.00',
  },
  {
    key: '9',
    label: 'Official Receipts',
    content: '$60.00',
  },
  {
    key: '10',
    label: 'Config Info',
  },
]
</script>

<template>
  <a-descriptions title="User Info" :items="items" bordered layout="vertical">
    <template #contentRender="{ index, item }">
      <template v-if="index === 5">
        <a-badge status="processing" text="running" />
      </template>
      <template v-if="item.key === '10'">
        Data disk type: MongoDB
        <br>
        Database version: 3.4
        <br>
        Package: dds.mongo.mid
        <br>
        Storage space: 10 GB
        <br>
        Replication factor: 3
        <br>
        Region: East China 1
        <br>
      </template>
    </template>
  </a-descriptions>
</template>
```
### SFC Mode
Support SFC mode with full `items` + `contentRender` case.
```vue
<script setup lang="ts">
</script>

<template>
  <a-descriptions title="User Info" bordered>
    <a-descriptions-item label="Product">
      Cloud Database
    </a-descriptions-item>
    <a-descriptions-item label="Billing Mode">
      Prepaid
    </a-descriptions-item>
    <a-descriptions-item label="Automatic Renewal">
      YES
    </a-descriptions-item>
    <a-descriptions-item label="Order time">
      2018-04-24 18:00:00
    </a-descriptions-item>
    <a-descriptions-item label="Usage Time" :span="2">
      2019-04-24 18:00:00
    </a-descriptions-item>
    <a-descriptions-item label="Status" :span="3">
      <a-badge status="processing" text="running" />
    </a-descriptions-item>
    <a-descriptions-item label="Negotiated Amount">
      $80.00
    </a-descriptions-item>
    <a-descriptions-item label="Discount">
      $20.00
    </a-descriptions-item>
    <a-descriptions-item label="Official Receipts">
      $60.00
    </a-descriptions-item>
    <a-descriptions-item label="Config Info">
      Data disk type: MongoDB
      <br>
      Database version: 3.4
      <br>
      Package: dds.mongo.mid
      <br>
      Storage space: 10 GB
      <br>
      Replication factor: 3
      <br>
      Region: East China 1
      <br>
    </a-descriptions-item>
  </a-descriptions>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Descriptions by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { DescriptionsProps } from 'antdv-next'

const classes: DescriptionsProps['classes'] = {
  root: 'custom-descriptions-root',
}

const items: DescriptionsProps['items'] = [
  {
    key: '1',
    label: 'Product',
    content: 'Cloud Database',
  },
  {
    key: '2',
    label: 'Billing Mode',
    content: 'Prepaid',
  },
  {
    key: '3',
    label: 'Automatic Renewal',
    content: 'YES',
  },
]

const styles: DescriptionsProps['styles'] = {
  label: {
    color: '#000',
  },
}

const stylesFn: DescriptionsProps['styles'] = (info) => {
  if (info.props.size === 'large') {
    return {
      root: {
        borderRadius: '8px',
        border: '1px solid #CDC1FF',
      },
      label: { color: '#A294F9' },
    } satisfies DescriptionsProps['styles']
  }
  return {}
}

const descriptionsProps: DescriptionsProps = {
  title: 'User Info',
  items,
  bordered: true,
  classes,
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-descriptions v-bind="descriptionsProps" :styles="styles" size="small" />
    <a-descriptions v-bind="descriptionsProps" :styles="stylesFn" size="large" />
  </a-flex>
</template>

<style scoped>
.custom-descriptions-root {
  padding: 10px;
}
</style>
```
### row
Display of the entire line.
```vue
<script setup lang="ts">
import type { DescriptionsItemType } from 'antdv-next'

const items: DescriptionsItemType[] = [
  {
    label: 'UserName',
    content: 'Zhou Maomao',
  },
  {
    label: 'Live',
    span: 'filled', // span = 2
    content: 'Hangzhou, Zhejiang',
  },
  {
    label: 'Remark',
    span: 'filled', // span = 3
    content: 'empty',
  },
  {
    label: 'Address',
    span: 1, // span will be 3 and warning for span is not align to the end
    content: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
  },
]
</script>

<template>
  <a-descriptions title="User Info" :items="items" bordered />
</template>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| bordered | Whether to display the border | boolean | false | - | × |
| size | Set the size of the list. Can be set to `medium`,`small`, or not filled | `large` \| `medium` \| `small` | `large` | - | × |
| title | The title of the description list, placed at the top | VueNode | - | - | × |
| extra | The action area of the description list, placed at the top-right | VueNode | - | - | × |
| labelRender | - | RenderDescriptionsItem | - | - | × |
| contentRender | - | RenderDescriptionsItem | - | - | × |
| column | The number of `DescriptionItems` in a row, could be a number or a responsive object like `{ xs: 8, sm: 16, md: 24}` | number \| Partial&lt;Record&lt;Breakpoint, number&gt;&gt; | `{xxxl: 4,xxl: 3,xl: 3,lg: 3,md: 3,sm: 2,xs: 1}` | - | × |
| layout | Define description layout | 'horizontal' \| 'vertical' | `horizontal` | - | × |
| colon | Change default props `colon` value of Descriptions.Item. Indicates whether the colon after the label is displayed | boolean | true | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | DescriptionsStylesType | - | - | ✓ |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | DescriptionsClassNamesType | - | - | ✓ |
| items | Describe the contents of the list item | DescriptionsItemType[] | - | - | × |
| id | - | string | - | - | × |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| title | The title of the description list, placed at the top | () =&gt; any | - |
| extra | The action area of the description list, placed at the top-right | () =&gt; any | - |
| labelRender | - | RenderDescriptionsItem | - |
| contentRender | - | RenderDescriptionsItem | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Descriptions" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Divider
URL: https://www.antdv-next.com/components/divider.md
---

## When To Use

- Divide sections of an article.
- Divide inline text and links such as the operation column of table.

## Examples

### Horizontal
Divider is horizontal by default. You can add text within Divider.
```vue
<template>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider dashed />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</template>
```
### Divider with title
Divider with inner text, use `title-placement` to align it.
```vue
<template>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider>Text</a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider title-placement="left">
    Left Text
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider title-placement="right">
    Right Text
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider title-placement="left" :styles="{ content: { margin: '0px' } }">
    Left Text margin with 0
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider title-placement="right" :styles="{ content: { margin: '0 50px' } }">
    Right Text margin with 50px
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</template>
```
### Vertical
Use `orientation="vertical"` make it vertical.
```vue
<template>
  Text
  <a-divider orientation="vertical" />
  <a href="#">Link</a>
  <a-divider orientation="vertical" />
  <a href="#">Link</a>
</template>
```
### Text without heading style
You can use `plain` prop to set a lighter style of text.
```vue
<template>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider plain>
    Text
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider title-placement="left" plain>
    Left Text
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider title-placement="right" plain>
    Right Text
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</template>
```
### Variant
You can use `variant` to set the style of Divider, options are `solid`, `dashed` and `dotted`.
```vue
<template>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider style="border-color:#7cb305">
    Solid
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider variant="dotted" style="border-color:#7cb305">
    Dotted
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider variant="dashed" style="border-color:#7cb305" dashed>
    Dashed
  </a-divider>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</template>
```
### Set the spacing size of the divider
Control the size of divider by `size`, only works for horizontal layout.
```vue
<template>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider size="small" />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider size="medium" />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
  <a-divider size="large" />
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
    probare, quae sunt a te dicta? Refert tamen, quo modo.
  </p>
</template>
```
### Style Customization
Customize the style of the divider.
```vue
<template>
  <a-divider :style="{ borderWidth: '2px', borderColor: '#7cb305' }" />
  <a-divider :style="{ borderColor: '#7cb305' }" dashed />
  <a-divider :style="{ borderColor: '#7cb305' }" dashed>
    Text
  </a-divider>
  <a-divider type="vertical" :style="{ height: '60px', borderColor: '#7cb305' }" />
  <a-divider type="vertical" :style="{ height: '60px', borderColor: '#7cb305' }" dashed />

  <div :style="{ display: 'flex', flexDirection: 'column', height: '50px', boxShadow: '0 0 1px red' }">
    <a-divider :style="{ background: 'rgba(0,255,0,0.05)' }" title-placement="left">
      Text
    </a-divider>
  </div>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of divider by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { DividerProps } from 'antdv-next'

const classesObject: DividerProps['classes'] = {
  root: 'demo-divider-root',
  content: 'demo-divider-content',
  rail: 'demo-divider-rail',
}

const classesFn: DividerProps['classes'] = (info) => {
  if (info?.props?.titlePlacement === 'start') {
    return {
      root: 'demo-divider-root--start',
    }
  }
  return {
    root: 'demo-divider-root--default',
  }
}

const stylesObject: DividerProps['styles'] = {
  root: { borderWidth: '2px', borderStyle: 'dashed' },
  content: { fontStyle: 'italic' },
  rail: { opacity: 0.85 },
}

const stylesFn: DividerProps['styles'] = (info) => {
  if (info?.props?.size === 'small') {
    return {
      root: { opacity: 0.6, cursor: 'default' },
    }
  }
  return {
    root: { backgroundColor: '#fafafa', borderColor: '#d9d9d9' },
  }
}
</script>

<template>
  <div>
    <a-divider :classes="classesObject">
      classes Object
    </a-divider>
    <a-divider title-placement="start" :classes="classesFn">
      classes Function
    </a-divider>
    <a-divider :styles="stylesObject">
      styles Object
    </a-divider>
    <a-divider size="small" :styles="stylesFn">
      styles Function
    </a-divider>
  </div>
</template>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- |
| dashed | Whether line is dashed | boolean | false | × |
| orientation | Whether line is horizontal or vertical | `horizontal` \| `vertical` | `horizontal` | × |
| plain | Divider text show as plain style | boolean | false | × |
| size | The size of divider. Only valid for horizontal layout | `small` \| `medium` \| `large` | - | × |
| titlePlacement | The position of title inside divider | `start` \| `end` \| `center` | `center` | × |
| variant | Whether line is dashed, dotted or solid | `dashed` \| `dotted` \| `solid` | `solid` | × |
| vertical | Orientation, Simultaneously configure with `orientation` and prioritize `orientation` | boolean | false | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | ✓ |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Divider" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Drawer
URL: https://www.antdv-next.com/components/drawer.md
---

## When To Use

A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.

- Use a Form to create or edit a set of information.
- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
- When the same Form is needed in multiple places.

> Notes for developers
>
> The `loading` prop renders Skeleton in Drawer.

## Examples

### Basic
Basic drawer.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const open = shallowRef(false)
function showDrawer() {
  open.value = true
}
</script>

<template>
  <a-button type="primary" @click="showDrawer">
    Open
  </a-button>
  <a-drawer
    v-model:open="open"
    title="Basic Drawer"
    :closable="{ 'aria-label': 'Close Button' }"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-drawer>
</template>
```
### Custom Placement
The Drawer can appear from any edge of the screen.
```vue
<script setup lang="ts">
import type { DrawerProps } from 'antdv-next'
import { shallowRef } from 'vue'

const open = shallowRef(false)
const placement = shallowRef<DrawerProps['placement']>('left')

function showDrawer() {
  open.value = true
}

function onClose() {
  open.value = false
}
</script>

<template>
  <a-space>
    <a-radio-group v-model:value="placement">
      <a-radio value="top">
        top
      </a-radio>
      <a-radio value="right">
        right
      </a-radio>
      <a-radio value="bottom">
        bottom
      </a-radio>
      <a-radio value="left">
        left
      </a-radio>
    </a-radio-group>
    <a-button type="primary" @click="showDrawer">
      Open
    </a-button>
  </a-space>
  <a-drawer
    v-model:open="open"
    title="Basic Drawer"
    :placement="placement"
    :closable="false"
    @close="onClose"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-drawer>
</template>
```
### Resizable
Resizable drawer that allows users to adjust the drawer's width or height by dragging the edge.
```vue
<script setup lang="ts">
import type { DrawerProps, RadioChangeEvent } from 'antdv-next'
import { shallowRef } from 'vue'

const open = shallowRef(false)
const placement = shallowRef<DrawerProps['placement']>('right')
const size = shallowRef(256)

function onChange(e: RadioChangeEvent) {
  size.value = 256
  placement.value = e.target.value
}

function onClose() {
  open.value = false
}

function onResize(newSize: number | string) {
  if (typeof newSize === 'number')
    size.value = newSize
}
</script>

<template>
  <a-space style="margin-bottom: 16px">
    <a-radio-group
      v-model:value="placement"
      :options="['top', 'right', 'bottom', 'left'].map((pos) => ({ label: pos, value: pos }))"
      @change="onChange"
    />
    <a-button type="primary" @click="() => open = true">
      Open Drawer
    </a-button>
  </a-space>
  <div>Current size: {{ size }}px</div>
  <a-drawer
    v-model:open="open"
    title="Resizable Drawer"
    :placement="placement"
    :size="size"
    :resizable="{
      onResize,
    }"
    @close="onClose"
  >
    <p>Drag the edge to resize the drawer</p>
    <p>Current size: {{ size }}px</p>
  </a-drawer>
</template>
```
### Loading
Set the loading status of Drawer.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const open = shallowRef(false)
const loading = shallowRef(true)

function showLoading() {
  open.value = true
  loading.value = true

  // Simple loading mock. You should add cleanup logic in real world.
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

<template>
  <a-button type="primary" @click="showLoading">
    Open Drawer
  </a-button>
  <a-drawer
    v-model:open="open"
    closable
    destroy-on-hidden
    placement="right"
    :loading="loading"
  >
    <template #title>
      <p class="m-0">
        Loading Drawer
      </p>
    </template>
    <a-button type="primary" style="margin-bottom: 16px" @click="showLoading">
      Reload
    </a-button>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-drawer>
</template>
```
### Extra Actions
Extra actions should be placed at corner of drawer in Antdv Next, you can use `extra` prop for that.
```vue
<script setup lang="ts">
import type { DrawerProps } from 'antdv-next'
import { shallowRef } from 'vue'

const open = shallowRef(false)
const placement = shallowRef<DrawerProps['placement']>('right')

function showDrawer() {
  open.value = true
}

function onClose() {
  open.value = false
}
</script>

<template>
  <a-space>
    <a-radio-group v-model:value="placement">
      <a-radio value="top">
        top
      </a-radio>
      <a-radio value="right">
        right
      </a-radio>
      <a-radio value="bottom">
        bottom
      </a-radio>
      <a-radio value="left">
        left
      </a-radio>
    </a-radio-group>
    <a-button type="primary" @click="showDrawer">
      Open
    </a-button>
  </a-space>
  <a-drawer
    v-model:open="open"
    :size="500"
    title="Drawer with extra actions"
    :placement="placement"
    @close="onClose"
  >
    <template #extra>
      <a-space>
        <a-button @click="onClose">
          Cancel
        </a-button>
        <a-button type="primary" @click="onClose">
          OK
        </a-button>
      </a-space>
    </template>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-drawer>
</template>
```
### Render in current dom
Render in current dom. custom container, check `getContainer`.

> Note: `style` and `className` props are moved to Drawer panel in v5 which is aligned with Modal component. Original `style` and `className` props are replaced by `rootStyle` and `rootClass`.

> When `getContainer` returns a DOM node, you need to manually set `rootStyle` to `{ position: 'absolute' }`.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { theme } from 'antdv-next'
import { computed, ref } from 'vue'

const { token } = theme.useToken()
const open = ref(false)

const containerStyle = computed<CSSProperties>(() => ({
  position: 'relative',
  height: '200px',
  padding: '48px',
  overflow: 'hidden',
  background: token.value.colorFillAlter,
  border: `1px solid ${token.value.colorBorderSecondary}`,
  borderRadius: `${token.value.borderRadiusLG}px`,
}))
</script>

<template>
  <div :style="containerStyle">
    Render in this
    <div style="margin-top: 16px">
      <a-button type="primary" @click="open = true">
        Open
      </a-button>
    </div>
    <a-drawer
      v-model:open="open"
      title="Basic Drawer"
      placement="right"
      :closable="false"
      :get-container="false"
      @close="open = false"
    >
      <p>Some contents...</p>
    </a-drawer>
  </div>
</template>
```
### Submit form in drawer
Use a form in Drawer with a submit button.
```vue
<script setup lang="ts">
import { PlusOutlined } from '@antdv-next/icons'
import { reactive, ref } from 'vue'

const open = ref(false)

const formState = reactive({
  name: '',
  url: '',
  owner: undefined as string | undefined,
  type: undefined as string | undefined,
  approver: undefined as string | undefined,
  dateTime: undefined as any,
  description: '',
})

const ownerOptions = [
  { label: 'Xiaoxiao Fu', value: 'xiao' },
  { label: 'Maomao Zhou', value: 'mao' },
]
const typeOptions = [
  { label: 'private', value: 'private' },
  { label: 'public', value: 'public' },
]
const approverOptions = [
  { label: 'Jack Ma', value: 'jack' },
  { label: 'Tom Liu', value: 'tom' },
]
</script>

<template>
  <a-button type="primary" @click="open = true">
    <template #icon>
      <PlusOutlined />
    </template>
    New account
  </a-button>
  <a-drawer
    v-model:open="open"
    title="Create a new account"
    :size="720"
    :styles="{ body: { paddingBottom: '80px' } }"
    @close="open = false"
  >
    <template #extra>
      <a-space>
        <a-button @click="open = false">
          Cancel
        </a-button>
        <a-button type="primary" @click="open = false">
          Submit
        </a-button>
      </a-space>
    </template>
    <a-form layout="vertical" :model="formState" :required-mark="false">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item
            name="name"
            label="Name"
            :rules="[{ required: true, message: 'Please enter user name' }]"
          >
            <a-input v-model:value="formState.name" placeholder="Please enter user name" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            name="url"
            label="Url"
            :rules="[{ required: true, message: 'Please enter url' }]"
          >
            <a-space-compact block>
              <a-space-addon>http://</a-space-addon>
              <a-input v-model:value="formState.url" placeholder="Please enter url" />
              <a-space-addon>.com</a-space-addon>
            </a-space-compact>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item
            name="owner"
            label="Owner"
            :rules="[{ required: true, message: 'Please select an owner' }]"
          >
            <a-select
              v-model:value="formState.owner"
              placeholder="Please select an owner"
              :options="ownerOptions"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            name="type"
            label="Type"
            :rules="[{ required: true, message: 'Please choose the type' }]"
          >
            <a-select
              v-model:value="formState.type"
              placeholder="Please choose the type"
              :options="typeOptions"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item
            name="approver"
            label="Approver"
            :rules="[{ required: true, message: 'Please choose the approver' }]"
          >
            <a-select
              v-model:value="formState.approver"
              placeholder="Please choose the approver"
              :options="approverOptions"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            name="dateTime"
            label="DateTime"
            :rules="[{ required: true, message: 'Please choose the dateTime' }]"
          >
            <a-range-picker
              v-model:value="formState.dateTime"
              style="width: 100%"
              :get-popup-container="(trigger) => trigger.parentElement || document.body"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item
            name="description"
            label="Description"
            :rules="[{ required: true, message: 'please enter url description' }]"
          >
            <a-textarea v-model:value="formState.description" :rows="4" placeholder="please enter url description" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>
```
### Preview drawer
Use Drawer to quickly preview details of an object, such as those in a list.
```vue
<script setup lang="ts">
import { defineComponent, h, ref } from 'vue'

const open = ref(false)

const users = [
  { id: 1, name: 'Lily', description: 'Progresser XTech' },
  { id: 2, name: 'Lily', description: 'Progresser XTech' },
]

const DescriptionItem = defineComponent({
  name: 'DescriptionItem',
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  setup(props, { slots }) {
    return () => h('div', { class: 'site-description-item-profile-wrapper' }, [
      h('p', { class: 'site-description-item-profile-p-label' }, `${props.title}:`),
      slots.default?.(),
    ])
  },
})
</script>

<template>
  <ul class="user-list">
    <li v-for="item in users" :key="item.id" class="user-list-item">
      <div class="user-meta">
        <a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
        <div>
          <a-typography-link href="https://ant.design/index-cn">
            {{ item.name }}
          </a-typography-link>
          <div class="user-desc">
            {{ item.description }}
          </div>
        </div>
      </div>
      <a-button type="link" @click="open = true">
        View Profile
      </a-button>
    </li>
  </ul>

  <a-drawer
    v-model:open="open"
    :size="640"
    placement="right"
    :closable="false"
    @close="open = false"
  >
    <p class="site-description-item-profile-p" style="margin-bottom: 24px;">
      User Profile
    </p>
    <p class="site-description-item-profile-p">
      Personal
    </p>
    <a-row>
      <a-col :span="12">
        <DescriptionItem title="Full Name">
          Lily
        </DescriptionItem>
      </a-col>
      <a-col :span="12">
        <DescriptionItem title="Account">
          AntDesign@example.com
        </DescriptionItem>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <DescriptionItem title="City">
          HangZhou
        </DescriptionItem>
      </a-col>
      <a-col :span="12">
        <DescriptionItem title="Country">
          China
        </DescriptionItem>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <DescriptionItem title="Birthday">
          February 2, 1900
        </DescriptionItem>
      </a-col>
      <a-col :span="12">
        <DescriptionItem title="Website">
          -
        </DescriptionItem>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <DescriptionItem title="Message">
          Make things as simple as possible but no simpler.
        </DescriptionItem>
      </a-col>
    </a-row>

    <a-divider />

    <p class="site-description-item-profile-p">
      Company
    </p>
    <a-row>
      <a-col :span="12">
        <DescriptionItem title="Position">
          Programmer
        </DescriptionItem>
      </a-col>
      <a-col :span="12">
        <DescriptionItem title="Responsibilities">
          Coding
        </DescriptionItem>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <DescriptionItem title="Department">
          XTech
        </DescriptionItem>
      </a-col>
      <a-col :span="12">
        <DescriptionItem title="Supervisor">
          <a href="https://ant.design">
            Lin
          </a>
        </DescriptionItem>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <DescriptionItem title="Skills">
          C / C ++, data structures, software engineering, operating systems, computer networks,
          databases, compiler theory, computer architecture, Microcomputer Principle and Interface
          Technology, Computer English, Java, ASP, etc.
        </DescriptionItem>
      </a-col>
    </a-row>

    <a-divider />

    <p class="site-description-item-profile-p">
      Contacts
    </p>
    <a-row>
      <a-col :span="12">
        <DescriptionItem title="Email">
          AntDesign@example.com
        </DescriptionItem>
      </a-col>
      <a-col :span="12">
        <DescriptionItem title="Phone Number">
          +86 181 0000 0000
        </DescriptionItem>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <DescriptionItem title="Github">
          <a href="http://github.com/ant-design/ant-design/" target="_blank" rel="noreferrer">
            github.com/ant-design/ant-design/
          </a>
        </DescriptionItem>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<style scoped>
.user-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
}

.user-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.user-list-item + .user-list-item {
  border-top: 1px solid #f0f0f0;
}

.user-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-desc {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

.site-description-item-profile-wrapper {
  margin-bottom: 7px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5715;
}

.site-description-item-profile-p {
  display: block;
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  line-height: 1.5715;
}

.site-description-item-profile-p-label {
  display: inline-block;
  margin-inline-end: 8px;
  color: rgba(0, 0, 0, 0.85);
}
</style>
```
### Multi-level drawer
Open a new drawer on top of an existing drawer to handle multi branch tasks.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const open = shallowRef(false)
const childrenDrawer = shallowRef(false)

function showDrawer() {
  open.value = true
}

function onClose() {
  open.value = false
}

function showChildrenDrawer() {
  childrenDrawer.value = true
}

function onChildrenDrawerClose() {
  childrenDrawer.value = false
}
</script>

<template>
  <a-button type="primary" @click="showDrawer">
    Open drawer
  </a-button>
  <a-drawer
    v-model:open="open"
    title="Multi-level drawer"
    :size="520"
    :closable="false"
    @close="onClose"
  >
    <a-button type="primary" @click="showChildrenDrawer">
      Two-level drawer
    </a-button>
    <a-drawer
      v-model:open="childrenDrawer"
      title="Two-level Drawer"
      :size="320"
      :closable="false"
      @close="onChildrenDrawerClose"
    >
      This is two-level drawer
    </a-drawer>
  </a-drawer>
</template>
```
### Preset size
The default width (or height) of Drawer is `378px`, and there is a preset large size `736px`.
```vue
<script setup lang="ts">
import type { DrawerProps } from 'antdv-next'
import { shallowRef } from 'vue'

const open = shallowRef(false)
const size = shallowRef<DrawerProps['size']>('default')

function showDefaultDrawer() {
  size.value = 'default'
  open.value = true
}

function showLargeDrawer() {
  size.value = 'large'
  open.value = true
}

function onClose() {
  open.value = false
}
</script>

<template>
  <a-space>
    <a-button type="primary" @click="showDefaultDrawer">
      Open Default Size (378px)
    </a-button>
    <a-button type="primary" @click="showLargeDrawer">
      Open Large Size (736px)
    </a-button>
  </a-space>
  <a-drawer
    v-model:open="open"
    :title="`${size} Drawer`"
    placement="right"
    :size="size"
    @close="onClose"
  >
    <template #extra>
      <a-space>
        <a-button @click="onClose">
          Cancel
        </a-button>
        <a-button type="primary" @click="onClose">
          OK
        </a-button>
      </a-space>
    </template>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-drawer>
</template>
```
### mask
mask effect, default `blur`.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

type MaskType = 'blur' | 'dimmed' | 'none'
interface DrawerConfig {
  type: MaskType
  mask: boolean | { blur: boolean }
  title: string
}

const drawerList: DrawerConfig[] = [
  { type: 'blur', mask: true, title: 'Default blur' },
  { type: 'dimmed', mask: { blur: false }, title: 'Dimmed mask' },
  { type: 'none', mask: false, title: 'No mask' },
]

const open = shallowRef<false | MaskType>(false)

function showDrawer(type: MaskType) {
  open.value = type
}

function onClose() {
  open.value = false
}
</script>

<template>
  <a-space wrap>
    <template v-for="item in drawerList" :key="item.type">
      <a-button @click="showDrawer(item.type)">
        {{ item.title }}
      </a-button>
      <a-drawer
        :open="open === item.type"
        title="Drawer blur"
        placement="right"
        :mask="item.mask"
        @close="onClose"
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </a-drawer>
    </template>
  </a-space>
</template>
```
### Closable placement
Drawer with closable placement, customize the close placement to the `end`, defaults to `start`.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const open = shallowRef(false)
function showDrawer() {
  open.value = true
}
function onClose() {
  open.value = false
}
</script>

<template>
  <a-button type="primary" @click="showDrawer">
    Open
  </a-button>
  <a-drawer
    v-model:open="open"
    title="Drawer Closable Placement"
    :closable="{ placement: 'end' }"
    @close="onClose"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Take a look at the top-right corner...</p>
  </a-drawer>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Drawer by passing objects or functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { DrawerProps } from 'antdv-next'
import { theme } from 'antdv-next'
import { ref } from 'vue'

const { token } = theme.useToken()
const open = ref(false)
const openFn = ref(false)

const classes: DrawerProps['classes'] = {
  header: 'demo-drawer-header',
  body: 'demo-drawer-body',
}

const stylesObject: DrawerProps['styles'] = {
  body: {
    backgroundColor: '#f5f5f5',
  },
  footer: {
    backgroundColor: '#fafafa',
  },
}

const stylesFn: DrawerProps['styles'] = (info) => {
  if (info?.props?.placement === 'right') {
    return {
      mask: {
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
      },
      wrapper: {
        boxShadow: '0 8px 24px rgba(0, 0, 0, 0.15)',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex gap="medium">
    <a-button @click="open = true">
      Object Style
    </a-button>
    <a-button type="primary" @click="openFn = true">
      Function Style
    </a-button>
  </a-flex>

  <a-drawer
    v-model:open="open"
    title="Custom Style Drawer"
    :classes="classes"
    :styles="stylesObject"
    @close="open = false"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-drawer>

  <a-drawer
    v-model:open="openFn"
    title="Custom Function Drawer"
    :classes="classes"
    :styles="stylesFn"
    @close="openFn = false"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-drawer>
</template>

<style scoped>
.demo-drawer-header {
  border-bottom: 1px dashed v-bind('token.colorBorder');
}

.demo-drawer-body {
  border-top: 1px dashed v-bind('token.colorBorder');
}
</style>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| afterOpenChange | Callback after the animation ends when switching drawers | (open: boolean) => void | - | - | × |
| classes | Customize class for each semantic structure inside the Drawer component. Supports object or function. | DrawerClassNamesType | - | - | ✓ |
| closable | Whether to show a close button. The position can be configured with `placement` | boolean \| \{ closeIcon?: VueNode, disabled?: boolean, placement?: 'start' \| 'end' \} | true | - | ✓ |
| closeIcon | Custom close icon | VueNode | - | - | ✓ |
| ~~destroyOnClose~~ | Whether to unmount child components on closing drawer or not, please use `destroyOnHidden` instead | boolean | false | - | × |
| destroyOnHidden | Whether to unmount child components on closing drawer or not | boolean | false | - | × |
| extra | Extra actions area at corner | VueNode | - | - | × |
| footer | The footer for Drawer | VueNode | - | - | × |
| forceRender | Pre-render Drawer component forcibly | boolean | false | - | × |
| getContainer | Mounted node and display window for Drawer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | - | × |
| keyboard | Whether support press esc to close | boolean | true | - | × |
| loading | Show the Skeleton | boolean | false | - | × |
| mask | Mask effect | MaskType | true | - | ✓ |
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true | - | × |
| placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` | - | × |
| push | Nested drawers push behavior | boolean \| \{ distance: string \| number \} | \{ distance: 180 \} | - | × |
| resizable | Enable resizable by dragging | boolean \| [ResizableConfig](#resizableconfig) | - | - | × |
| rootClass | Root container class | string | - | - | × |
| rootStyle | Style of wrapper element which contains mask | CSSProperties | - | - | × |
| size | Preset size of drawer, default `378px` and large `736px`, or a custom number | 'default' \| 'large' \| number | 'default' | - | × |
| styles | Customize inline style for each semantic structure inside the Drawer component. Supports object or function. | DrawerStylesType | - | - | ✓ |
| title | The title for Drawer | VueNode | - | - | × |
| open | Whether the Drawer dialog is visible or not, support `v-model:open` | boolean | false | - | × |
| zIndex | The `z-index` of the Drawer | number | 1000 | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| close | Callback when drawer is closed | (e: MouseEvent \| KeyboardEvent) => void | - |
| keydown | Keyboard keydown event | (e: KeyboardEvent) => void | - |
| keyup | Keyboard keyup event | (e: KeyboardEvent) => void | - |
| mouseenter | Mouse enter event | (e: MouseEvent) => void | - |
| mouseleave | Mouse leave event | (e: MouseEvent) => void | - |
| mouseover | Mouse over event | (e: MouseEvent) => void | - |
| click | Click event | (e: MouseEvent) => void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| title | Title | () => any | - |
| footer | Footer | () => any | - |
| extra | Extra actions | () => any | - |
| closeIcon | Custom close icon | () => any | - |
| default | Drawer content | () => any | - |

## Types

### ResizableConfig

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| onResizeStart | Callback when resize starts | () => void | - | - |
| onResize | Callback during resizing | (size: number) => void | - | - |
| onResizeEnd | Callback when resize ends | () => void | - | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token {#design-token}

<ComponentTokenTable component="Drawer"></ComponentTokenTable>

---
Title: Dropdown
URL: https://www.antdv-next.com/components/dropdown.md
---

## When To Use

When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.

## Examples

### Basic
The most basic dropdown menu.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined, SmileOutlined } from '@antdv-next/icons'

const items: MenuItemType[] = [
  {
    key: '1',
    label: '1st menu item',
  },
  {
    key: '2',
    label: '2nd menu item (disabled)',
    icon: SmileOutlined,
    disabled: true,
  },
  {
    key: '3',
    label: '3rd menu item (disabled)',
    disabled: true,
  },
  {
    key: '4',
    danger: true,
    label: 'a danger item',
  },
]
const href: Record<string, string> = {
  1: 'https://www.antgroup.com',
  2: 'https://www.aliyun.com',
  3: 'https://www.luohanacademy.com',
}
</script>

<template>
  <a-dropdown :menu="{ items }">
    <a @click.prevent>
      <a-space>
        Hover me
        <DownOutlined />
      </a-space>
    </a>
    <template #labelRender="item">
      <template v-if="item && ['1', '2', '3'].includes(item.key as string)">
        <a target="_blank" rel="noopener noreferrer" :href="href[item.key as string]">
          {{ item?.label }}
        </a>
      </template>
    </template>
  </a-dropdown>
</template>
```
### Extra node
The dropdown menu with shortcut.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined, SettingOutlined } from '@antdv-next/icons'

const items: MenuItemType[] = [
  {
    key: '1',
    label: 'My Account',
    disabled: true,
  },
  {
    type: 'divider',
  },
  {
    key: '2',
    label: 'Profile',
    extra: '⌘P',
  },
  {
    key: '3',
    label: 'Billing',
    extra: '⌘B',
  },
  {
    key: '4',
    label: 'Settings',
    icon: SettingOutlined,
    extra: '⌘S',
  },
]
</script>

<template>
  <a-dropdown :menu="{ items }">
    <a @click.prevent>
      <a-space>
        Hover me
        <DownOutlined />
      </a-space>
    </a>
  </a-dropdown>
</template>
```
### Placement
Support 6 placements.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'

const items: MenuItemType[] = [
  {
    key: '1',
    label: '1st menu item',
  },
  {
    key: '2',
    label: '2nd menu item',
  },
  {
    key: '3',
    label: '3rd menu item',
  },
]

const href: Record<string, string> = {
  1: 'https://www.antgroup.com',
  2: 'https://www.aliyun.com',
  3: 'https://www.luohanacademy.com',
}
</script>

<template>
  <a-space direction="vertical">
    <a-space wrap>
      <a-dropdown :menu="{ items }" placement="bottomLeft">
        <a-button>bottomLeft</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="bottom">
        <a-button>bottom</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="bottomRight">
        <a-button>bottomRight</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
    </a-space>
    <a-space wrap>
      <a-dropdown :menu="{ items }" placement="topLeft">
        <a-button>topLeft</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="top">
        <a-button>top</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="topRight">
        <a-button>topRight</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
    </a-space>
  </a-space>
</template>
```
### Arrow
You could display an arrow.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'

const items: MenuItemType[] = [
  {
    key: '1',
    label: '1st menu item',
  },
  {
    key: '2',
    label: '2nd menu item',
  },
  {
    key: '3',
    label: '3rd menu item',
  },
]

const href: Record<string, string> = {
  1: 'https://www.antgroup.com',
  2: 'https://www.aliyun.com',
  3: 'https://www.luohanacademy.com',
}
</script>

<template>
  <a-space direction="vertical">
    <a-space wrap>
      <a-dropdown :menu="{ items }" placement="bottomLeft" arrow>
        <a-button>bottomLeft</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="bottom" arrow>
        <a-button>bottom</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="bottomRight" arrow>
        <a-button>bottomRight</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
    </a-space>
    <a-space wrap>
      <a-dropdown :menu="{ items }" placement="topLeft" arrow>
        <a-button>topLeft</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="top" arrow>
        <a-button>top</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="topRight" arrow>
        <a-button>topRight</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
    </a-space>
  </a-space>
</template>
```
### Other elements
Divider and disabled menu item.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'

const items: MenuItemType[] = [
  {
    label: '1st menu item',
    key: '0',
  },
  {
    label: '2nd menu item',
    key: '1',
  },
  {
    type: 'divider',
  },
  {
    label: '3rd menu item (disabled)',
    key: '3',
    disabled: true,
  },
]

const href: Record<string, string> = {
  0: 'https://www.antgroup.com',
  1: 'https://www.aliyun.com',
}
</script>

<template>
  <a-dropdown :menu="{ items }">
    <a @click.prevent>
      <a-space>
        Hover me
        <DownOutlined />
      </a-space>
    </a>
    <template #labelRender="item">
      <a
        v-if="item && ['0', '1'].includes(item.key as string)"
        target="_blank"
        rel="noopener noreferrer"
        :href="href[item.key as string]"
      >
        {{ item?.label }}
      </a>
    </template>
  </a-dropdown>
</template>
```
### Arrow pointing at the center
Set `arrow` with `pointAtCenter: true`, the arrow will point to the center of the target element.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'

const items: MenuItemType[] = [
  {
    key: '1',
    label: '1st menu item',
  },
  {
    key: '2',
    label: '2nd menu item',
  },
  {
    key: '3',
    label: '3rd menu item',
  },
]

const href: Record<string, string> = {
  1: 'https://www.antgroup.com',
  2: 'https://www.aliyun.com',
  3: 'https://www.luohanacademy.com',
}
</script>

<template>
  <a-space direction="vertical">
    <a-space wrap>
      <a-dropdown :menu="{ items }" placement="bottomLeft" :arrow="{ pointAtCenter: true }">
        <a-button>bottomLeft</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="bottom" :arrow="{ pointAtCenter: true }">
        <a-button>bottom</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="bottomRight" :arrow="{ pointAtCenter: true }">
        <a-button>bottomRight</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
    </a-space>
    <a-space wrap>
      <a-dropdown :menu="{ items }" placement="topLeft" :arrow="{ pointAtCenter: true }">
        <a-button>topLeft</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="top" :arrow="{ pointAtCenter: true }">
        <a-button>top</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
      <a-dropdown :menu="{ items }" placement="topRight" :arrow="{ pointAtCenter: true }">
        <a-button>topRight</a-button>
        <template #labelRender="item">
          <a
            v-if="item && ['1', '2', '3'].includes(item.key as string)"
            target="_blank"
            rel="noopener noreferrer"
            :href="href[item.key as string]"
          >
            {{ item?.label }}
          </a>
        </template>
      </a-dropdown>
    </a-space>
  </a-space>
</template>
```
### Trigger mode
The default trigger mode is `hover`, you can change it to `click`.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'

const items: MenuItemType[] = [
  {
    label: '1st menu item',
    key: '0',
  },
  {
    label: '2nd menu item',
    key: '1',
  },
  {
    type: 'divider',
  },
  {
    label: '3rd menu item',
    key: '3',
  },
]

const href: Record<string, string> = {
  0: 'https://www.antgroup.com',
  1: 'https://www.aliyun.com',
}
</script>

<template>
  <a-dropdown :menu="{ items }" :trigger="['click']">
    <a @click.prevent>
      <a-space>
        Click me
        <DownOutlined />
      </a-space>
    </a>
    <template #labelRender="item">
      <a
        v-if="item && ['0', '1'].includes(item.key as string)"
        target="_blank"
        rel="noopener noreferrer"
        :href="href[item.key as string]"
      >
        {{ item?.label }}
      </a>
    </template>
  </a-dropdown>
</template>
```
### Click event
An event will be triggered when you click menu items, in which you can make different operations according to item's key.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()

function onClick({ key }: any) {
  messageApi.info(`Click on item ${key}`)
}

const items: MenuItemType[] = [
  {
    label: '1st menu item',
    key: '1',
  },
  {
    label: '2nd menu item',
    key: '2',
  },
  {
    label: '3rd menu item',
    key: '3',
  },
]
</script>

<template>
  <ContextHolder />
  <a-dropdown :menu="{ items }" @menu-click="onClick">
    <a @click.prevent>
      <a-space>
        Hover me, Click menu item
        <DownOutlined />
      </a-space>
    </a>
  </a-dropdown>
</template>
```
### Button with dropdown menu
A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined, EllipsisOutlined, UserOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()

function handleButtonClick(e: MouseEvent) {
  messageApi.info('Click on left button.')
  console.log('click left button', e)
}

function handleMenuClick(e: any) {
  messageApi.info('Click on menu item.')
  console.log('click', e)
}

const items: MenuItemType[] = [
  {
    label: '1st menu item',
    key: '1',
    icon: UserOutlined,
  },
  {
    label: '2nd menu item',
    key: '2',
    icon: UserOutlined,
  },
  {
    label: '3rd menu item',
    key: '3',
    icon: UserOutlined,
    danger: true,
  },
  {
    label: '4rd menu item',
    key: '4',
    icon: UserOutlined,
    danger: true,
    disabled: true,
  },
]

const menuProps = {
  items,
  onClick: handleMenuClick,
}
</script>

<template>
  <ContextHolder />
  <a-space wrap>
    <a-space-compact>
      <a-button @click="handleButtonClick">
        Dropdown
      </a-button>
      <a-dropdown :menu="menuProps" placement="bottomRight">
        <a-button>
          <template #icon>
            <EllipsisOutlined />
          </template>
        </a-button>
      </a-dropdown>
    </a-space-compact>

    <a-space-compact>
      <a-button @click="handleButtonClick">
        Dropdown
      </a-button>
      <a-dropdown :menu="menuProps" placement="bottomRight">
        <a-button>
          <template #icon>
            <UserOutlined />
          </template>
        </a-button>
      </a-dropdown>
    </a-space-compact>

    <a-space-compact>
      <a-button disabled @click="handleButtonClick">
        Dropdown
      </a-button>
      <a-dropdown :menu="menuProps" placement="bottomRight" disabled>
        <a-button disabled>
          <template #icon>
            <EllipsisOutlined />
          </template>
        </a-button>
      </a-dropdown>
    </a-space-compact>

    <a-space-compact>
      <a-tooltip title="tooltip">
        <a-button @click="handleButtonClick">
          With Tooltip
        </a-button>
      </a-tooltip>
      <a-dropdown :menu="menuProps" placement="bottomRight">
        <a-button loading />
      </a-dropdown>
    </a-space-compact>

    <a-dropdown :menu="menuProps">
      <a-button icon-placement="end" @click="handleButtonClick">
        <template #icon>
          <DownOutlined />
        </template>
        Button
      </a-button>
    </a-dropdown>

    <a-space-compact>
      <a-button danger @click="handleButtonClick">
        Danger
      </a-button>
      <a-dropdown :menu="menuProps" placement="bottomRight">
        <a-button danger>
          <template #icon>
            <EllipsisOutlined />
          </template>
        </a-button>
      </a-dropdown>
    </a-space-compact>
  </a-space>
</template>
```
### Custom dropdown
Customize the dropdown menu via `popupRender`. If you don't need the Menu content, use the Popover component directly.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'
import { computed } from 'vue'

const items: MenuItemType[] = [
  {
    key: '1',
    label: '1st menu item',
  },
  {
    key: '2',
    label: '2nd menu item (disabled)',
    disabled: true,
  },
  {
    key: '3',
    label: '3rd menu item (disabled)',
    disabled: true,
  },
]

const href: Record<string, string> = {
  1: 'https://www.antgroup.com',
  2: 'https://www.aliyun.com',
  3: 'https://www.luohanacademy.com',
}

const { token } = theme.useToken()

const contentStyle = computed(() => ({
  backgroundColor: token.value.colorBgElevated,
  borderRadius: token.value.borderRadiusLG,
  boxShadow: token.value.boxShadowSecondary,
}))

const menuStyle = {
  boxShadow: 'none',
}
</script>

<template>
  <a-dropdown :menu="{ items }">
    <template #popupRender="menu">
      <div :style="contentStyle">
        <component :is="menu" :style="menuStyle" />
        <a-divider style="margin: 0" />
        <a-space style="padding: 8px">
          <a-button type="primary">
            Click me!
          </a-button>
        </a-space>
      </div>
    </template>
    <a @click.prevent>
      <a-space>
        Hover me
        <DownOutlined />
      </a-space>
    </a>
    <template #labelRender="item">
      <template v-if="item && ['1', '2', '3'].includes(item.key as string)">
        <a target="_blank" rel="noopener noreferrer" :href="href[item.key as string]">
          {{ item?.label }}
        </a>
      </template>
    </template>
  </a-dropdown>
</template>
```
### Cascading menu
The menu has multiple levels.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'

const items: MenuItemType[] = [
  {
    key: '1',
    type: 'group',
    label: 'Group title',
    children: [
      {
        key: '1-1',
        label: '1st menu item',
      },
      {
        key: '1-2',
        label: '2nd menu item',
      },
    ],
  },
  {
    key: '2',
    label: 'sub menu',
    children: [
      {
        key: '2-1',
        label: '3rd menu item',
      },
      {
        key: '2-2',
        label: '4th menu item',
      },
    ],
  },
  {
    key: '3',
    label: 'disabled sub menu',
    disabled: true,
    children: [
      {
        key: '3-1',
        label: '5d menu item',
      },
      {
        key: '3-2',
        label: '6th menu item',
      },
    ],
  },
]
</script>

<template>
  <a-dropdown :menu="{ items }">
    <a @click.prevent>
      <a-space>
        Cascading menu
        <DownOutlined />
      </a-space>
    </a>
  </a-dropdown>
</template>
```
### The way of hiding menu
The default is to close the menu when you click on menu items, this feature can be turned off.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const open = ref(false)

const items: MenuItemType[] = [
  {
    label: 'Clicking me will not close the menu.',
    key: '1',
  },
  {
    label: 'Clicking me will not close the menu also.',
    key: '2',
  },
  {
    label: 'Clicking me will close the menu.',
    key: '3',
  },
]

function handleMenuClick(info: { key: string }) {
  if (info.key === '3') {
    open.value = false
  }
}

function handleOpenChange(nextOpen: boolean, info: { source: 'trigger' | 'menu' }) {
  if (info.source === 'trigger' || nextOpen) {
    open.value = nextOpen
  }
}
</script>

<template>
  <a-dropdown
    :menu="{ items, onClick: handleMenuClick }"
    :open="open"
    @open-change="handleOpenChange"
  >
    <a @click.prevent>
      <a-space>
        Hover me
        <DownOutlined />
      </a-space>
    </a>
  </a-dropdown>
</template>
```
### Context Menu
The default trigger mode is `hover`, you can change it to `contextMenu`. The pop-up menu position will follow the right-click position.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { theme } from 'antdv-next'

const items: MenuItemType[] = [
  {
    label: '1st menu item',
    key: '1',
  },
  {
    label: '2nd menu item',
    key: '2',
  },
  {
    label: '3rd menu item',
    key: '3',
  },
]

const { token } = theme.useToken()
</script>

<template>
  <a-dropdown :menu="{ items }" :trigger="['contextmenu']">
    <div
      :style="{
        color: token.colorTextTertiary,
        background: token.colorBgLayout,
        height: '200px',
        textAlign: 'center',
        lineHeight: '200px',
      }"
    >
      Right Click on here
    </div>
  </a-dropdown>
</template>
```
### Loading
A loading indicator can be added to a button by setting the `loading` property.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined, EllipsisOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const items: MenuItemType[] = [
  {
    label: 'Submit and continue',
    key: '1',
  },
]

const loadings = ref<boolean[]>([])

function enterLoading(index: number) {
  const nextLoadings = [...loadings.value]
  nextLoadings[index] = true
  loadings.value = nextLoadings
  setTimeout(() => {
    const resetLoadings = [...loadings.value]
    resetLoadings[index] = false
    loadings.value = resetLoadings
  }, 6000)
}
</script>

<template>
  <a-space direction="vertical">
    <a-space-compact>
      <a-button type="primary" loading>
        Submit
      </a-button>
      <a-dropdown :menu="{ items }">
        <a-button type="primary">
          <template #icon>
            <EllipsisOutlined />
          </template>
        </a-button>
      </a-dropdown>
    </a-space-compact>
    <a-space-compact size="small">
      <a-button type="primary" loading>
        Submit
      </a-button>
      <a-dropdown :menu="{ items }">
        <a-button type="primary">
          <template #icon>
            <EllipsisOutlined />
          </template>
        </a-button>
      </a-dropdown>
    </a-space-compact>
    <a-space-compact>
      <a-button type="primary" :loading="loadings[0]" @click="enterLoading(0)">
        Submit
      </a-button>
      <a-dropdown :menu="{ items }">
        <a-button type="primary">
          <template #icon>
            <EllipsisOutlined />
          </template>
        </a-button>
      </a-dropdown>
    </a-space-compact>
    <a-space-compact>
      <a-button :loading="loadings[1]" @click="enterLoading(1)">
        Submit
      </a-button>
      <a-dropdown :menu="{ items }">
        <a-button>
          <template #icon>
            <DownOutlined />
          </template>
        </a-button>
      </a-dropdown>
    </a-space-compact>
  </a-space>
</template>
```
### Selectable Menu
Configure the `selectable` property in `menu` to enable selectable ability.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'

const items: MenuItemType[] = [
  {
    key: '1',
    label: 'Item 1',
  },
  {
    key: '2',
    label: 'Item 2',
  },
  {
    key: '3',
    label: 'Item 3',
  },
]
</script>

<template>
  <a-dropdown
    :menu="{
      items,
      selectable: true,
      defaultSelectedKeys: ['3'],
    }"
  >
    <a-typography-link>
      <a-space>
        Selectable
        <DownOutlined />
      </a-space>
    </a-typography-link>
  </a-dropdown>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of the Dropdown by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { DropdownProps, MenuItemType } from 'antdv-next'
import { DownOutlined, LogoutOutlined, SettingOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const items: MenuItemType[] = [
  {
    key: '1',
    label: 'Profile',
  },
  {
    key: '2',
    label: 'Settings',
    icon: SettingOutlined,
  },
  {
    type: 'divider',
  },
  {
    key: '3',
    label: 'Logout',
    icon: LogoutOutlined,
    danger: true,
  },
]

const classes: DropdownProps['classes'] = {
  root: 'demo-dropdown-root',
}

const objectStyles: DropdownProps['styles'] = {
  root: {
    backgroundColor: '#ffffff',
    border: '1px solid #d9d9d9',
    borderRadius: '4px',
  },
  item: {
    padding: '8px 12px',
    fontSize: '14px',
  },
  itemTitle: {
    fontWeight: '500',
  },
  itemIcon: {
    color: '#1890ff',
    marginRight: '8px',
  },
  itemContent: {
    backgroundColor: 'transparent',
  },
}

const functionStyles: DropdownProps['styles'] = (info) => {
  const isClick = info.props.trigger?.includes('click')
  if (isClick) {
    return {
      root: {
        borderColor: '#1890ff',
        borderRadius: '8px',
      },
    }
  }
  return {}
}

const sharedProps: DropdownProps = {
  menu: { items },
  placement: 'bottomLeft',
  classes,
}
</script>

<template>
  <a-flex gap="medium" wrap="wrap">
    <a-space direction="vertical" size="large">
      <a-dropdown v-bind="sharedProps" :styles="objectStyles">
        <a-button>
          <a-space>
            Object Style
            <DownOutlined />
          </a-space>
        </a-button>
      </a-dropdown>

      <a-dropdown v-bind="sharedProps" :styles="functionStyles" :trigger="['click']">
        <a-button type="primary">
          <a-space>
            Function Style
            <DownOutlined />
          </a-space>
        </a-button>
      </a-dropdown>
    </a-space>
  </a-flex>
</template>

<style>
.demo-dropdown-root {
  background-color: v-bind('token.colorFillAlter');
  border: 1px solid v-bind('token.colorBorder');
  border-radius: v-bind('`${token.borderRadius}px`');
}
</style>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the Dropdown component. Supports object or function | DropdownClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the Dropdown component. Supports object or function | DropdownStylesType | - | - | ✓ |
| menu | The menu props | MenuProps & &#123; activeKey?: VcMenuProps['activeKey'], onClick?: MenuEmits['click'] &#125; | - | - | × |
| autoFocus | Focus the first menu item when opened | boolean | - | - | × |
| arrow | Whether the dropdown arrow should be visible. Supports `pointAtCenter` | boolean \| DropdownArrowOptions | false | - | × |
| trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | ('click' \| 'hover' \| 'contextmenu')[] | ['hover'] | - | × |
| popupRender | Customize popup content | (menu: VueNode) =&gt; VueNode | - | - | × |
| open | Whether the dropdown menu is currently open | boolean | - | - | × |
| disabled | Whether the dropdown menu is disabled | boolean | - | - | × |
| destroyOnHidden | Whether destroy dropdown when hidden | boolean | false | - | × |
| align | Popup align config | AlignType | - | - | × |
| getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) =&gt; HTMLElement | () =&gt; document.body | - | × |
| prefixCls | Customize prefix class name | string | - | - | × |
| transitionName | Motion name of dropdown | string | - | - | × |
| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` | Placement | `bottomLeft` | left/right: 1.4.0 | × |
| forceRender | Force render dropdown overlay | boolean | - | - | × |
| mouseEnterDelay | Delay in seconds before showing dropdown | number | 0.15 | - | × |
| mouseLeaveDelay | Delay in seconds before hiding dropdown | number | 0.1 | - | × |
| openClassName | Class added to trigger when dropdown is open | string | - | - | × |
| autoAdjustOverflow | Whether to adjust dropdown placement automatically when dropdown is off screen | boolean \| AdjustOverflow | true | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| openChange | Called when the open state is changed. Not trigger when hidden by click item | (open: boolean, info: &#123; source: 'trigger' \| 'menu' &#125;) =&gt; void | - |
| menuClick | Callback when menu item clicked | MenuEmits['click'] | - |

### Slots

| Slot        | Description             | Type                      | Version |
|-------------|-------------------------|---------------------------| ---     |
| popupRender | Customize popup content | (menu: VueNode) =&gt; any | -       |
| labelRender | Customize label content | (item: Item) =&gt; any    | -       |

Dropdown also supports Menu slots (such as `labelRender`) via the Dropdown slots.

## Note

Please ensure that the child node of `Dropdown` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Dropdown" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### How to prevent Dropdown from being squeezed when it exceeds the screen horizontally? {#faq-dropdown-squeezed}

You can use `width: max-content` style to handle this. ref [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135).

---
Title: Empty
URL: https://www.antdv-next.com/components/empty.md
---

## When To Use

- When there is no data provided, display for friendly tips.
- User tutorial to create something in a fresh new situation.

## Examples

### Basic
Basic empty state.
```vue
<template>
  <a-empty />
</template>
```
### Choose image
Choose built-in image.
```vue
<script setup lang="ts">
import { Empty } from 'antdv-next'
</script>

<template>
  <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
</template>
```
### Customize
Customize description and extra content.
```vue
<template>
  <a-empty
    :styles="{ image: { height: '60px' } }"
    image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
  >
    <template #description>
      Customize <a href="#API">Description</a>
    </template>
    <a-button type="primary">
      Create Now
    </a-button>
  </a-empty>
</template>
```
### ConfigProvider
Use ConfigProvider to customize empty content.
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'

const customize = ref(true)
const controlStyle = { width: '200px' }

function renderEmpty() {
  return h(
    'div',
    { style: { textAlign: 'center' } },
    [
      h(SmileOutlined, { style: { fontSize: '20px' } }),
      h('p', 'Data Not Found'),
    ],
  )
}

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
]

const renderTransferItem = (item: any) => item.title
</script>

<template>
  <a-switch
    v-model:checked="customize"
    checked-children="customize"
    un-checked-children="default"
  />
  <a-divider />
  <a-config-provider :render-empty="customize ? renderEmpty : undefined">
    <a-space vertical style="width: 100%">
      <h4>Select</h4>
      <a-select :style="controlStyle" />
      <h4>TreeSelect</h4>
      <a-tree-select :style="controlStyle" :tree-data="[]" />
      <h4>Cascader</h4>
      <a-cascader :style="controlStyle" :options="[]" show-search />
      <h4>Transfer</h4>
      <a-transfer :data-source="[]" :target-keys="[]" :render="renderTransferItem" />
      <h4>Table</h4>
      <a-table style="margin-top: 8px" :columns="columns" :data-source="[]" />
    </a-space>
    <!--    <template #renderEmpty> -->
    <!--      <div style="text-align: center"> -->
    <!--        <SmileOutlined style="font-size: 20px" /> -->
    <!--        <p>Data Not Found</p> -->
    <!--      </div> -->
    <!--    </template> -->
  </a-config-provider>
</template>
```
### Custom semantic dom styling
Custom semantic dom styling.
```vue
<script setup lang="ts">
const classes = {
  root: 'empty-demo-root',
  image: 'empty-demo-image',
  description: 'empty-demo-description',
  footer: 'empty-demo-footer',
}

const styles = {
  root: { padding: '24px', background: '#fafafa' },
  image: { height: '60px' },
}
</script>

<template>
  <a-empty
    description="No Data"
    :classes="classes"
    :styles="styles"
  >
    <a-button type="primary">
      Create
    </a-button>
  </a-empty>
</template>

<style scoped>
.empty-demo-root {
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
}

.empty-demo-description {
  color: #1677ff;
}

.empty-demo-footer :deep(.ant-btn) {
  border-radius: 999px;
}
</style>
```
### No description
Hide default description.
```vue
<template>
  <a-empty :description="false" />
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | EmptyClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | EmptyStylesType | - | - | ✓ |
| image | Customize image. Will treat as image url when string provided | VueNode | `Empty.PRESENTED_IMAGE_DEFAULT` | - | ✓ |
| description | Customize description | VueNode | - | - | × |
| rootClass | Root container class | string | - | - | × |
| prefixCls | Prefix class name | string | - | - | × |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| image | Customize image. Will treat as image url when string provided | () => any | - |
| description | Customize description | () => any | - |
| default | Footer content | () => any | - |

## Built-in images {#built-in-images}

- Empty.PRESENTED_IMAGE_SIMPLE

  <div class="site-empty-buildIn-img site-empty-buildIn-simple"></div>

- Empty.PRESENTED_IMAGE_DEFAULT

  <div class="site-empty-buildIn-img site-empty-buildIn-default"></div>

<style>
  .site-empty-buildIn-img {
    background-repeat: no-repeat;
    background-size: contain;
  }
  .site-empty-buildIn-simple {
    width: 55px;
    height: 35px;
    background-image: url("https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png");
  }
  .site-empty-buildIn-default {
    width: 121px;
    height: 116px;
    background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
  }
</style>

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token {#design-token}

<ComponentTokenTable component="Empty"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Empty
URL: https://www.antdv-next.com/components/flex.md
---

## When To Use

- Good for setting spacing between elements.
- Suitable for setting various horizontal and vertical alignments.

### Difference with Space component

- Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
- Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.

## Examples

### basic
The basic usage.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { ref } from 'vue'

const value = ref('horizontal')
const baseStyle: CSSProperties = {
  width: '25%',
  height: '54px',
}
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-radio-group v-model:value="value">
      <a-radio value="horizontal">
        horizontal
      </a-radio>
      <a-radio value="vertical">
        vertical
      </a-radio>
    </a-radio-group>
    <a-flex :vertical="value === 'vertical'">
      <div
        v-for="(item, index) in new Array(4)"
        :key="item"
        :style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
      />
    </a-flex>
  </a-flex>
</template>
```
### align
Set align.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { ref } from 'vue'

const justifyOptions = [
  'flex-start',
  'center',
  'flex-end',
  'space-between',
  'space-around',
  'space-evenly',
]

const alignOptions = ['flex-start', 'center', 'flex-end']
const justify = ref(justifyOptions[0])
const alignItems = ref(alignOptions[0])
const boxStyle: CSSProperties = {
  width: '100%',
  height: '120px',
  borderRadius: '6px',
  border: '1px solid #40a9ff',
}
</script>

<template>
  <a-flex gap="medium" align="start" vertical>
    <p>Select justify :</p>
    <a-segmented v-model:value="justify" :options="justifyOptions" />
    <p>Select align :</p>
    <a-segmented v-model:value="alignItems" :options="alignOptions" />
    <a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems">
      <a-button type="primary">
        Primary
      </a-button>
      <a-button type="primary">
        Primary
      </a-button>
      <a-button type="primary">
        Primary
      </a-button>
      <a-button type="primary">
        Primary
      </a-button>
    </a-flex>
  </a-flex>
</template>
```
### gap
Set the `gap` between elements, which has three preset sizes: `small`, `medium`, `large`, You can also customize the gap size.
```vue
<script setup lang="ts">
import { ref } from 'vue'

type SizeType = 'small' | 'medium' | 'large' | undefined

const gapSize = ref<SizeType | 'customize'>('small')

const customGapSize = ref<number>(0)
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-radio-group v-model:value="gapSize">
      <a-radio value="small">
        small
      </a-radio>
      <a-radio value="medium">
        medium
      </a-radio>
      <a-radio value="large">
        large
      </a-radio>
      <a-radio value="customize">
        customize
      </a-radio>
    </a-radio-group>
    <template v-if="gapSize === 'customize'">
      <a-slider v-model:value="customGapSize" />
    </template>
    <a-flex :gap="gapSize !== 'customize' ? gapSize : customGapSize">
      <a-button type="primary">
        Primary
      </a-button>
      <a-button>Default</a-button>
      <a-button type="dashed">
        Dashed
      </a-button>
      <a-button type="link">
        Link
      </a-button>
    </a-flex>
  </a-flex>
</template>
```
### wrap
Auto wrap line.
```vue
<template>
  <a-flex wrap="wrap" gap="small">
    <a-button v-for="item in new Array(24)" :key="item" type="primary">
      Button
    </a-button>
  </a-flex>
</template>
```
### combination
Nesting can achieve more complex layouts.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'

const cardStyle: CSSProperties = {
  width: '620px',
}
const imgStyle: CSSProperties = {
  display: 'block',
  width: '273px',
}
</script>

<template>
  <a-card :style="cardStyle" :styles="{ body: { padding: 0, overflow: 'hidden' } }">
    <a-flex justify="space-between">
      <img
        alt="avatar"
        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        :style="imgStyle"
      >
      <a-flex vertical align="flex-end" justify="space-between" :style="{ padding: '32px' }">
        <a-typography>
          <a-typography-title :level="3">
            “antd is an enterprise-class UI design language and Vue UI library.”
          </a-typography-title>
        </a-typography>
        <a-button type="primary" href="https://antdv.com" target="_blank">
          Get Start
        </a-button>
      </a-flex>
    </a-flex>
  </a-card>
</template>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| vertical | Is direction of the flex vertical, use `flex-direction: column` | boolean | `false` | - | ✓ |
| wrap | Set whether the element is displayed in a single line or in multiple lines | boolean \| CSSProperties['flexWrap'] | nowrap | - | × |
| justify | Sets the alignment of elements in the direction of the main axis | CSSProperties['justifyContent'] | normal | - | × |
| align | Sets the alignment of elements in the direction of the cross axis | CSSProperties['alignItems'] | normal | - | × |
| flex | flex CSS shorthand properties | CSSProperties['flex'] | normal | - | × |
| gap | Sets the gap between grids | CSSProperties['gap'] \| SizeType | - | - | × |
| component | custom element type | any | `div` | - | × |

## Design Token

<ComponentTokenTable component="Flex" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: FloatButton
URL: https://www.antdv-next.com/components/float-button.md
---

## When To Use

- For global functionality on the site.
- Buttons that can be seen wherever you browse.

## Examples

### Basic
The most basic usage.
```vue
<template>
  <a-float-button @click="() => console.log('onClick')" />
</template>
```
### Type
Change the type of the FloatButton with the `type` property.
```vue
<script setup lang="ts">
import { QuestionCircleOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-float-button type="primary" style="inset-inline-end: 24px;">
    <template #icon>
      <QuestionCircleOutlined />
    </template>
  </a-float-button>
  <a-float-button type="default" style="inset-inline-end: 94px;">
    <template #icon>
      <QuestionCircleOutlined />
    </template>
  </a-float-button>
</template>
```
### Shape
Change the shape of the FloatButton with the `shape` property.
```vue
<script setup lang="ts">
import { CustomerServiceOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-float-button shape="circle" type="primary" style="inset-inline-end: 94px">
    <template #icon>
      <CustomerServiceOutlined />
    </template>
  </a-float-button>
  <a-float-button shape="square" type="primary" style="inset-inline-end: 24px">
    <template #icon>
      <CustomerServiceOutlined />
    </template>
  </a-float-button>
</template>
```
### Content
Setting the `content` property allows you to show a FloatButton with a description.

> supported only when `shape` is `square`. Due to narrow space for text, short sentence is recommended.
```vue
<script setup lang="ts">
import { FileTextOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-float-button
    shape="square"
    content="HELP INFO"
    style="inset-inline-end: 24px;"
  >
    <template #icon>
      <FileTextOutlined />
    </template>
  </a-float-button>
  <a-float-button
    shape="square"
    content="HELP INFO"
    style="inset-inline-end: 94px;"
  />
  <a-float-button
    shape="square"
    content="HELP"
    style="inset-inline-end: 164px;"
  >
    <template #icon>
      <FileTextOutlined />
    </template>
  </a-float-button>
</template>
```
### FloatButton with tooltip
Setting the `tooltip` property shows the FloatButton with a tooltip.
```vue
<template>
  <a-float-button
    style="inset-block-end: 108px;"
    :tooltip="{
      title: 'Tooltip',
      color: 'blue',
      placement: 'top',
    }"
  />
  <a-float-button>
    <template #tooltip>
      <div>Documents</div>
    </template>
  </a-float-button>
</template>
```
### FloatButton Group
When multiple buttons are used together, `<a-float-button-group />` is recommended. By setting the `shape` property of FloatButton.Group, you can change the shape of group. The `shape` of the FloatButton.Group will override the `shape` of FloatButtons inside.
```vue
<script setup lang="ts">
import { QuestionCircleOutlined, SyncOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-float-button-group shape="circle" style="inset-inline-end: 24px;">
    <a-float-button>
      <template #icon>
        <QuestionCircleOutlined />
      </template>
    </a-float-button>
    <a-float-button />
    <a-float-back-top :visibility-height="0" />
  </a-float-button-group>
  <a-float-button-group shape="square" style="inset-inline-end: 94px;">
    <a-float-button>
      <template #icon>
        <QuestionCircleOutlined />
      </template>
    </a-float-button>
    <a-float-button />
    <a-float-button>
      <template #icon>
        <SyncOutlined />
      </template>
    </a-float-button>
    <a-float-back-top :visibility-height="0" />
  </a-float-button-group>
</template>
```
### Menu mode
Open menu mode with `trigger`, which could be `hover` or `click`.
```vue
<script setup lang="ts">
import { CommentOutlined, CustomerServiceOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-float-button-group
    trigger="click"
    type="primary"
    shape="square"
    style="inset-inline-end: 24px"
  >
    <template #icon>
      <CustomerServiceOutlined />
    </template>
    <a-float-button />
    <a-float-button>
      <template #icon>
        <CommentOutlined />
      </template>
    </a-float-button>
  </a-float-button-group>

  <a-float-button-group
    trigger="hover"
    type="primary"
    style="inset-inline-end: 94px"
  >
    <template #icon>
      <CustomerServiceOutlined />
    </template>
    <a-float-button />
    <a-float-button>
      <template #icon>
        <CommentOutlined />
      </template>
    </a-float-button>
  </a-float-button-group>
</template>

<style scoped>

</style>
```
### Controlled mode
Set the component to controlled mode through `open`, which need to be used together with `trigger`.
```vue
<script setup lang="ts">
import { CommentOutlined, CustomerServiceOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const open = ref(true)
</script>

<template>
  <a-switch v-model:checked="open" style="margin: 16px;" />
  <a-float-button-group
    :open="open"
    trigger="click"
    style="inset-inline-end: 24px;"
  >
    <template #icon>
      <CustomerServiceOutlined />
    </template>
    <a-float-button />
    <a-float-button />
    <a-float-button>
      <template #icon>
        <CommentOutlined />
      </template>
    </a-float-button>
  </a-float-button-group>
  <a-float-button-group
    :open="open"
    shape="square"
    trigger="click"
    style="inset-inline-end: 88px;"
  >
    <template #icon>
      <CustomerServiceOutlined />
    </template>
    <a-float-button />
    <a-float-button />
    <a-float-button>
      <template #icon>
        <CommentOutlined />
      </template>
    </a-float-button>
  </a-float-button-group>
</template>
```
### placement
Customize animation placement, providing four preset placement: `top`, `right`, `bottom`, `left`, the `top` position by default.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { CommentOutlined, DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@antdv-next/icons'

const BOX_SIZE = 100
const BUTTON_SIZE = 40

const wrapperStyle: CSSProperties = {
  width: '100%',
  height: '100vh',
  overflow: 'hidden',
  position: 'relative',
}

const boxStyle: CSSProperties = {
  width: `${BOX_SIZE}px`,
  height: `${BOX_SIZE}px`,
  position: 'relative',
}

const insetInlineEnd = [
  (BOX_SIZE - BUTTON_SIZE) / 2,
  -(BUTTON_SIZE / 2),
  (BOX_SIZE - BUTTON_SIZE) / 2,
  BOX_SIZE - BUTTON_SIZE / 2,
]

const bottom = [
  BOX_SIZE - BUTTON_SIZE / 2,
  (BOX_SIZE - BUTTON_SIZE) / 2,
  -BUTTON_SIZE / 2,
  (BOX_SIZE - BUTTON_SIZE) / 2,
]

const placements = ['top', 'right', 'bottom', 'left'] as const
const icons = [UpOutlined, RightOutlined, DownOutlined, LeftOutlined]
</script>

<template>
  <a-flex justify="space-evenly" align="center" :style="wrapperStyle">
    <div :style="boxStyle">
      <a-float-button-group
        v-for="(placement, i) in placements"
        :key="placement"
        trigger="click"
        :placement="placement"
        :style="{
          position: 'absolute',
          insetInlineEnd: `${insetInlineEnd[i]}px`,
          bottom: `${bottom[i]}px`,
        }"
      >
        <template #icon>
          <component :is="icons[i]" />
        </template>
        <a-float-button />
        <a-float-button>
          <template #icon>
            <CommentOutlined />
          </template>
        </a-float-button>
      </a-float-button-group>
    </div>
  </a-flex>
</template>
```
### BackTop
`BackTop` makes it easy to go back to the top of the page.
```vue
<template>
  <div class="h-300vh p-10px">
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <a-float-back-top />
  </div>
</template>
```
### Progress ring
Use `showProgress` to display the current scroll progress around the BackTop button edge.
```vue
<template>
  <div class="h-300vh p-10px">
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <a-float-back-top show-progress :visibility-height="0" :style="{ insetInlineEnd: '24px' }" shape="circle" />
    <a-float-back-top show-progress :visibility-height="0" :style="{ insetInlineEnd: '88px' }" shape="square" />
  </div>
</template>
```
### badge
FloatButton with Badge.
```vue
<script setup lang="ts">
import { QuestionCircleOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-float-button shape="circle" style="inset-inline-end: calc(24px + 70px + 70px)" :badge="{ dot: true }" />
  <a-float-button-group shape="circle" style="inset-inline-end: calc(24px + 70px)">
    <a-float-button :badge="{ count: 5, color: 'blue' }">
      <template #tooltip>
        <div>Custom badge color</div>
      </template>
    </a-float-button>
    <a-float-button :badge="{ count: 5 }" />
  </a-float-button-group>
  <a-float-button-group shape="circle">
    <a-float-button :badge="{ count: 12 }">
      <template #icon>
        <QuestionCircleOutlined />
      </template>
    </a-float-button>
    <a-float-button :badge="{ count: 123, overflowCount: 999 }" />
    <a-float-back-top :visibility-height="0" />
  </a-float-button-group>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of FloatButton by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { FloatButtonProps } from 'antdv-next'
import { QuestionCircleOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const classes: FloatButtonProps['classes'] = {
  root: 'demo-float-button-root',
  content: 'demo-float-button-content',
}

const stylesObject: FloatButtonProps['styles'] = {
  root: {
    boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)',
  },
}

const stylesFn: FloatButtonProps['styles'] = (info) => {
  if (info?.props?.type === 'primary') {
    return {
      root: {
        backgroundColor: '#171717',
      },
      content: {
        color: '#fff',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-float-button-group shape="circle" style="inset-inline-end: 94px;">
    <a-float-button
      type="primary"
      :classes="classes"
      :styles="stylesFn"
    >
      <template #tooltip>
        <div>custom style class</div>
      </template>
    </a-float-button>
    <a-float-button
      type="default"
      :classes="classes"
      :styles="stylesObject"
    >
      <template #icon>
        <QuestionCircleOutlined />
      </template>
    </a-float-button>
  </a-float-button-group>
</template>

<style>
.demo-float-button-root {
  border: 1px solid v-bind('token.colorBorder');
  border-radius: v-bind('`${token.borderRadius}px`');
  padding: v-bind('`${token.paddingXS}px`') v-bind('`${token.padding}px`');
  height: auto;
}

.demo-float-button-content {
  color: v-bind('token.colorText');
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### FloatButtonGroup

#### Props {#floatbuttongroup-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| shape | Setting button shape of children | `circle` \| `square` | `circle` | - | × |
| trigger | Which action can trigger menu open/close | `click` \| `hover` | - | - | × |
| open | Whether the menu is visible or not, use it with trigger | boolean | - | - | × |
| closeIcon | Customize close button icon | VueNode | `<CloseOutlined />` | - | ✓ |
| placement | Customize menu animation placement | `top` \| `left` \| `right` \| `bottom` | `top` | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;)=&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;)=&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |

#### Events {#floatbuttongroup-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | Set the handler to handle `click` event (only work in Menu mode) | (e: MouseEvent) =&gt; void | - |

#### Slots {#floatbuttongroup-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Children buttons content | () =&gt; any | - |
| icon | Icon of trigger button | () =&gt; any | - |
| closeIcon | Customize close button icon | () =&gt; any | - |

### FloatButton

#### Props {#floatbutton-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| icon | Set the icon component of button | VueNode | - | - | × |
| content | Text and other | VueNode | - | - | × |
| ~~description~~ | Please use `content` instead | VueNode | - | - | × |
| tooltip | The text shown in the tooltip | VueNode \| TooltipProps | - | - | × |
| type | Setting button type | `default` \| `primary` | `default` | - | × |
| shape | Setting button shape | `circle` \| `square` | `circle` | - | × |
| href | The target of hyperlink | string | - | - | × |
| target | Specifies where to display the linked URL | string | - | - | × |
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | `submit` \| `reset` \| `button` | `button` | - | × |
| badge | Attach Badge to FloatButton. `status` and other props related are not supported. | [BadgeProps](/components/badge#api) | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;)=&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;)=&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |

#### Events {#floatbutton-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | Set the handler to handle `click` event | (e: MouseEvent) =&gt; void | - |

#### Slots {#floatbutton-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Button content | () =&gt; any | - |
| icon | Set the icon component of button | () =&gt; any | - |
| tooltip | The text shown in the tooltip | (props?: TooltipProps) =&gt; any | - |

### FloatBackTop {#floatbacktop}

#### Props {#floatbacktop-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| duration | Time to return to top (ms). This property is ignored when reduced motion (`prefers-reduced-motion: reduce`) is enabled | number | 450 | - |
| showProgress | Show the current scroll progress ring around the BackTop button edge | boolean | false | - |
| target | Specifies the scrollable area dom node | () =&gt; HTMLElement | () =&gt; window | - |
| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | - |
| target | Specifies where to display the linked URL | '_self' \| '_blank' \| '_parent' \| '_top' \| string | - | - |
| badge | Attach Badge to FloatButton. `status` and other props related are not supported. | FloatButtonBadgeProps & &#123; class?: string &#125; | - | - |
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type) | ButtonHTMLType | `button` | - |
| ariaLabel | - | string | - | - |
| style | - | CSSProperties | - | - |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | FloatButtonClassNamesType | - | - |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | FloatButtonStylesType | - | - |

#### Events {#floatbacktop-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | A callback function, which can be executed when you click the button | () =&gt; void | - |

## Semantic DOM

### FloatButton

<demo src="./demo/_semantic.vue" simplify></demo>


### FloatButtonGroup

<demo src="./demo/_semantic_group.vue" simplify></demo>

Refer to [Semantic DOM](#semantic-dom) for detailed semantic structure information.

## Design Token

<ComponentTokenTable component="FloatButton" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Form
URL: https://www.antdv-next.com/components/form.md
---

## When To Use {#when-to-use}

- When you need to create an instance or collect information.
- When you need to validate fields in certain rules.

## Examples {#examples}

### Basic Usage
Basic form usage.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { reactive, shallowRef } from 'vue'

const model = reactive({
  username: '',
  password: '',
  remember: true,
})
function handleFinished(values: any) {
  console.log('Success:', values)
}
function handleFinishFailed(errorInfo: any) {
  console.log('Failed:', errorInfo)
}
const formRef = shallowRef<FormInstance>()
</script>

<template>
  <a-form
    ref="formRef"
    :model="model"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    style="max-width: 600px"
    auto-complete="off"
    @finish="handleFinished"
    @finish-failed="handleFinishFailed"
  >
    <a-form-item name="username" label="Username" :rules="[{ required: true, message: 'Please input your username!' }]">
      <a-input v-model:value="model.username" />
    </a-form-item>
    <a-form-item name="password" label="Password" :rules="[{ required: true, message: 'Please input your password!' }]">
      <a-input-password v-model:value="model.password" />
    </a-form-item>
    <a-form-item name="remember" :label="null">
      <a-checkbox v-model:checked="model.remember">
        Remember me!
      </a-checkbox>
    </a-form-item>
    <a-form-item :label="null">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Form methods
Interact with form fields through form instance methods.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { reactive, shallowRef } from 'vue'

const formRef = shallowRef<FormInstance>()
const model = reactive({
  note: '',
  gender: undefined as string | undefined,
  customizeGender: '',
})

const genderOptions = [
  { label: 'male', value: 'male' },
  { label: 'female', value: 'female' },
  { label: 'other', value: 'other' },
]

function handleGenderChange(value: string) {
  switch (value) {
    case 'male':
      model.note = 'Hi, man!'
      break
    case 'female':
      model.note = 'Hi, lady!'
      break
    case 'other':
      model.note = 'Hi there!'
      break
    default:
      break
  }
}

function handleFinish(values: any) {
  console.log(values)
}

function handleReset() {
  formRef.value?.resetFields?.()
}

function handleFill() {
  formRef.value?.setFieldsValue?.({ note: 'Hello world!', gender: 'male' })
}
</script>

<template>
  <a-form
    ref="formRef"
    name="control-hooks"
    :model="model"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    style="max-width: 600px"
    @finish="handleFinish"
  >
    <a-form-item name="note" label="Note" :rules="[{ required: true }]">
      <a-input v-model:value="model.note" />
    </a-form-item>
    <a-form-item name="gender" label="Gender" :rules="[{ required: true }]">
      <a-select
        v-model:value="model.gender"
        allow-clear
        placeholder="Select a option and change input text above"
        :options="genderOptions"
        @change="handleGenderChange"
      />
    </a-form-item>
    <a-form-item v-if="model.gender === 'other'" name="customizeGender" label="Customize Gender" :rules="[{ required: true }]">
      <a-input v-model:value="model.customizeGender" />
    </a-form-item>
    <a-form-item :label="null">
      <a-space>
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
        <a-button html-type="button" @click="handleReset">
          Reset
        </a-button>
        <a-button type="link" html-type="button" @click="handleFill">
          Fill form
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>
```
### useForm instance
Create a form instance with `Form.useForm()`. The instance is available before the `Form` mounts. With a single form you don't need to bind it manually—`useForm()` auto connects to the descendant `Form`.

> ⚠️ Do NOT destructure the value returned by `useForm()` (e.g. `const { validateFields } = useForm()`). It is a lazy proxy that resolves methods off the real instance on each access; destructuring snapshots a method before the `Form` mounts, capturing a no-op and losing the connection to the instance. Always keep the whole reference and call `form.xxx()`.
```vue
<script setup lang="ts">
import { useForm } from 'antdv-next'
import { reactive } from 'vue'

// `useForm` 在 Form 挂载前即返回实例代理，单表单场景自动连接。
const form = useForm()

const model = reactive({
  note: '',
  gender: undefined as string | undefined,
})

const genderOptions = [
  { label: 'male', value: 'male' },
  { label: 'female', value: 'female' },
  { label: 'other', value: 'other' },
]

function handleFinish(values: any) {
  console.log('Finish:', values)
}

function handleReset() {
  form.resetFields()
}

function handleFill() {
  form.setFieldsValue({ note: 'Hello world!', gender: 'male' })
}

async function handleValidate() {
  try {
    const values = await form.validateFields()
    console.log('Valid:', values)
  }
  catch (err) {
    console.log('Validate failed:', err)
  }
}
</script>

<template>
  <a-form
    name="use-form"
    :model="model"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    style="max-width: 600px"
    @finish="handleFinish"
  >
    <a-form-item name="note" label="Note" :rules="[{ required: true }]">
      <a-input v-model:value="model.note" />
    </a-form-item>
    <a-form-item name="gender" label="Gender" :rules="[{ required: true }]">
      <a-select
        v-model:value="model.gender"
        allow-clear
        placeholder="Select a option"
        :options="genderOptions"
      />
    </a-form-item>
    <a-form-item :label="null">
      <a-space>
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
        <a-button html-type="button" @click="handleValidate">
          Validate
        </a-button>
        <a-button html-type="button" @click="handleReset">
          Reset
        </a-button>
        <a-button type="link" html-type="button" @click="handleFill">
          Fill form
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>
```
### Connect form by name
With multiple forms, pass the same `name` to `useForm` as the `Form`'s `name` to connect by name—no template ref needed. This lets you control several forms from one component.
```vue
<script setup lang="ts">
import { useForm } from 'antdv-next'
import { reactive } from 'vue'

// 按 name 连接：useForm('xxx') 对应 <a-form name="xxx">
const loginForm = useForm('login')
const profileForm = useForm('profile')

const loginModel = reactive({ username: '', password: '' })
const profileModel = reactive({ nickname: '', bio: '' })

async function syncNickname() {
  // 跨表单读取：把登录用户名同步到资料昵称
  const { username } = await loginForm.validateFields()
  profileForm.setFieldsValue({ nickname: username })
}

function resetAll() {
  loginForm.resetFields()
  profileForm.resetFields()
}
</script>

<template>
  <a-space direction="vertical" size="large" style="width: 100%; max-width: 520px">
    <a-card title="Login" size="small">
      <a-form
        name="login"
        :model="loginModel"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item name="username" label="Username" :rules="[{ required: true }]">
          <a-input v-model:value="loginModel.username" />
        </a-form-item>
        <a-form-item name="password" label="Password">
          <a-input-password v-model:value="loginModel.password" />
        </a-form-item>
      </a-form>
    </a-card>

    <a-card title="Profile" size="small">
      <a-form
        name="profile"
        :model="profileModel"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item name="nickname" label="Nickname">
          <a-input v-model:value="profileModel.nickname" />
        </a-form-item>
        <a-form-item name="bio" label="Bio">
          <a-input v-model:value="profileModel.bio" />
        </a-form-item>
      </a-form>
    </a-card>

    <a-space>
      <a-button type="primary" @click="syncNickname">
        Sync username → nickname
      </a-button>
      <a-button @click="resetAll">
        Reset all
      </a-button>
    </a-space>
  </a-space>
</template>
```
### Bind form via ref
Bind the `useForm` instance explicitly via a template ref (`<a-form :ref="form">`). Explicit binding has the highest priority and is handy when the form is rendered lazily (e.g. inside a modal) and you need to trigger `submit` from outside.
```vue
<script setup lang="ts">
import { useForm } from 'antdv-next'
import { reactive, ref } from 'vue'

interface Values {
  title?: string
  description?: string
  modifier?: string
}

// 显式绑定：把 useForm 的实例作为函数 ref 传给 <a-form :ref="form">
const form = useForm()
const open = ref(false)
const formValues = ref<Values>()

const model = reactive({
  title: '',
  description: '',
  modifier: 'public',
})

function handleCreate(values: Values) {
  console.log('Received values of form: ', values)
  formValues.value = values
  open.value = false
}
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-button type="primary" @click="open = true">
      New Collection
    </a-button>
    <pre>{{ JSON.stringify(formValues, null, 2) }}</pre>
  </a-space>

  <a-modal
    v-model:open="open"
    title="Create a new collection"
    ok-text="Create"
    cancel-text="Cancel"
    :ok-button-props="{ autoFocus: true, htmlType: 'submit' }"
    @cancel="open = false"
    @ok="form.submit()"
  >
    <a-form
      :ref="form"
      layout="vertical"
      name="use_form_ref"
      :model="model"
      clear-on-destroy
      @finish="handleCreate"
    >
      <a-form-item
        name="title"
        label="Title"
        :rules="[{ required: true, message: 'Please input the title of collection!' }]"
      >
        <a-input v-model:value="model.title" />
      </a-form-item>
      <a-form-item name="description" label="Description">
        <a-textarea v-model:value="model.description" />
      </a-form-item>
      <a-form-item name="modifier">
        <a-radio-group v-model:value="model.modifier">
          <a-radio value="public">
            Public
          </a-radio>
          <a-radio value="private">
            Private
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
```
### Form Layout
Switch between horizontal, vertical, and inline layouts.

By default, the `horizontal` layout stacks labels above controls when the viewport width is `575px` or less to accommodate narrow screens. Use the `xs` settings in `labelCol` and `wrapperCol` to customize column widths on narrow screens.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  layout: 'horizontal',
  fieldA: '',
  fieldB: '',
})
</script>

<template>
  <a-form
    :model="model"
    :layout="model.layout as any"
    :style="{ maxWidth: model.layout === 'inline' ? 'none' : '600px' }"
  >
    <a-form-item label="Form Layout" name="layout">
      <a-radio-group v-model:value="model.layout">
        <a-radio-button value="horizontal">
          Horizontal
        </a-radio-button>
        <a-radio-button value="vertical">
          Vertical
        </a-radio-button>
        <a-radio-button value="inline">
          Inline
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Field A" name="fieldA">
      <a-input v-model:value="model.fieldA" placeholder="input placeholder" />
    </a-form-item>
    <a-form-item label="Field B" name="fieldB">
      <a-input v-model:value="model.fieldB" placeholder="input placeholder" />
    </a-form-item>
    <a-form-item :label="null">
      <a-button type="primary">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Form mix layout
Mix horizontal and vertical layouts in one page.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const modelHorizontal = reactive({
  horizontal: '',
  vertical: '',
  vertical2: '',
})

const modelVertical = reactive({
  horizontal: '',
  vertical: '',
  vertical2: '',
})
</script>

<template>
  <a-form name="layout-multiple-horizontal" layout="horizontal" :model="modelHorizontal">
    <a-form-item
      label="horizontal"
      name="horizontal"
      :rules="[{ required: true }]"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-input v-model:value="modelHorizontal.horizontal" />
    </a-form-item>
    <a-form-item layout="vertical" label="vertical" name="vertical" :rules="[{ required: true }]">
      <a-input v-model:value="modelHorizontal.vertical" />
    </a-form-item>
    <a-form-item layout="vertical" label="vertical2" name="vertical2" :rules="[{ required: true }]">
      <a-input v-model:value="modelHorizontal.vertical2" />
    </a-form-item>
  </a-form>

  <a-divider />

  <a-form name="layout-multiple-vertical" layout="vertical" :model="modelVertical">
    <a-form-item label="vertical" name="vertical" :rules="[{ required: true }]">
      <a-input v-model:value="modelVertical.vertical" />
    </a-form-item>
    <a-form-item label="vertical2" name="vertical2" :rules="[{ required: true }]">
      <a-input v-model:value="modelVertical.vertical2" />
    </a-form-item>
    <a-form-item
      layout="horizontal"
      label="horizontal"
      name="horizontal"
      :rules="[{ required: true }]"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-input v-model:value="modelVertical.horizontal" />
    </a-form-item>
  </a-form>
</template>
```
### Form disabled
Disable all controls in a form.
```vue
<script setup lang="ts">
import { reactive, ref } from 'vue'

const componentDisabled = ref(true)
const model = reactive({
  checkbox: true,
  radio: 'apple',
  input: '',
  select: undefined as string | undefined,
  switch: false,
})

const selectOptions = [{ label: 'Demo', value: 'demo' }]
</script>

<template>
  <a-space direction="vertical" size="medium" style="width: 100%">
    <a-checkbox v-model:checked="componentDisabled">
      Form disabled
    </a-checkbox>
    <a-form
      :model="model"
      layout="horizontal"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 14 }"
      :disabled="componentDisabled"
      style="max-width: 600px"
    >
      <a-form-item label="Checkbox" name="checkbox">
        <a-checkbox v-model:checked="model.checkbox">
          Checkbox
        </a-checkbox>
      </a-form-item>
      <a-form-item label="Radio" name="radio">
        <a-radio-group v-model:value="model.radio">
          <a-radio value="apple">
            Apple
          </a-radio>
          <a-radio value="pear">
            Pear
          </a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="Input" name="input">
        <a-input v-model:value="model.input" />
      </a-form-item>
      <a-form-item label="Select" name="select">
        <a-select v-model:value="model.select" :options="selectOptions" />
      </a-form-item>
      <a-form-item label="Switch" name="switch">
        <a-switch v-model:checked="model.switch" />
      </a-form-item>
      <a-form-item label="Button">
        <a-button>Button</a-button>
      </a-form-item>
    </a-form>
  </a-space>
</template>
```
### Form variants
Switch variants for inputs inside form.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  variant: 'outlined',
  username: '',
  password: '',
})

const variantOptions = [
  { label: 'outlined', value: 'outlined' },
  { label: 'filled', value: 'filled' },
  { label: 'borderless', value: 'borderless' },
  { label: 'underlined', value: 'underlined' },
]
</script>

<template>
  <a-form
    :model="model"
    layout="vertical"
    :variant="model.variant as any"
    style="max-width: 600px"
  >
    <a-form-item label="Variant" name="variant">
      <a-radio-group v-model:value="model.variant">
        <a-radio-button v-for="item in variantOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Username" name="username" :rules="[{ required: true }]">
      <a-input v-model:value="model.username" placeholder="username" />
    </a-form-item>
    <a-form-item label="Password" name="password" :rules="[{ required: true }]">
      <a-input-password v-model:value="model.password" placeholder="password" />
    </a-form-item>
  </a-form>
</template>
```
### Required style
Display required mark styles.
```vue
<script setup lang="ts">
import type { FormProps } from 'antdv-next'
import { InfoCircleOutlined } from '@antdv-next/icons'
import { h, reactive } from 'vue'

const model = reactive({
  requiredMarkValue: 'optional',
  fieldA: '',
  fieldB: '',
})

const requiredMarkOptions = [
  { label: 'Default', value: true },
  { label: 'Optional', value: 'optional' },
  { label: 'Hidden', value: false },
  { label: 'Customize', value: 'customize' },
]

const customizeRequiredMark: NonNullable<FormProps['requiredMark']> = (labelNode, { required }) => {
  return h(
    'span',
    {},
    [
      h(
        'span',
        {
          style: {
            display: 'inline-block',
            marginRight: '8px',
            padding: '0 6px',
            borderRadius: '4px',
            color: required ? '#cf1322' : '#faad14',
            border: `1px solid ${required ? '#cf1322' : '#faad14'}`,
          },
        },
        required ? 'Required' : 'Optional',
      ),
      labelNode,
    ],
  )
}

function formRequiredMark(value: string | boolean) {
  return value === 'customize' ? customizeRequiredMark : value
}
</script>

<template>
  <a-form
    layout="vertical"
    :model="model"
    :required-mark="formRequiredMark(model.requiredMarkValue as any)"
    style="max-width: 600px"
  >
    <a-form-item label="Required Mark" name="requiredMarkValue">
      <a-radio-group v-model:value="model.requiredMarkValue">
        <a-radio-button v-for="item in requiredMarkOptions" :key="String(item.value)" :value="item.value">
          {{ item.label }}
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Field A" required tooltip="This is a required field">
      <a-input v-model:value="model.fieldA" placeholder="input placeholder" />
    </a-form-item>
    <a-form-item
      label="Field B"
      :tooltip="{ title: 'Tooltip with customize icon', icon: h(InfoCircleOutlined) }"
    >
      <a-input v-model:value="model.fieldB" placeholder="input placeholder" />
    </a-form-item>
    <a-form-item :label="null">
      <a-button type="primary">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Form size
Change form size for built-in controls.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  size: 'medium',
  input: '',
  select: undefined as string | undefined,
  switch: true,
})

const selectOptions = [{ label: 'Demo', value: 'demo' }]
</script>

<template>
  <a-form
    :model="model"
    layout="horizontal"
    :label-col="{ span: 4 }"
    :wrapper-col="{ span: 14 }"
    :size="model.size as any"
    style="max-width: 600px"
  >
    <a-form-item label="Form Size" name="size">
      <a-radio-group v-model:value="model.size">
        <a-radio-button value="small">
          Small
        </a-radio-button>
        <a-radio-button value="medium">
          Medium
        </a-radio-button>
        <a-radio-button value="large">
          Large
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Input" name="input">
      <a-input v-model:value="model.input" />
    </a-form-item>
    <a-form-item label="Select" name="select">
      <a-select v-model:value="model.select" :options="selectOptions" />
    </a-form-item>
    <a-form-item label="InputNumber" name="number">
      <a-input-number style="width: 100%" />
    </a-form-item>
    <a-form-item label="Switch" name="switch">
      <a-switch v-model:checked="model.switch" />
    </a-form-item>
    <a-form-item label="Button">
      <a-button>Button</a-button>
    </a-form-item>
  </a-form>
</template>
```
### label can wrap
Allow label text to wrap.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  username: '',
  password: '',
  password1: '',
})
</script>

<template>
  <a-form
    name="wrap"
    :model="model"
    :label-col="{ flex: '110px' }"
    label-align="left"
    label-wrap
    :wrapper-col="{ flex: 1 }"
    :colon="false"
    style="max-width: 600px"
  >
    <a-form-item label="Normal label" name="username" :rules="[{ required: true }]">
      <a-input v-model:value="model.username" />
    </a-form-item>

    <a-form-item label="A super long label text" name="password" :rules="[{ required: true }]">
      <a-input v-model:value="model.password" />
    </a-form-item>

    <a-form-item label="A super long label text" name="password1">
      <a-input v-model:value="model.password1" />
    </a-form-item>

    <a-form-item label=" ">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### No block rule
Use warningOnly rules without blocking submit.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { message } from 'antdv-next'
import { reactive, shallowRef } from 'vue'

const formRef = shallowRef<FormInstance>()
const model = reactive({
  url: '',
})

const rules = [
  { required: true },
  { type: 'url', warningOnly: true },
  { type: 'string', min: 6 },
]

function handleFinish() {
  message.success('Submit success!')
}

function handleFinishFailed() {
  message.error('Submit failed!')
}

function handleFill() {
  formRef.value?.setFieldsValue?.({ url: 'https://taobao.com/' })
}
</script>

<template>
  <a-form
    ref="formRef"
    layout="vertical"
    :model="model"
    @finish="handleFinish"
    @finish-failed="handleFinishFailed"
  >
    <a-form-item name="url" label="URL" :rules="rules">
      <a-input v-model:value="model.url" placeholder="input placeholder" />
    </a-form-item>
    <a-form-item :label="null">
      <a-space>
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
        <a-button html-type="button" @click="handleFill">
          Fill
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>
```
### Watch Hooks
Watch form values with Vue reactivity.
```vue
<script setup lang="ts">
import { computed, reactive, watch } from 'vue'

const model = reactive({
  username: 'Antdv Next',
  age: 18,
})

const watched = computed(() => ({
  username: model.username,
  age: model.age,
}))

watch(
  () => ({ ...model }),
  (val) => {
    console.log('form values changed:', val)
  },
)
</script>

<template>
  <a-form layout="vertical" :model="model" style="max-width: 600px">
    <a-form-item name="username" label="Username">
      <a-input v-model:value="model.username" />
    </a-form-item>
    <a-form-item name="age" label="Age">
      <a-input-number v-model:value="model.age" style="width: 100%" />
    </a-form-item>
    <a-form-item label="Watched Values">
      <pre style="margin: 0">{{ JSON.stringify(watched, null, 2) }}</pre>
    </a-form-item>
  </a-form>
</template>
```
### Validate Trigger
Configure validate trigger timing for fields.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  blurInput: '',
  changeInput: '',
})
</script>

<template>
  <a-form layout="vertical" :model="model" style="max-width: 600px">
    <a-form-item
      name="blurInput"
      label="Validate on Blur"
      validate-trigger="blur"
      :rules="[{ required: true, message: 'Please input on blur.' }]"
    >
      <a-input v-model:value="model.blurInput" placeholder="blur to validate" />
    </a-form-item>
    <a-form-item
      name="changeInput"
      label="Validate on Change"
      validate-trigger="change"
      :rules="[{ required: true, message: 'Please input on change.' }]"
    >
      <a-input v-model:value="model.changeInput" placeholder="change to validate" />
    </a-form-item>
  </a-form>
</template>
```
### Validate Only
Validate only without triggering UI status updates.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { message } from 'antdv-next'
import { reactive, shallowRef } from 'vue'

const formRef = shallowRef<FormInstance>()
const model = reactive({
  username: '',
  password: '',
})

async function handleValidateOnly() {
  try {
    await formRef.value?.validateFields?.(['username', 'password'], { validateOnly: true })
    message.success('Validate only success')
  }
  catch {
    message.error('Validate only failed')
  }
}
</script>

<template>
  <a-form ref="formRef" layout="vertical" :model="model" style="max-width: 600px">
    <a-form-item name="username" label="Username" :rules="[{ required: true }]">
      <a-input v-model:value="model.username" placeholder="username" />
    </a-form-item>
    <a-form-item name="password" label="Password" :rules="[{ required: true }]">
      <a-input-password v-model:value="model.password" placeholder="password" />
    </a-form-item>
    <a-form-item :label="null">
      <a-space>
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
        <a-button html-type="button" @click="handleValidateOnly">
          Validate Only
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>
```
### Reactive Message
When `message` is a render function, the error text is evaluated at render time. Switching the locale updates messages that are already displayed, without re-running validation.
```vue
<script setup lang="ts">
import type { Rule } from 'antdv-next'
import { reactive, ref } from 'vue'

const locale = ref<'en' | 'zh'>('en')

const messages = {
  username: { en: 'Please input your username', zh: '请输入用户名' },
  email: { en: 'Please input a valid email', zh: '请输入合法的邮箱' },
} as const

const model = reactive({
  username: '',
  email: '',
})

const usernameRules: Rule[] = [
  { required: true, message: () => messages.username[locale.value] },
]
const emailRules: Rule[] = [
  { required: true, type: 'email', message: () => messages.email[locale.value] },
]
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-radio-group v-model:value="locale">
      <a-radio value="en">
        English
      </a-radio>
      <a-radio value="zh">
        中文
      </a-radio>
    </a-radio-group>
    <a-form layout="vertical" :model="model" style="max-width: 600px">
      <a-form-item name="username" label="Username" :rules="usernameRules">
        <a-input v-model:value="model.username" placeholder="username" />
      </a-form-item>
      <a-form-item name="email" label="Email" :rules="emailRules">
        <a-input v-model:value="model.email" placeholder="email" />
      </a-form-item>
      <a-form-item :label="null">
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
      </a-form-item>
    </a-form>
  </a-space>
</template>
```
### Validate with zod
Form has no built-in [zod](https://zod.dev) validation, but you can bridge it through a custom `validator` rule on `Form.Item`: validate with zod's `safeParse` inside `validator` and `throw` the message on failure.

The `zodValidator` helper below turns a zod field schema into a reusable rule. On failure you must **throw an error** (or return a rejected Promise) instead of returning `false`, otherwise the message won't show.
```vue
<script setup lang="ts">
import type { Rule } from 'antdv-next'
import type { ZodType } from 'zod'
import { reactive } from 'vue'
import { z } from 'zod'

// 整个表单的 zod schema
const schema = z.object({
  username: z.string().min(3, 'Username must be at least 3 characters'),
  email: z.email('Please enter a valid email'),
  password: z
    .string()
    .min(8, 'Password must be at least 8 characters')
    .regex(/[A-Z]/, 'Must contain an uppercase letter')
    .regex(/\d/, 'Must contain a number'),
  website: z.union([z.literal(''), z.url('Please enter a valid URL')]),
})

// 把单个 zod 字段 schema 转成一条 Form.Item 校验规则
function zodValidator(field: ZodType): Rule {
  return {
    async validator(_rule, value) {
      const result = field.safeParse(value)
      if (!result.success)
        throw new Error(result.error.issues[0].message)
    },
  }
}

const model = reactive({
  username: '',
  email: '',
  password: '',
  website: '',
})

function handleFinish(values: any) {
  // 提交时整体再校验一次，拿到经过 zod 解析（含类型转换）的数据
  console.log('Parsed values:', schema.parse(values))
}
</script>

<template>
  <a-form
    name="form-zod"
    :model="model"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
    style="max-width: 600px"
    @finish="handleFinish"
  >
    <a-form-item label="Username" name="username" :rules="[zodValidator(schema.shape.username)]">
      <a-input v-model:value="model.username" />
    </a-form-item>
    <a-form-item label="Email" name="email" :rules="[zodValidator(schema.shape.email)]">
      <a-input v-model:value="model.email" />
    </a-form-item>
    <a-form-item label="Password" name="password" :rules="[zodValidator(schema.shape.password)]">
      <a-input-password v-model:value="model.password" />
    </a-form-item>
    <a-form-item label="Website" name="website" :rules="[zodValidator(schema.shape.website)]">
      <a-input v-model:value="model.website" placeholder="https://" />
    </a-form-item>
    <a-form-item :label="null">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Path Prefix
Use nested paths for field names.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  user: {
    name: '',
    contact: {
      email: '',
    },
  },
  addresses: [
    { city: '', street: '' },
  ],
})
</script>

<template>
  <a-form layout="vertical" :model="model" style="max-width: 600px">
    <a-form-item :name="['user', 'name']" label="User Name" :rules="[{ required: true }]">
      <a-input v-model:value="model.user.name" />
    </a-form-item>
    <a-form-item :name="['user', 'contact', 'email']" label="Email" :rules="[{ type: 'email' }]">
      <a-input v-model:value="model.user.contact.email" />
    </a-form-item>
    <a-form-item label="Address">
      <a-space direction="vertical" style="width: 100%">
        <a-form-item :name="['addresses', 0, 'city']" label="City" :rules="[{ required: true }]">
          <a-input v-model:value="model.addresses[0].city" />
        </a-form-item>
        <a-form-item :name="['addresses', 0, 'street']" label="Street">
          <a-input v-model:value="model.addresses[0].street" />
        </a-form-item>
      </a-space>
    </a-form-item>
  </a-form>
</template>
```
### Dynamic Form Item
Add and remove form items dynamically.
```vue
<script setup lang="ts">
import { MinusCircleOutlined, PlusOutlined } from '@antdv-next/icons'
import { reactive } from 'vue'

const model = reactive({
  names: [''],
})

const formItemLayout = {
  labelCol: { xs: { span: 24 }, sm: { span: 4 } },
  wrapperCol: { xs: { span: 24 }, sm: { span: 20 } },
}

const formItemLayoutWithoutLabel = {
  wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 20, offset: 4 } },
}

function addField(value = '') {
  model.names.push(value)
}

function addFieldAtHead() {
  model.names.unshift('The head item')
}

function removeField(index: number) {
  model.names.splice(index, 1)
}

function handleFinish(values: any) {
  console.log('Received values of form:', values)
}
</script>

<template>
  <a-form
    name="dynamic_form_item"
    :model="model"
    style="max-width: 600px"
    @finish="handleFinish"
  >
    <template v-for="(item, index) in model.names" :key="`passenger-${index}`">
      <a-form-item
        v-bind="index === 0 ? formItemLayout : formItemLayoutWithoutLabel"
        :label="index === 0 ? 'Passengers' : ''"
        :name="['names', index]"
        :rules="[{ required: true, message: 'Please input passenger\'s name or delete this field.' }]"
      >
        <a-input v-model:value="model.names[index]" placeholder="passenger name" style="width: 60%" />
        <MinusCircleOutlined
          v-if="model.names.length > 1"
          class="dynamic-delete-button"
          style="margin-left: 8px"
          @click="removeField(index)"
        />
      </a-form-item>
    </template>

    <a-form-item v-bind="formItemLayoutWithoutLabel">
      <a-space direction="vertical" style="width: 60%">
        <a-button type="dashed" block @click="addField()">
          <template #icon>
            <PlusOutlined />
          </template>
          Add field
        </a-button>
        <a-button type="dashed" block @click="addFieldAtHead">
          <template #icon>
            <PlusOutlined />
          </template>
          Add field at head
        </a-button>
      </a-space>
    </a-form-item>

    <a-form-item v-bind="formItemLayoutWithoutLabel">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Dynamic Form nest Items
Dynamic nested form items.
```vue
<script setup lang="ts">
import { MinusCircleOutlined, PlusOutlined } from '@antdv-next/icons'
import { reactive } from 'vue'

const model = reactive({
  users: [
    { first: '', last: '' },
  ],
})

function addUser() {
  model.users.push({ first: '', last: '' })
}

function removeUser(index: number) {
  model.users.splice(index, 1)
}

function handleFinish(values: any) {
  console.log('Received values of form:', values)
}
</script>

<template>
  <a-form
    name="dynamic_form_nest_item"
    :model="model"
    style="max-width: 600px"
    auto-complete="off"
    @finish="handleFinish"
  >
    <a-space v-for="(user, index) in model.users" :key="`user-${index}`" align="baseline" style="display: flex; margin-bottom: 8px">
      <a-form-item
        :name="['users', index, 'first']"
        :rules="[{ required: true, message: 'Missing first name' }]"
      >
        <a-input v-model:value="user.first" placeholder="First Name" />
      </a-form-item>
      <a-form-item
        :name="['users', index, 'last']"
        :rules="[{ required: true, message: 'Missing last name' }]"
      >
        <a-input v-model:value="user.last" placeholder="Last Name" />
      </a-form-item>
      <MinusCircleOutlined @click="removeUser(index)" />
    </a-space>

    <a-form-item>
      <a-button type="dashed" block @click="addUser">
        <template #icon>
          <PlusOutlined />
        </template>
        Add field
      </a-button>
    </a-form-item>

    <a-form-item>
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Complex Dynamic Form Item
Complex nested dynamic form items.
```vue
<script setup lang="ts">
import { CloseOutlined } from '@antdv-next/icons'
import { reactive } from 'vue'

interface SubItem { first: string, second: string }

interface Item { name: string, list: SubItem[] }

const model = reactive<{ items: Item[] }>({
  items: [
    { name: '', list: [{ first: '', second: '' }] },
  ],
})

function addItem() {
  model.items.push({ name: '', list: [{ first: '', second: '' }] })
}

function removeItem(index: number) {
  model.items.splice(index, 1)
}

function addSubItem(index: number) {
  model.items[index].list.push({ first: '', second: '' })
}

function removeSubItem(itemIndex: number, subIndex: number) {
  model.items[itemIndex].list.splice(subIndex, 1)
}
</script>

<template>
  <a-form
    name="dynamic_form_complex"
    :model="model"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
    style="max-width: 600px"
  >
    <div style="display: flex; row-gap: 16px; flex-direction: column">
      <a-card
        v-for="(item, index) in model.items"
        :key="`item-${index}`"
        size="small"
        :title="`Item ${index + 1}`"
        :extra="null"
      >
        <template #extra>
          <CloseOutlined @click="removeItem(index)" />
        </template>

        <a-form-item :name="['items', index, 'name']" label="Name">
          <a-input v-model:value="item.name" />
        </a-form-item>

        <a-form-item label="List">
          <div style="display: flex; flex-direction: column; row-gap: 16px">
            <a-space
              v-for="(subItem, subIndex) in item.list"
              :key="`sub-${index}-${subIndex}`"
              align="baseline"
            >
              <a-form-item no-style :name="['items', index, 'list', subIndex, 'first']">
                <a-input v-model:value="subItem.first" placeholder="first" />
              </a-form-item>
              <a-form-item no-style :name="['items', index, 'list', subIndex, 'second']">
                <a-input v-model:value="subItem.second" placeholder="second" />
              </a-form-item>
              <CloseOutlined @click="removeSubItem(index, subIndex)" />
            </a-space>
            <a-button type="dashed" block @click="addSubItem(index)">
              + Add Sub Item
            </a-button>
          </div>
        </a-form-item>
      </a-card>

      <a-button type="dashed" block @click="addItem">
        + Add Item
      </a-button>
    </div>

    <a-form-item no-style>
      <a-typography>
        <pre>{{ JSON.stringify(model, null, 2) }}</pre>
      </a-typography>
    </a-form-item>
  </a-form>
</template>
```
### Nest
Nested fields with custom validation messages.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  user: {
    name: '',
    email: '',
    age: undefined as number | undefined,
    website: '',
    introduction: '',
  },
})

const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
    number: '${label} is not a valid number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
}

function handleFinish(values: any) {
  console.log(values)
}
</script>

<template>
  <a-form
    name="nest-messages"
    :model="model"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    style="max-width: 600px"
    :validate-messages="validateMessages"
    @finish="handleFinish"
  >
    <a-form-item :name="['user', 'name']" label="Name" :rules="[{ required: true }]">
      <a-input v-model:value="model.user.name" />
    </a-form-item>
    <a-form-item :name="['user', 'email']" label="Email" :rules="[{ type: 'email' }]">
      <a-input v-model:value="model.user.email" />
    </a-form-item>
    <a-form-item :name="['user', 'age']" label="Age" :rules="[{ type: 'number', min: 0, max: 99 }]">
      <a-input-number v-model:value="model.user.age" style="width: 100%" />
    </a-form-item>
    <a-form-item :name="['user', 'website']" label="Website">
      <a-input v-model:value="model.user.website" />
    </a-form-item>
    <a-form-item :name="['user', 'introduction']" label="Introduction">
      <a-textarea v-model:value="model.user.introduction" />
    </a-form-item>
    <a-form-item :label="null">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### complex form control
Combine multiple controls in one line.

When the outer labeled `a-form-item` has no `name`, it cannot infer the nested control's ID. If the label describes a single control, set `html-for` on the outer item and the same `id` on the nested control to preserve label-click focus and screen reader association.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  username: '',
  address: {
    province: undefined as string | undefined,
    street: '',
  },
  year: '',
  month: '',
})

const provinceOptions = [
  { label: 'Zhejiang', value: 'Zhejiang' },
  { label: 'Jiangsu', value: 'Jiangsu' },
]

function handleFinish(values: any) {
  console.log('Received values of form: ', values)
}
</script>

<template>
  <a-form
    name="complex-form"
    :model="model"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    style="max-width: 600px"
    @finish="handleFinish"
  >
    <a-form-item label="Username" html-for="username">
      <a-space>
        <a-form-item
          name="username"
          no-style
          :rules="[{ required: true, message: 'Username is required' }]"
        >
          <a-input id="username" v-model:value="model.username" style="width: 160px" placeholder="Please input" />
        </a-form-item>
        <a-tooltip title="Useful information">
          <a-typography-link href="#API">
            Need Help?
          </a-typography-link>
        </a-tooltip>
      </a-space>
    </a-form-item>

    <a-form-item label="Address">
      <a-space-compact block>
        <a-form-item
          :name="['address', 'province']"
          no-style
          :rules="[{ required: true, message: 'Province is required' }]"
        >
          <a-select v-model:value="model.address.province" placeholder="Select province" :options="provinceOptions" />
        </a-form-item>
        <a-form-item
          :name="['address', 'street']"
          no-style
          :rules="[{ required: true, message: 'Street is required' }]"
        >
          <a-input v-model:value="model.address.street" style="width: 50%" placeholder="Input street" />
        </a-form-item>
      </a-space-compact>
    </a-form-item>

    <a-form-item label="BirthDate" style="margin-bottom: 0">
      <a-form-item
        name="year"
        :rules="[{ required: true }]"
        style="display: inline-block; width: calc(50% - 8px)"
      >
        <a-input v-model:value="model.year" placeholder="Input birth year" />
      </a-form-item>
      <a-form-item
        name="month"
        :rules="[{ required: true }]"
        style="display: inline-block; width: calc(50% - 8px); margin: 0 8px"
      >
        <a-input v-model:value="model.month" placeholder="Input birth month" />
      </a-form-item>
    </a-form-item>

    <a-form-item :label="null">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Customized Form Controls
Customized form controls.
```vue
<script setup lang="ts">
import type { PropType } from 'vue'
import { InputNumber, Select } from 'antdv-next'
import { defineComponent, h, reactive, ref, watch } from 'vue'

type Currency = 'rmb' | 'dollar'

interface PriceValue {
  number?: number
  currency?: Currency
}

const PriceInput = defineComponent({
  name: 'PriceInput',
  props: {
    value: {
      type: Object as PropType<PriceValue>,
      default: () => ({}),
    },
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const number = ref<number>(props.value?.number ?? 0)
    const currency = ref<Currency>(props.value?.currency ?? 'rmb')

    watch(
      () => props.value,
      (val) => {
        if (!val)
          return
        if (val.number !== undefined)
          number.value = val.number
        if (val.currency)
          currency.value = val.currency
      },
      { deep: true },
    )

    const triggerChange = (changedValue: Partial<PriceValue>) => {
      emit('update:value', {
        number: number.value,
        currency: currency.value,
        ...props.value,
        ...changedValue,
      })
    }

    const onNumberChange = (value: number | null) => {
      const newNumber = value ?? 0
      number.value = newNumber
      triggerChange({ number: newNumber })
    }

    const onCurrencyChange = (value: Currency) => {
      currency.value = value
      triggerChange({ currency: value })
    }

    return () => h(
      'span',
      { style: { display: 'inline-flex', alignItems: 'center' } },
      [
        h(InputNumber, {
          'value': props.value?.number ?? number.value,
          'onUpdate:value': onNumberChange,
          'style': { width: '100px' },
        }),
        h(Select, {
          'value': props.value?.currency ?? currency.value,
          'onUpdate:value': onCurrencyChange,
          'style': { width: '80px', margin: '0 8px' },
          'options': [
            { label: 'RMB', value: 'rmb' },
            { label: 'Dollar', value: 'dollar' },
          ],
        }),
      ],
    )
  },
})

const model = reactive({
  price: { number: 0, currency: 'rmb' as Currency },
})

function checkPrice(_rule: any, value: PriceValue) {
  if ((value?.number ?? 0) > 0) {
    return Promise.resolve()
  }
  return Promise.reject(new Error('Price must be greater than zero!'))
}

function handleFinish(values: any) {
  console.log('Received values from form: ', values)
}
</script>

<template>
  <a-form name="customized_form_controls" layout="inline" :model="model" @finish="handleFinish">
    <a-form-item name="price" label="Price" :rules="[{ validator: checkPrice }]">
      <PriceInput v-model:value="model.price" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Store Form Data into Upper Component
Store form data in outer reactive state.

The `fieldsChange` event returns a flat `FieldData[]`. When a field uses an array name path (e.g. `['profile', 'email']`), `FieldData.name` keeps that path instead of converting it into a nested object, making it easier to process each field entry in the external state.
```vue
<script setup lang="ts">
import { reactive, shallowRef } from 'vue'

interface FieldData {
  name: string | number | (string | number)[]
  value?: unknown
  touched?: boolean
  validating?: boolean
  errors?: string[]
}

const model = reactive({
  username: 'Antdv Next',
  profile: {
    email: 'antdv@example.com',
  },
})

const fields = shallowRef<FieldData[]>([])

function onFieldsChange(_: FieldData[], allFields: FieldData[]) {
  fields.value = allFields
}
</script>

<template>
  <a-form name="global_state" layout="inline" :model="model" @fields-change="onFieldsChange">
    <a-form-item
      name="username"
      label="Username"
      :rules="[{ required: true, message: 'Username is required!' }]"
    >
      <a-input v-model:value="model.username" />
    </a-form-item>
    <a-form-item :name="['profile', 'email']" label="Email">
      <a-input v-model:value="model.profile.email" />
    </a-form-item>
  </a-form>
  <a-typography-paragraph style="max-width: 440px; margin-top: 24px">
    <pre style="border: none">{{ JSON.stringify(fields.length ? fields : model, null, 2) }}</pre>
  </a-typography-paragraph>
</template>
```
### Control between forms
Coordinate data between multiple forms.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { SmileOutlined, UserOutlined } from '@antdv-next/icons'
import { reactive, ref, shallowRef } from 'vue'

interface UserType { name: string, age: number }

const open = ref(false)
const users = ref<UserType[]>([])

const mainForm = reactive({
  group: '',
})

const userForm = reactive({
  name: '',
  age: undefined as number | undefined,
})

const userFormRef = shallowRef<FormInstance>()

function showUserModal() {
  open.value = true
}

function hideUserModal() {
  open.value = false
  userFormRef.value?.resetFields?.()
}

function handleUserFinish(values: any) {
  users.value = [...users.value, values as UserType]
  hideUserModal()
}

function handleFinish(values: any) {
  console.log('Finish:', values)
}
</script>

<template>
  <a-form
    name="basicForm"
    :model="mainForm"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    style="max-width: 600px"
    @finish="handleFinish"
  >
    <a-form-item name="group" label="Group Name" :rules="[{ required: true }]">
      <a-input v-model:value="mainForm.group" />
    </a-form-item>

    <a-form-item label="User List">
      <a-flex v-if="users.length" vertical gap="8">
        <a-space v-for="user in users" :key="`${user.name}-${user.age}`">
          <a-avatar>
            <UserOutlined />
          </a-avatar>
          {{ `${user.name} - ${user.age}` }}
        </a-space>
      </a-flex>
      <a-typography-text v-else type="secondary" class="ant-form-text">
        (<SmileOutlined /> No user yet.)
      </a-typography-text>
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button html-type="submit" type="primary">
        Submit
      </a-button>
      <a-button html-type="button" style="margin-left: 8px" @click="showUserModal">
        Add User
      </a-button>
    </a-form-item>
  </a-form>

  <a-modal
    v-model:open="open"
    title="Add User"
    ok-text="Create"
    cancel-text="Cancel"
    @cancel="hideUserModal"
    @ok="userFormRef?.submit?.()"
  >
    <a-form ref="userFormRef" layout="vertical" name="userForm" :model="userForm" @finish="handleUserFinish">
      <a-form-item name="name" label="User Name" :rules="[{ required: true }]">
        <a-input v-model:value="userForm.name" />
      </a-form-item>
      <a-form-item name="age" label="User Age" :rules="[{ required: true }]">
        <a-input-number v-model:value="userForm.age" style="width: 100%" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
```
### Inline Login Form
Inline login form.
```vue
<script setup lang="ts">
import { LockOutlined, UserOutlined } from '@antdv-next/icons'
import { reactive } from 'vue'

const model = reactive({
  username: '',
  password: '',
})

function handleFinish(values: any) {
  console.log('Finish:', values)
}
</script>

<template>
  <a-form name="horizontal_login" layout="inline" :model="model" @finish="handleFinish">
    <a-form-item name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
      <a-input v-model:value="model.username" placeholder="Username">
        <template #prefix>
          <UserOutlined />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
      <a-input v-model:value="model.password" type="password" placeholder="Password">
        <template #prefix>
          <LockOutlined />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">
        Log in
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Login Form
Login form example.
```vue
<script setup lang="ts">
import { LockOutlined, UserOutlined } from '@antdv-next/icons'
import { reactive } from 'vue'

const model = reactive({
  username: '',
  password: '',
  remember: true,
})

function handleFinish(values: any) {
  console.log('Received values of form: ', values)
}
</script>

<template>
  <a-form name="login" :model="model" style="max-width: 360px" @finish="handleFinish">
    <a-form-item
      name="username"
      :rules="[{ required: true, message: 'Please input your Username!' }]"
    >
      <a-input v-model:value="model.username" placeholder="Username">
        <template #prefix>
          <UserOutlined />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item
      name="password"
      :rules="[{ required: true, message: 'Please input your Password!' }]"
    >
      <a-input v-model:value="model.password" type="password" placeholder="Password">
        <template #prefix>
          <LockOutlined />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-flex justify="space-between" align="center">
        <a-form-item name="remember" no-style>
          <a-checkbox v-model:checked="model.remember">
            Remember me
          </a-checkbox>
        </a-form-item>
        <a href="">
          Forgot password
        </a>
      </a-flex>
    </a-form-item>

    <a-form-item>
      <a-button block type="primary" html-type="submit">
        Log in
      </a-button>
      or <a href="">Register now!</a>
    </a-form-item>
  </a-form>
</template>
```
### Registration
Registration form example.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { computed, reactive, ref, shallowRef, watch } from 'vue'

const formRef = shallowRef<FormInstance>()

const model = reactive({
  email: '',
  password: '',
  confirm: '',
  nickname: '',
  residence: ['zhejiang', 'hangzhou', 'xihu'],
  phone: '',
  prefix: '86',
  amount: '',
  currency: 'USD',
  website: '',
  intro: '',
  gender: 'male',
  agreement: false,
})

const residences = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const prefixOptions = [
  { label: '+86', value: '86' },
  { label: '+87', value: '87' },
]

const donationOptions = [
  { label: '$', value: 'USD' },
  { label: '¥', value: 'CNY' },
]

const genderOptions = [
  { label: 'Male', value: 'male' },
  { label: 'Female', value: 'female' },
  { label: 'Other', value: 'other' },
]

const autoCompleteResult = ref<string[]>([])

function onWebsiteChange(value: string) {
  autoCompleteResult.value = value
    ? ['.com', '.org', '.net'].map(domain => `${value}${domain}`)
    : []
}

const websiteOptions = computed(() =>
  autoCompleteResult.value.map(website => ({ value: website })),
)

watch(
  () => model.password,
  () => {
    if (model.confirm) {
      formRef.value?.validateFields?.(['confirm'])
    }
  },
)

const confirmRules = [
  { required: true, message: 'Please confirm your password!' },
  {
    validator: async (_rule: any, value: string) => {
      if (!value || value === model.password) {
        return Promise.resolve()
      }
      return Promise.reject(new Error('The new password that you entered do not match!'))
    },
  },
]

function handleFinish(values: any) {
  console.log('Received values of form: ', values)
}
</script>

<template>
  <a-form
    ref="formRef"
    name="register"
    :model="model"
    :label-col="{ xs: { span: 24 }, sm: { span: 8 } }"
    :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
    style="max-width: 600px"
    scroll-to-first-error
    @finish="handleFinish"
  >
    <a-form-item
      name="email"
      label="E-mail"
      :rules="[
        { type: 'email', message: 'The input is not valid E-mail!' },
        { required: true, message: 'Please input your E-mail!' },
      ]"
    >
      <a-input v-model:value="model.email" />
    </a-form-item>

    <a-form-item
      name="password"
      label="Password"
      :rules="[{ required: true, message: 'Please input your password!' }]"
      has-feedback
    >
      <a-input-password v-model:value="model.password" />
    </a-form-item>

    <a-form-item name="confirm" label="Confirm Password" :rules="confirmRules" has-feedback>
      <a-input-password v-model:value="model.confirm" />
    </a-form-item>

    <a-form-item
      name="nickname"
      label="Nickname"
      tooltip="What do you want others to call you?"
      :rules="[{ required: true, message: 'Please input your nickname!' }]"
    >
      <a-input v-model:value="model.nickname" />
    </a-form-item>

    <a-form-item
      name="residence"
      label="Habitual Residence"
      :rules="[{ required: true, message: 'Please select your habitual residence!' }]"
    >
      <a-cascader v-model:value="model.residence" :options="residences" />
    </a-form-item>

    <a-form-item name="phone" label="Phone Number" :rules="[{ required: true, message: 'Please input your phone number!' }]">
      <a-space-compact block>
        <a-select v-model:value="model.prefix" style="width: 70px" :options="prefixOptions" />
        <a-input v-model:value="model.phone" style="width: 100%" />
      </a-space-compact>
    </a-form-item>

    <a-form-item name="donation" label="Donation" :rules="[{ required: true, message: 'Please input donation amount!' }]">
      <a-space-compact block>
        <a-input-number v-model:value="model.amount" style="width: 100%" />
        <a-select v-model:value="model.currency" style="width: 70px" :options="donationOptions" />
      </a-space-compact>
    </a-form-item>

    <a-form-item name="website" label="Website" :rules="[{ required: true, message: 'Please input website!' }]">
      <a-auto-complete
        v-model:value="model.website"
        placeholder="website"
        :options="websiteOptions"
        @change="onWebsiteChange"
      />
    </a-form-item>

    <a-form-item
      name="intro"
      label="Intro"
      :rules="[{ required: true, message: 'Please input Intro' }]"
    >
      <a-textarea show-count :max-length="100" />
    </a-form-item>

    <a-form-item name="gender" :required="true" label="Gender" :rules="[{ required: true, message: 'Please select your gender' }]">
      <a-select v-model:value="model.gender" placeholder="Please select gender!" :options="genderOptions" />
    </a-form-item>

    <a-form-item label="Captcha" extra="We must make sure that your are a human.">
      <a-row :gutter="8">
        <a-col :span="12">
          <a-form-item
            name="captcha"
            no-style
            :rules="[{ required: true, message: 'Please input the captcha you got!' }]"
          >
            <a-input />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-button>Get captcha</a-button>
        </a-col>
      </a-row>
    </a-form-item>

    <a-form-item name="agreement" :wrapper-col="{ xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 8 } }">
      <a-checkbox v-model:checked="model.agreement">
        I have read the <a href="">agreement</a>
      </a-checkbox>
    </a-form-item>

    <a-form-item :wrapper-col="{ xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 8 } }">
      <a-button type="primary" html-type="submit">
        Register
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Advanced search
Advanced search form with expand/collapse.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'
import { computed, reactive, ref, shallowRef } from 'vue'

const formRef = shallowRef<FormInstance>()
const expand = ref(false)
const model = reactive<Record<string, string>>({})

const fieldCount = computed(() => (expand.value ? 10 : 6))

const selectOptions = [
  {
    value: '1',
    label: 'longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglong',
  },
  {
    value: '2',
    label: '222',
  },
]

function handleFinish(values: any) {
  console.log('Received values of form:', values)
}

function handleReset() {
  formRef.value?.resetFields?.()
}
</script>

<template>
  <a-form
    ref="formRef"
    name="advanced_search"
    :model="model"
    style="max-width: none; background: #fafafa; border-radius: 8px; padding: 24px"
    @finish="handleFinish"
  >
    <a-row :gutter="24">
      <a-col v-for="i in fieldCount" :key="i" :span="8">
        <a-form-item
          v-if="i % 3 !== 1"
          :name="`field-${i - 1}`"
          :label="`Field ${i - 1}`"
          :rules="[{ required: true, message: 'Input something!' }]"
        >
          <a-input v-model:value="model[`field-${i - 1}`]" placeholder="placeholder" />
        </a-form-item>
        <a-form-item
          v-else
          :name="`field-${i - 1}`"
          :label="`Field ${i - 1}`"
          :rules="[{ required: true, message: 'Select something!' }]"
        >
          <a-select
            v-model:value="model[`field-${i - 1}`]"
            :options="selectOptions"
            placeholder="Select"
          />
        </a-form-item>
      </a-col>
    </a-row>

    <div style="text-align: end">
      <a-space size="small">
        <a-button type="primary" html-type="submit">
          Search
        </a-button>
        <a-button html-type="button" @click="handleReset">
          Clear
        </a-button>
        <a-button type="link" size="small" @click="expand = !expand">
          <DownOutlined :style="{ transform: expand ? 'rotate(180deg)' : undefined }" />
          {{ expand ? 'Collapse' : 'Expand' }}
        </a-button>
      </a-space>
    </div>
  </a-form>

  <div style="line-height: 200px; text-align: center; background: #fafafa; border-radius: 8px; margin-top: 16px">
    Search Result List
  </div>
</template>
```
### Form in Modal to Create
Use form inside modal.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { reactive, ref, shallowRef } from 'vue'

interface Values {
  title?: string
  description?: string
  modifier?: string
}

const formRef = shallowRef<FormInstance>()
const open = ref(false)
const formValues = ref<Values>()

const model = reactive({
  title: '',
  description: '',
  modifier: 'public',
})

function handleCreate(values: Values) {
  console.log('Received values of form: ', values)
  formValues.value = values
  open.value = false
}
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-button type="primary" @click="open = true">
      New Collection
    </a-button>
    <pre>{{ JSON.stringify(formValues, null, 2) }}</pre>
  </a-space>

  <a-modal
    v-model:open="open"
    title="Create a new collection"
    ok-text="Create"
    cancel-text="Cancel"
    :ok-button-props="{ autoFocus: true, htmlType: 'submit' }"
    @cancel="open = false"
    @ok="formRef?.submit?.()"
  >
    <a-form
      ref="formRef"
      layout="vertical"
      name="form_in_modal"
      :model="model"
      clear-on-destroy
      @finish="handleCreate"
    >
      <a-form-item
        name="title"
        label="Title"
        :rules="[{ required: true, message: 'Please input the title of collection!' }]"
      >
        <a-input v-model:value="model.title" />
      </a-form-item>
      <a-form-item name="description" label="Description">
        <a-textarea v-model:value="model.description" />
      </a-form-item>
      <a-form-item name="modifier" class="collection-create-form_last-form-item">
        <a-radio-group v-model:value="model.modifier">
          <a-radio value="public">
            Public
          </a-radio>
          <a-radio value="private">
            Private
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
```
### Time-related Controls
Time-related controls with validation and submit.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  datePicker: null as any,
  dateTimePicker: null as any,
  monthPicker: null as any,
  rangePicker: [] as any[],
  rangeTimePicker: [] as any[],
  timePicker: null as any,
})

const itemRules = [{ type: 'object' as const, required: true, message: 'Please select time!' }]
const rangeRules = [{ type: 'array' as const, required: true, message: 'Please select time!' }]

function handleFinish(values: any) {
  const rangeValue = values.rangePicker || []
  const rangeTimeValue = values.rangeTimePicker || []
  const result = {
    ...values,
    datePicker: values.datePicker?.format('YYYY-MM-DD'),
    dateTimePicker: values.dateTimePicker?.format('YYYY-MM-DD HH:mm:ss'),
    monthPicker: values.monthPicker?.format('YYYY-MM'),
    rangePicker: rangeValue.map((v: any) => v.format('YYYY-MM-DD')),
    rangeTimePicker: rangeTimeValue.map((v: any) => v.format('YYYY-MM-DD HH:mm:ss')),
    timePicker: values.timePicker?.format('HH:mm:ss'),
  }
  console.log('Received values of form: ', result)
}
</script>

<template>
  <a-form
    name="time_related_controls"
    :model="model"
    :label-col="{ xs: { span: 24 }, sm: { span: 8 } }"
    :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
    style="max-width: 600px"
    @finish="handleFinish"
  >
    <a-form-item name="datePicker" label="DatePicker" :rules="itemRules">
      <a-date-picker v-model:value="model.datePicker" style="width: 100%" />
    </a-form-item>
    <a-form-item name="dateTimePicker" label="DatePicker[showTime]" :rules="itemRules">
      <a-date-picker v-model:value="model.dateTimePicker" show-time format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
    </a-form-item>
    <a-form-item name="monthPicker" label="MonthPicker" :rules="itemRules">
      <a-date-picker v-model:value="model.monthPicker" picker="month" style="width: 100%" />
    </a-form-item>
    <a-form-item name="rangePicker" label="RangePicker" :rules="rangeRules">
      <a-range-picker v-model:value="model.rangePicker" style="width: 100%" />
    </a-form-item>
    <a-form-item name="rangeTimePicker" label="RangePicker[showTime]" :rules="rangeRules">
      <a-range-picker v-model:value="model.rangeTimePicker" show-time format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
    </a-form-item>
    <a-form-item name="timePicker" label="TimePicker" :rules="itemRules">
      <a-time-picker v-model:value="model.timePicker" style="width: 100%" />
    </a-form-item>
    <a-form-item :label="null">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Handle Form Data Manually
Handle validation manually without form binding.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const tips = 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.'

type LocalValidateStatus = 'success' | 'warning' | 'error' | 'validating' | ''

const state = reactive<{ value: number, validateStatus?: LocalValidateStatus, errorMsg?: string | null }>({
  value: 11,
})

function validatePrimeNumber(number: number) {
  if (number === 11) {
    state.validateStatus = 'success'
    state.errorMsg = null
    return
  }
  state.validateStatus = 'error'
  state.errorMsg = 'The prime between 8 and 12 is 11!'
}

function handleChange(value: number | null) {
  state.value = value ?? 0
  validatePrimeNumber(state.value)
}

validatePrimeNumber(state.value)
</script>

<template>
  <a-form style="max-width: 600px">
    <a-form-item
      :label-col="{ span: 7 }"
      :wrapper-col="{ span: 12 }"
      label="Prime between 8 & 12"
      :validate-status="state.validateStatus"
      :help="state.errorMsg || tips"
    >
      <a-input-number :min="8" :max="12" :value="state.value" @change="handleChange" />
    </a-form-item>
  </a-form>
</template>
```
### Customized Validation
Custom validation status display.
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-form
    :label-col="{ xs: { span: 24 }, sm: { span: 6 } }"
    :wrapper-col="{ xs: { span: 24 }, sm: { span: 14 } }"
    style="max-width: 600px"
  >
    <a-form-item
      label="Fail"
      validate-status="error"
      help="Should be combination of numbers & alphabets"
    >
      <a-input placeholder="unavailable choice" />
    </a-form-item>

    <a-form-item label="Warning" validate-status="warning">
      <a-input placeholder="Warning">
        <template #prefix>
          <SmileOutlined />
        </template>
      </a-input>
    </a-form-item>

    <a-form-item
      label="Validating"
      has-feedback
      validate-status="validating"
      help="The information is being validated..."
    >
      <a-input placeholder="I'm the content is being validated" />
    </a-form-item>

    <a-form-item label="Success" has-feedback validate-status="success">
      <a-input placeholder="I'm the content" />
    </a-form-item>

    <a-form-item label="Error" has-feedback validate-status="error">
      <a-date-picker style="width: 100%" />
    </a-form-item>

    <a-form-item label="Warning" has-feedback validate-status="warning">
      <a-select
        placeholder="I'm Select"
        :options="[
          { label: 'Option 1', value: '1' },
          { label: 'Option 2', value: '2' },
        ]"
      />
    </a-form-item>

    <a-form-item label="Success" has-feedback validate-status="success">
      <a-input-number style="width: 100%" />
    </a-form-item>

    <a-form-item label="Fail" validate-status="error" has-feedback>
      <a-textarea allow-clear show-count />
    </a-form-item>
  </a-form>
</template>
```
### Dynamic Rules
Toggle validation rules dynamically.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { reactive, ref, shallowRef, watch } from 'vue'

const formRef = shallowRef<FormInstance>()
const checkNick = ref(false)
const model = reactive({
  username: '',
  nickname: '',
})

watch(checkNick, () => {
  formRef.value?.validateFields?.(['nickname'])
})

async function handleCheck() {
  try {
    const values = await formRef.value?.validateFields?.()
    console.log('Success:', values)
  }
  catch (errorInfo) {
    console.log('Failed:', errorInfo)
  }
}
</script>

<template>
  <a-form ref="formRef" name="dynamic_rule" :model="model" style="max-width: 600px">
    <a-form-item
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      name="username"
      label="Name"
      :rules="[{ required: true, message: 'Please input your name' }]"
    >
      <a-input v-model:value="model.username" placeholder="Please input your name" />
    </a-form-item>
    <a-form-item
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      name="nickname"
      label="Nickname"
      :rules="[{ required: checkNick, message: 'Please input your nickname' }]"
    >
      <a-input v-model:value="model.nickname" placeholder="Please input your nickname" />
    </a-form-item>
    <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8, offset: 4 }">
      <a-checkbox v-model:checked="checkNick">
        Nickname is required
      </a-checkbox>
    </a-form-item>
    <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8, offset: 4 }">
      <a-button type="primary" @click="handleCheck">
        Check
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Dependencies
Validate fields based on other field values.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { reactive, shallowRef, watch } from 'vue'

const formRef = shallowRef<FormInstance>()
const model = reactive({
  password: '',
  password2: '',
})

watch(
  () => model.password,
  () => {
    if (model.password2) {
      formRef.value?.validateFields?.(['password2'])
    }
  },
)

const confirmRules = [
  { required: true },
  {
    validator: async (_rule: any, value: string) => {
      if (!value || value === model.password) {
        return Promise.resolve()
      }
      return Promise.reject(new Error('The new password that you entered do not match!'))
    },
  },
]
</script>

<template>
  <a-form
    ref="formRef"
    name="dependencies"
    :model="model"
    auto-complete="off"
    style="max-width: 600px"
    layout="vertical"
  >
    <a-alert title="Try modify `Password2` and then modify `Password`" type="info" show-icon />

    <a-form-item label="Password" name="password" :rules="[{ required: true }]">
      <a-input v-model:value="model.password" />
    </a-form-item>

    <a-form-item label="Confirm Password" name="password2" :rules="confirmRules">
      <a-input v-model:value="model.password2" />
    </a-form-item>

    <a-typography>
      <p>
        Only update when <code>password2</code> changed:
      </p>
      <pre>{{ JSON.stringify(model, null, 2) }}</pre>
    </a-typography>
  </a-form>
</template>
```
### getValueProps + normalize
Transform values with computed getters/setters.
```vue
<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import { computed, reactive } from 'vue'

const dateTimestamp = dayjs('2024-01-01').valueOf()

const model = reactive({
  date: String(dateTimestamp),
})

const dateValue = computed<Dayjs | null>({
  get: () => (model.date ? dayjs(Number(model.date)) : null),
  set: (val) => {
    model.date = val ? String(val.valueOf()) : ''
  },
})

function handleFinish(values: any) {
  console.log('Success:', values)
}
</script>

<template>
  <a-form
    name="getValueProps"
    :model="model"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    style="max-width: 600px"
    @finish="handleFinish"
  >
    <a-form-item label="Date" name="date" :rules="[{ required: true }]">
      <a-date-picker v-model:value="dateValue" style="width: 100%" />
    </a-form-item>

    <a-form-item :label="null">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Slide to error field
When validation fails or manually scroll to the error field.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { reactive, shallowRef } from 'vue'

const formRef = shallowRef<FormInstance>()

const model = reactive({
  username: '',
  occupation: '',
  motto: '',
  bio: '',
})
</script>

<template>
  <a-form
    ref="formRef"
    :model="model"
    :scroll-to-first-error="{ behavior: 'instant', block: 'end', focus: true }"
    style="padding-block: 32px"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 14 }"
  >
    <a-form-item>
      <a-button @click="() => formRef?.scrollToField?.('bio')">
        Scroll to Bio
      </a-button>
    </a-form-item>
    <a-form-item name="username" label="Username" :rules="[{ required: true }]">
      <a-input v-model:value="model.username" />
    </a-form-item>
    <a-form-item label="Occupation" name="occupation">
      <a-select
        v-model:value="model.occupation"
        class="w-full" :options="[
          { label: 'Designer', value: 'designer' },
          { label: 'Developer', value: 'developer' },
          { label: 'Product Manager', value: 'product-manager' },
        ]"
      />
    </a-form-item>
    <a-form-item label="Motto" name="motto">
      <a-textarea v-model:value="model.motto" :rows="4" />
    </a-form-item>
    <a-form-item label="Bio" name="bio" :rules="[{ required: true }]">
      <a-textarea v-model:value="model.bio" :rows="6" />
    </a-form-item>
    <a-form-item>
      <a-flex gap="small">
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
        <a-button danger @click="() => formRef?.resetFields?.()">
          Reset
        </a-button>
      </a-flex>
    </a-form-item>
  </a-form>
</template>
```
### Other Form Controls
Validation with other form controls.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  select: undefined as string | undefined,
  selectMultiple: [] as string[],
  inputNumber: 3,
  switch: false,
  slider: 30,
  radioGroup: 'a',
  radioButton: 'a',
  checkboxGroup: ['A', 'B'],
  rate: 3.5,
})

const selectOptions = [
  { label: 'China', value: 'china' },
  { label: 'U.S.A', value: 'usa' },
]

const colorOptions = [
  { label: 'Red', value: 'red' },
  { label: 'Green', value: 'green' },
  { label: 'Blue', value: 'blue' },
]

const checkboxOptions = [
  { label: 'A', value: 'A' },
  { label: 'B', value: 'B', disabled: true },
  { label: 'C', value: 'C' },
  { label: 'D', value: 'D' },
  { label: 'E', value: 'E' },
  { label: 'F', value: 'F' },
]

function handleFinish(values: any) {
  console.log('Received values of form: ', values)
}
</script>

<template>
  <a-form
    name="validate_other"
    :model="model"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 14 }"
    style="max-width: 600px"
    @finish="handleFinish"
  >
    <a-form-item label="Plain Text">
      <span class="ant-form-text">China</span>
    </a-form-item>
    <a-form-item
      name="select"
      label="Select"
      has-feedback
      :rules="[{ required: true, message: 'Please select your country!' }]"
    >
      <a-select v-model:value="model.select" placeholder="Please select a country" :options="selectOptions" />
    </a-form-item>

    <a-form-item
      name="selectMultiple"
      label="Select[multiple]"
      :rules="[{ required: true, message: 'Please select your favourite colors!', type: 'array' }]"
    >
      <a-select v-model:value="model.selectMultiple" mode="multiple" placeholder="Please select favourite colors" :options="colorOptions" />
    </a-form-item>

    <a-form-item label="InputNumber">
      <a-form-item name="inputNumber" no-style>
        <a-input-number v-model:value="model.inputNumber" :min="1" :max="10" />
      </a-form-item>
      <span class="ant-form-text" style="margin-inline-start: 8px">machines</span>
    </a-form-item>

    <a-form-item name="switch" label="Switch">
      <a-switch v-model:checked="model.switch" />
    </a-form-item>

    <a-form-item name="slider" label="Slider">
      <a-slider v-model:value="model.slider" :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }" />
    </a-form-item>

    <a-form-item name="radioGroup" label="Radio.Group">
      <a-radio-group v-model:value="model.radioGroup">
        <a-radio value="a">
          item 1
        </a-radio>
        <a-radio value="b">
          item 2
        </a-radio>
        <a-radio value="c">
          item 3
        </a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item
      name="radioButton"
      label="Radio.Button"
      :rules="[{ required: true, message: 'Please pick an item!' }]"
    >
      <a-radio-group v-model:value="model.radioButton">
        <a-radio-button value="a">
          item 1
        </a-radio-button>
        <a-radio-button value="b">
          item 2
        </a-radio-button>
        <a-radio-button value="c">
          item 3
        </a-radio-button>
      </a-radio-group>
    </a-form-item>

    <a-form-item name="checkboxGroup" label="Checkbox.Group">
      <a-checkbox-group v-model:value="model.checkboxGroup" :options="checkboxOptions" />
    </a-form-item>

    <a-form-item name="rate" label="Rate">
      <a-rate v-model:value="model.rate" />
    </a-form-item>

    <a-form-item :label="null">
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Form by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { FormProps } from 'antdv-next'
import { reactive } from 'vue'

const classes = {
  root: 'form-demo-root',
}

const stylesObject: FormProps['styles'] = {
  label: {
    textAlign: 'end',
    color: '#333',
    fontWeight: 500,
  },
  content: {
    paddingInlineStart: '12px',
  },
}

const stylesFunction: FormProps['styles'] = (info) => {
  if (info.props.variant === 'filled') {
    return {
      root: {
        border: '1px solid #1677FF',
      },
      label: {
        textAlign: 'end',
        color: '#1677FF',
      },
      content: {
        paddingInlineStart: '12px',
      },
    } satisfies FormProps['styles']
  }
  return {}
}

const model = reactive({
  username: '',
  email: '',
})

const sharedProps: FormProps = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
  autoComplete: 'off',
  classes,
}
</script>

<template>
  <a-form
    :model="model"
    v-bind="sharedProps"
    :styles="stylesObject"
  >
    <a-form-item label="UserName" name="username" :rules="[{ required: true, message: 'Please enter username!' }]">
      <a-input v-model:value="model.username" placeholder="Please enter username" />
    </a-form-item>
    <a-form-item label="Email" name="email" :rules="[{ required: true, message: 'Please enter email!' }]">
      <a-input v-model:value="model.email" placeholder="Please enter email" />
    </a-form-item>
    <a-form-item :label="null">
      <a-space>
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
        <a-button html-type="reset">
          Reset
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
  <a-form
    :model="model"
    v-bind="sharedProps"
    :styles="stylesFunction"
    variant="filled"
  >
    <a-form-item label="UserName" name="username" :rules="[{ required: true, message: 'Please enter username!' }]">
      <a-input v-model:value="model.username" placeholder="Please enter username" />
    </a-form-item>
    <a-form-item label="Email" name="email" :rules="[{ required: true, message: 'Please enter email!' }]">
      <a-input v-model:value="model.email" placeholder="Please enter email" />
    </a-form-item>
    <a-form-item :label="null">
      <a-space>
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
        <a-button html-type="reset">
          Reset
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<style scoped>
.form-demo-root {
  padding: var(--ant-padding);
  max-width: 800px;
  margin-top: 32px;
  background-color: var(--ant-color-bg-container);
  border-radius: var(--ant-border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>
```
### Col 24 debug
Test col 24 usage.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const modelA = reactive({
  username: '',
  password: '',
  select: ['bamboo'],
})

const modelB = reactive({
  username: '',
  password: '',
})

const modelC = reactive({
  select: ['bamboo'],
  col12: '',
})

const selectOptions = [
  { label: 'Bamboo', value: 'bamboo' },
  { label: 'Little', value: 'little' },
  { label: 'Light', value: 'light' },
]

function handleFinish(values: any) {
  console.log('Success:', values)
}

function handleFinishFailed(errorInfo: any) {
  console.log('Failed:', errorInfo)
}
</script>

<template>
  <a-form
    name="col-24-debug"
    :model="modelA"
    :label-col="{ span: 24 }"
    :wrapper-col="{ span: 24 }"
    style="max-width: 600px"
    @finish="handleFinish"
    @finish-failed="handleFinishFailed"
  >
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="modelA.username" />
    </a-form-item>

    <a-form-item
      label="Password"
      name="password"
      :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="modelA.password" />
    </a-form-item>

    <a-form-item label="Select" name="select" style="box-shadow: 0 0 3px red">
      <a-select v-model:value="modelA.select" mode="multiple" style="width: 70%" :options="selectOptions" />
    </a-form-item>

    <a-form-item>
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>

  <a-form
    name="responsive"
    :model="modelB"
    :label-col="{ sm: 24, xl: 24 }"
    :wrapper-col="{ sm: 24, xl: 24 }"
    @finish="handleFinish"
    @finish-failed="handleFinishFailed"
  >
    <a-form-item
      label="Username"
      name="username"
      :rules="[{ required: true, message: 'Please input your username!' }]"
    >
      <a-input v-model:value="modelB.username" />
    </a-form-item>

    <a-form-item
      label="Password"
      name="password"
      :rules="[{ required: true, message: 'Please input your password!' }]"
    >
      <a-input-password v-model:value="modelB.password" />
    </a-form-item>

    <a-form-item>
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>

  <a-divider />

  <a-form layout="vertical" :model="modelC">
    <a-form-item label="Select" name="select" style="box-shadow: 0 0 3px red">
      <a-select v-model:value="modelC.select" mode="multiple" style="width: 70%" :options="selectOptions" />
    </a-form-item>

    <a-form-item label="col12" name="col12" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
      <a-input v-model:value="modelC.col12" />
    </a-form-item>
  </a-form>
</template>
```
### Disabled input debug
Disabled state debug.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  username: 'Antdv Next',
  level: 'normal',
  count: 2,
})

const levelOptions = [
  { label: 'Normal', value: 'normal' },
  { label: 'Admin', value: 'admin' },
]
</script>

<template>
  <a-form
    :model="model"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 14 }"
    disabled
    style="max-width: 600px"
  >
    <a-form-item label="Username" name="username">
      <a-input v-model:value="model.username" />
    </a-form-item>
    <a-form-item label="Level" name="level">
      <a-select v-model:value="model.level" :options="levelOptions" />
    </a-form-item>
    <a-form-item label="Count" name="count">
      <a-input-number v-model:value="model.count" style="width: 100%" />
    </a-form-item>
    <a-form-item label="Button">
      <a-button>Button</a-button>
    </a-form-item>
  </a-form>
</template>
```
### Label ellipsis debug
Label ellipsis debug.
```vue
<script setup lang="ts">
import { reactive } from 'vue'

const model = reactive({
  username: '',
  password: '',
})
</script>

<template>
  <a-form
    name="label-ellipsis"
    :model="model"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    style="max-width: 600px"
  >
    <a-form-item name="username">
      <template #label>
        <a-typography-text ellipsis>
          longtextlongtextlongtextlongtextlongtextlongtextlongtext
        </a-typography-text>
      </template>
      <a-input v-model:value="model.username" />
    </a-form-item>

    <a-form-item name="password">
      <template #label>
        <a-typography-text ellipsis>
          longtext longtext longtext longtext longtext longtext longtext
        </a-typography-text>
      </template>
      <a-input-password v-model:value="model.password" />
    </a-form-item>
  </a-form>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Form

### Props {#form-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | FormClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | FormStylesType | - | - | ✓ |
| colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true | - | ✓ |
| name | Form name. Will be the prefix of Field `id` | string | - | - | × |
| layout | Form layout. By default, `horizontal` stacks labels above controls when the viewport width is `575px` or less. Use the `xs` settings in `labelCol` and `wrapperCol` to customize column widths on narrow screens | FormLayout | `horizontal` | - | × |
| labelAlign | The text align of label of all items | FormLabelAlign | `right` | - | ✓ |
| labelWrap | whether label can be wrap | boolean | false | - | × |
| labelCol | Label layout, like `Col` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | ColProps | - | - | × |
| wrapperCol | The layout for input controls, same as `labelCol` | ColProps | - | - | × |
| feedbackIcons | Can be passed custom icons while `Form.Item` element has `hasFeedback` | FeedbackIcons | - | - | × |
| size | Set field component size (antd components only) | SizeType | - | - | × |
| disabled | Set form component disable, only available for antd components | boolean | false | - | × |
| scrollToFirstError | Auto scroll to first failed field when submit | ScrollFocusOptions \| boolean | false | - | ✓ |
| requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | RequiredMark | true | - | ✓ |
| variant | Variant of components inside form | Variant | `outlined` | - | ✓ |
| validateMessages | Validation prompt template, description [see below](#validatemessages) | ValidateMessages | - | - | ✓ |
| model | Form model | Record&lt;string, any&gt; | - | - | × |
| rules | Form rules | Record&lt;string, Rule[]&gt; | - | - | × |
| validateTrigger | Config field validate trigger. When set to `false`, all interaction-driven validation is disabled even if a rule declares `trigger` or `validateTrigger`; `validateFields` and submit validation still run | string \| string[] \| false | `change` | - | × |
| preserve | Keep field value even when field removed. You can get the preserve field value by `getFieldsValue(true)` | boolean | true | - | × |
| clearOnDestroy | Clear form values when the form is uninstalled | boolean | false | - | × |
| validateOnRuleChange | Automatically revalidates the form when `Form.rules` changes | boolean | false | - | × |
| rootClass | Root container class | string | - | - | × |
| prefixCls | Prefix class name | string | - | - | × |

### Events {#form-events}

Vue event names omit the React `on` prefix. For example, React `onValuesChange` maps to Vue `@valuesChange`.

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| finish | Trigger after submitting the form and verifying data successfully | (values: Record&lt;string, any&gt;) =&gt; void | - |
| finishFailed | Trigger after submitting the form and verifying data failed | (errorInfo: ValidateErrorEntity) =&gt; void | - |
| submit | Triggered on native form submit before internal validation starts | (e: Event) =&gt; void | - |
| reset | Triggered on native form reset | (e: Event) =&gt; void | - |
| validate | Triggered when a single field finishes validation. Returns the field path, pass status, and error messages | (name: InternalNamePath, status: boolean, errors: any[] \| null) =&gt; void | - |
| valuesChange | Trigger when value updated | (changedValues: Record&lt;string, any&gt;, values: Record&lt;string, any&gt;) =&gt; void | - |
| fieldsChange | Trigger when field updated | (changedFields: FieldData[], allFields: FieldData[]) =&gt; void | - |

### Methods {#form-methods}

```ts
import { FormInstance } from 'antdv-next'

const formRef = ref<FormInstance>()
```

| Method | Description | Type | Version |
| --- | --- | --- | --- |
| getFieldValue | Get the value of a single field | (name: NamePath) =&gt; StoreValue | - |
| getFieldsValue | Get values of a group of fields. Pass `true` to return values of all currently collected fields | (nameList?: NamePath[] \| true) =&gt; Record&lt;string, any&gt; | - |
| getFieldError | Get error messages of a single field | (name: NamePath) =&gt; string[] | - |
| getFieldsError | Get field error info list, including `errors` and `warnings` | (nameList?: NamePath[]) =&gt; FieldError[] | - |
| getFieldWarning | Get warning messages of a single field | (name: NamePath) =&gt; string[] | - |
| isFieldsTouched | Check whether fields have been operated on. When `allFieldsTouched` is `true`, all fields must be touched | (nameList?: NamePath[] \| boolean, allFieldsTouched?: boolean) =&gt; boolean | - |
| isFieldTouched | Check whether a single field has been operated on | (name: NamePath) =&gt; boolean | - |
| isFieldsValidating | Check whether fields are validating | (nameList?: NamePath[]) =&gt; boolean | - |
| isFieldValidating | Check whether a single field is validating | (name: NamePath) =&gt; boolean | - |
| resetFields | Reset field values, status, and validation results. Resets all fields when omitted | (nameList?: NamePath[]) =&gt; void | - |
| clearValidate | Clear validation results without changing field values | (nameList?: NamePath[]) =&gt; void | - |
| setFields | Set field state and values directly. Useful for writing `errors`, `warnings`, `touched`, and similar meta manually | (data: FieldData[]) =&gt; void | - |
| setFieldValue | Set the value of a single field | (name: NamePath, value: any) =&gt; void | - |
| setFieldsValue | Set values of multiple fields in batch | (values: Record&lt;string, any&gt;) =&gt; void | - |
| validateFields | Validate fields and return the corresponding field values | (nameList?: NamePath[], options?: ValidateOptions) =&gt; Promise&lt;Record&lt;string, any&gt;&gt; | - |
| validate | Alias of `validateFields()` for validating the whole form | () =&gt; Promise&lt;Record&lt;string, any&gt;&gt; | - |
| submit | Submit the form. Equivalent to triggering form `submit` | () =&gt; void | - |
| nativeElement | Root `form` element | HTMLFormElement \| undefined | - |
| scrollToField | Scroll to the specified field. By default it will also try to focus the field | (name: NamePath, options?: ScrollFocusOptions \| boolean) =&gt; void | - |
| focusField | Focus the DOM element of the specified field | (name: NamePath) =&gt; void | - |
| getFieldInstance | Get the registered field instance | (name: NamePath) =&gt; any | - |

### FormItem {#form-item}

#### Props {#form-item-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| name | Field name | NamePath | - | - |
| label | Label text | VueNode | - | - |
| labelAlign | The text align of label | FormLabelAlign | `right` | - |
| labelCol | The layout of label. If both Form and Form.Item exists, use Item first | ColProps | - | - |
| wrapperCol | The layout for input controls, same as `labelCol` | ColProps | - | - |
| colon | Used with `label`, whether to display `:` after label text | boolean | true | - |
| extra | The extra prompt message | VueNode | - | - |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule | VueNode | - | - |
| hasFeedback | Display validation status icon | boolean \| \{ icons: FeedbackIcons \} | false | - |
| validateStatus | The validation status | ValidateStatus | - | - |
| required | Display required style. When not set, it will be generated by the validation rule. Set it to `false` to disable the style. | boolean | - | - |
| rules | Rules for field validation | Rule[] | - | - |
| validateTrigger | When to validate the value of children node. When set to `false`, all interaction-driven validation for the field is disabled even if a rule declares `trigger` or `validateTrigger`; explicit `validateFields` and submit validation still run | string \| string[] \| false | `change` | - |
| validateDebounce | Delay milliseconds to start validation | number | - | - |
| validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` configured | boolean \| `parallel` | false | - |
| noStyle | No style for `true`, used as a pure field control | boolean | false | - |
| id | Set sub label `htmlFor` | string | - | - |
| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | - |
| messageVariables | The default validate field info | Record&lt;string, string&gt; | - | - |
| tooltip | Config tooltip info | VueNode \| TooltipProps & \{ icon: VueNode \} | - | - |
| layout | Form item layout | `horizontal` \| `vertical` | - | - |
| rootClass | Root container class | string | - | - |
| prefixCls | Prefix class name | string | - | - |

#### Slots {#form-item-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Form control content | () =&gt; any | - |
| label | Custom label content (higher priority than `label` prop) | () =&gt; any | - |
| tooltip | Custom label tooltip content. The slot arg is the current `tooltip` config; when `tooltip` is an options object, returning an object from slot will be merged into it | (tooltip?: VueNode \| TooltipProps & &#123; icon: VueNode &#125;) =&gt; any | - |
| extra | Custom extra message (higher priority than `extra` prop) | () =&gt; any | - |
| help | Custom help/error message (higher priority than `help` prop) | () =&gt; any | - |

## Types

### Rule {#rule}

`rules` can be declared on `Form` for multiple fields or on `Form.Item` for a single field. The main supported types are:

```ts
type RuleType =
  | 'string'
  | 'number'
  | 'boolean'
  | 'method'
  | 'regexp'
  | 'integer'
  | 'float'
  | 'object'
  | 'enum'
  | 'date'
  | 'url'
  | 'hex'
  | 'email'
  | 'tel'

type TriggerType = 'change' | 'blur' | 'focus'

type Validator = (
  rule: RuleObject,
  value: any,
  callback: (error?: string) => void,
) => Promise<void | any> | void

interface RuleObject {
  warningOnly?: boolean
  enum?: any[]
  len?: number
  max?: number
  message?: string | Component | (() => VueNode)
  min?: number
  pattern?: RegExp
  required?: boolean
  transform?: (value: any) => any
  type?: RuleType | 'array'
  whitespace?: boolean
  trigger?: TriggerType | TriggerType[]
  validateTrigger?: TriggerType | TriggerType[]
  validator?: Validator
  defaultField?: RuleObject
}

type RuleRender = (form: FormInstance) => RuleObject
type Rule = RuleObject | RuleRender
```

Notes:

- `Form.rules` is typed as `Record<string, Rule[]>`
- `Form.Item.rules` is typed as `Rule[]`
- `validateTrigger` has higher priority than `trigger`
- When `type: 'array'` is used, `defaultField` can define rules for array items
- `message` accepts a render function (e.g. `() => t('required')`): it is kept as-is through validation and only invoked while rendering the error, so any reactive state it reads (locale, i18n, ...) updates the displayed message without re-validating. Function messages skip `${label}`-style template interpolation

### validateMessages

Form provides default validation error messages. You can modify the template by configuring `validateMessages` property:

```ts
const validateMessages = {
  required: '\'${name}\' is required!',
}
```

```vue
<template>
  <a-form :validate-messages="validateMessages">
    ...
  </a-form>
</template>
```

ConfigProvider also provides a global configuration scheme that allows for uniform configuration error notification templates.

```vue
<template>
  <a-config-provider :form="{ validateMessages }">
    <a-form />
  </a-config-provider>
</template>
```

> Note: Vue version does not provide `Form.List`. You can use `v-for` with reactive arrays to build dynamic form items.

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>


## Design Token {#design-token}

<ComponentTokenTable component="Form"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Grid
URL: https://www.antdv-next.com/components/grid.md
---

## Design concept

<div class="grid-demo">
  <img draggable="false" src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
</div>

In most business situations, Antdv Next needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.

We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.

## Overview

In the grid system, we define the frame outside the information area based on `row` and `column`, to ensure that every area can have stable arrangement.

Following is a brief look at how it works:

- Establish a set of `column` in the horizontal space defined by `row` (abbreviated col).
- Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`.
- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `<Col span={8} />`.
- If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.

Our grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`.

Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.

## Examples

### Basic Grid
From the stack to the horizontal arrangement.

Create a basic grid using a single set of `Row` and `Col`. All `Col` must be placed inside a `Row`.
```vue
<template>
  <a-row>
    <a-col :span="24">
      col
    </a-col>
  </a-row>

  <a-row>
    <a-col :span="12">
      col-12
    </a-col>
    <a-col :span="12">
      col-12
    </a-col>
  </a-row>
  <a-row>
    <a-col :span="8">
      col-8
    </a-col>
    <a-col :span="8">
      col-8
    </a-col>
    <a-col :span="8">
      col-8
    </a-col>
  </a-row>
  <a-row>
    <a-col :span="6">
      col-6
    </a-col>
    <a-col :span="6">
      col-6
    </a-col>
    <a-col :span="6">
      col-6
    </a-col>
    <a-col :span="6">
      col-6
    </a-col>
  </a-row>
</template>
```
### Grid Gutter
You can use the `gutter` property of `Row` as grid spacing. We recommend `(16 + 8n)px` (`n` stands for natural number).

For responsive spacing, set it as an object like `{ xs: 8, sm: 16, md: 24, lg: 32 }`.

For vertical spacing, use an array `[horizontal, vertical]`.
```vue
<template>
  <a-divider title-placement="left">
    Horizontal
  </a-divider>
  <a-row :gutter="16">
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    Responsive
  </a-divider>
  <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    Vertical
  </a-divider>
  <a-row :gutter="[16, 24]">
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
    <a-col :span="6" class="gutter-row">
      <div class="gutter-box">
        col-6
      </div>
    </a-col>
  </a-row>
</template>

<style scoped>
.gutter-box {
  padding: 8px 0;
  color: #fff;
  text-align: center;
  background: #0092ff;
}
</style>
```
### Column offset
`offset` can set the column to the right side. For example, `offset={4}` shifts the element to the right by four columns.
```vue
<template>
  <a-row>
    <a-col :span="8">
      col-8
    </a-col>
    <a-col :span="8" :offset="8">
      col-8
    </a-col>
  </a-row>
  <a-row>
    <a-col :span="6" :offset="6">
      col-6 col-offset-6
    </a-col>
    <a-col :span="6" :offset="6">
      col-6 col-offset-6
    </a-col>
  </a-row>
  <a-row>
    <a-col :span="12" :offset="6">
      col-12 col-offset-6
    </a-col>
  </a-row>
</template>
```
### Grid sort
By using `push` and `pull`, you can easily change column order.
```vue
<template>
  <a-row>
    <a-col :span="18" :push="6">
      col-18 col-push-6
    </a-col>
    <a-col :span="6" :pull="18">
      col-6 col-pull-18
    </a-col>
  </a-row>
</template>
```
### Typesetting
Basic layout.

Child elements are aligned in the parent by `start`, `center`, `end`, `space-between`, `space-around`, and `space-evenly`.
```vue
<template>
  <a-divider title-placement="left">
    sub-element align left
  </a-divider>
  <a-row justify="start">
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    sub-element align center
  </a-divider>
  <a-row justify="center">
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    sub-element align right
  </a-divider>
  <a-row justify="end">
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    sub-element monospaced arrangement
  </a-divider>
  <a-row justify="space-between">
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    sub-element align full
  </a-divider>
  <a-row justify="space-around">
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    sub-element align evenly
  </a-divider>
  <a-row justify="space-evenly">
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
    <a-col :span="4">
      col-4
    </a-col>
  </a-row>
</template>
```
### Alignment
Child elements vertically aligned.
```vue
<template>
  <a-divider title-placement="left">
    Align Top
  </a-divider>
  <a-row justify="center" align="top" class="row-demo">
    <a-col :span="4">
      <div class="demo-box height-100">
        col-4
      </div>
    </a-col>
    <a-col :span="4">
      <div class="demo-box height-50">
        col-4
      </div>
    </a-col>
    <a-col :span="4">
      <div class="demo-box height-120">
        col-4
      </div>
    </a-col>
    <a-col :span="4">
      <div class="demo-box height-80">
        col-4
      </div>
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    Align Middle
  </a-divider>
  <a-row justify="space-around" align="middle" class="row-demo">
    <a-col :span="4">
      <div class="demo-box height-100">
        col-4
      </div>
    </a-col>
    <a-col :span="4">
      <div class="demo-box height-50">
        col-4
      </div>
    </a-col>
    <a-col :span="4">
      <div class="demo-box height-120">
        col-4
      </div>
    </a-col>
    <a-col :span="4">
      <div class="demo-box height-80">
        col-4
      </div>
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    Align Bottom
  </a-divider>
  <a-row justify="space-between" align="bottom" class="row-demo">
    <a-col :span="4">
      <div class="demo-box height-100">
        col-4
      </div>
    </a-col>
    <a-col :span="4">
      <div class="demo-box height-50">
        col-4
      </div>
    </a-col>
    <a-col :span="4">
      <div class="demo-box height-120">
        col-4
      </div>
    </a-col>
    <a-col :span="4">
      <div class="demo-box height-80">
        col-4
      </div>
    </a-col>
  </a-row>
</template>

<style scoped>
.row-demo {
  padding: 8px 0;
  background: rgba(128, 128, 128, 0.08);
}
.height-50 {
  height: 50px;
  line-height: 50px;
}
.height-80 {
  height: 80px;
  line-height: 80px;
}
.height-100 {
  height: 100px;
  line-height: 100px;
}
.height-120 {
  height: 120px;
  line-height: 120px;
}
</style>
```
### Order
To change the element order by `order`.
```vue
<template>
  <a-divider title-placement="left">
    Normal
  </a-divider>
  <a-row class="row-demo">
    <a-col :span="6" :order="4">
      1 col-order-4
    </a-col>
    <a-col :span="6" :order="3">
      2 col-order-3
    </a-col>
    <a-col :span="6" :order="2">
      3 col-order-2
    </a-col>
    <a-col :span="6" :order="1">
      4 col-order-1
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    Responsive
  </a-divider>
  <a-row class="row-demo">
    <a-col
      :span="6"
      :xs="{ order: 1 }"
      :sm="{ order: 2 }"
      :md="{ order: 3 }"
      :lg="{ order: 4 }"
    >
      1 col-order-responsive
    </a-col>
    <a-col
      :span="6"
      :xs="{ order: 2 }"
      :sm="{ order: 1 }"
      :md="{ order: 4 }"
      :lg="{ order: 3 }"
    >
      2 col-order-responsive
    </a-col>
    <a-col
      :span="6"
      :xs="{ order: 3 }"
      :sm="{ order: 4 }"
      :md="{ order: 2 }"
      :lg="{ order: 1 }"
    >
      3 col-order-responsive
    </a-col>
    <a-col
      :span="6"
      :xs="{ order: 4 }"
      :sm="{ order: 3 }"
      :md="{ order: 1 }"
      :lg="{ order: 2 }"
    >
      4 col-order-responsive
    </a-col>
  </a-row>
</template>

<style scoped>
.row-demo {
  padding: 8px 0;
  text-align: center;
  background: rgba(128, 128, 128, 0.08);
}
</style>
```
### Flex Stretch
Col provides `flex` to support filling the rest space.
```vue
<template>
  <a-divider title-placement="left">
    Percentage columns
  </a-divider>
  <a-row>
    <a-col :flex="2" class="flex-col">
      2 / 5
    </a-col>
    <a-col :flex="3" class="flex-col">
      3 / 5
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    Fill rest
  </a-divider>
  <a-row>
    <a-col flex="100px" class="flex-col">
      100px
    </a-col>
    <a-col flex="auto" class="flex-col">
      Fill Rest
    </a-col>
  </a-row>

  <a-divider title-placement="left">
    Raw flex style
  </a-divider>
  <a-row>
    <a-col flex="1 1 200px" class="flex-col">
      1 1 200px
    </a-col>
    <a-col flex="0 1 300px" class="flex-col">
      0 1 300px
    </a-col>
  </a-row>

  <a-row :wrap="false">
    <a-col flex="none" class="flex-col">
      <div class="flex-none">
        none
      </div>
    </a-col>
    <a-col flex="auto" class="flex-col">
      auto with no-wrap
    </a-col>
  </a-row>
</template>

<style scoped>
.flex-col {
  padding: 8px 0;
  color: #fff;
  text-align: center;
  background: #0092ff;
}
.flex-none {
  padding: 0 16px;
}
</style>
```
### Responsive
Referring to the Bootstrap [responsive design](http://getbootstrap.com/css/#grid-media-queries), here preset seven dimensions: `xs` `sm` `md` `lg` `xl` `xxl` `xxxl`.
```vue
<template>
  <a-row>
    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
      Col
    </a-col>
    <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
      Col
    </a-col>
    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
      Col
    </a-col>
  </a-row>
</template>
```
### Flex Responsive
Support flexible responsive flex ratios, which require CSS Variables support in the browser.
```vue
<script setup lang="ts">
const columns = Array.from({ length: 10 }, (_, index) => index)
</script>

<template>
  <a-row>
    <a-col
      v-for="index in columns"
      :key="`col-${index}`"
      :xs="{ flex: '100%' }"
      :sm="{ flex: '50%' }"
      :md="{ flex: '40%' }"
      :lg="{ flex: '20%' }"
      :xl="{ flex: '10%' }"
      class="flex-col"
    >
      Col
    </a-col>
  </a-row>
</template>

<style scoped>
.flex-col {
  padding: 8px 0;
  color: #fff;
  text-align: center;
  background: #0092ff;
}
</style>
```
### More responsive
`span` `pull` `push` `offset` `order` can be embedded into `xs` `sm` `md` `lg` `xl` `xxl` properties to use, where `xs={6}` equals to `xs={{ span: 6 }}`.
```vue
<template>
  <a-row>
    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">
      Col
    </a-col>
    <a-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">
      Col
    </a-col>
    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">
      Col
    </a-col>
  </a-row>
</template>
```
### Playground
A simple playground for column count and gutter.
```vue
<script setup lang="ts">
import { computed, ref } from 'vue'

const gutterValues = [8, 16, 24, 32, 40, 48]
const vGutterValues = [8, 16, 24, 32, 40, 48]
const colCountValues = [2, 3, 4, 6, 8, 12]

const gutterKey = ref(1)
const vGutterKey = ref(1)
const colCountKey = ref(2)

const gutterMarks = gutterValues.reduce<Record<number, number>>((acc, value, index) => {
  acc[index] = value
  return acc
}, {})
const vGutterMarks = vGutterValues.reduce<Record<number, number>>((acc, value, index) => {
  acc[index] = value
  return acc
}, {})
const colCountMarks = colCountValues.reduce<Record<number, number>>((acc, value, index) => {
  acc[index] = value
  return acc
}, {})

const gutterValue = computed(() => gutterValues[gutterKey.value])
const vGutterValue = computed(() => vGutterValues[vGutterKey.value])
const colCount = computed(() => colCountValues[colCountKey.value])
const colSpan = computed(() => 24 / colCount.value!)

const formatGutter = (value?: number) => gutterValues[value ?? 0]
const formatVGutter = (value?: number) => vGutterValues[value ?? 0]
const formatColCount = (value?: number) => colCountValues[value ?? 0]

const colSnippet = computed(() => {
  return Array.from({ length: colCount.value! })
    .map(() => `  <a-col :span="${colSpan.value}"><div>Column</div></a-col>`)
    .join('\n')
})

const rowCode = computed(() => {
  return `<a-row :gutter="[${gutterValue.value}, ${vGutterValue.value}]">\n${colSnippet.value}\n${colSnippet.value}\n</a-row>`
})

const rowCodeSingle = computed(() => {
  return `<a-row :gutter="[${gutterValue.value}, ${vGutterValue.value}]">\n${colSnippet.value}\n</a-row>`
})
</script>

<template>
  <div class="grid-playground">
    <span>Horizontal Gutter (px):</span>
    <div class="slider-wrap">
      <a-slider
        v-model:value="gutterKey"
        :min="0"
        :max="gutterValues.length - 1"
        :marks="gutterMarks"
        :step="null"
        :tooltip="{ formatter: formatGutter }"
      />
    </div>

    <span>Vertical Gutter (px):</span>
    <div class="slider-wrap">
      <a-slider
        v-model:value="vGutterKey"
        :min="0"
        :max="vGutterValues.length - 1"
        :marks="vGutterMarks"
        :step="null"
        :tooltip="{ formatter: formatVGutter }"
      />
    </div>

    <span>Column Count:</span>
    <div class="slider-wrap slider-wrap-bottom">
      <a-slider
        v-model:value="colCountKey"
        :min="0"
        :max="colCountValues.length - 1"
        :marks="colCountMarks"
        :step="null"
        :tooltip="{ formatter: formatColCount }"
      />
    </div>

    <a-row :gutter="[gutterValue, vGutterValue]">
      <template v-for="_index in colCount" :key="`row-a-${_index}`">
        <a-col :span="colSpan">
          <div>Column</div>
        </a-col>
      </template>
      <template v-for="_index in colCount" :key="`row-b-${_index}`">
        <a-col :span="colSpan">
          <div>Column</div>
        </a-col>
      </template>
    </a-row>

    <div class="row-label">
      Another Row:
    </div>
    <a-row :gutter="[gutterValue, vGutterValue]">
      <template v-for="_index in colCount" :key="`row-c-${_index}`">
        <a-col :span="colSpan">
          <div>Column</div>
        </a-col>
      </template>
    </a-row>

    <pre class="demo-code">{{ rowCode }}</pre>
    <pre class="demo-code">{{ rowCodeSingle }}</pre>
  </div>
</template>

<style scoped>
.grid-playground {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slider-wrap {
  width: 50%;
}
.slider-wrap-bottom {
  margin-bottom: 48px;
}
.row-label {
  margin-top: 8px;
}
.grid-playground div .ant-col {
  padding: 0;
  background: transparent !important;
  border: 0;
}
.grid-playground .ant-col > div {
  height: 120px;
  font-size: 14px;
  line-height: 120px;
  text-align: center;
  background: #0092ff;
  border-radius: 4px;
}
.grid-playground pre {
  padding: 8px 16px;
  font-size: 14px;
  background: #f9f9f9;
  border-radius: 6px;
}
.grid-playground pre.demo-code {
  direction: ltr;
}
</style>
```
### useBreakpoint Hook
Use the `useBreakpoint` hook to build personalized layouts. `xs` only takes effect when the screen matches the minimum width.
```vue
<script setup lang="ts">
import { useBreakpoint } from 'antdv-next'
import { computed } from 'vue'

const screens = useBreakpoint()
const screenKeys = computed(() => Object.entries(screens.value ?? {}).filter(screen => !!screen[1]))
</script>

<template>
  Current break point:
  <div class="gap-2 inline-flex">
    <template v-for="item in screenKeys" :key="item[0]">
      <a-tag color="blue">
        {{ item[0] }}
      </a-tag>
    </template>
  </div>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Row

#### Props {#row-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'top' \| 'middle' \| 'bottom' \| 'stretch'}` | `top` | - | × |
| gutter | Spacing between grids, could be a [string CSS units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units) or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| string \| object \| array | 0 | - | × |
| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'xxxl']: 'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between' \| 'space-evenly'}` | `start` | - | × |
| wrap | Auto wrap line | boolean | true | - | × |

### Col

#### Props {#col-props}


| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| flex | Flex layout style. Number for 'flex: n n auto', string is applied directly (e.g. pure number string 'n' for 'flex: n 1 0') | string \| number | - |  | × |
| offset | The number of cells to offset Col from the left | number | 0 |  | × |
| order | Raster order | number | 0 |  | × |
| pull | The number of cells that raster is moved to the left | number | 0 |  | × |
| push | The number of cells that raster is moved to the right | number | 0 |  | × |
| span | Raster number of cells to occupy, 0 corresponds to `display: none` | number | - |  | × |
| xs | `screen < 576px` and also default setting, could be a `span` value or an object containing above props | number \| object | - |  | × |
| sm | `screen ≥ 576px`, could be a `span` value or an object containing above props | number \| object | - |  | × |
| md | `screen ≥ 768px`, could be a `span` value or an object containing above props | number \| object | - |  | × |
| lg | `screen ≥ 992px`, could be a `span` value or an object containing above props | number \| object | - |  | × |
| xl | `screen ≥ 1200px`, could be a `span` value or an object containing above props | number \| object | - |  | × |
| xxl | `screen ≥ 1600px`, could be a `span` value or an object containing above props | number \| object | - |  | × |
| xxxl | `screen ≥ 1920px`, could be a `span` value or an object containing above props | number \| object | - | 1.0.3 | × |

## Design Token

<ComponentTokenTable component="Grid" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Icon
URL: https://www.antdv-next.com/components/icon.md
---

## How to use

Before using icons, you need to install the [@antdv-next/icons](https://www.npmjs.com/package/@antdv-next/icons) package:

<InstallDependencies npm='npm install @antdv-next/icons' yarn='yarn add @antdv-next/icons' pnpm='pnpm install @antdv-next/icons' bun='bun add @antdv-next/icons'></InstallDependencies>

## List of icons

<IconSearch></IconSearch>

## Examples

### Basic
Import icons from `@antdv-next/icons`, component name of icons with different theme is the icon name suffixed by the theme name. Specify the `spin` property to show the spinning animation.
```vue
<script setup lang="ts">
import {
  HomeOutlined,
  LoadingOutlined,
  SettingFilled,
  SmileOutlined,
  SyncOutlined,
} from '@antdv-next/icons'
</script>

<template>
  <a-space>
    <HomeOutlined />
    <SettingFilled />
    <SmileOutlined />
    <SyncOutlined spin />
    <SmileOutlined :rotate="180" />
    <LoadingOutlined />
  </a-space>
</template>
```
### Two-tone icon and colorful icon
You can set the `twoToneColor` prop to a specific primary color for two-tone icons.
```vue
<script setup lang="ts">
import { CheckCircleTwoTone, HeartTwoTone, SmileTwoTone } from '@antdv-next/icons'
</script>

<template>
  <a-space>
    <SmileTwoTone />
    <HeartTwoTone two-tone-color="#eb2f96" />
    <CheckCircleTwoTone two-tone-color="#52c41a" />
  </a-space>
</template>
```
### Custom Icon
Create a reusable Vue component by using `Icon`. The property / slot `component` takes a Vue component that renders to `svg` element.
```vue
<script setup lang="ts">
import Icon, { HomeOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-space>
    <Icon>
      <template #component>
        <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
          <title>heart icon</title>
          <path
            d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"
          />
        </svg>
      </template>
    </Icon>
    <Icon>
      <template #component>
        <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
          <title>Panda icon</title>
          <path
            d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z"
            fill="#6B676E"
          />
          <path
            d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z"
            fill="#FFEBD2"
          />
          <path
            d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z"
            fill="#E9D7C3"
          />
          <path
            d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z"
            fill="#FFFFFF"
          />
          <path
            d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z"
            fill="#6B676E"
          />
          <path
            d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z"
            fill="#464655"
          />
          <path
            d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
            fill="#464655"
          />
          <path
            d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"
            fill="#464655"
          />
        </svg>
      </template>
    </Icon>
    <Icon :component="HomeOutlined" />
    <HomeOutlined />
  </a-space>
</template>
```
### Use iconfont.cn
If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully.
```vue
<script setup lang="ts">
import { createFromIconfontCN } from '@antdv-next/icons'

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
})
</script>

<template>
  <a-space>
    <IconFont type="icon-tuichu" />
    <IconFont type="icon-facebook" style="color: '#1877F2'" />
    <IconFont type="icon-twitter" />
  </a-space>
</template>
```
### Multiple resources from iconfont.cn
You can use `scriptUrl`  to manage icons in one icon from multiple [iconfont.cn](http://iconfont.cn/) resources. If an icon with a duplicate name is in resources, it will be overridden in array order.
```vue
<script setup lang="ts">
import { createFromIconfontCN } from '@antdv-next/icons'

const IconFont = createFromIconfontCN({
  scriptUrl: [
    '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // icon-javascript, icon-java, icon-shoppingcart (overridden)
    '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python
  ],
})
</script>

<template>
  <a-space>
    <IconFont type="icon-javascript" />
    <IconFont type="icon-java" />
    <IconFont type="icon-shoppingcart" />
    <IconFont type="icon-python" />
  </a-space>
</template>
```

## API

### Common Icon

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| class | The class name of the icon | string | - | | × |
| rotate | Rotate by n degrees (not working in IE9) | number | - | | × |
| spin | Rotate icon with animation | boolean | false | | × |
| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | | × |
| twoToneColor | Only supports the two-tone icon. Specify the primary color | string (hex color) | - | | × |

We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.

```vue
<script setup>
import { StarFilled, StarOutlined, StarTwoTone } from '@antdv-next/icons'
</script>

<template>
  <StarOutlined />
  <StarFilled />
  <StarTwoTone two-tone-color="#eb2f96" />
</template>
```

### Custom Icon

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| component | The component used for the root node | ComponentType&lt;CustomIconComponentProps> | - | | × |
| rotate | Rotate degrees (not working in IE9) | number | - | | × |
| spin | Rotate icon with animation | boolean | false | | × |
| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | | × |

### About SVG icons

- Complete offline usage of icons, without dependency on a CDN-hosted font icon file (No more empty square during downloading and no need to deploy icon font files locally either!)
- Much more display accuracy on lower-resolution screens
- The ability to choose icon color
- No need to change built-in icons with overriding styles by providing more props in component

More discussion of SVG icon reference at [#10353](https://github.com/ant-design/ant-design/issues/10353).

All the icons will render to `<svg>`. You can still set `style` and `class` for size and color of icons.

```vue
<script lang="ts" setup>
  import { MessageOutlined } from '@antdv-next/icons'
</script>
<template>
  <MessageOutlined style="fontSize: 16px; color: #08c" />
</template>
```

### Set TwoTone Color

When using the two-tone icons, you can use the static methods `getTwoToneColor()` and `setTwoToneColor(colorString)` to specify the primary color.

```jsx
import { getTwoToneColor, setTwoToneColor } from '@antdv-next/icons'

setTwoToneColor('#eb2f96')
getTwoToneColor() // #eb2f96
```

### Custom Font Icon

We added a `createFromIconfontCN` function to help developer use their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way.

> This method is specified for [iconfont.cn](http://iconfont.cn/).

```js
import { createFromIconfontCN } from '@antdv-next/icons'

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
})
```

It creates a component that uses SVG sprites in essence.

The following options are available:

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| extraCommonProps | Define extra properties to the component | { \[key: string]: any } | {} | |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project | string \| string\[] | - | |

The property `scriptUrl` should be set to import the SVG sprite symbols.

See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) to learn about how to generate `scriptUrl`.

### Custom SVG Icon

You can import SVG icon as a vue component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).

```js
// webpack.config.js
module.exports = {
  // ... other config
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: '@svgr/webpack',
      options: {
        babel: false,
        icon: true,
      },
    },
  ],
}
```

The following properties are available for the component:

| Property | Description | Type | Readonly | Version |
| --- | --- | --- | --- | --- |
| class | The computed class name of the `svg` element | string | - | |
| fill | Define the color used to paint the `svg` element | string | `currentColor` | |
| height | The height of the `svg` element | string \| number | `1em` | |
| style | The computed style of the `svg` element | CSSProperties | - | |
| width | The width of the `svg` element | string \| number | `1em` | |

## Design Token

<ComponentTokenTable component="Icon"></ComponentTokenTable>

## FAQ

### Why does icon style sometimes cause global style error? {#faq-icon-bad-style}

Related issue: [#54391](https://github.com/ant-design/ant-design/issues/54391)

When enable `layer`, icon style may deprioritize `@layer antd` and cause all components to be styled abnormally.

This problem can be resolved by two steps below:

1. use `@antdv-next/icons` with `@antdv-next`.
2. stop to use static methods of `message`, `Modal` and `notification`. use hooks version or `App` provided instance.

If you must use static methods, you can put any of icon components just under `App`, what helps to avoid style impact caused by static methods.

```diff
<a-style-provider layer>
  <a-config-provider>
    <a-app>
+     {/* any icon */}
+     <RightOutlined />
      {/* your pages */}
    </a-app>
  </a-config-provider>
</a-style-provider>
```

---
Title: Image
URL: https://www.antdv-next.com/components/image.md
---

## When To Use {#when-to-use}

- When you need to display pictures.
- Display when loading a large image or fault tolerant handling when loading fail.

## Examples {#examples}

### Basic Usage
Click the image to zoom in.
```vue
<template>
  <a-image
    :width="200"
    alt="basic"
    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  />
</template>
```
### Fault tolerant
Load failed to display image placeholder.
```vue
<template>
  <a-image
    alt="basic image"
    :width="200"
    :height="200"
    src="error"
    fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
  />
</template>
```
### Progressive Loading
Progressive when large image loading.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const random = shallowRef(Date.now())

function setRandom() {
  random.value = Date.now()
}
</script>

<template>
  <a-space :size="12">
    <a-image :width="200" alt="basic image" :src="`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`">
      <template #placeholder>
        <a-image
          :preview="false"
          alt="placeholder image"
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
          :width="200"
        />
      </template>
    </a-image>
    <a-button
      type="primary"
      @click="setRandom"
    >
      Reload
    </a-button>
  </a-space>
</template>
```
### Multiple image preview
Click the left and right switch buttons to preview multiple images.
```vue
<template>
  <a-image-preview-group>
    <a-image
      alt="svg image"
      :width="200"
      src="https://www.antdv-next.com/antdv-next.svg"
    />
    <a-image
      :width="200"
      alt="svg image"
      src="https://cn.vuejs.org/logo.svg"
    />
  </a-image-preview-group>
</template>
```
### Preview from one image
Preview a collection from one image.
```vue
<script setup lang="ts">
const items = [
  'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
  'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
  'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
]
</script>

<template>
  <a-image-preview-group :items="items">
    <a-image alt="webp image" :width="200" src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp" />
  </a-image-preview-group>
</template>
```
### Custom preview image
You can set different preview image.
```vue
<template>
  <a-image
    :width="200"
    alt="basic image"
    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
    :preview="{
      src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }"
  />
</template>
```
### Controlled Preview
You can make preview controlled.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
const scaleStep = ref(0.5)
</script>

<template>
  <div>
    scaleStep: {{ scaleStep }}
    <a-input-number v-model:value="scaleStep" min="0.1" max="5" step="0.1" />
  </div>
  <br>
  <a-button type="primary" @click="open = true">
    show image preview
  </a-button>
  <a-image
    alt="basic image"
    :width="200"
    style="display: none;"
    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
    :preview="{
      open,
      scaleStep,
      src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      onOpenChange(nextOpen: boolean) {
        open = nextOpen
      },
    }"
  />
</template>
```
### Custom toolbar render
You can customize the toolbar and add a button for downloading the original image or downloading the flipped and rotated image.
```vue
<script setup lang="ts">
import {
  DownloadOutlined,
  LeftOutlined,
  RightOutlined,
  RotateLeftOutlined,
  RotateRightOutlined,
  SwapOutlined,
  UndoOutlined,
  ZoomInOutlined,
  ZoomOutOutlined,
} from '@antdv-next/icons'
import { ref } from 'vue'

const imageList = [
  'https://www.antdv-next.com/antdv-next.svg',
  'https://cn.vuejs.org/logo.svg',
]
const current = ref(0)
function handlePreviewChange(val: number) {
  console.log('current', current.value, val)
  current.value = val
}
function onDownload() {
  const url = imageList[current.value]
  const suffix = url!.slice(url!.lastIndexOf('.'))
  const filename = Date.now() + suffix

  fetch(url!)
    .then(response => response.blob())
    .then((blob) => {
      const blobUrl = URL.createObjectURL(new Blob([blob]))
      const link = document.createElement('a')
      link.href = blobUrl
      link.download = filename
      document.body.appendChild(link)
      link.click()
      URL.revokeObjectURL(blobUrl)
      link.remove()
    })
}
</script>

<template>
  <a-image-preview-group
    :preview="{
      onChange: handlePreviewChange,
    }"
  >
    <template v-for="(item, index) in imageList" :key="index">
      <a-image :alt="`image-${index}`" :src="item" :width="200" />
    </template>
    <template #actionsRender="_, { transform, actions }">
      <a-space :size="12" class="toolbar-wrapper">
        <LeftOutlined :disabled="current === 0" @click="actions.onActive(-1)" />
        <RightOutlined :disabled="current === imageList.length - 1" @click="actions.onActive(1)" />
        <DownloadOutlined @click="onDownload" />
        <SwapOutlined :rotate="90" @click="actions.onFlipX" />
        <SwapOutlined @click="actions.onFlipY" />
        <RotateLeftOutlined @click="actions.onRotateLeft" />
        <RotateRightOutlined @click="actions.onRotateRight" />
        <ZoomOutOutlined :disabled="transform.scale === 1" @click="actions.onZoomOut" />
        <ZoomInOutlined :disabled="transform.scale === 50" @click="actions.onZoomIn" />
        <UndoOutlined @click="actions.onReset" />
      </a-space>
    </template>
  </a-image-preview-group>
</template>

<style scoped>
  .toolbar-wrapper {
  padding: 0px 24px;
  color: #fff;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 100px;
}

.toolbar-wrapper .anticon {
  padding: 12px;
  cursor: pointer;
}

.toolbar-wrapper .anticon[disabled='true'] {
  cursor: not-allowed;
  opacity: 0.3;
}

.toolbar-wrapper .anticon:hover {
  opacity: 0.3;
}
</style>
```
### Custom preview render
You can customize the preview content.
```vue
<script setup lang="ts">
import { h } from 'vue'

const imageRender = h('video', {
  muted: true,
  width: '100%',
  controls: true,
  src: 'https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ',
})
</script>

<template>
  <a-image :width="200" alt="slot image" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" :preview="{ actionsRender: () => null }">
    <template #imageRender>
      <video
        muted
        width="100%"
        controls
        src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
      />
    </template>
  </a-image>
  <br>
  <a-image
    :width="200"
    alt="preview image"
    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    :preview="{
      imageRender: () => imageRender,
      actionsRender: () => null,
    }"
  />
</template>
```
### preview mask
mask effect, default `blur`.
```vue
<template>
  <a-image
    :width="100"
    alt="Default blur"
    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    :preview="{
      mask: true,
    }"
  >
    <template #cover>
      <a-space vertical align="center">
        Default blur
      </a-space>
    </template>
  </a-image>
  <a-image
    :width="100"
    alt="Dimmed mask"
    src="https://www.antdv-next.com/antdv-next.svg"
    :preview="{
      mask: { blur: false },
    }"
  >
    <template #cover>
      <a-space vertical align="center">
        Dimmed mask
      </a-space>
    </template>
  </a-image>
  <a-image
    :width="100"
    alt="No mask"
    src="https://cn.vuejs.org/logo.svg"
    :preview="{
      mask: false,
    }"
  >
    <template #cover>
      <a-space vertical align="center">
        No mask
      </a-space>
    </template>
  </a-image>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Image by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
const sharedProps = {
  src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  width: 160,
  alt: 'Example image',
}

const imageStyles = {
  root: {
    padding: '4px',
    borderRadius: '8px',
    overflow: 'hidden',
  },
  image: {
    borderRadius: '4px',
  },
}

const previewImageStyles = {
  root: {
    border: '2px solid #A594F9',
    borderRadius: '8px',
    padding: '4px',
    transition: 'all 0.3s ease',
  },
  image: {
    borderRadius: '4px',
    filter: 'grayscale(50%)',
  },
}
</script>

<template>
  <a-flex gap="medium">
    <a-image v-bind="sharedProps" :styles="imageStyles" />
    <a-image v-bind="sharedProps" :styles="previewImageStyles" :preview="{ open: false }" />
  </a-flex>
</template>
```
### nested
Nested in the modal.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)

function handlePreviewGroupChange(current: number, prev: number) {
  console.log(`current index: ${current}, prev index: ${prev}`)
}
</script>

<template>
  <a-button @click="show1 = true">
    showModal
  </a-button>
  <a-modal
    v-model:open="show1"
    @cancel="show1 = false"
    @ok="show1 = false"
  >
    <a-button @click="show2 = true">
      test2
    </a-button>
    <a-modal
      v-model:open="show2"
      @cancel="show2 = false"
      @ok="show2 = false"
    >
      <a-button @click="show3 = true">
        test3
      </a-button>
      <a-modal
        v-model:open="show3"
        @cancel="show3 = false"
        @ok="show3 = false"
      >
        <a-image
          :width="200"
          alt="svg image"
          src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
        />
        <a-divider />
        <a-image-preview-group
          :preview="{
            onChange: handlePreviewGroupChange,
          }"
        >
          <a-image
            :width="200"
            alt="svg image"
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
          />
          <a-image
            :width="200"
            src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
          />
        </a-image-preview-group>
      </a-modal>
    </a-modal>
  </a-modal>
</template>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| preview | Preview configuration; set to false to disable | boolean \| PreviewConfig | true | - | ✓ |
| wrapperStyle | Deprecated. | CSSProperties | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | ImageClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | ImageStylesType | - | - | ✓ |
| rootClass | - | string | - | - | × |
| alt | Image description | string | - | - | × |
| height | Image height | string \| number | - | - | × |
| src | Image URL | string | - | - | × |
| width | Image width | string \| number | - | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| error | Callback when loading error occurs | NonNullable&lt;VcImageProps['onError']&gt; | - |
| click | - | NonNullable&lt;VcImageProps['onClick']&gt; | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| fallback | Fallback URL when load fails | () =&gt; any | - |
| placeholder | Loading placeholder; if true, uses default placeholder | () =&gt; any | - |

Other Property ref [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)

### PreviewType

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| actionsRender | Custom toolbar render | (originalNode: VNode, info: ToolbarRenderInfoType) => VNode | - | - |
| closeIcon | Custom close icon | VNode | - | - |
| cover | Custom preview mask | VNode \| [CoverConfig](#coverconfig) | - | - |
| focusTrap | Whether to trap focus within the preview when open | boolean | true | - |
| getContainer | Specify container for preview mounting; still full screen; false mounts at current location | string \| HTMLElement \| (() => HTMLElement) \| false | - | - |
| imageRender | Custom preview content | (originalNode: VNode, info: { transform: [TransformType](#transformtype), image: [ImgInfo](#imginfo) }) => VNode | - | - |
| mask | preview mask effect | boolean \| \{ enabled?: boolean, blur?: boolean, closable?: boolean \} | true | - |
| maxScale | Maximum zoom scale | number | 50 | - |
| minScale | Minimum zoom scale | number | 1 | - |
| movable | Whether the preview image can be dragged when it is larger than the viewport | boolean | true | - |
| open | Whether to display preview | boolean | - | - |
| rootClassName | Root DOM class name for preview; applies to both image and preview wrapper | string | - | - |
| scaleStep | Each step's zoom multiplier is 1 + scaleStep | number | 0.5 | - |
| src | Custom preview src | string | - | - |
| styles | Custom semantic structure styles | Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - |
| wheel | Whether to enable mouse wheel zoom | boolean | true | - |
| onOpenChange | Callback when preview open state changes | (open: boolean) => void | - | - |
| onTransform | Callback for preview transform changes | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | - |

### PreviewGroup

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | - |
| fallback | Fallback URL for load error | string | - | - |
| items | Array of preview items | string[] \| { src: string, crossOrigin: string, ... }[] | - | - |
| preview | Preview configuration; disable by setting to false | boolean \| [PreviewGroupType](#previewgrouptype) | true | - |

### PreviewGroupType

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| actionsRender | Custom toolbar render | (originalNode: VNode, info: ToolbarRenderInfoType) => VNode | - | - |
| closeIcon | Custom close icon | VNode | - | - |
| countRender | Custom preview count render | (current: number, total: number) => VNode | - | - |
| focusTrap | Whether to trap focus within the preview when open | boolean | true | - |
| current | Index of the current preview image | number | - | - |
| getContainer | Specify container for preview mounting; still full screen; false mounts at current location | string \| HTMLElement \| (() => HTMLElement) \| false | - | - |
| imageRender | Custom preview content | (originalNode: VNode, info: { transform: [TransformType](#transformtype), image: [ImgInfo](#imginfo), current: number }) => VNode | - | - |
| mask | preview mask effect | boolean \| \{ enabled?: boolean, blur?: boolean, closable?: boolean \} | true | - |
| minScale | Minimum zoom scale | number | 1 | - |
| maxScale | Maximum zoom scale | number | 50 | - |
| movable | Whether the preview image can be dragged when it is larger than the viewport | boolean | true | - |
| open | Whether to display preview | boolean | - | - |
| styles | Custom semantic structure styles | Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - |
| scaleStep | Each step's zoom multiplier is 1 + scaleStep | number | 0.5 | - |
| wheel | Whether to enable mouse wheel zoom | boolean | true | - |
| onOpenChange | Callback when preview open state changes, includes current preview index | (open: boolean, info: { current: number }) => void | - | - |
| onChange | Callback when changing preview image | (current: number, prevCurrent: number) => void | - | - |
| onTransform | Callback for preview transform changes | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | - |

## Interface

### TransformType

```typescript
{
  x: number
  y: number
  rotate: number
  scale: number
  flipX: boolean
  flipY: boolean
}
```

### TransformAction

```typescript
type TransformAction
  = | 'flipY'
    | 'flipX'
    | 'rotateLeft'
    | 'rotateRight'
    | 'zoomIn'
    | 'zoomOut'
    | 'close'
    | 'prev'
    | 'next'
    | 'wheel'
    | 'doubleClick'
    | 'move'
    | 'dragRebound'
    | 'reset'
```

### ToolbarRenderInfoType

```ts
{
  icons: {
    flipYIcon: VNode;
    flipXIcon: VNode;
    rotateLeftIcon: VNode;
    rotateRightIcon: VNode;
    zoomOutIcon: VNode;
    zoomInIcon: VNode;
  };
  actions: {
    onActive?: (index: number) => void;
    onFlipY: () => void;
    onFlipX: () => void;
    onRotateLeft: () => void;
    onRotateRight: () => void;
    onZoomOut: () => void;
    onZoomIn: () => void;
    onReset: () => void;
    onClose: () => void;
  };
  transform: TransformType,
  current: number;
  total: number;
  image: ImgInfo
}
```

### ImgInfo

```ts
{
  url: string
  alt: string
  width: string | number
  height: string | number
}
```

### CoverConfig

```ts
interface CoverConfig {
  coverNode?: VNode // The custom node of preview mask
  placement?: 'top' | 'bottom' | 'center' // Set the position of the preview mask display.
};
```

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Image" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Input
URL: https://www.antdv-next.com/components/input.md
---

## When To Use {#when-to-use}

- A user input in a form field is needed.
- A search input is required.

## Examples {#examples}

### Basic usage
Basic usage example.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
</script>

<template>
  <a-input v-model:value="value" placeholder="Basic usage" />
</template>
```
### Three sizes of Input
There are three sizes of an Input box: `large` (40px), `default` (32px) and `small` (24px).
```vue
<script setup lang="ts">
import { UserOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const value = ref()
</script>

<template>
  <a-flex vertical gap="medium">
    <a-input v-model:value="value" size="large" placeholder="large size">
      <template #prefix>
        <UserOutlined />
      </template>
    </a-input>
    <a-input v-model:value="value" placeholder="default size">
      <template #prefix>
        <UserOutlined />
      </template>
    </a-input>
    <a-input v-model:value="value" size="small" placeholder="small size">
      <template #prefix>
        <UserOutlined />
      </template>
    </a-input>
  </a-flex>
</template>
```
### Variants
Variants of Input, there are four variants: `outlined` `filled` `borderless` and `underlined`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref()
</script>

<template>
  <a-flex vertical :gap="12">
    <a-input v-model:value="value" placeholder="Outlined" />
    <a-input v-model:value="value" placeholder="Filled" variant="filled" />
    <a-input v-model:value="value" placeholder="Borderless" variant="borderless" />
    <a-input v-model:value="value" placeholder="Underlined" variant="underlined" />
    <a-input-search v-model:value="value" placeholder="Filled" variant="filled" />
  </a-flex>
</template>
```
### Subcomponent variant config
Compare Input subcomponent variants configured through `input`, subcomponent global config, and component props.
```vue
<template>
  <a-flex vertical gap="large">
    <a-flex vertical gap="small">
      <a-typography-text strong>
        Input.Search
      </a-typography-text>
      <a-typography-text code>
        ConfigProvider input
      </a-typography-text>
      <a-config-provider :input="{ variant: 'filled' }">
        <a-input-search placeholder="Filled" />
      </a-config-provider>
      <a-typography-text code>
        ConfigProvider inputSearch
      </a-typography-text>
      <a-config-provider :input-search="{ variant: 'filled' }">
        <a-input-search placeholder="Filled" />
      </a-config-provider>
      <a-typography-text code>
        Component prop
      </a-typography-text>
      <a-input-search placeholder="Filled" variant="filled" />
    </a-flex>

    <a-flex vertical gap="small">
      <a-typography-text strong>
        Input.Password
      </a-typography-text>
      <a-typography-text code>
        ConfigProvider input
      </a-typography-text>
      <a-config-provider :input="{ variant: 'filled' }">
        <a-input-password placeholder="Filled" />
      </a-config-provider>
      <a-typography-text code>
        ConfigProvider inputPassword
      </a-typography-text>
      <a-config-provider :input-password="{ variant: 'filled' }">
        <a-input-password placeholder="Filled" />
      </a-config-provider>
      <a-typography-text code>
        Component prop
      </a-typography-text>
      <a-input-password placeholder="Filled" variant="filled" />
    </a-flex>

    <a-flex vertical gap="small">
      <a-typography-text strong>
        Input.OTP
      </a-typography-text>
      <a-typography-text code>
        ConfigProvider input
      </a-typography-text>
      <a-config-provider :input="{ variant: 'filled' }">
        <a-input-otp default-value="111111" />
      </a-config-provider>
      <a-typography-text code>
        ConfigProvider otp
      </a-typography-text>
      <a-config-provider :otp="{ variant: 'filled' }">
        <a-input-otp default-value="222222" />
      </a-config-provider>
      <a-typography-text code>
        Component prop
      </a-typography-text>
      <a-input-otp default-value="333333" variant="filled" />
    </a-flex>
  </a-flex>
</template>
```
### Compact Style
Use Space.Compact create compact style, See the [Space.Compact](/components/space#spacecompact) documentation for more.
```vue
<script setup lang="ts">
import { SearchOutlined } from '@antdv-next/icons'

// const options = [
//   {
//     value: 'zhejiang',
//     label: 'Zhejiang',
//   },
//   {
//     value: 'jiangsu',
//     label: 'Jiangsu',
//   },
// ]
</script>

<template>
  <a-space direction="vertical" size="medium">
    <a-space-compact>
      <a-input default-value="26888888" />
    </a-space-compact>
    <a-space-compact>
      <a-input style="width: 20%;" default-value="0571" />
      <a-input style="width: 80%;" default-value="26888888" />
    </a-space-compact>
    <a-space-compact>
      <a-space-addon>https://</a-space-addon>
      <a-input-search placeholder="input search text" allow-clear />
    </a-space-compact>
    <a-space-compact style="width: 100%;">
      <a-input default-value="Combine input and button" />
      <a-button type="primary">
        Submit
      </a-button>
    </a-space-compact>
    <!-- <a-space-compact>
      <a-select default-value="Zhejiang" :options="options" />
      <a-input default-value="Xihu District, Hangzhou" />
    </a-space-compact> -->
    <a-space-compact size="large">
      <a-space-addon>
        <SearchOutlined />
      </a-space-addon>
      <a-input placeholder="large size" />
      <a-input placeholder="another input" />
    </a-space-compact>
  </a-space>
</template>
```
### Search box
Example of creating a search box by grouping a standard input with a search button.
```vue
<script setup lang="ts">
import { AudioOutlined } from '@antdv-next/icons'

function onSearch(value: string, _e?: Event, info?: { source?: string }) {
  console.log(info?.source, value)
}
</script>

<template>
  <a-space direction="vertical">
    <a-input-search placeholder="input search text" style="width: 200px;" @search="onSearch" />
    <a-input-search placeholder="input search text" allow-clear style="width: 200px;" @search="onSearch" />
    <a-space-compact>
      <a-space-addon>https://</a-space-addon>
      <a-input-search placeholder="input search text" allow-clear @search="onSearch" />
    </a-space-compact>

    <a-input-search placeholder="input search text" enter-button @search="onSearch" />
    <a-input-search
      placeholder="input search text"
      allow-clear
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    <a-input-search
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    >
      <template #suffix>
        <AudioOutlined style="font-size: 16px; color: #1677ff;" />
      </template>
    </a-input-search>
  </a-space>
</template>
```
### Search box with loading
Search loading when onSearch.
```vue
<template>
  <div>
    <a-input-search placeholder="input search loading default" loading />
    <br>
    <br>
    <a-input-search placeholder="input search loading with enterButton" loading enter-button />
    <br>
    <br>
    <a-input-search placeholder="input search text" enter-button="Search" size="large" loading />
  </div>
</template>
```
### TextArea
For multi-line input.
```vue
<template>
  <a-textarea :rows="4" />
  <br>
  <br>
  <a-textarea :rows="4" placeholder="maxLength is 6" :maxlength="6" />
</template>
```
### Autosizing the height to fit the content
`autoSize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content. An option object can be provided to `autoSize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div>
    <a-textarea placeholder="Autosize height based on content lines" auto-size />
    <div style="margin: 24px 0;" />
    <a-textarea
      placeholder="Autosize height with minimum and maximum number of lines"
      :auto-size="{ minRows: 2, maxRows: 6 }"
    />
    <div style="margin: 24px 0;" />
    <a-textarea
      v-model:value="value"
      placeholder="Controlled autosize"
      :auto-size="{ minRows: 3, maxRows: 5 }"
    />
  </div>
</template>
```
### OTP
One time password input.
```vue
<script setup lang="ts">
function onChange(text: string) {
  console.log('onChange:', text)
}

function onInput(value: string) {
  console.log('onInput:', value)
}
</script>

<template>
  <a-flex gap="medium" align="flex-start" vertical>
    <a-typography-title :level="5">
      With formatter (Upcase)
    </a-typography-title>
    <a-input-otp :formatter="(str: string) => str.toUpperCase()" @change="onChange" @input="onInput" />

    <a-typography-title :level="5">
      With Disabled
    </a-typography-title>
    <a-input-otp disabled @change="onChange" @input="onInput" />

    <a-typography-title :level="5">
      With Length (8)
    </a-typography-title>
    <a-input-otp :length="8" @change="onChange" @input="onInput" />

    <a-typography-title :level="5">
      With variant
    </a-typography-title>
    <a-input-otp variant="filled" @change="onChange" @input="onInput" />

    <a-typography-title :level="5">
      With custom display character
    </a-typography-title>
    <a-input-otp mask="🔒" @change="onChange" @input="onInput" />

    <a-typography-title :level="5">
      With custom VueNode separator
    </a-typography-title>
    <a-input-otp @change="onChange" @input="onInput">
      <template #separator>
        <span>/</span>
      </template>
    </a-input-otp>

    <a-typography-title :level="5">
      With custom function separator
    </a-typography-title>
    <a-input-otp @change="onChange" @input="onInput">
      <template #separator="{ index }">
        <span :style="{ color: index & 1 ? 'red' : 'blue' }">—</span>
      </template>
    </a-input-otp>
  </a-flex>
</template>
```
### Format Tooltip Input
You can use the Input in conjunction with [Tooltip](/components/tooltip) component to create a Numeric Input, which can provide a good experience for extra-long content display.
```vue
<script setup lang="ts">
import { computed, ref, watch } from 'vue'

const value = ref('')
const inputValue = ref('')

function formatNumber(val: number) {
  return new Intl.NumberFormat().format(val)
}

watch(inputValue, (newVal) => {
  const reg = /^-?\d*(\.\d*)?$/
  if (reg.test(newVal) || newVal === '' || newVal === '-') {
    value.value = newVal
  }
  else {
    // 恢复为有效值
    inputValue.value = value.value
  }
})

function handleBlur() {
  let valueTemp = value.value
  if (value.value.charAt(value.value.length - 1) === '.' || value.value === '-') {
    valueTemp = value.value.slice(0, -1)
  }
  value.value = valueTemp.replace(/0*(\d+)/, '$1')
  inputValue.value = value.value
}

const title = computed(() => {
  if (value.value) {
    return value.value !== '-' ? formatNumber(Number(value.value)) : '-'
  }
  return 'Input a number'
})
</script>

<template>
  <a-tooltip :trigger="['focus']" :title="title" placement="topLeft" root-class="numeric-input">
    <a-input
      v-model:value="inputValue"
      style="width: 120px;"
      placeholder="Input a number"
      :maxlength="16"
      @blur="handleBlur"
    />
  </a-tooltip>
</template>
```
### prefix and suffix
Add a prefix or suffix icons inside input.
```vue
<script setup lang="ts">
import { InfoCircleOutlined, LockOutlined, UserOutlined } from '@antdv-next/icons'
</script>

<template>
  <div>
    <a-input placeholder="Enter your username">
      <template #prefix>
        <UserOutlined style="color: rgba(0, 0, 0, 0.25);" />
      </template>
      <template #suffix>
        <a-tooltip title="Extra information">
          <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45);" />
        </a-tooltip>
      </template>
    </a-input>
    <br>
    <br>
    <a-input prefix="￥" suffix="RMB" />
    <br>
    <br>
    <a-input prefix="￥" suffix="RMB" disabled />
    <br>
    <br>
    <a-input-password placeholder="input password support suffix">
      <template #suffix>
        <LockOutlined />
      </template>
    </a-input-password>
  </div>
</template>
```
### Password box
Input type of password.
```vue
<script setup lang="ts">
import { EyeInvisibleOutlined, EyeTwoTone } from '@antdv-next/icons'
import { ref } from 'vue'

const passwordVisible = ref(false)
</script>

<template>
  <a-space direction="vertical">
    <a-input-password placeholder="input password" />
    <a-input-password placeholder="input password">
      <template #iconRender="{ visible }">
        <EyeTwoTone v-if="visible" />
        <EyeInvisibleOutlined v-else />
      </template>
    </a-input-password>
    <a-space>
      <a-input-password
        placeholder="input password"
        :visibility-toggle="{ visible: passwordVisible, onVisibleChange: (v: boolean) => passwordVisible = v }"
      />
      <a-button style="width: 80px;" @click="passwordVisible = !passwordVisible">
        {{ passwordVisible ? 'Hide' : 'Show' }}
      </a-button>
    </a-space>
    <a-input-password disabled placeholder="disabled input password" />
  </a-space>
</template>
```
### With clear icon
Input box with the remove icon, click the icon to delete everything.
```vue
<template>
  <a-input allow-clear placeholder="input with clear icon" />
  <br>
  <br>
  <a-textarea allow-clear placeholder="textarea with clear icon" />
</template>
```
### With character counting
Show character counting.
```vue
<script setup lang="ts">
function onChange(e: Event) {
  const target = e.target as HTMLInputElement | HTMLTextAreaElement
  console.log('Change:', target.value)
}
</script>

<template>
  <a-flex vertical :gap="32">
    <a-input show-count :maxlength="20" @change="onChange" />
    <a-textarea show-count :maxlength="100" placeholder="can resize" @change="onChange" />
    <a-textarea
      show-count
      :max-length="100"
      placeholder="disable resize"
      style="height: 120px; resize: none;"
      @change="onChange"
    />
  </a-flex>
</template>
```
### Custom count logic
It is necessary to customize the counting ability in some scenarios (such as emoji length is counted as 1), which can be achieved through the `count` attribute. Use `count.max` attribute exceeds the limit of the native `maxLength`.
```vue
<script setup lang="ts">
import { ref } from 'vue'
import runes from './advance-count-runes'

const value1 = ref('Hello, antdv!')
const value2 = ref('🔥🔥🔥')
const value3 = ref('🔥antdv')
</script>

<template>
  <a-flex vertical gap="16">
    <div>
      <a-typography>
        <a-typography-title :level="5">
          Exceed Max
        </a-typography-title>
      </a-typography>
      <a-input v-model:value="value1" :count="{ show: true, max: 10 }" />
    </div>
    <div>
      <a-typography>
        <a-typography-title :level="5">
          Exceed Max
        </a-typography-title>
      </a-typography>
      <a-input v-model:value="value2" :count="{ show: true, strategy: (txt) => runes(txt).length }" />
    </div>
    <div>
      <a-typography>
        <a-typography-title :level="5">
          Exceed Max
        </a-typography-title>
      </a-typography>
      <a-input
        v-model:value="value3"
        :count="{
          show: true,
          max: 6,
          strategy: (txt) => runes(txt).length,
          exceedFormatter: (txt, { max }) => runes(txt).slice(0, max).join(''),
        }"
      />
    </div>
  </a-flex>
</template>
```
### Status
Add status to Input with `status`, which could be `error` or `warning`.
```vue
<script setup lang="ts">
import { ClockCircleOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-space direction="vertical" style="width: 100%;">
    <a-input status="error" placeholder="Error" />
    <a-input status="warning" placeholder="Warning" />
    <a-input status="error" placeholder="Error with prefix">
      <template #prefix>
        <ClockCircleOutlined />
      </template>
    </a-input>
    <a-input status="warning" placeholder="Warning with prefix">
      <template #prefix>
        <ClockCircleOutlined />
      </template>
    </a-input>
  </a-space>
</template>
```
### Focus
Focus with additional option.
```vue
<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'

const value = ref(999)
const inputRef = useTemplateRef('input')
function handleFocus(options: unknown) {
  inputRef.value?.focus(options)
}
</script>

<template>
  <a-space vertical style="width: 100%;">
    <a-space wrap>
      <a-button @click="() => handleFocus({ cursor: 'start' })">
        Focus at first
      </a-button>
      <a-button @click="() => handleFocus({ cursor: 'end' })">
        Focus at last
      </a-button>
      <a-button @click="() => handleFocus({ cursor: 'all' })">
        Focus to select all
      </a-button>
      <a-button @click="() => handleFocus({ preventScroll: true })">
        Focus prevent scroll
      </a-button>
    </a-space>
    <a-input-number ref="input" v-model:value="value" style="width: 100%;" />
  </a-space>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-input) style of Input by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { InputOTPProps, InputPasswordProps, InputProps, InputSearchProps, TextAreaProps } from 'antdv-next'

const classes: InputProps['classes'] = {
  root: 'effect',
}

const stylesFn: InputProps['styles'] = (info) => {
  if (info.props.size === 'medium') {
    return {
      root: {
        borderColor: '#696FC7',
      },
    } satisfies InputProps['styles']
  }
  return {}
}

const stylesFnTextArea: TextAreaProps['styles'] = (info) => {
  if (info.props.showCount) {
    return {
      root: { borderColor: '#BDE3C3' },
      textarea: { resize: 'none' },
      count: { color: '#BDE3C3' },
    } satisfies TextAreaProps['styles']
  }
  return {}
}

const stylesFnPassword: InputPasswordProps['styles'] = (info) => {
  if (info.props.size === 'medium') {
    return {
      root: {
        borderColor: '#F5D3C4',
      },
    } satisfies InputPasswordProps['styles']
  }
  return {}
}

const stylesFnOTP: InputOTPProps['styles'] = (info) => {
  if (info.props.size === 'medium') {
    return {
      root: {
        borderWidth: 0,
      },
      input: {
        borderColor: '#6E8CFB',
        width: '32px',
      },
    } satisfies InputOTPProps['styles']
  }
  return {}
}

const stylesFnSearch: InputSearchProps['styles'] = (info) => {
  if (info.props.size === 'large') {
    return {
      root: { color: '#4DA8DA', borderWidth: 0 },
      input: { color: '#4DA8DA', borderColor: '#4DA8DA' },
      prefix: { color: '#4DA8DA' },
      suffix: { color: '#4DA8DA' },
      count: { color: '#4DA8DA' },
      button: {
        root: { color: '#4DA8DA', borderColor: '#4DA8DA' },
        icon: { color: '#4DA8DA' },
      },
    } satisfies InputSearchProps['styles']
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="large">
    <a-input :classes="classes" placeholder="Object" name="input-object" />
    <a-input :classes="classes" :styles="stylesFn" placeholder="Function" size="medium" name="input-fn" />
    <a-textarea :classes="classes" :styles="stylesFnTextArea" placeholder="Textarea" show-count name="textarea-fn" />
    <a-input-password :classes="classes" :styles="stylesFnPassword" placeholder="Password" size="medium" name="password-fn" />
    <a-input-otp :classes="classes" :styles="stylesFnOTP" size="medium" :length="6" separator="*" name="otp-fn" />
    <a-input-search :classes="classes" :styles="stylesFnSearch" placeholder="Search" size="large" name="search-fn" />
  </a-flex>
</template>

<style scoped>
.effect {
  border-width: 1px;
  border-radius: 6px;
  -webkit-transition: box-shadow 0.2s;
  transition: box-shadow 0.2s;
}
.effect:focus-visible {
  border-color: lab(66.128% 0 0);
  box-shadow: 0 0 0 4px color-mix(in oklab, lab(66.128% 0 0) 50%, transparent);
}
.effect:hover {
  border-radius: 1px solid #d9d9d9;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Input

#### Props {#input-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| ~~addonAfter~~ | The label text displayed after (on the right side of) the input field, please use Space.Compact instead | VueNode | - | - | × |
| ~~addonBefore~~ | The label text displayed before (on the left side of) the input field, please use Space.Compact instead | VueNode | - | - | × |
| allowClear | If allow to remove input content with clear icon | boolean \| &#123; clearIcon: VueNode &#125; | false | - | ✓ |
| ~~bordered~~ | Whether has border style, please use `variant` instead | boolean | true | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-input), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-input), string&gt; | - | - | ✓ |
| count | Character count config | [CountConfig](#countconfig) | - | - | × |
| defaultValue | The initial input content | string | - | - | × |
| disabled | Whether the input is disabled | boolean | false | - | × |
| id | The ID for input | string | - | - | × |
| maxlength | The maximum number of characters in Input | number | - | - | × |
| prefix | The prefix icon for the Input | VueNode | - | - | × |
| showCount | Whether to show character count | boolean \| &#123; formatter: (info: &#123; value: string, count: number, maxLength?: number &#125;) =&gt; VueNode &#125; | false | - | × |
| status | Set validation status | 'error' \| 'warning' | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-input), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-input), CSSProperties&gt; | - | - | ✓ |
| size | The size of the input box. Note: in the context of a form, the `medium` size is used | `large` \| `medium` \| `small` | - | - | × |
| suffix | The suffix icon for the Input | VueNode | - | - | × |
| type | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)( use `Input.TextArea` instead of `type="textarea"`) | string | `text` | - | × |
| value | The input content value, support `v-model:value` | string | - | - | × |
| variant | Variants of Input | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |

> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set.

The rest of the props of Input are exactly the same as the original [input](https://cn.vuejs.org/guide/essentials/forms.html).

#### Events {#input-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback when user input | function(e) | - |
| pressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |
| clear | Callback when click the clear button | () =&gt; void | - |

#### Methods {#input-methods}

| Name | Description | Parameters | Version |
| --- | --- | --- | --- |
| blur | Remove focus | - | - |
| focus | Get focus | (option?: &#123; preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' &#125;) | - |

#### Slots {#input-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| prefix | Customize prefix icon | - | - |
| suffix | Customize suffix icon | - | - |
| clearIcon | Customize clear icon (to be used with allowClear attribute) | - | - |

### TextArea {#input-textarea}

#### Props {#input-textarea-props}

Same as Input, and more:

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| autoSize | Height auto size feature, can be set to true \| false or an object &#123; minRows: 2, maxRows: 6 &#125; | boolean \| object | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-textarea), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-textarea), string&gt; | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-textarea), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-textarea), CSSProperties&gt; | - | - | ✓ |

The rest of the props of `Input.TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).

### InputSearch {#input-search}

#### Props {#input-search-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-search), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-search), string&gt; | - | - | ✓ |
| enterButton | false displays the default button color, true uses the primary color, or you can provide a custom button. Conflicts with addonAfter. | VueNode | false | - | × |
| loading | Search box with loading | boolean | false | - | × |
| searchIcon | Customize the search icon | VueNode | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-search), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-search), CSSProperties&gt; | - | - | ✓ |
| variant | Variants of Input | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |

Supports all props of `Input`.

#### Events {#input-search-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| search | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event, &#123; source: "input" \| "clear" &#125;) | - |

#### Slots {#input-search-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| searchIcon | Customize the search icon, effective when `enterButton` is a boolean, takes priority over the `searchIcon` prop | - | - |

Supports all slots of `Input`.

### InputPassword {#input-password}

#### Props {#input-password-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Semantic DOM class | Record&lt;[SemanticDOM](#semantic-password), string&gt; | - | - | × |
| iconRender | Custom toggle button | (visible) =&gt; VueNode | (visible) =&gt; (visible ? &lt;EyeOutlined /> : &lt;EyeInvisibleOutlined />) | - | × |
| iconVisible | Whether the password is visible, support `v-model:icon-visible` | boolean | false | - | × |
| styles | Semantic DOM style | Record&lt;[SemanticDOM](#semantic-password), CSSProperties&gt; | - | - | × |
| variant | Variants of Input | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
| visibilityToggle | Whether show toggle button or control password visible | boolean \| [VisibilityToggle](#visibilitytoggle) | true | - | × |

### InputOTP {#input-otp}


> Notes for developers
>
> When the `mask` prop is string, we recommend receiving a single character or a single emoji. If multiple characters or multiple emoji are passed, a warning will be thrown.

#### Props {#input-otp-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-otp), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-otp), string&gt; | - | - | ✓ |
| defaultValue | Default value | string | - | - | × |
| disabled | Whether the input is disabled | boolean | false | - | × |
| formatter | Format display, blank fields will be filled with ` ` | (value: string) =&gt; string | - | - | × |
| separator | render the separator after the input box of the specified index | VueNode \| ((i: number) =&gt; VueNode) | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-otp), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-otp), CSSProperties&gt; | - | - | ✓ |
| mask | Custom display, the original value will not be modified | boolean \| string | `false` | - | × |
| length | The number of input elements | number | 6 | - | × |
| status | Set validation status | 'error' \| 'warning' | - | - | × |
| size | The size of the input box | `small` \| `medium` \| `large` | `medium` | - | × |
| variant | Variants of Input | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
| value | The input content value | string | - | - | × |

#### Events {#input-otp-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Trigger when all the fields are filled | (value: string) =&gt; void | - |
| focus | Trigger when an input gets focus | (event: FocusEvent) =&gt; void | - |
| input | Trigger when the input value changes | (value: string[]) =&gt; void | - |

### Types {#types}

#### CountConfig

```tsx
interface CountConfig {
  // Max character count. Different from the native `maxLength`, it will be marked warning but not truncated
  max?: number
  // Custom character count, for example, the standard emoji length is greater than 1, you can customize the counting strategy to change it to 1
  strategy?: (value: string) => number
  // Same as `showCount`
  show?: boolean | ((args: { value: string, count: number, maxLength?: number }) => VueNode)
  // Custom clipping logic when the number of characters exceeds `count.max`, no clipping when not configured
  exceedFormatter?: (value: string, config: { max: number }) => string
}
```

#### VisibilityToggle

```tsx
interface VisibilityToggle {
  // tabIndex of the visibility toggle button (1.4.0)
  tabIndex?: number
  // Whether the password is show or hide
  visible?: boolean
  // Callback executed when visibility of the password is changed
  onVisibleChange?: (visible: boolean) => void
}
```

## Semantic DOM

### Input {#semantic-input}

<demo src="./demo/_semantic.vue" simplify></demo>

### TextArea {#semantic-textarea}

<demo src="./demo/_semantic-textarea.vue" simplify></demo>

### InputSearch {#semantic-search}

<demo src="./demo/_semantic-search.vue" simplify></demo>

### InputPassword {#semantic-password}

<demo src="./demo/_semantic-password.vue" simplify></demo>

### InputOTP {#semantic-otp}

<demo src="./demo/_semantic-otp.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Input"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### Why does Input lose focus when `prefix/suffix/showCount` is changed dynamically? {#faq-lose-focus}

When Input dynamically adds or removes `prefix/suffix/showCount`, Vue will re-create the DOM structure and the new input is not focused. You can preset an empty `<span />` to keep the DOM structure unchanged:

```vue
<template>
  <a-input>
    <template #suffix>
      <template v-if="condition">
        <Icon type="smile" />
      </template>
      <template v-else>
        <span />
      </template>
    </template>
  </a-input>
</template>
```

### Why can `value` exceed `maxLength` when TextArea is controlled? {#faq-textarea-exceed-max}

When controlled, the component should display according to the controlled content, to prevent the displayed value from differing from the submitted value when used inside a form component.

---
Title: InputNumber
URL: https://www.antdv-next.com/components/input-number.md
---

## When To Use {#when-to-use}

When a numeric value needs to be provided.

## Examples {#examples}

### Basic
Numeric-only input box.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)
</script>

<template>
  <a-input-number v-model:value="value" :min="1" :max="10" />
</template>
```
### Sizes
There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
```vue
<script setup lang="ts">
import { ref } from 'vue'

function onChange(value: number | null) {
  console.log('changed', value)
}

const value1 = ref(3)
const value2 = ref(3)
const value3 = ref(3)
</script>

<template>
  <a-space wrap>
    <a-input-number v-model:value="value1" size="large" :min="1" :max="100000" @change="onChange" />
    <a-input-number v-model:value="value2" :min="1" :max="100000" @change="onChange" />
    <a-input-number v-model:value="value3" size="small" :min="1" :max="100000" @change="onChange" />
  </a-space>
</template>
```
### Disabled
Click the button to toggle between available and disabled states.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const disabled = ref(true)

function toggle() {
  disabled.value = !disabled.value
}
const value = ref(3)
</script>

<template>
  <div>
    <a-input-number v-model:value="value" :min="1" :max="10" :disabled="disabled" />
    <div style="margin-top: 20px;">
      <a-button type="primary" @click="toggle">
        Toggle disabled
      </a-button>
    </div>
  </div>
</template>
```
### High precision decimals
Use `stringMode` to support high precision decimals support. `onChange` will return string value instead. You need polyfill of BigInt if browser not support.
```vue
<script setup lang="ts">
import { ref } from 'vue'

function onChange(value: string) {
  console.log('changed', value)
}
const value = ref(1)
</script>

<template>
  <a-input-number
    v-model:value="value"
    style="width: 200px;"
    min="0"
    max="10"
    step="0.00000000000001"
    string-mode
    @change="onChange"
  />
</template>
```
### Formatter
Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
```vue
<script setup lang="ts">
import type { InputNumberProps } from 'antdv-next'
import { ref } from 'vue'

function onChange(value: number | null) {
  console.log('changed', value)
}

const formatter: InputNumberProps['formatter'] = (value) => {
  const [start, end] = `${value}`.split('.') || []
  const v = `${start}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  return `$ ${end ? `${v}.${end}` : `${v}`}`
}

function parser(value: string | undefined) {
  return value?.replace(/\$\s?|(,*)/g, '') as unknown as number
}

const percentFormatter: InputNumberProps['formatter'] = (value) => {
  return `${value}%`
}

function percentParser(value: string | undefined) {
  return value?.replace('%', '') as unknown as number
}
const value1 = ref(1000)
const value2 = ref(100)
</script>

<template>
  <a-space>
    <a-input-number
      v-model:value="value1"
      :formatter="formatter"
      :parser="parser"
      @change="onChange"
    />
    <a-input-number
      v-model:value="value2"
      :min="0"
      :max="100"
      :formatter="percentFormatter"
      :parser="percentParser"
      @change="onChange"
    />
  </a-space>
</template>
```
### Keyboard
Control keyboard behavior by `keyboard`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const keyboard = ref(true)
const value = ref(3)
</script>

<template>
  <a-space>
    <a-input-number v-model:value="value" :min="1" :max="10" :keyboard="keyboard" />
    <a-checkbox v-model:checked="keyboard">
      Toggle keyboard
    </a-checkbox>
  </a-space>
</template>
```
### Wheel
Control with mouse wheel.
```vue
<script setup lang="ts">
import { ref } from 'vue'

function onChange(value: number) {
  console.log('changed', value)
}
const value = ref(3)
</script>

<template>
  <a-input-number
    v-model:value="value" :min="1" :max="10" change-on-wheel @change="onChange"
  />
</template>
```
### Variants
Variants of InputNumber, there are four variants: `outlined` `filled` `borderless` and `underlined`.
```vue
<template>
  <a-flex vertical :gap="12">
    <a-input-number placeholder="Outlined" style="width: 200px;" />
    <a-input-number placeholder="Filled" variant="filled" style="width: 200px;" />
    <a-input-number placeholder="Borderless" variant="borderless" style="width: 200px;" />
    <a-input-number placeholder="Underlined" variant="underlined" style="width: 200px;" />
  </a-flex>
</template>
```
### Spinner
Digit spinner.
```vue
<script setup lang="ts">
import { ref } from 'vue'

function onChange(value: number | null) {
  console.log('changed', value)
}

const value1 = ref(3)
const value2 = ref(3)
</script>

<template>
  <a-flex vertical gap="medium">
    <a-input-number
      v-model:value="value1"
      mode="spinner"
      :min="1"
      :max="10"
      placeholder="Outlined"
      style="width: 150px;"
      @change="onChange"
    />
    <a-input-number
      v-model:value="value2"
      mode="spinner"
      variant="filled"
      :min="1"
      :max="10"
      placeholder="Filled"
      style="width: 150px;"
      @change="onChange"
    />
  </a-flex>
</template>
```
### Out of range
Show warning style when `value` is out of range by control.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string | number | null>('99')

function reset() {
  value.value = 99
}
</script>

<template>
  <a-space>
    <a-input-number v-model:value="value" :min="1" :max="10" />
    <a-button type="primary" @click="reset">
      Reset
    </a-button>
  </a-space>
</template>
```
### Prefix / Suffix
Add a prefix or suffix inside input.
```vue
<script setup lang="ts">
import { UserOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-flex vertical gap="medium">
    <a-input-number prefix="￥" style="width: 100%;" />

    <a-space-compact block>
      <a-space-addon>
        <UserOutlined />
      </a-space-addon>
      <a-input-number prefix="￥" style="width: 100%;" />
    </a-space-compact>

    <a-input-number prefix="￥" disabled style="width: 100%;" />

    <a-input-number suffix="RMB" style="width: 100%;" />
  </a-flex>
</template>
```
### Allow clear
Show a clear button with `allowClear`, customize the icon via the `clearIcon` slot, and listen to the `clear` event.
```vue
<script setup lang="ts">
import { CloseCircleFilled } from '@antdv-next/icons'
import { ref } from 'vue'

const value = ref<number | null>(3)
const custom = ref<number | null>(10)

function onClear() {
  console.log('cleared')
}
</script>

<template>
  <a-flex vertical gap="middle">
    <a-input-number v-model:value="value" allow-clear style="width: 100%;" @clear="onClear" />
    <a-input-number v-model:value="custom" allow-clear suffix="RMB" style="width: 100%;">
      <template #clearIcon>
        <CloseCircleFilled />
      </template>
    </a-input-number>
  </a-flex>
</template>
```
### Status
Add status to InputNumber with `status`, which could be `error` or `warning`.
```vue
<script setup lang="ts">
import { ClockCircleOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-space direction="vertical" style="width: 100%;">
    <a-input-number status="error" style="width: 100%;" />
    <a-input-number status="warning" style="width: 100%;" />
    <a-input-number status="error" style="width: 100%;">
      <template #prefix>
        <ClockCircleOutlined />
      </template>
    </a-input-number>
    <a-input-number status="warning" style="width: 100%;">
      <template #prefix>
        <ClockCircleOutlined />
      </template>
    </a-input-number>
  </a-space>
</template>
```
### Focus
Focus with additional option.
```vue
<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'

const value = ref(999)
const inputRef = useTemplateRef('input')
function handleFocus(options: unknown) {
  inputRef.value?.focus(options)
}
</script>

<template>
  <a-space vertical style="width: 100%;">
    <a-space wrap>
      <a-button @click="() => handleFocus({ cursor: 'start' })">
        Focus at first
      </a-button>
      <a-button @click="() => handleFocus({ cursor: 'end' })">
        Focus at last
      </a-button>
      <a-button @click="() => handleFocus({ cursor: 'all' })">
        Focus to select all
      </a-button>
      <a-button @click="() => handleFocus({ preventScroll: true })">
        Focus prevent scroll
      </a-button>
    </a-space>
    <a-input-number ref="input" v-model:value="value" style="width: 100%;" />
  </a-space>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of the InputNumber by passing objects/functions through
```vue
<script setup lang="ts">
import type { InputNumberProps } from 'antdv-next'

const shardStyle = {
  root: 'shard',
}
const styleObject: InputNumberProps['styles'] = {
  input: {
    fontSize: '14px',
  },
}
const styleFn: InputNumberProps['styles'] = ({ props }) => {
  if (props.size === 'large') {
    return {
      root: {
        backgroundColor: 'rgba(250,250,250, 0.5)',
        borderColor: '#722ed1',
      },
    } satisfies InputNumberProps['styles']
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-input-number :classes="shardStyle" :styles="styleObject" placeholder="Object" />
    <a-input-number :classes="shardStyle" :styles="styleFn" placeholder="Function" size="large" />
  </a-flex>
</template>

<style scoped>
.shard {
  border: 1px solid #1677ff;
  border-radius: 8px;
  width: 200px;
}
</style>
```
### Suffix with feedback debug
Suffix with form feedback debug.
```vue
<script setup lang="ts">
</script>

<template>
  <a-form layout="vertical" :style="{ maxWidth: '320px' }">
    <a-form-item label="Suffix with feedback" validate-status="success" has-feedback>
      <a-input-number :default-value="100" suffix="RMB" :style="{ width: '100%' }" />
    </a-form-item>
  </a-form>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props {#props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| size | The height of input box | SizeType | - | - | × |
| status | Set validation status | InputStatus | - | - | × |
| disabled | If the input is disabled | boolean | false | - | × |
| addonBefore | The label text displayed before (on the left side of) the input field, please use Space.Compact instead | VueNode | - | - | × |
| allowClear | If allow to remove input content with clear icon | boolean \| &#123; clearIcon?: VueNode, disabled?: boolean, label?: string &#125; | false | 1.5.4 | ✓ |
| addonAfter | The label text displayed after (on the right side of) the input field, please use Space.Compact instead | VueNode | - | - | × |
| prefix | The prefix icon for the Input | VueNode | - | - | × |
| suffix | The suffix icon for the Input | VueNode | - | - | × |
| bordered | Deprecated. | boolean | - | - | × |
| variant | Variants of Input | Variant | `outlined` | - | ✓ |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | InputNumberClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | InputNumberStylesType | - | - | ✓ |
| controls | Whether to show `+-` controls, or set custom arrow icons | boolean \| &#123; upIcon?: VueNode, downIcon?: VueNode &#125; | - | - | × |
| type | - | 'number' \| 'text' | - | - | × |
| max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - | × |
| min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - | × |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal | 'number' \| 'string' | 1 | - | × |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | The callback triggered when the value is changed | (value: any) =&gt; void | - |
| clear | Callback when the clear icon is clicked | () =&gt; void | 1.5.4 |
| update:value | - | (value: any) =&gt; void | - |
| input | - | (text: string) =&gt; void | - |
| pressEnter | The callback function that is triggered when Enter key is pressed | (e: KeyboardEvent) =&gt; void | - |
| step | `@step`The callback function that is triggered when click up or down buttons / Keyboard / Wheel | (value: any, info: InputNumberStepContext) =&gt; void | - |
| mousedown | - | (e: MouseEvent) =&gt; void | - |
| click | - | (e: MouseEvent) =&gt; void | - |
| mouseup | - | (e: MouseEvent) =&gt; void | - |
| mouseleave | - | (e: MouseEvent) =&gt; void | - |
| mousemove | - | (e: MouseEvent) =&gt; void | - |
| mouseenter | - | (e: MouseEvent) =&gt; void | - |
| mouseout | - | (e: MouseEvent) =&gt; void | - |
| focus | - | (e: FocusEvent) =&gt; void | - |
| blur | - | (e: FocusEvent) =&gt; void | - |
| keydown | - | (e: KeyboardEvent) =&gt; void | - |
| keyup | - | (e: KeyboardEvent) =&gt; void | - |
| compositionstart | - | (e: CompositionEvent) =&gt; void | - |
| compositionend | - | (e: CompositionEvent) =&gt; void | - |
| beforeinput | - | (e: InputEvent) =&gt; void | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| prefix | The prefix icon for the Input | () =&gt; any | - |
| suffix | The suffix icon for the Input | () =&gt; any | - |
| clearIcon | Custom clear icon | () =&gt; any | 1.5.4 |
| addonBefore | The label text displayed before (on the left side of) the input field, please use Space.Compact instead | () =&gt; any | - |
| addonAfter | The label text displayed after (on the right side of) the input field, please use Space.Compact instead | () =&gt; any | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="InputNumber" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Layout
URL: https://www.antdv-next.com/components/layout.md
---

## Specification

### Size

The first level navigation is left aligned near a logo, and the secondary menu is right aligned.

- Top Navigation: the height of the first level navigation is `64px`, and the second level navigation is `48px`.
- Top Navigation (for landing pages): the height of the first level navigation is `80px`, and the second level navigation is `56px`.
- Calculation formula of a top navigation: `48+8n`.
- Calculation formula of an aside navigation: `200+8n`.

### Interaction rules

- The first level navigation and the last level navigation should be distinguishable by visualization;
- The current item should have the highest priority of visualization;
- When the current navigation item is collapsed, the style of the current navigation item is applied to its parent level;
- The left side navigation bar has support for both the accordion and expanding styles; you can choose the one that fits your case the best.

### Visualization rules {#visualization-rules}

Style of a navigation should conform to its level.

- **Emphasis by colorblock**

  When the background color is a deep color, you can use this pattern for the parent level navigation item of the current page.

- **The highlight match stick**

  When the background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.

- **Highlighted font**

  From the visualization aspect, a highlighted font is stronger than colorblock; this pattern is often used for the parent level of the current item.

- **Enlarge the size of the font**

  `12px`, `14px` is a standard font size of navigation's, `14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.

## Component Overview

- `Layout`: The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` itself can be nested, and can be placed in any parent container.
- `Header`: The top layout with the default style, in which any element can be nested, and must be placed in `Layout`.
- `Sider`: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in `Layout`.
- `Content`: The content layout with the default style, in which any element can be nested, and must be placed in `Layout`.
- `Footer`: The bottom layout with the default style, in which any element can be nested, and must be placed in `Layout`.

> Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).

## Examples {#examples}

### Basic Structure
Classic page layouts.
```vue
<template>
  <a-flex gap="medium" wrap>
    <a-layout class="demo-layout">
      <a-layout-header class="demo-header">
        Header
      </a-layout-header>
      <a-layout-content class="demo-content">
        Content
      </a-layout-content>
      <a-layout-footer class="demo-footer">
        Footer
      </a-layout-footer>
    </a-layout>

    <a-layout class="demo-layout">
      <a-layout-header class="demo-header">
        Header
      </a-layout-header>
      <a-layout>
        <a-layout-sider width="25%" class="demo-sider">
          Sider
        </a-layout-sider>
        <a-layout-content class="demo-content">
          Content
        </a-layout-content>
      </a-layout>
      <a-layout-footer class="demo-footer">
        Footer
      </a-layout-footer>
    </a-layout>

    <a-layout class="demo-layout">
      <a-layout-header class="demo-header">
        Header
      </a-layout-header>
      <a-layout>
        <a-layout-content class="demo-content">
          Content
        </a-layout-content>
        <a-layout-sider width="25%" class="demo-sider">
          Sider
        </a-layout-sider>
      </a-layout>
      <a-layout-footer class="demo-footer">
        Footer
      </a-layout-footer>
    </a-layout>

    <a-layout class="demo-layout">
      <a-layout-sider width="25%" class="demo-sider">
        Sider
      </a-layout-sider>
      <a-layout>
        <a-layout-header class="demo-header">
          Header
        </a-layout-header>
        <a-layout-content class="demo-content">
          Content
        </a-layout-content>
        <a-layout-footer class="demo-footer">
          Footer
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </a-flex>
</template>

<style scoped>
.demo-layout {
  border-radius: 8px;
  overflow: hidden;
  width: calc(50% - 8px);
  max-width: calc(50% - 8px);
}

.demo-header {
  text-align: center;
  color: #fff;
  height: 64px;
  padding-inline: 48px;
  line-height: 64px;
  background-color: #4096ff;
}

.demo-content {
  text-align: center;
  min-height: 120px;
  line-height: 120px;
  color: #fff;
  background-color: #0958d9;
}

.demo-sider {
  text-align: center;
  line-height: 120px;
  color: #fff;
  background-color: #1677ff;
}

.demo-footer {
  text-align: center;
  color: #fff;
  background-color: #4096ff;
}
</style>
```
### Header-Content-Footer
The most basic \"header-content-footer\" layout.

Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it. We always put contents in a fixed size navigation (eg: `1200px`), the layout of the whole page is stable, it's not affected by the viewing area.

Top-bottom structure is conformed with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.
```vue
<script setup lang="ts">
import type { BreadcrumbItemType, MenuItemType } from 'antdv-next'
import { theme } from 'antdv-next'

const { token } = theme.useToken()
const year = new Date().getFullYear()

const items: MenuItemType[] = Array.from({ length: 15 }).map((_, index) => ({
  key: String(index + 1),
  label: `nav ${index + 1}`,
}))

const breadcrumbItems: BreadcrumbItemType[] = [
  { title: 'Home' },
  { title: 'List' },
  { title: 'App' },
]
</script>

<template>
  <a-layout>
    <a-layout-header class="demo-header">
      <div class="demo-logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :items="items"
        class="demo-menu"
      />
    </a-layout-header>
    <a-layout-content class="demo-content">
      <a-breadcrumb class="demo-breadcrumb" :items="breadcrumbItems" />
      <div
        class="demo-content-box"
        :style="{
          background: token.colorBgContainer,
          borderRadius: `${token.borderRadiusLG}px`,
        }"
      >
        Content
      </div>
    </a-layout-content>
    <a-layout-footer class="demo-footer">
      Antdv Next ©{{ year }} Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>

<style scoped>
.demo-header {
  display: flex;
  align-items: center;
}

.demo-menu {
  flex: 1;
  min-width: 0;
}

.demo-content {
  padding: 0 48px;
}

.demo-breadcrumb {
  margin: 16px 0;
}

.demo-content-box {
  min-height: 280px;
  padding: 24px;
}

.demo-footer {
  text-align: center;
}

.demo-logo {
  width: 120px;
  height: 32px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
</style>
```
### Header-Sider
Both the top navigation and the sidebar, commonly used in documentation site.
```vue
<script setup lang="ts">
import type { BreadcrumbItemType, MenuItemType } from 'antdv-next'
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'

const { token } = theme.useToken()
const year = new Date().getFullYear()

const items1: MenuItemType[] = ['1', '2', '3'].map(key => ({
  key,
  label: `nav ${key}`,
}))

const items2: MenuItemType[] = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
  const key = String(index + 1)
  return {
    key: `sub${key}`,
    icon,
    label: `subnav ${key}`,
    children: Array.from({ length: 4 }).map((_, childIndex) => {
      const childKey = index * 4 + childIndex + 1
      return {
        key: String(childKey),
        label: `option${childKey}`,
      }
    }),
  }
})

const breadcrumbItems: BreadcrumbItemType[] = [
  { title: 'Home' },
  { title: 'List' },
  { title: 'App' },
]
</script>

<template>
  <a-layout>
    <a-layout-header class="demo-header">
      <div class="demo-logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :items="items1"
        class="demo-menu"
      />
    </a-layout-header>
    <div class="demo-body">
      <a-breadcrumb class="demo-breadcrumb" :items="breadcrumbItems" />
      <a-layout
        class="demo-inner"
        :style="{
          background: token.colorBgContainer,
          borderRadius: `${token.borderRadiusLG}px`,
        }"
      >
        <a-layout-sider :style="{ background: token.colorBgContainer }" :width="200">
          <a-menu
            mode="inline"
            :default-selected-keys="['1']"
            :default-open-keys="['sub1']"
            :items="items2"
            class="demo-sider-menu"
          />
        </a-layout-sider>
        <a-layout-content class="demo-content">
          Content
        </a-layout-content>
      </a-layout>
    </div>
    <a-layout-footer class="demo-footer">
      Antdv Next ©{{ year }} Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>

<style scoped>
.demo-header {
  display: flex;
  align-items: center;
}

.demo-menu {
  flex: 1;
  min-width: 0;
}

.demo-body {
  padding: 0 48px;
}

.demo-breadcrumb {
  margin: 16px 0;
}

.demo-inner {
  padding: 24px 0;
}

.demo-sider-menu {
  height: 100%;
}

.demo-content {
  padding: 0 24px;
  min-height: 280px;
}

.demo-footer {
  text-align: center;
}

.demo-logo {
  width: 120px;
  height: 32px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
</style>
```
### Header Sider 2
Both the top navigation and the sidebar, commonly used in application site.
```vue
<script setup lang="ts">
import type { BreadcrumbItemType, MenuItemType } from 'antdv-next'
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const items1: MenuItemType[] = ['1', '2', '3'].map(key => ({
  key,
  label: `nav ${key}`,
}))

const items2: MenuItemType[] = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
  const key = String(index + 1)
  return {
    key: `sub${key}`,
    icon,
    label: `subnav ${key}`,
    children: Array.from({ length: 4 }).map((_, childIndex) => {
      const childKey = index * 4 + childIndex + 1
      return {
        key: String(childKey),
        label: `option${childKey}`,
      }
    }),
  }
})

const breadcrumbItems: BreadcrumbItemType[] = [
  { title: 'Home' },
  { title: 'List' },
  { title: 'App' },
]
</script>

<template>
  <a-layout>
    <a-layout-header class="demo-header">
      <div class="demo-logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :items="items1"
        class="demo-menu"
      />
    </a-layout-header>
    <a-layout>
      <a-layout-sider :width="200" :style="{ background: token.colorBgContainer }">
        <a-menu
          mode="inline"
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          :items="items2"
          class="demo-sider-menu"
        />
      </a-layout-sider>
      <a-layout class="demo-main">
        <a-breadcrumb class="demo-breadcrumb" :items="breadcrumbItems" />
        <a-layout-content
          class="demo-content"
          :style="{
            background: token.colorBgContainer,
            borderRadius: `${token.borderRadiusLG}px`,
          }"
        >
          Content
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.demo-header {
  display: flex;
  align-items: center;
}

.demo-menu {
  flex: 1;
  min-width: 0;
}

.demo-sider-menu {
  height: 100%;
  border-inline-end: 0;
}

.demo-main {
  padding: 0 24px 24px;
}

.demo-breadcrumb {
  margin: 16px 0;
}

.demo-content {
  padding: 24px;
  margin: 0;
  min-height: 280px;
}

.demo-logo {
  width: 120px;
  height: 32px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
</style>
```
### Sider
Two-columns layout. The sider menu can be collapsed when horizontal space is limited.

Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.

The level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.
```vue
<script setup lang="ts">
import type { BreadcrumbItemType, MenuItemType } from 'antdv-next'
import {
  DesktopOutlined,
  FileOutlined,
  LeftOutlined,
  PieChartOutlined,
  RightOutlined,
  TeamOutlined,
  UserOutlined,
} from '@antdv-next/icons'
import { theme } from 'antdv-next'
import { ref } from 'vue'

const { token } = theme.useToken()
const year = new Date().getFullYear()

const collapsed = ref(false)

const items: MenuItemType[] = [
  { key: '1', icon: PieChartOutlined, label: 'Option 1' },
  { key: '2', icon: DesktopOutlined, label: 'Option 2' },
  {
    key: 'sub1',
    icon: UserOutlined,
    label: 'User',
    children: [
      { key: '3', label: 'Tom' },
      { key: '4', label: 'Bill' },
      { key: '5', label: 'Alex' },
    ],
  },
  {
    key: 'sub2',
    icon: TeamOutlined,
    label: 'Team',
    children: [
      { key: '6', label: 'Team 1' },
      { key: '8', label: 'Team 2' },
    ],
  },
  { key: '9', icon: FileOutlined, label: 'Files' },
]

const breadcrumbItems: BreadcrumbItemType[] = [
  { title: 'User' },
  { title: 'Bill' },
]
</script>

<template>
  <a-layout class="side-layout">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <template #trigger>
        <RightOutlined v-if="collapsed" />
        <LeftOutlined v-else />
      </template>
      <div class="demo-logo-vertical" />
      <a-menu
        theme="dark"
        mode="inline"
        :default-selected-keys="['1']"
        :items="items"
      />
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="side-header" :style="{ background: token.colorBgContainer }" />
      <a-layout-content class="side-content">
        <a-breadcrumb class="side-breadcrumb" :items="breadcrumbItems" />
        <div
          class="side-content-box"
          :style="{
            background: token.colorBgContainer,
            borderRadius: `${token.borderRadiusLG}px`,
          }"
        >
          Bill is a cat.
        </div>
      </a-layout-content>
      <a-layout-footer class="side-footer">
        Antdv Next ©{{ year }} Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.side-layout {
  min-height: 100vh;
}

.side-header {
  padding: 0;
}

.side-content {
  margin: 0 16px;
}

.side-breadcrumb {
  margin: 16px 0;
}

.side-content-box {
  padding: 24px;
  min-height: 360px;
}

.side-footer {
  text-align: center;
}

.demo-logo-vertical {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
</style>
```
### Custom trigger
If you want to use a customized trigger, you can hide the default one.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@antdv-next/icons'
import { theme } from 'antdv-next'
import { ref } from 'vue'

const { token } = theme.useToken()

const collapsed = ref(false)

const items: MenuItemType[] = [
  { key: '1', icon: UserOutlined, label: 'nav 1' },
  { key: '2', icon: VideoCameraOutlined, label: 'nav 2' },
  { key: '3', icon: UploadOutlined, label: 'nav 3' },
]

function toggleCollapsed() {
  collapsed.value = !collapsed.value
}
</script>

<template>
  <a-layout>
    <a-layout-sider v-model:collapsed="collapsed" collapsible :trigger="null">
      <div class="demo-logo-vertical" />
      <a-menu
        theme="dark"
        mode="inline"
        :default-selected-keys="['1']"
        :items="items"
      />
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="custom-header" :style="{ background: token.colorBgContainer }">
        <a-button type="text" class="trigger-button" @click="toggleCollapsed">
          <template #icon>
            <MenuUnfoldOutlined v-if="collapsed" />
            <MenuFoldOutlined v-else />
          </template>
        </a-button>
      </a-layout-header>
      <a-layout-content
        class="custom-content"
        :style="{
          background: token.colorBgContainer,
          borderRadius: `${token.borderRadiusLG}px`,
        }"
      >
        Content
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.custom-header {
  padding: 0;
}

.custom-content {
  margin: 24px 16px;
  padding: 24px;
  min-height: 280px;
}

.trigger-button {
  width: 64px;
  height: 64px;
  font-size: 16px;
}

.demo-logo-vertical {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
</style>
```
### Collapsible overlay
Use a custom trigger attached to the Sider edge to collapse or expand it. The expanded Sider can leave the document flow and overlay the content with business styles to avoid squeezing the content area.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import {
  DesktopOutlined,
  FileOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  TeamOutlined,
} from '@antdv-next/icons'
import { theme } from 'antdv-next'
import { ref } from 'vue'

const { token } = theme.useToken()

const collapsed = ref(false)

const items: MenuItemType[] = [
  { key: '1', icon: PieChartOutlined, label: 'nav 1' },
  { key: '2', icon: DesktopOutlined, label: 'nav 2' },
  { key: '3', icon: TeamOutlined, label: 'nav 3' },
  { key: '4', icon: FileOutlined, label: 'nav 4' },
]

const currentYear = new Date().getFullYear()
</script>

<template>
  <a-layout class="overlay-layout">
    <a-layout-sider
      v-model:collapsed="collapsed"
      collapsible
      collapsed-width="0"
      class="overlay-sider"
    >
      <template #trigger>
        <MenuUnfoldOutlined v-if="collapsed" />
        <MenuFoldOutlined v-else />
      </template>
      <div class="demo-logo-vertical" />
      <a-menu
        theme="dark"
        mode="inline"
        :default-selected-keys="['1']"
        :items="items"
      />
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="overlay-header" :style="{ background: token.colorBgContainer }" />
      <a-layout-content class="overlay-content">
        <div
          class="overlay-content-inner"
          :style="{
            background: token.colorBgContainer,
            borderRadius: `${token.borderRadiusLG}px`,
          }"
        >
          Content keeps its full width when the sider overlays it.
        </div>
      </a-layout-content>
      <a-layout-footer class="overlay-footer">
        Antdv Next ©{{ currentYear }} Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.overlay-layout {
  position: relative;
  min-height: 360px;
}

.overlay-sider {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 10;
}

.overlay-header {
  padding: 0;
}

.overlay-content {
  margin: 24px 16px 0;
}

.overlay-content-inner {
  padding: 24px;
  min-height: 240px;
}

.overlay-footer {
  text-align: center;
}

.demo-logo-vertical {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
</style>
```
### Responsive
a-layout-sider supports responsive layout.

> Note: You can get a responsive layout by setting `breakpoint`. The Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. A special trigger will appear if `collapsedWidth` is set to 0.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { BarsOutlined, UploadOutlined, UserOutlined, VideoCameraOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'

const { token } = theme.useToken()
const year = new Date().getFullYear()

const items: MenuItemType[] = [UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(
  (icon, index) => ({
    key: String(index + 1),
    icon,
    label: `nav ${index + 1}`,
  }),
)

function handleBreakpoint(broken: boolean) {
  console.log(broken)
}

function handleCollapse(collapsed: boolean, type: string) {
  console.log(collapsed, type)
}
</script>

<template>
  <a-layout>
    <a-layout-sider
      breakpoint="lg"
      :collapsed-width="0"
      @breakpoint="handleBreakpoint"
      @collapse="handleCollapse"
    >
      <template #trigger>
        <BarsOutlined />
      </template>
      <div class="demo-logo-vertical" />
      <a-menu
        theme="dark"
        mode="inline"
        :default-selected-keys="['4']"
        :items="items"
      />
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="responsive-header" :style="{ background: token.colorBgContainer }" />
      <a-layout-content class="responsive-content">
        <div
          class="responsive-content-box"
          :style="{
            background: token.colorBgContainer,
            borderRadius: `${token.borderRadiusLG}px`,
          }"
        >
          content
        </div>
      </a-layout-content>
      <a-layout-footer class="responsive-footer">
        Antdv Next ©{{ year }} Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.responsive-header {
  padding: 0;
}

.responsive-content {
  margin: 24px 16px 0;
}

.responsive-content-box {
  padding: 24px;
  min-height: 360px;
}

.responsive-footer {
  text-align: center;
}

.demo-logo-vertical {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
</style>
```
### Fixed Header
Sticky Header is generally used to fix the top navigation to facilitate page switching.
```vue
<script setup lang="ts">
import type { BreadcrumbItemType, MenuItemType } from 'antdv-next'
import { theme } from 'antdv-next'

const { token } = theme.useToken()
const year = new Date().getFullYear()

const items: MenuItemType[] = Array.from({ length: 3 }).map((_, index) => ({
  key: String(index + 1),
  label: `nav ${index + 1}`,
}))

const breadcrumbItems: BreadcrumbItemType[] = [
  { title: 'Home' },
  { title: 'List' },
  { title: 'App' },
]
</script>

<template>
  <a-layout>
    <a-layout-header class="demo-header">
      <div class="demo-logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :items="items"
        class="demo-menu"
      />
    </a-layout-header>
    <a-layout-content class="demo-content">
      <a-breadcrumb class="demo-breadcrumb" :items="breadcrumbItems" />
      <div
        class="demo-content-box"
        :style="{
          background: token.colorBgContainer,
          borderRadius: `${token.borderRadiusLG}px`,
        }"
      >
        Content
      </div>
    </a-layout-content>
    <a-layout-footer class="demo-footer">
      Antdv Next ©{{ year }} Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>

<style scoped>
.demo-header {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
}

.demo-menu {
  flex: 1;
  min-width: 0;
}

.demo-content {
  padding: 0 48px;
}

.demo-breadcrumb {
  margin: 16px 0;
}

.demo-content-box {
  padding: 24px;
  min-height: 380px;
}

.demo-footer {
  text-align: center;
}

.demo-logo {
  width: 120px;
  height: 32px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
</style>
```
### Fixed Sider
When dealing with long content, a sticky sider can provide a better user experience.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import type { CSSProperties } from 'vue'
import {
  AppstoreOutlined,
  BarChartOutlined,
  CloudOutlined,
  ShopOutlined,
  TeamOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@antdv-next/icons'
import { theme } from 'antdv-next'

const { token } = theme.useToken()
const year = new Date().getFullYear()

const siderStyle: CSSProperties = {
  overflow: 'auto',
  height: '100vh',
  position: 'sticky',
  insetInlineStart: 0,
  top: 0,
  scrollbarWidth: 'thin',
  scrollbarGutter: 'stable',
}

const items: MenuItemType[] = [
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  BarChartOutlined,
  CloudOutlined,
  AppstoreOutlined,
  TeamOutlined,
  ShopOutlined,
].map((icon, index) => ({
  key: String(index + 1),
  icon,
  label: `nav ${index + 1}`,
}))
</script>

<template>
  <a-layout :has-sider="true">
    <a-layout-sider :style="siderStyle">
      <div class="demo-logo-vertical" />
      <a-menu
        theme="dark"
        mode="inline"
        :default-selected-keys="['4']"
        :items="items"
      />
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="fixed-header" :style="{ background: token.colorBgContainer }" />
      <a-layout-content class="fixed-content">
        <div
          class="fixed-content-box"
          :style="{
            background: token.colorBgContainer,
            borderRadius: `${token.borderRadiusLG}px`,
          }"
        >
          <p>long content</p>
          <template v-for="index in 100" :key="index">
            {{ index % 20 === 0 && index !== 0 ? 'more' : '...' }}
            <br>
          </template>
        </div>
      </a-layout-content>
      <a-layout-footer class="fixed-footer">
        Antdv Next ©{{ year }} Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style scoped>
.fixed-header {
  padding: 0;
}

.fixed-content {
  margin: 24px 16px 0;
  overflow: initial;
}

.fixed-content-box {
  padding: 24px;
  text-align: center;
}

.fixed-footer {
  text-align: center;
}

.demo-logo-vertical {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}
</style>
```

## API

```html
<a-layout>
  <a-layout-header>header</a-layout-header>
  <a-layout>
    <a-layout-sider>left sidebar</a-layout-sider>
    <a-layout-content>main content</a-layout-content>
    <a-layout-sider>right sidebar</a-layout-sider>
  </a-layout>
  <a-layout-footer>footer</a-layout-footer>
</a-layout>
```

### Layout

Common props ref：[Common props](/docs/vue/common-props)

The wrapper.

#### Props {#layout-props}

| Property | Description | Type | Default | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- |
| hasSider | Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - | × |

### LayoutSider

#### Props {#layoutsider-props}

The sidebar.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| breakpoint | [Breakpoints](/components/grid/#col) of the responsive layout | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `xxxl` | - | xxxl: 1.0.3 |
| classes | Semantic structure class (`root`, `body`) for the Sider, supports object or function | Record<string, string> \| (info: { props }) => Record<string, string> | - | 1.4.0 |
| collapsed | To set the current status | boolean | - |  |
| collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | number | 80 |  |
| collapsible | Whether can be collapsed | boolean | false |  |
| reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false |  |
| styles | Semantic structure inline style (`root`, `body`) for the Sider, supports object or function | Record<string, CSSProperties> \| (info: { props }) => Record<string, CSSProperties> | - | 1.4.0 |
| theme | Color theme of the sidebar | `light` \| `dark` | `dark` |  |
| trigger | Specify the customized trigger, set to null to hide the trigger | VueNode | - |  |
| width | Width of the sidebar | number \| string | 200 |  |
| zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |  |

#### Events {#layoutsider-events}

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| breakpoint | The callback function, executed when [breakpoints](/components/grid/#api) changed | (broken: boolean) => void | - |
| collapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed: boolean, type: string) => void | - |

#### Slots {#layoutsider-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| trigger | Specify the customized trigger, set to null to hide the trigger | - | - |

## Types

### Breakpoint width

```ts
const breakpointWidth = {
  xs: '480px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
  xxxl: '1920px',
}
```

## Design Token

<ComponentTokenTable component="Layout" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Listy
URL: https://www.antdv-next.com/components/listy.md
---

## When To Use

- When you need to render a long list without paying the cost of mounting every row — enable `virtual` to render only the rows in view.
- When the list needs grouped sections with sticky headers.
- When you need imperative control over scroll position (jump to an item, a group, or a pixel offset).

## Examples

<!-- prettier-ignore -->
### Basic
Basic example.
```vue
<script setup lang="ts">
interface Item {
  id: number
  content: string
}

const items: Item[] = Array.from({ length: 20 }, (_, index) => ({
  id: index,
  content: `Item ${index}`,
}))
</script>

<template>
  <a-listy :items="items" :row-key="(item: Item) => item.id" :height="400" :item-render="(item: Item) => item.content" />
</template>
```
### Virtual scrolling
A long list of 10,000 rows. Set `virtual` and `height` to enable virtual scrolling, so only the rows in view are rendered.
```vue
<script setup lang="ts">
interface Item {
  id: number
  content: string
}

const items = Array.from<any, Item>({ length: 10000 }, (_, index) => ({
  id: index,
  content: `Item ${index}`,
}))
</script>

<template>
  <a-listy
    virtual
    :items="items"
    :height="400"
    :row-key="(item: Item) => item.id"
    :item-render="(item: Item) => item.content"
  />
</template>
```
### Grouping and sticky headers
Use `group` to derive a group key from each item and render group headers. With `sticky` enabled, the current group header sticks to the top while scrolling.
```vue
<script setup lang="ts">
interface Contact {
  id: number
  name: string
}

const names = [
  'Aaron Baker',
  'Alice Adams',
  'Bella Carter',
  'Brian Diaz',
  'Chloe Evans',
  'Colin Foster',
  'Daisy Garcia',
  'David Hayes',
  'Elena Ingram',
  'Eric Jensen',
  'Fiona Kim',
  'Frank Lopez',
  'Grace Miller',
  'Gavin Nguyen',
  'Hannah Ortiz',
  'Henry Parker',
  'Iris Quincy',
  'Ivan Reed',
  'Jack Smith',
  'Julia Turner',
]

const contacts = names.map<Contact>((name, id) => ({ id, name }))

const colors = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae', '#87d068']

const colorOf = (letter: string) => colors[(letter.charCodeAt(0) - 65) % colors.length]
</script>

<template>
  <a-listy
    :items="contacts"
    :row-key="(item: Contact) => item.id"
    :height="400"
    :group="{
      key: (contact: Contact) => contact.name[0],
      title: (letter: unknown) => letter,
    }"
    sticky
  >
    <template #itemRender="item">
      <a-flex gap="small" align="center">
        <a-avatar :style="{ backgroundColor: colorOf(item.name[0]) }">
          {{ item.name[0] }}
        </a-avatar>
        <a-typography-text>
          {{ item.name }}
        </a-typography-text>
      </a-flex>
    </template>
  </a-listy>
</template>
```
### Scroll control
Use `scrollTo` on the ref to jump to a pixel position, an item or a group, with `align` and `offset` controlling the alignment. `onScroll` listens to the native scroll event.
```vue
<script setup lang="ts">
import { ref } from 'vue'

interface Item {
  id: number
  group: string
}

type Align = 'top' | 'bottom' | 'auto'

const items: Item[] = Array.from({ length: 60 }, (_, index) => ({
  id: index,
  group: `Group ${Math.floor(index / 10)}`,
}))

const groups = Array.from({ length: 6 }, (_, index) => `Group ${index}`)
const listRef = ref(null)
const align = ref<Align>('top')
const key = ref<number | null>(40)
const groupKey = ref('Group 3')
const scrollTop = ref(0)
</script>

<template>
  <a-flex vertical gap="medium">
    <a-flex gap="small" wrap align="center">
      <a-segmented v-model:value="align" :options="['top', 'bottom', 'auto']" />
      <a-space-Compact>
        <a-input-number v-model:value="key" min="0" max="59" style="width: 70px" />
        <a-button @click="() => listRef?.scrollTo({ key: key ?? 0, align })">
          Scroll to item
        </a-button>
      </a-space-Compact>
      <a-space-Compact>
        <a-select
          v-model:value="groupKey"
          :options="groups.map((group) => ({ value: group }))"
          style="width: 110px"
        />
        <a-button @click="() => listRef?.scrollTo({ groupKey, align })">
          Scroll to group
        </a-button>
      </a-space-compact>
      <a-button @click="() => listRef?.scrollTo(0)">
        Back to top
      </a-button>
    </a-flex>
    <a-listy
      ref="listRef"
      :items="items"
      :row-key="(item: Item) => item.id"
      :height="400"
      :sticky="true"
      :group="{
        key: (item: Item) => item.group,
        title: (group: unknown) => group,
      }"
      :item-render=" (item: Item) => `Item ${item.id}` "
      @scroll=" (event: any) => scrollTop = Math.round(event.currentTarget.scrollTop)"
    />
    <a-typography-text type="secondary">
      scrollTop: {{ scrollTop }}px
    </a-typography-text>
  </a-flex>
</template>
```
### Rich content
`itemRender` can render arbitrarily rich content, and rows do not need the same height.
```vue
<script setup lang="ts">
interface Notification {
  id: number
  user: string
  message: string
  time: string
}

const users = ['Olivia', 'Liam', 'Emma', 'Noah', 'Ava', 'Ethan', 'Sophia', 'Lucas']

const messages = [
  'commented on your merge request',
  'invited you to the quarterly planning review. Please confirm your availability before Friday so the agenda can be finalized in time.',
  'mentioned you in the design review thread',
  'assigned you a task that is due next Monday. It covers the remaining accessibility issues found in the latest audit.',
  'starred the report you shared yesterday',
  'requested changes on your pull request. Most of the comments are about naming and the test coverage of the new cache layer.',
]

const colors = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']

const colorOf = (user: string) => colors[users.indexOf(user) % colors.length]

const pad = (value: number) => String(value).padStart(2, '0')

const notifications: Notification[] = Array.from({ length: 12 }, (_, index) => ({
  id: index,
  user: users[index % users.length],
  message: messages[index % messages.length],
  time: `${pad((8 + index) % 24)}:${pad((index * 17) % 60)}`,
}))
</script>

<template>
  <a-listy
    :items="notifications"
    :row-key="(item: Notification) => item.id"
    :height="400"
  >
    <template #itemRender="item">
      <a-flex gap="medium" align="flex-start">
        <a-avatar :style="{ backgroundColor: colorOf(item.user), flex: 'none' }">
          {item.user[0]}
        </a-avatar>
        <a-flex vertical flex="auto" style="min-width: 0px">
          <a-flex justify="space-between" gap="small">
            <a-typography-text strong>
              {{ item.user }}
            </a-typography-text>
            <a-typography-text type="secondary">
              {{ item.time }}
            </a-typography-text>
          </a-flex>
          <a-typography-text type="secondary">
            {{ item.message }}
          </a-typography-text>
        </a-flex>
      </a-flex>
    </template>
  </a-listy>
</template>
```
### Drag sorting
Implement drag sorting for list items by integrating the third-party library [dnd-kit](https://github.com/clauderic/dnd-kit) (`@dnd-kit/vue`).
```vue
<script setup lang="ts">
import type { DragEndEvent } from '@dnd-kit/vue'
import { HolderOutlined } from '@antdv-next/icons'
import { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers'
import { PointerActivationConstraints } from '@dnd-kit/dom'
import { DragDropProvider, DragOverlay, KeyboardSensor, PointerSensor } from '@dnd-kit/vue'
import { isSortable, useSortable } from '@dnd-kit/vue/sortable'
import { Button, Flex } from 'antdv-next'
import { defineComponent, h, ref } from 'vue'

interface Item {
  id: number
  content: string
}

interface SortableItemProps {
  id: number
  index: number
  content: string
}

const items = Array.from<any, Item>({ length: 20 }, (_, index) => ({
  id: index,
  content: `Item ${index}`,
}))

const data = ref<Item[]>(items)

const transition = { duration: 200, easing: 'cubic-bezier(0.2, 0, 0, 1)' }

const SortableItem = defineComponent<SortableItemProps>(
  (props) => {
    const content = ref<HTMLElement>()
    const handle = ref<HTMLElement>()

    const setContent = (el: any) => {
      content.value = el?.$el ?? el ?? undefined
    }

    const setHandle = (el: any) => {
      handle.value = el?.$el ?? el ?? undefined
    }

    const { isDragging } = useSortable({
      id: () => props.id,
      index: () => props.index,
      element: () => content.value?.parentElement,
      target: () => content.value?.parentElement,
      handle,
      transition,
    })
    return () => h(
      Flex,
      {
        ref: setContent,
        align: 'center',
        gap: 'small',
        style: isDragging.value ? { opacity: 0 } : undefined,
      },
      () => [
        h(Button, {
          ref: setHandle,
          type: 'text',
          size: 'small',
          style: { cursor: 'move' },
          icon: () => h(HolderOutlined),
        }),
        props.content,
      ],
    )
  },
  {
    props: ['id', 'index', 'content'],
  },
)

const sensors = [
  PointerSensor.configure({
    activationConstraints: [
      new PointerActivationConstraints.Distance({ value: 1 }),
    ],
  }),
  KeyboardSensor,
]

const modifiers = [RestrictToVerticalAxis]

function contentOf(id: unknown) {
  return data.value.find(item => item.id === id)?.content ?? ''
}

let snapshot: Item[] = []

function onDragStart() {
  snapshot = [...data.value]
}

function onDragEnd(event: DragEndEvent) {
  if (event.canceled) {
    data.value = snapshot
    return
  }

  const { source } = event.operation

  if (!isSortable(source))
    return

  const { initialIndex, index } = source

  if (initialIndex === index
    || initialIndex < 0
    || initialIndex >= data.value.length
    || index < 0
    || index >= data.value.length) {
    return
  }

  const next = [...data.value]
  const [moved] = next.splice(initialIndex, 1) as [Item]
  next.splice(index, 0, moved)
  data.value = next
}
</script>

<template>
  <DragDropProvider
    :sensors="sensors"
    :modifiers="modifiers"
    @drag-start="onDragStart"
    @drag-end="onDragEnd"
  >
    <a-listy
      :items="data"
      :height="400"
      :row-key="(item: Item) => item.id"
      :item-render="(item: Item, index: number) => h(SortableItem, { key: item.id, id: item.id, index, content: item.content })"
    />
    <DragOverlay
      class="ant-listy-item"
      :style="{ width: '100%', boxSizing: 'border-box' }"
      :drop-animation="null"
    >
      <template #default="{ source }">
        <a-flex align="center" gap="small">
          <a-button type="text" size="small" :style="{ cursor: 'move' }">
            <template #icon>
              <HolderOutlined />
            </template>
          </a-button>
          {{ contentOf(source.id) }}
        </a-flex>
      </template>
    </DragOverlay>
  </DragDropProvider>
</template>
```
### Infinite loading
Detect in `onScroll` that the list is about to reach the bottom, then load the next page on demand for endless scrolling. Combined with `virtual`, only the rows in view are rendered no matter how much data piles up.
```vue
<script setup lang="ts">
import { ref } from 'vue'

interface Item {
  id: number
  content: string
}

const PAGE_SIZE = 50

function makePage(offset: number): Item[] {
  return Array.from({ length: PAGE_SIZE }, (_, index) => ({
    id: offset + index,
    content: `Item ${offset + index}`,
  }))
}
const items = ref<Item[]>(makePage(0))
const loading = ref(false)
const loadingRef = ref(false)

function onScroll(event: Event) {
  const { scrollTop, clientHeight, scrollHeight } = event.currentTarget
  if (scrollHeight - scrollTop - clientHeight > 200 || loadingRef.value) {
    return
  }
  loadingRef.value = true
  loading.value = true
  setTimeout(() => {
    items.value = [...items.value, ...makePage(items.value.length)]
    loadingRef.value = false
    loading.value = false
  }, 600)
};
</script>

<template>
  <a-flex vertical gap="small">
    <a-listy
      virtual
      :items="items"
      :row-key="(item: Item) => item.id"
      :height="400"
      :item-render="(item: Item) => item.content"
      @scroll="onScroll"
    />
    <a-flex justify="center" align="center" style="height: 24px">
      <template v-if="loading">
        <a-spin size="small" />
      </template>
      <template v-else>
        <a-typography-text type="secondary">
          {{ items.length }} items loaded
        </a-typography-text>
      </template>
    </a-flex>
  </a-flex>
</template>
```
### Custom semantic dom styling
Customize the [semantic DOM](#semantic-dom) styles of Listy with `classes` and `styles`.
```vue
<script setup lang="ts">
import type { ListyProps } from 'antdv-next'

interface User {
  id: number
  name: string
  team: string
}

const users: User[] = [
  { id: 0, name: 'Olivia', team: 'Design' },
  { id: 1, name: 'Liam', team: 'Design' },
  { id: 2, name: 'Emma', team: 'Design' },
  { id: 3, name: 'Noah', team: 'Engineering' },
  { id: 4, name: 'Ava', team: 'Engineering' },
  { id: 5, name: 'Ethan', team: 'Engineering' },
  { id: 6, name: 'Sophia', team: 'Marketing' },
  { id: 7, name: 'Lucas', team: 'Marketing' },
]

const classes: ListyProps['classes'] = {
  root: 'listy-custom-root',
  groupHeader: 'listy-custom-group-header',
}

const styles: ListyProps['styles'] = {
  item: { fontStyle: 'italic' },
}
</script>

<template>
  <a-listy
    :items="users"
    :row-key="(item: User) => item.id"
    :height="260"
    sticky
    :group="{ key: (user: User) => user.team, title: (team: unknown) => team }"
    :item-render="(user: User) => user.name"
    :classes="classes"
    :styles="styles"
  />
</template>

<style scoped>
.listy-custom-root {
  border: 1px solid #91caff;
  border-radius: 8px;
  overflow: hidden;
}
:deep(.listy-custom-group-header) {
  color: #1677ff;
  background: #e6f4ff;
}
</style>
```

## API

Common props ref: [Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Semantic class names | `{ root?, item?, groupHeader? }` | - | 1.5.0 | 1.5.0 |
| group | Grouping config, see [Group](#group) below | `Group<T, K>` | - | 1.5.0 | × |
| height | Height of the scroll container; content scrolls when it overflows | number | - | 1.5.0 | × |
| itemRender | Render a single row | `(item: T, index: number) => VNode` | - | 1.5.0 | × |
| items | Data source of the list | `T[]` | `[]` | 1.5.0 | × |
| rowKey | Unique key of an item, a field name or a getter | `keyof T \| (item: T) => Key` | - | 1.5.0 | × |
| sticky | Whether group headers stick to the top | boolean | false | 1.5.0 | × |
| styles | Semantic inline styles | `{ root?, item?, groupHeader? }` | - | 1.5.0 | 1.5.0 |
| virtual | Whether to enable virtual scrolling, rendering only rows in view, requires `height` | boolean | false | 1.5.0 | × |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| scroll | Native scroll event handler | `(e: Event) => void` | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| itemRender | Render a single row | (item: any, index: number) => any | - |

### Group

| Property | Description | Type |
| --- | --- | --- |
| key | Compute the group key an item belongs to; items with the same key are grouped together | `(item: T) => K` |
| title | Render the group header; receives the group key and its items | `(groupKey: K, items: T[]) => VNode` |

### Ref

| Name     | Description                               | Type                                |
| -------- | ----------------------------------------- | ----------------------------------- |
| scrollTo | Scroll to a position, an item, or a group | `(config?: ListyScrollToConfig) => void` |

`ListyScrollToConfig` is one of:

| Shape                           | Description                                     |
| ------------------------------- | ----------------------------------------------- |
| number                          | Scroll to a pixel offset (scrollTop)            |
| `{ top?, left? }`               | Scroll to an absolute pixel position            |
| `{ key, align?, offset? }`      | Scroll to the item whose `rowKey` matches `key` |
| `{ groupKey, align?, offset? }` | Scroll to a group header                        |

`align` is `'top' | 'bottom' | 'auto'`; `offset` is an extra pixel offset applied after alignment.

## Semantic DOM

<demo src="./demo/_semantic.vue" :simplify="true"></demo>

## Design Token {#design-token}

<ComponentTokenTable component="Listy"></ComponentTokenTable>

---
Title: Masonry
URL: https://www.antdv-next.com/components/masonry.md
---

## When To Use

- When displaying images or cards with irregular heights.
- When content needs to be evenly distributed in columns.
- When column count needs to be responsive.

## Examples {#examples}

### Basic
Basic usage.
```vue
<script setup lang="ts">
const heights = [150, 50, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 60, 50, 80].map((height, index) => {
  return {
    key: `item-${index}`,
    data: height,
  }
})
</script>

<template>
  <a-masonry :columns="4" :gutter="16" :items="heights">
    <template #itemRender="{ index, data }">
      <template v-if="index === 4">
        <a-card size="small">
          <template #cover>
            <img
              alt="food"
              src="https://images.unsplash.com/photo-1491961865842-98f7befd1a60?w=523&auto=format"
            >
          </template>
          <a-card-meta title="I'm Special" description="Let's have a meal" />
        </a-card>
      </template>
      <template v-else>
        <a-card size="small" :style="{ height: `${data}px` }">
          {{ index + 1 }}
        </a-card>
      </template>
    </template>
  </a-masonry>
</template>
```
### Responsive
Achieve responsive masonry layout for different screen sizes by setting `columns` and `gutter` properties to responsive configuration objects.
```vue
<script setup lang="ts">
const heights = [120, 55, 85, 160, 95, 140, 75, 110, 65, 130, 90, 145, 55, 100, 80]

const items = heights.map((height, index) => ({
  key: `item-${index}`,
  data: height,
  index,
}))
</script>

<template>
  <a-masonry
    :columns="{ xs: 1, sm: 2, md: 3, lg: 4 }"
    :gutter="{ xs: 8, sm: 12, md: 16 }"
    :items="items"
  >
    <template #itemRender="item">
      <a-card size="small" :style="{ height: `${item.data}px` }">
        {{ item.index + 1 }}
      </a-card>
    </template>
  </a-masonry>
</template>
```
### Image
Display image list using masonry layout.
```vue
<script setup lang="ts">
const imageList = [
  'https://images.unsplash.com/photo-1510001618818-4b4e3d86bf0f',
  'https://images.unsplash.com/photo-1507513319174-e556268bb244',
  'https://images.unsplash.com/photo-1474181487882-5abf3f0ba6c2',
  'https://images.unsplash.com/photo-1492778297155-7be4c83960c7',
  'https://images.unsplash.com/photo-1508062878650-88b52897f298',
  'https://images.unsplash.com/photo-1506158278516-d720e72406fc',
  'https://images.unsplash.com/photo-1552203274-e3c7bd771d26',
  'https://images.unsplash.com/photo-1528163186890-de9b86b54b51',
  'https://images.unsplash.com/photo-1727423304224-6d2fd99b864c',
  'https://images.unsplash.com/photo-1675090391405-432434e23595',
  'https://images.unsplash.com/photo-1554196967-97a8602084d9',
  'https://images.unsplash.com/photo-1491961865842-98f7befd1a60',
  'https://images.unsplash.com/photo-1721728613411-d56d2ddda959',
  'https://images.unsplash.com/photo-1731901245099-20ac7f85dbaa',
  'https://images.unsplash.com/photo-1617694455303-59af55af7e58',
  'https://images.unsplash.com/photo-1709198165282-1dab551df890',
]

const items = imageList.map((img, index) => ({
  key: `item-${index}`,
  data: img,
}))
</script>

<template>
  <a-masonry :columns="4" :gutter="16" :items="items">
    <template #itemRender="{ data }">
      <img :src="`${data}?w=523&auto=format`" alt="sample" style="width: 100%">
    </template>
  </a-masonry>
</template>
```
### Dynamic
Dynamically add and remove items. The `layoutChange` event provides column information for each item.
```vue
<script setup lang="ts">
import { CloseOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'
import { ref } from 'vue'

const { token } = theme.useToken()

const heights = [150, 50, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 70, 50, 80]

interface ItemType {
  key: number
  column?: number
  data: number
}

const items = ref<ItemType[]>(
  heights.map((height, index) => ({
    key: index,
    column: index % 4,
    data: height,
  })),
)

function removeItem(removeKey: number) {
  items.value = items.value.filter(({ key }) => key !== removeKey)
}

function addItem() {
  const lastItem = items.value[items.value.length - 1]
  items.value = [
    ...items.value,
    {
      key: lastItem ? lastItem.key + 1 : 0,
      data: Math.floor(Math.random() * 100) + 50,
    },
  ]
}

function handleLayoutChange(sortedItems: ItemType[]) {
  items.value = items.value.map((item) => {
    const matchItem = sortedItems.find(sortedItem => sortedItem.key === item.key)
    return matchItem
      ? {
          ...item,
          column: matchItem.column,
        }
      : item
  })
}
</script>

<template>
  <a-flex vertical :gap="16">
    <a-masonry
      :columns="4"
      :gutter="16"
      :items="items"
      @layout-change="handleLayoutChange"
    >
      <template #itemRender="{ data, key }">
        <a-card size="small" :style="{ height: `${data}px` }">
          {{ Number(key) + 1 }}
          <a-button
            :style="{
              position: 'absolute',
              insetBlockStart: `${token.paddingSM}px`,
              insetInlineEnd: `${token.paddingSM}px`,
            }"
            size="small"
            @click="() => removeItem(key as any)"
          >
            <template #icon>
              <CloseOutlined />
            </template>
          </a-button>
        </a-card>
      </template>
    </a-masonry>
    <a-button block @click="addItem">
      Add Item
    </a-button>
  </a-flex>
</template>
```
### Custom semantic dom styling
Customize semantic structure styles and class names. Supports both object and function forms.
```vue
<script setup lang="ts">
import type { MasonryProps } from 'antdv-next'

interface MasonryItemType<T = any> {
  key: string
  data: T
}

const items = [120, 80, 100, 60, 140, 90, 110, 70].map<MasonryItemType<number>>(
  (height, index) => ({
    key: `item-${index}`,
    data: height,
  }),
)

const classes = {
  root: 'custom-masonry-root',
  item: 'custom-masonry-item',
}

const styles: MasonryProps['styles'] = {
  root: {
    borderRadius: '12px',
    padding: '20px',
    height: '260px',
    backgroundColor: 'rgba(250,250,250,0.5)',
  },
  item: {
    transform: 'scale(0.98)',
    transition: 'transform 0.2s ease',
    border: '1px solid #ccc',
  },
}

const stylesFn: MasonryProps['styles'] = (info) => {
  const { props } = info
  return {
    root: {
      border: `2px solid ${typeof props.columns === 'number' && props.columns > 2 ? '#1890ff' : '#52c41a'}`,
      padding: '20px',
      height: '280px',
      backgroundColor: 'rgba(240,248,255,.6)',
    },
    item: {
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
      border: '1px solid #1890ff',
    },
  } satisfies MasonryProps['styles']
}
</script>

<template>
  <a-flex vertical :gap="24">
    <div>
      <a-typography-title :level="4">
        classes and styles Object
      </a-typography-title>
      <a-masonry
        :columns="4"
        :gutter="16"
        :items="items"
        :classes="classes"
        :styles="styles"
      >
        <template #itemRender="{ data, index }">
          <a-card size="small" :style="{ height: `${data}px` }">
            {{ index + 1 }}
          </a-card>
        </template>
      </a-masonry>
    </div>
    <a-divider />
    <div>
      <a-typography-title :level="4">
        classes and styles Function
      </a-typography-title>
      <a-masonry
        :columns="3"
        :gutter="12"
        :items="items.slice(0, 6)"
        :classes="classes"
        :styles="stylesFn"
      >
        <template #itemRender="{ data, index }">
          <a-card size="small" :style="{ height: `${data}px` }">
            {{ index + 1 }}
          </a-card>
        </template>
      </a-masonry>
    </div>
  </a-flex>
</template>

<style scoped>
:deep(.custom-masonry-root) {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px;
  height: 260px;
  background-color: #fafafa;
}

:deep(.custom-masonry-item) {
  transform: scale(0.98);
  transition: transform 0.2s ease;
  border-radius: 12px;
  border: 1px solid #ccc;
  overflow: hidden;
}
</style>
```
### Fresh
When `fresh` is enabled, the masonry will continuously monitor size changes of child items and automatically re-layout. Click on cards to change their height.
```vue
<script setup lang="ts">
import { Card } from 'antdv-next'
import { defineComponent, h, ref } from 'vue'

const RandomHeightCard = defineComponent({
  props: {
    index: {
      type: Number,
      required: true,
    },
    defaultHeight: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const height = ref(props.defaultHeight)

    const handleClick = () => {
      height.value = Math.floor(Math.random() * 100) + 50
    }

    return () =>
      h(
        Card,
        {
          size: 'small',
          style: { height: `${height.value}px`, transition: 'height 0.3s' },
          onClick: handleClick,
        },
        () => `${props.index + 1} - Click`,
      )
  },
})

const heights = [150, 50, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 60, 50, 80].map(
  (height, index) => {
    const item: {
      key: string
      data: number
      column?: number
    } = {
      key: `item-${index}`,
      data: height,
    }

    if (index === 4) {
      item.column = 0
    }

    return item
  },
)
</script>

<template>
  <a-masonry
    fresh
    :columns="4"
    :gutter="16"
    :items="heights"
  >
    <template #itemRender="{ data, index }">
      <RandomHeightCard :index="index" :default-height="data" />
    </template>
  </a-masonry>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |
| columns | Number of columns, can be a fixed value or a responsive configuration | number \| &#123; xs?: number; sm?: number; md?: number; lg?: number; xl?: number; xxl?: number &#125; | 3 | - | × |
| fresh | Whether to continuously monitor the size changes of child items | boolean | false | - | × |
| gutter | Spacing, can be a fixed value, responsive configuration, or a configuration for horizontal and vertical spacing | [Gap](#gap) \| [[Gap](#gap), [Gap](#gap)] | 0 | - | × |
| items | Masonry items | [MasonryItem](#masonryitem)[] | - | - | × |
| itemRender | Custom item rendering function | (item: MasonryItem) =&gt; VueNode | - | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| layoutChange | Callback for column sorting changes | (sortInfo: &#123; key: Key; column: number &#125;[]) =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| itemRender | Custom item rendering slot | (itemInfo: MasonryItem & &#123; index: number &#125;) =&gt; VueNode | - |

## Types

### MasonryItem

| Parameter | Description | Type | Default Value |
| --- | --- | --- | --- |
| key | Unique identifier for the item | string \| number | - |
| height | Height of the item | number | - |
| column | Specifies the column to which the item belongs | number | - |
| data | Custom data storage | T | - |
| children | Custom display content, takes precedence over `itemRender` | VueNode | - |

### Gap

`Gap` represents the spacing between items. It can either be a fixed value or a responsive configuration.

```ts
type Gap = undefined | number | Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number>>
```

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>


## Design Token

<ComponentTokenTable component="Masonry" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Mentions
URL: https://www.antdv-next.com/components/mentions.md
---

## When To Use {#when-to-use}

When you need to mention someone or something.

## Examples {#examples}

### Basic
Basic usage.
```vue
<script setup lang="ts">
import type { MentionsOptionProps } from 'antdv-next'
import { ref } from 'vue'

const value = ref<string>('@afc163')
function onChange(value: string) {
  console.log('Change:', value)
}

function onSelect(option: MentionsOptionProps) {
  console.log('select', option)
}
</script>

<template>
  <a-mentions
    v-model:value="value"
    style="width: 100%"
    :options="[
      {
        value: 'afc163',
        label: 'afc163',
      },
      {
        value: 'zombieJ',
        label: 'zombieJ',
      },
      {
        value: 'yesmeck',
        label: 'yesmeck',
      },
    ]"
    @change="onChange"
    @select="onSelect"
  />
</template>
```
### Size
Configure size via `size` property.
```vue
<template>
  <a-flex vertical gap="medium">
    <a-mentions size="large" placeholder="large size" />
    <a-mentions placeholder="default size" />
    <a-mentions size="small" placeholder="small size" />
  </a-flex>
</template>
```
### Variants
Variants of Mentions, there are four variants: `outlined` `filled` `borderless` and `underlined`.
```vue
<template>
  <a-flex vertical gap="medium">
    <a-mentions placeholder="Outlined" />
    <a-mentions placeholder="Filled" variant="filled" />
    <a-mentions placeholder="Borderless" variant="borderless" />
    <a-mentions placeholder="Underlined" variant="underlined" />
  </a-flex>
</template>
```
### Asynchronous loading
async.
```vue
<script setup lang="ts">
import type { MentionsOptionProps } from 'antdv-next'
import { debounce } from 'es-toolkit'
import { computed, shallowRef } from 'vue'

interface GithubUser {
  login: string
  avatar_url: string
}

const loading = shallowRef(false)
const users = shallowRef<GithubUser[]>([])
let fetchId = 0

async function fetchGithubUsers(search: string): Promise<GithubUser[]> {
  return fetch(`https://api.github.com/search/users?q=${search}`)
    .then(res => res.json())
    .then((res) => {
      const items = Array.isArray(res?.items) ? res.items : []
      return items.slice(0, 10)
    })
}

const debounceFetcher = debounce((search: string) => {
  fetchId += 1
  const currentFetchId = fetchId
  loading.value = true
  users.value = []

  fetchGithubUsers(search)
    .then((items) => {
      if (currentFetchId !== fetchId) {
        return
      }
      loading.value = false
      users.value = items
    })
    .catch(() => {
      if (currentFetchId !== fetchId) {
        return
      }
      loading.value = false
      users.value = []
    })
}, 800)

const options = computed<MentionsOptionProps[]>(() => {
  return users.value.map(({ login, avatar_url: avatar }) => ({
    key: login,
    value: login,
    class: 'mentions-demo-dynamic-option',
    label: avatar,
  }))
})

function handleSearch(search: string) {
  if (!search) {
    loading.value = false
    users.value = []
    return
  }
  debounceFetcher(search)
}
</script>

<template>
  <a-mentions
    style="width: 100%"
    :loading="loading"
    :options="options"
    @search="handleSearch"
  >
    <template #labelRender="{ option }">
      <img :draggable="false" :src="option.label as string" :alt="option.value">
      <span>{{ option.value }}</span>
    </template>
  </a-mentions>
</template>

<style>
.mentions-demo-dynamic-option-content {
  display: inline-flex;
  align-items: center;
}

.mentions-demo-dynamic-option img {
  width: 20px;
  height: 20px;
  margin-inline-end: 8px;
}
</style>
```
### With Form
Controlled mode, for example, to work with `Form`.
```vue
<script setup lang="ts">
import type { FormInstance } from 'antdv-next'
import { Mentions } from 'antdv-next'
import { reactive, shallowRef } from 'vue'

const model = reactive({
  coders: '',
  bio: '',
})

const formRef = shallowRef<FormInstance>()

const options = [
  {
    value: 'afc163',
    label: 'afc163',
  },
  {
    value: 'zombieJ',
    label: 'zombieJ',
  },
  {
    value: 'yesmeck',
    label: 'yesmeck',
  },
]

function handleFinish(values: any) {
  console.log('Submit:', values)
}

function handleFinishFailed(errorInfo: any) {
  console.log('Error:', errorInfo)
}

function handleReset() {
  formRef.value?.resetFields?.()
}

async function checkMention(_rule: any, value: string) {
  const mentions = Mentions.getMentions(value || '')
  if (mentions.length < 2) {
    throw new Error('More than one must be selected!')
  }
}
</script>

<template>
  <a-form
    ref="formRef"
    :model="model"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 16 }"
    @finish="handleFinish"
    @finish-failed="handleFinishFailed"
  >
    <a-form-item name="coders" label="Top coders" :rules="[{ validator: checkMention }]">
      <a-mentions v-model:value="model.coders" :rows="1" :options="options" />
    </a-form-item>
    <a-form-item name="bio" label="Bio" :rules="[{ required: true, message: 'Please enter your bio!' }]">
      <a-mentions
        v-model:value="model.bio"
        :rows="3"
        placeholder="You can use @ to ref user here"
        :options="options"
      />
    </a-form-item>
    <a-form-item :label="null">
      <a-space wrap>
        <a-button type="primary" html-type="submit">
          Submit
        </a-button>
        <a-button html-type="button" @click="handleReset">
          Reset
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>
```
### Customize Trigger Token
Customize Trigger Token by `prefix` props. Default to `@`, `Array<string>` also supported.
```vue
<script setup lang="ts">
import type { MentionsEmits } from 'antdv-next'
import { computed, ref } from 'vue'

const mockData = {
  '@': ['afc163', 'zombiej', 'yesmeck'],
  '#': ['1.0', '2.0', '3.0'],
}

type PrefixType = keyof typeof mockData

const prefix = ref<PrefixType>('@')

const handleSearch: MentionsEmits['search'] = (_text, newPrefix) => {
  prefix.value = (newPrefix as PrefixType) || '@'
}

const options = computed(() => {
  const data = mockData[prefix.value] || []
  return data.map(value => ({
    key: value,
    value,
    label: value,
  }))
})
</script>

<template>
  <a-mentions
    style="width: 100%"
    placeholder="input @ to mention people, # to mention tag"
    :prefix="['@', '#']"
    :options="options"
    @search="handleSearch"
  />
</template>
```
### disabled or readOnly
Configure `disabled` and `readOnly`.
```vue
<script setup lang="ts">
import type { MentionsProps } from 'antdv-next'

const options: MentionsProps['options'] = ['afc163', 'zombiej', 'yesmeck'].map(value => ({
  value,
  key: value,
  label: value,
}))
</script>

<template>
  <a-flex vertical gap="medium">
    <a-mentions
      style="width: 100%"
      placeholder="this is disabled Mentions"
      disabled
      :options="options"
    />
    <a-mentions
      style="width: 100%"
      placeholder="this is readOnly Mentions"
      readonly
      :options="options"
    />
  </a-flex>
</template>
```
### Placement
Change the suggestions placement.
```vue
<script setup lang="ts">
import type { MentionsProps } from 'antdv-next'

const options: MentionsProps['options'] = [
  {
    value: 'afc163',
    label: 'afc163',
  },
  {
    value: 'zombieJ',
    label: 'zombieJ',
  },
  {
    value: 'yesmeck',
    label: 'yesmeck',
  },
]
</script>

<template>
  <a-mentions style="width: 100%" placement="top" :options="options" />
</template>
```
### Customize Popup
Customize the dropdown menu rendering via `popupRender`.
```vue
<script setup lang="ts">
import type { MentionsProps } from 'antdv-next'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const options: MentionsProps['options'] = [
  {
    value: 'afc163',
    label: 'afc163',
  },
  {
    value: 'zombieJ',
    label: 'zombieJ',
  },
  {
    value: 'yesmeck',
    label: 'yesmeck',
  },
]
</script>

<template>
  <a-mentions style="width: 100%" :options="options">
    <template #popupRender="menu">
      <div
        :style="{
          padding: `${token.paddingXS}px ${token.paddingSM}px`,
          fontWeight: token.fontWeightStrong,
          color: token.colorTextDescription,
        }"
      >
        Custom Header
      </div>
      <a-divider :style="{ margin: `${token.marginXXS}px 0` }" />
      <component :is="menu" />
    </template>
  </a-mentions>
</template>
```
### With clear icon
Customize clear button.
```vue
<script setup lang="ts">
import { CloseSquareFilled } from '@antdv-next/icons'
import { h, ref } from 'vue'

const value = ref('hello world')
const customAllowClear = {
  clearIcon: h(CloseSquareFilled),
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-mentions v-model:value="value" allow-clear />
    <a-mentions v-model:value="value" :allow-clear="customAllowClear" />
    <a-mentions v-model:value="value" allow-clear :rows="3" />
  </a-flex>
</template>
```
### autoSize
Height autoSize.
```vue
<script setup lang="ts">
import type { MentionsProps } from 'antdv-next'

const options: MentionsProps['options'] = [
  {
    value: 'afc163',
    label: 'afc163',
  },
  {
    value: 'zombieJ',
    label: 'zombieJ',
  },
  {
    value: 'yesmeck',
    label: 'yesmeck',
  },
]
</script>

<template>
  <a-mentions auto-size style="width: 100%" :options="options" />
</template>
```
### Status
Add status to Mentions with `status`, which could be `error` or `warning`.
```vue
<script setup lang="ts">
import type { MentionsEmits, MentionsProps } from 'antdv-next'

const options: MentionsProps['options'] = [
  {
    value: 'afc163',
    label: 'afc163',
  },
  {
    value: 'zombieJ',
    label: 'zombieJ',
  },
  {
    value: 'yesmeck',
    label: 'yesmeck',
  },
]

const handleChange: MentionsEmits['change'] = (value) => {
  console.log('Change:', value)
}

const handleSelect: MentionsEmits['select'] = (option) => {
  console.log('select', option)
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-mentions
      default-value="@afc163"
      status="error"
      :options="options"
      @change="handleChange"
      @select="handleSelect"
    />
    <a-mentions
      default-value="@afc163"
      status="warning"
      :options="options"
      @change="handleChange"
      @select="handleSelect"
    />
  </a-flex>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Mentions by passing objects/functions through `classes` and `styles`. For example, set the textarea to be resizable.
```vue
<script setup lang="ts">
import type { MentionsProps } from 'antdv-next'

const options: MentionsProps['options'] = [
  { value: 'afc163', label: 'afc163' },
  { value: 'zombieJ', label: 'zombieJ' },
  { value: 'meet-student', label: 'meet-student' },
  { value: 'thinkasany', label: 'thinkasany' },
]

const classes: MentionsProps['classes'] = {
  root: 'mentions-demo-root',
}

const stylesObject: MentionsProps['styles'] = {
  textarea: {
    fontSize: '14px',
    resize: 'vertical',
    fontWeight: 200,
  },
}

const stylesFn: MentionsProps['styles'] = ({ props }) => {
  if (props.variant === 'filled') {
    return {
      root: {
        border: '1px solid #722ed1',
      },
      popup: {
        border: '1px solid #722ed1',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-mentions
      :options="options"
      :classes="classes"
      :styles="stylesObject"
      placeholder="Object"
      :rows="2"
    />
    <a-mentions
      :options="options"
      :classes="classes"
      :styles="stylesFn"
      variant="filled"
      placeholder="Function"
    />
  </a-flex>
</template>

<style scoped>
:deep(.mentions-demo-root) {
  border: 1px solid #1677ff;
  border-radius: 8px;
  width: 300px;
}
</style>
```
### autoSize debug
autoSize debug
```vue
<script setup lang="ts">
import type { MentionsEmits, MentionsProps } from 'antdv-next'

const options: MentionsProps['options'] = [
  {
    value: 'afc163',
    label: 'afc163',
  },
  {
    value: 'zombieJ',
    label: 'zombieJ',
  },
  {
    value: 'yesmeck',
    label: 'yesmeck',
  },
]

const handleChange: MentionsEmits['change'] = (value) => {
  console.log('Change:', value)
}

const handleSelect: MentionsEmits['select'] = (option) => {
  console.log('select', option)
}
</script>

<template>
  <a-flex vertical gap="large">
    <a-mentions
      placeholder="can resize"
      :options="options"
      @change="handleChange"
      @select="handleSelect"
    />
    <a-mentions
      placeholder="disable resize"
      :options="options"
      :style="{ resize: 'none' }"
      @change="handleChange"
      @select="handleSelect"
    />
  </a-flex>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| loading | Indicate loading state | boolean | - | - | × |
| status | Set validation status | InputStatus | - | - | × |
| options | Option Configuration | MentionsOptionProps[] | \[] | - | × |
| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) =&gt; boolean | - | - | × |
| popupClassName | The className of dropdown menu | string | - | - | × |
| popupRender | Customize the dropdown menu rendering | (menu: VueNode) =&gt; VueNode | - | - | × |
| variant | Variants of Input | Variant | `outlined` | - | ✓ |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | MentionsClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | MentionsStylesType | - | - | ✓ |
| size | The size of the input box | `large` \| `medium` \| `small` | - | - | × |
| labelRender | Customize the rendering of option content | (ctx: &#123; option: MentionsOptionProps, index: number &#125;) =&gt; any | - | - | × |
| allowClear | If allow to remove mentions content with clear icon | boolean \| &#123;     clearIcon?: VueNode   &#125; | false | - | ✓ |
| disabled | Whether disabled | boolean | - | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| focus | Trigger when mentions get focus | (event: FocusEvent) =&gt; void | - |
| blur | Trigger when mentions lose focus | (event: FocusEvent) =&gt; void | - |
| change | Trigger when value changed | (value: string) =&gt; void | - |
| select | Trigger when user select the option | (option: MentionsOptionProps, prefix: string) =&gt; void | - |
| popupScroll | Trigger when mentions scroll | (event: Event) =&gt; void | - |
| search | Trigger when prefix hit | (text: string, prefix: string) =&gt; void | - |
| update:value | Triggered when value updates, used for `v-model:value` | (value: string) =&gt; void | - |

### Option {#option}

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| value | Value inserted when selected | string | - |
| key | The key value of the option | string | - |
| disabled | Whether the option is disabled | boolean | - |
| class | Class name of the option | string | - |
| style | The style of the option | CSSProperties | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| suffix | Customize the suffix content | () =&gt; any | - |
| popupRender | Customize the dropdown menu rendering | (menu: VueNode) =&gt; VueNode | - |
| labelRender | Customize the rendering of option content | (ctx: &#123; option: MentionsOptionProps, index: number &#125;) =&gt; any | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Mentions" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Menu
URL: https://www.antdv-next.com/components/menu.md
---

## When To Use {#when-to-use}

Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Antdv Next offers two navigation options: top and side. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.

More layouts with navigation: [Layout](/components/layout).

## Notes for developers {#notes-for-developers}

- Menu is rendered as a `ul` element, so it only supports [`li` and `script-supporting` elements](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element) as children nodes. Your customized node should be wrapped by `Menu.Item`.
- Menu needs to collect its node structure, so its children should be `Menu.*` or encapsulated components.

## Examples {#examples}

### Top Navigation
Horizontal top navigation menu.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'

const current = ref('mail')

function handleClick(e: any) {
  console.log('click ', e)
  current.value = e.key
}

const items: MenuItemType[] = [
  {
    label: 'Navigation One',
    key: 'mail',
    icon: MailOutlined,
  },
  {
    label: 'Navigation Two',
    key: 'app',
    icon: AppstoreOutlined,
    disabled: true,
  },
  {
    label: 'Navigation Three - Submenu',
    key: 'SubMenu',
    icon: SettingOutlined,
    children: [
      {
        type: 'group',
        label: 'Item 1',
        children: [
          { label: 'Option 1', key: 'setting:1' },
          { label: 'Option 2', key: 'setting:2' },
        ],
      },
      {
        type: 'group',
        label: 'Item 2',
        children: [
          { label: 'Option 3', key: 'setting:3' },
          { label: 'Option 4', key: 'setting:4' },
        ],
      },
    ],
  },
  {
    key: 'alipay',
    label: h(
      'a',
      {
        href: 'https://ant.design',
        target: '_blank',
        rel: 'noopener noreferrer',
      },
      'Navigation Four - Link',
    ),
  },
]
</script>

<template>
  <a-menu
    :selected-keys="[current]"
    mode="horizontal"
    :items="items"
    @click="handleClick"
  />
</template>
```
### Inline menu
Vertical menu with inline submenus.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

function handleClick(e: any) {
  console.log('click ', e)
}

const items: MenuItemType[] = [
  {
    key: 'sub1',
    label: 'Navigation One',
    icon: MailOutlined,
    children: [
      {
        key: 'g1',
        label: 'Item 1',
        type: 'group',
        children: [
          { key: '1', label: 'Option 1' },
          { key: '2', label: 'Option 2' },
        ],
      },
      {
        key: 'g2',
        label: 'Item 2',
        type: 'group',
        children: [
          { key: '3', label: 'Option 3' },
          { key: '4', label: 'Option 4' },
        ],
      },
    ],
  },
  {
    key: 'sub2',
    label: 'Navigation Two',
    icon: AppstoreOutlined,
    children: [
      { key: '5', label: 'Option 5' },
      { key: '6', label: 'Option 6' },
      {
        key: 'sub3',
        label: 'Submenu',
        children: [
          { key: '7', label: 'Option 7' },
          { key: '8', label: 'Option 8' },
        ],
      },
    ],
  },
  {
    type: 'divider',
  },
  {
    key: 'sub4',
    label: 'Navigation Three',
    icon: SettingOutlined,
    children: [
      { key: '9', label: 'Option 9' },
      { key: '10', label: 'Option 10' },
      { key: '11', label: 'Option 11' },
      { key: '12', label: 'Option 12' },
    ],
  },
  {
    key: 'grp',
    label: 'Group',
    type: 'group',
    children: [
      { key: '13', label: 'Option 13' },
      { key: '14', label: 'Option 14' },
    ],
  },
]
const openKeys = ref(['sub1'])
const selectedKeys = ref(['1'])
</script>

<template>
  <a-menu
    v-model:open-keys="openKeys"
    v-model:selected-keys="selectedKeys"
    style="width: 256px"
    mode="inline"
    :items="items"
    @click="handleClick"
  />
</template>
```
### Collapsed inline menu
Inline menu could be collapsed.

Here is [a complete demo](/components/layout/#layout-demo-side) with sider layout.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from '@antdv-next/icons'
import { ref } from 'vue'

const collapsed = ref(false)

function toggleCollapsed() {
  collapsed.value = !collapsed.value
}

const items: MenuItemType[] = [
  { key: '1', icon: PieChartOutlined, label: 'Option 1' },
  { key: '2', icon: DesktopOutlined, label: 'Option 2' },
  { key: '3', icon: ContainerOutlined, label: 'Option 3' },
  {
    key: 'sub1',
    label: 'Navigation One',
    icon: MailOutlined,
    children: [
      { key: '5', label: 'Option 5' },
      { key: '6', label: 'Option 6' },
      { key: '7', label: 'Option 7' },
      { key: '8', label: 'Option 8' },
    ],
  },
  {
    key: 'sub2',
    label: 'Navigation Two',
    icon: AppstoreOutlined,
    children: [
      { key: '9', label: 'Option 9' },
      { key: '10', label: 'Option 10' },
      {
        key: 'sub3',
        label: 'Submenu',
        children: [
          { key: '11', label: 'Option 11' },
          { key: '12', label: 'Option 12' },
        ],
      },
    ],
  },
]
</script>

<template>
  <div style="width: 256px">
    <a-button
      type="primary"
      style="margin-bottom: 16px"
      @click="toggleCollapsed"
    >
      <MenuUnfoldOutlined v-if="collapsed" />
      <MenuFoldOutlined v-else />
    </a-button>
    <a-menu
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      :items="items"
    />
  </div>
</template>
```
### Open current submenu only
Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const items: MenuItemType[] = [
  {
    key: '1',
    icon: MailOutlined,
    label: 'Navigation One',
    children: [
      { key: '11', label: 'Option 1' },
      { key: '12', label: 'Option 2' },
      { key: '13', label: 'Option 3' },
      { key: '14', label: 'Option 4' },
    ],
  },
  {
    key: '2',
    icon: AppstoreOutlined,
    label: 'Navigation Two',
    children: [
      { key: '21', label: 'Option 1' },
      { key: '22', label: 'Option 2' },
      {
        key: '23',
        label: 'Submenu',
        children: [
          { key: '231', label: 'Option 1' },
          { key: '232', label: 'Option 2' },
          { key: '233', label: 'Option 3' },
        ],
      },
      {
        key: '24',
        label: 'Submenu 2',
        children: [
          { key: '241', label: 'Option 1' },
          { key: '242', label: 'Option 2' },
          { key: '243', label: 'Option 3' },
        ],
      },
    ],
  },
  {
    key: '3',
    icon: SettingOutlined,
    label: 'Navigation Three',
    children: [
      { key: '31', label: 'Option 1' },
      { key: '32', label: 'Option 2' },
      { key: '33', label: 'Option 3' },
      { key: '34', label: 'Option 4' },
    ],
  },
]

interface LevelKeysProps {
  key?: string
  children?: LevelKeysProps[]
}

function getLevelKeys(itemList: LevelKeysProps[]) {
  const keyLevelMap: Record<string, number> = {}
  const func = (list: LevelKeysProps[], level = 1) => {
    list.forEach((item) => {
      if (item.key) {
        keyLevelMap[item.key] = level
      }
      if (item.children) {
        func(item.children, level + 1)
      }
    })
  }
  func(itemList)
  return keyLevelMap
}

const levelKeys = getLevelKeys(items as LevelKeysProps[])
const stateOpenKeys = ref<string[]>(['2', '23'])

function onOpenChange(openKeys: string[]) {
  const currentOpenKey = openKeys.find(key => !stateOpenKeys.value.includes(key))
  if (currentOpenKey !== undefined) {
    const repeatIndex = openKeys
      .filter(key => key !== currentOpenKey)
      .findIndex(key => levelKeys[key] === levelKeys[currentOpenKey])

    stateOpenKeys.value = openKeys
      .filter((_, index) => index !== repeatIndex)
      .filter(key => levelKeys[key]! <= levelKeys[currentOpenKey]!)
  }
  else {
    stateOpenKeys.value = openKeys
  }
}
</script>

<template>
  <a-menu
    mode="inline"
    style="width: 256px"
    :default-selected-keys="['231']"
    :open-keys="stateOpenKeys"
    :items="items"
    @open-change="onOpenChange"
  />
</template>
```
### Vertical menu
Submenus open as pop-ups.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@antdv-next/icons'

function onClick(e: any) {
  console.log('click', e)
}

const items: MenuItemType[] = [
  {
    key: 'sub1',
    icon: MailOutlined,
    label: 'Navigation One',
    children: [
      {
        key: '1-1',
        label: 'Item 1',
        type: 'group',
        children: [
          { key: '1', label: 'Option 1' },
          { key: '2', label: 'Option 2' },
        ],
      },
      {
        key: '1-2',
        label: 'Item 2',
        type: 'group',
        children: [
          { key: '3', label: 'Option 3' },
          { key: '4', label: 'Option 4' },
        ],
      },
    ],
  },
  {
    key: 'sub2',
    icon: AppstoreOutlined,
    label: 'Navigation Two',
    children: [
      { key: '5', label: 'Option 5' },
      { key: '6', label: 'Option 6' },
      {
        key: 'sub3',
        label: 'Submenu',
        children: [
          { key: '7', label: 'Option 7' },
          { key: '8', label: 'Option 8' },
        ],
      },
    ],
  },
  {
    key: 'sub4',
    label: 'Navigation Three',
    icon: SettingOutlined,
    children: [
      { key: '9', label: 'Option 9' },
      { key: '10', label: 'Option 10' },
      { key: '11', label: 'Option 11' },
      { key: '12', label: 'Option 12' },
    ],
  },
]
</script>

<template>
  <a-menu
    style="width: 256px"
    mode="vertical"
    :items="items"
    @click="onClick"
  />
</template>
```
### Menu Themes
There are two built-in themes: `light` and `dark`. The default value is `light`.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const theme = ref<'dark' | 'light'>('dark')
const current = ref('1')

const items: MenuItemType[] = [
  {
    key: 'sub1',
    label: 'Navigation One',
    icon: MailOutlined,
    children: [
      { key: '1', label: 'Option 1' },
      { key: '2', label: 'Option 2' },
      { key: '3', label: 'Option 3' },
      { key: '4', label: 'Option 4' },
    ],
  },
  {
    key: 'sub2',
    label: 'Navigation Two',
    icon: AppstoreOutlined,
    children: [
      { key: '5', label: 'Option 5' },
      { key: '6', label: 'Option 6' },
      {
        key: 'sub3',
        label: 'Submenu',
        children: [
          { key: '7', label: 'Option 7' },
          { key: '8', label: 'Option 8' },
        ],
      },
    ],
  },
  {
    key: 'sub4',
    label: 'Navigation Three',
    icon: SettingOutlined,
    children: [
      { key: '9', label: 'Option 9' },
      { key: '10', label: 'Option 10' },
      { key: '11', label: 'Option 11' },
      { key: '12', label: 'Option 12' },
    ],
  },
]

function changeTheme(value: boolean) {
  theme.value = value ? 'dark' : 'light'
}

function onClick(e: any) {
  console.log('click ', e)
  current.value = e.key
}
</script>

<template>
  <a-switch
    :checked="theme === 'dark'"
    checked-children="Dark"
    un-checked-children="Light"
    @change="changeTheme"
  />
  <br>
  <br>
  <a-menu
    :theme="theme"
    :selected-keys="[current]"
    style="width: 256px"
    :default-open-keys="['sub1']"
    mode="inline"
    :items="items"
    @click="onClick"
  />
</template>
```
### Sub-menu theme
You can config SubMenu theme with `theme` prop to enable different theme color effect. This sample is dark for root and light for SubMenu.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { MailOutlined } from '@antdv-next/icons'
import { computed, ref } from 'vue'

const menuTheme = ref<'dark' | 'light'>('light')
const current = ref('1')

function changeTheme(value: boolean) {
  menuTheme.value = value ? 'dark' : 'light'
}

function onClick(e: any) {
  current.value = e.key
}

const items = computed<MenuItemType[]>(() => [
  {
    key: 'sub1',
    icon: MailOutlined,
    label: 'Navigation One',
    theme: menuTheme.value,
    children: [
      { key: '1', label: 'Option 1' },
      { key: '2', label: 'Option 2' },
      { key: '3', label: 'Option 3' },
    ],
  },
  { key: '5', label: 'Option 5' },
  { key: '6', label: 'Option 6' },
])
</script>

<template>
  <div>
    <a-switch
      :checked="menuTheme === 'dark'"
      checked-children="Dark"
      un-checked-children="Light"
      @change="changeTheme"
    />
    <br>
    <br>
    <a-menu
      style="width: 256px"
      :open-keys="['sub1']"
      :selected-keys="[current]"
      mode="vertical"
      theme="dark"
      :items="items"
      :get-popup-container="(node: any) => node.parentNode"
      @click="onClick"
    />
  </div>
</template>
```
### Switch the menu type
Show the dynamic switching mode (between `inline` and `vertical`).
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import {
  AppstoreOutlined,
  CalendarOutlined,
  LinkOutlined,
  MailOutlined,
  SettingOutlined,
} from '@antdv-next/icons'
import { h, ref } from 'vue'

const mode = ref<'vertical' | 'inline'>('inline')
const theme = ref<'dark' | 'light'>('light')

const items: MenuItemType[] = [
  {
    key: '1',
    icon: MailOutlined,
    label: 'Navigation One',
  },
  {
    key: '2',
    icon: CalendarOutlined,
    label: 'Navigation Two',
  },
  {
    key: 'sub1',
    label: 'Navigation Two',
    icon: AppstoreOutlined,
    children: [
      { key: '3', label: 'Option 3' },
      { key: '4', label: 'Option 4' },
      {
        key: 'sub1-2',
        label: 'Submenu',
        children: [
          { key: '5', label: 'Option 5' },
          { key: '6', label: 'Option 6' },
        ],
      },
    ],
  },
  {
    key: 'sub2',
    label: 'Navigation Three',
    icon: SettingOutlined,
    children: [
      { key: '7', label: 'Option 7' },
      { key: '8', label: 'Option 8' },
      { key: '9', label: 'Option 9' },
      { key: '10', label: 'Option 10' },
    ],
  },
  {
    key: 'link',
    icon: LinkOutlined,
    label: h(
      'a',
      {
        href: 'https://ant.design',
        target: '_blank',
        rel: 'noopener noreferrer',
      },
      'Antdv Next',
    ),
  },
]

function changeMode(value: boolean) {
  mode.value = value ? 'vertical' : 'inline'
}

function changeTheme(value: boolean) {
  theme.value = value ? 'dark' : 'light'
}
</script>

<template>
  <a-switch :checked="mode === 'vertical'" @change="changeMode" />
  Change Mode
  <a-divider type="vertical" />
  <a-switch :checked="theme === 'dark'" @change="changeTheme" />
  Change Style
  <br>
  <br>
  <a-menu
    style="width: 256px"
    :default-selected-keys="['1']"
    :default-open-keys="['sub1']"
    :mode="mode"
    :theme="theme"
    :items="items"
  />
</template>
```
### SFC Mode (Nested)
Build an SFC menu with declarative `a-menu-item` and `a-sub-menu`, equivalent to the `items` structure.
```vue
<script setup lang="ts">
import {
  AppstoreOutlined,
  CalendarOutlined,
  LinkOutlined,
  MailOutlined,
  SettingOutlined,
} from '@antdv-next/icons'
import { computed, ref, shallowRef, watch } from 'vue'

const mode = ref<'vertical' | 'inline'>('inline')
const theme = ref<'dark' | 'light'>('light')
const collapsed = ref(false)
const openKeys = ref<string[]>(['sub1'])
const cachedOpenKeys = ref<string[]>(['sub1'])
const inlineCollapsed = computed(() => mode.value === 'inline' && collapsed.value)
const expandAllChecked = computed(() => !collapsed.value && openKeys.value.length > 0)

watch(openKeys, (keys) => {
  if (!collapsed.value) {
    cachedOpenKeys.value = [...keys]
  }
}, { deep: true })

function changeExpanded(value: boolean) {
  if (collapsed.value) {
    return
  }

  openKeys.value = value ? ['sub1', 'sub1-2', 'sub2'] : []
}

function changeCollapsed(value: boolean) {
  collapsed.value = value
  if (value) {
    openKeys.value = []
  }
  else {
    openKeys.value = [...cachedOpenKeys.value]
  }
}

function changeMode(value: boolean) {
  mode.value = value ? 'vertical' : 'inline'
}

function changeTheme(value: boolean) {
  theme.value = value ? 'dark' : 'light'
}
const selectedKeys = shallowRef(['1'])
</script>

<template>
  <a-switch :checked="mode === 'vertical'" @change="changeMode" />
  Change Mode
  <a-divider type="vertical" />
  <a-switch :checked="collapsed" @change="changeCollapsed" />
  Inline Collapsed
  <a-divider type="vertical" />
  <a-switch :checked="expandAllChecked" :disabled="collapsed" @change="changeExpanded" />
  Expand All
  <a-divider type="vertical" />
  <a-switch :checked="theme === 'dark'" @change="changeTheme" />
  Change Style
  <br>
  <br>
  <div style="width: 256px">
    <a-menu
      v-model:selected-keys="selectedKeys"
      v-model:open-keys="openKeys"
      :inline-collapsed="inlineCollapsed"
      :mode="mode"
      :theme="theme"
    >
      <a-menu-item key="1">
        <template #icon>
          <MailOutlined />
        </template>
        Navigation One
      </a-menu-item>

      <a-menu-item key="2">
        <template #icon>
          <CalendarOutlined />
        </template>
        Navigation Two
      </a-menu-item>

      <a-sub-menu key="sub1">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <template #title>
          Navigation Two
        </template>

        <a-menu-item key="3">
          Option 3
        </a-menu-item>
        <a-menu-item key="4">
          Option 4
        </a-menu-item>

        <a-sub-menu key="sub1-2">
          <template #title>
            Submenu
          </template>

          <a-menu-item key="5">
            Option 5
          </a-menu-item>
          <a-menu-item key="6">
            Option 6
          </a-menu-item>
        </a-sub-menu>
      </a-sub-menu>

      <a-sub-menu key="sub2">
        <template #icon>
          <SettingOutlined />
        </template>
        <template #title>
          Navigation Three
        </template>

        <a-menu-item key="7">
          Option 7
        </a-menu-item>
        <a-menu-item key="8">
          Option 8
        </a-menu-item>
        <a-menu-item key="9">
          Option 9
        </a-menu-item>
        <a-menu-item key="10">
          Option 10
        </a-menu-item>
      </a-sub-menu>

      <a-menu-item key="link">
        <template #icon>
          <LinkOutlined />
        </template>
        <a
          href="https://antdv-next.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          Antdv Next
        </a>
      </a-menu-item>
    </a-menu>
  </div>
</template>
```
### Slot Render (items mode)
Customize menu item rendering with `labelRender`, `extraRender`, and `iconRender` slots.
```vue
<script setup lang="ts">
import type { MenuItemType } from 'antdv-next'
import { ClockCircleFilled } from '@antdv-next/icons'

const items: MenuItemType[] = [
  {
    key: 'sub1',
    label: 'Navigation One',
    children: [
      {
        key: 'g1',
        label: 'Item 1',
        type: 'group',
        children: [
          { key: '1', label: 'Option 1' },
          { key: '2', label: 'Option 2' },
        ],
      },
      {
        key: 'g2',
        label: 'Item 2',
        type: 'group',
        children: [
          { key: '3', label: 'Option 3' },
          { key: '4', label: 'Option 4' },
        ],
      },
    ],
  },
  {
    key: 'sub2',
    label: 'Navigation Two',
    children: [
      { key: '5', label: 'Option 5' },
      { key: '6', label: 'Option 6' },
      {
        key: 'sub3',
        label: 'Submenu',
        children: [
          { key: '7', label: 'Option 7' },
          { key: '8', label: 'Option 8' },
        ],
      },
    ],
  },
  {
    type: 'divider',
  },
  {
    key: 'sub4',
    label: 'Navigation Three',
    children: [
      { key: '9', label: 'Option 9' },
      { key: '10', label: 'Option 10' },
      { key: '11', label: 'Option 11' },
      { key: '12', label: 'Option 12' },
    ],
  },
  {
    key: 'grp',
    label: 'Group',
    type: 'group',
    children: [
      { key: '13', label: 'Option 13' },
      { key: '14', label: 'Option 14' },
    ],
  },
]
</script>

<template>
  <a-menu
    style="width: 320px"
    :default-open-keys="['sub1']"
    :default-selected-keys="['1']"
    mode="inline"
    :items="items"
  >
    <template #labelRender="item">
      <span class="menu-slot-label">
        {{ item.label }}
      </span>
    </template>

    <template #extraRender="item">
      <span
        v-if="item?.key && !item?.children && item?.type !== 'group'"
        class="menu-slot-extra"
      >
        #{{ item.key }}
      </span>
    </template>

    <template #iconRender="item">
      <span v-if="item?.key" class="menu-slot-icon">
        <ClockCircleFilled />
      </span>
    </template>
  </a-menu>
</template>

<style scoped>
.menu-slot-label {
  font-weight: 500;
}

.menu-slot-extra {
  color: #1677ff;
  font-size: 12px;
}

.menu-slot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  color: #fff;
  background: #1677ff;
}
</style>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Menu by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { MenuItemType, MenuProps } from 'antdv-next'
import { useCssModule } from 'vue'

const moduleStyles = useCssModule()

const items: MenuItemType[] = [
  {
    key: 'SubMenu',
    label: 'Navigation One',
    children: [
      {
        key: 'g1',
        label: 'Item 1',
        type: 'group',
        children: [
          { key: '1', label: 'Option 1' },
          { key: '2', label: 'Option 2' },
        ],
      },
    ],
  },
  { key: 'mail', label: 'Navigation Two' },
]

const classes: MenuProps['classes'] = {
  root: moduleStyles.root,
  item: moduleStyles.item,
}

const styles: MenuProps['styles'] = {
  root: { border: '1px solid #f0f0f0', padding: '8px', borderRadius: '4px' },
  item: { color: '#1677ff' },
  subMenu: { list: { color: '#fa541c' } },
}

const stylesFn: MenuProps['styles'] = (info) => {
  const hasSub = info.props.items?.[0]
  return {
    root: {
      backgroundColor: hasSub ? 'rgba(240,249,255, 0.6)' : '#fff',
    },
  }
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-menu :classes="classes" :items="items" :styles="styles" />
    <a-menu mode="inline" :classes="classes" :items="items" :styles="stylesFn" />
  </a-flex>
</template>

<style module>
.root {
  border: 1px solid #f0f0f0;
  max-width: 600px;
  padding: 8px;
  border-radius: 4px;
}

.item {
  color: #1677ff;
}
</style>
```
### Custom Submenu Render
Use the `popupRender` prop to customize submenu popup rendering.
```vue
<script setup lang="ts">
import type { MenuItemType, MenuProps } from 'antdv-next'
import { theme } from 'antdv-next'
import { computed, h } from 'vue'

const { token } = theme.useToken()

const popupStyle = computed(() => ({
  padding: `${token.value.padding}px`,
  minWidth: '480px',
  background: token.value.colorBgElevated,
  borderRadius: `${token.value.borderRadiusLG}px`,
  boxShadow: token.value.boxShadowSecondary,
}))

const headerStyle = computed(() => ({
  margin: 0,
  paddingBottom: `${token.value.paddingXS}px`,
  borderBottom: `1px solid ${token.value.colorSplit}`,
}))

const cardStyle = computed(() => ({
  padding: `${token.value.paddingSM}px`,
}))

const cardItemStyle = computed(() => ({
  borderRadius: `${token.value.borderRadius}px`,
  transition: `all ${token.value.motionDurationSlow}`,
  cursor: 'pointer',
}))

function renderMenuCard(title: string, description: string) {
  return h('div', { class: 'menu-card', style: cardStyle.value }, [
    h('div', { class: 'menu-card-title' }, title),
    h('div', { class: 'menu-card-desc' }, description),
  ])
}

const menuItems = computed<MenuItemType[]>(() => [
  {
    key: 'home',
    label: 'Home',
  },
  {
    key: 'features',
    label: 'Features',
    children: [
      {
        key: 'getting-started',
        label: renderMenuCard('Getting Started', 'Quick start guide and learn the basics.'),
        class: 'menu-card-item',
        style: cardItemStyle.value,
      },
      {
        key: 'components',
        label: renderMenuCard('Components', 'Explore our component library.'),
        class: 'menu-card-item',
        style: cardItemStyle.value,
      },
      {
        key: 'templates',
        label: renderMenuCard('Templates', 'Ready-to-use template designs.'),
        class: 'menu-card-item',
        style: cardItemStyle.value,
      },
    ],
  },
  {
    key: 'resources',
    label: 'Resources',
    children: [
      {
        key: 'blog',
        label: renderMenuCard('Blog', 'Latest updates and articles.'),
        class: 'menu-card-item',
        style: cardItemStyle.value,
      },
      {
        key: 'community',
        label: renderMenuCard('Community', 'Join our developer community.'),
        class: 'menu-card-item',
        style: cardItemStyle.value,
      },
    ],
  },
])

const popupRender: MenuProps['popupRender'] = (node, info) => {
  const title = info.item.title || info.item.key
  return h('div', { class: 'menu-popup', style: popupStyle.value }, [
    h('div', { class: 'menu-popup-title', style: headerStyle.value }, title),
    node,
  ])
}

const themeConfig = {
  components: {
    Menu: {
      popupBg: '#fff',
      horizontalItemSelectedColor: '#1677ff',
      horizontalItemHoverColor: '#1677ff',
    },
  },
}
</script>

<template>
  <a-config-provider :theme="themeConfig">
    <a-menu mode="horizontal" :items="menuItems" :popup-render="popupRender" />
  </a-config-provider>
</template>

<style scoped>
.menu-popup :deep(.ant-menu) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 8px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.menu-popup :deep(.ant-menu-item) {
  height: auto;
  line-height: 1.4;
}

.menu-popup :deep(.menu-card-item) {
  padding: 0;
}

.menu-popup :deep(.menu-card-item:hover) {
  background: rgba(0, 0, 0, 0.02);
}

.menu-popup :deep(.ant-menu-title-content) {
  display: block;
}

.menu-card-title {
  font-weight: 600;
  line-height: 1.4;
}

.menu-card-desc {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | MenuClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | MenuStylesType | - | - | ✓ |
| rootClass | Root container class | string | - | - | × |
| defaultOpenKeys | Array with the keys of default opened sub menus | string[] | - | - | × |
| defaultSelectedKeys | Array with the keys of default selected menu items | string[] | - | - | × |
| expandIcon | Custom expand icon of submenu | VueNode \| ((props: SubMenuProps & { isSubMenu: boolean }) => VueNode) | - | - | ✓ |
| forceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | - | × |
| inlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | - | × |
| inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | - | × |
| items | Menu item content | ItemType[] | - | - | × |
| mode | Type of menu | `vertical` \| `horizontal` \| `inline` | `vertical` | - | × |
| multiple | Allows selection of multiple items | boolean | false | - | × |
| openKeys | Array with the keys of currently opened sub-menus | string[] | - | - | × |
| overflowedIndicator | Customized the ellipsis icon when menu is collapsed horizontally | VueNode | `<EllipsisOutlined />` | - | × |
| selectable | Allows selecting menu items | boolean | true | - | × |
| selectedKeys | Array with the keys of currently selected menu items | string[] | - | - | × |
| subMenuCloseDelay | Delay time to hide submenu when mouse leaves (in seconds) | number | 0.1 | - | × |
| subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | - | × |
| theme | Color theme of the menu | `light` \| `dark` | `light` | - | × |
| triggerSubMenuAction | Which action can trigger submenu open/close | `hover` \| `click` | `hover` | - | × |
| getPopupContainer | To set the container of the submenu popup. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition | (triggerNode: HTMLElement) => HTMLElement | () => document.body | - | × |
| itemIcon | Custom menu item icon render | (props: MenuItemProps & RenderIconInfo) => any | - | - | × |
| labelRender | Custom label render | (item: RenderItem) => any | - | - | × |
| iconRender | Custom icon render (items mode) | (item: RenderItem) => any | - | - | × |
| extraRender | Custom extra render | (item: RenderItem) => any | - | - | × |
| popupRender | Custom popup renderer for submenu | (node: VueNode, info: { item: SubMenuProps; keys: string[] }) => VueNode | - | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | Called when a menu item is clicked | (info: MenuInfo) => void | - |
| select | Called when a menu item is selected | (info: SelectInfo) => void | - |
| deselect | Called when a menu item is deselected (multiple mode only) | (info: SelectInfo) => void | - |
| openChange | Called when sub-menus are opened or closed | (openKeys: string[]) => void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| expandIcon | Custom expand icon | () => any | - |
| labelRender | Customize label content | (item: RenderItem) => any | - |
| iconRender | Customize item icon (items mode) | (item: RenderItem) => any | - |
| extraRender | Customize extra content | (item: RenderItem) => any | - |
| itemIcon | Custom item icon | (props: MenuItemProps & RenderIconInfo) => any | - |

### Methods

| Method | Description | Type | Version |
| --- | --- | --- | --- |
| menu | Menu ref | VcMenuRef \| null | - |
| focus | Focus menu | (options?: FocusOptions) => void | - |

## Types

### ItemType

> type ItemType = MenuItemType | SubMenuType | MenuItemGroupType | MenuDividerType | null;

#### MenuItemType

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| danger | Display the danger style | boolean | false | - |
| disabled | Whether menu item is disabled | boolean | false | - |
| extra | The extra of the menu item | VueNode | - | - |
| icon | The icon of the menu item | VueNode | - | - |
| key | Unique ID of the menu item | string | - | - |
| label | Menu label | VueNode | - | - |
| title | Set display title for collapsed item | string | - | - |

#### SubMenuType

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| children | Sub-menus or sub-menu items | ItemType[] | - | - |
| disabled | Whether sub-menu is disabled | boolean | false | - |
| icon | Icon of sub menu | VueNode | - | - |
| key | Unique ID of the sub-menu | string | - | - |
| label | Menu label | VueNode | - | - |
| popupClassName | Sub-menu class name, not working when `mode="inline"` | string | - | - |
| popupOffset | Sub-menu offset, not working when `mode="inline"` | [number, number] | - | - |
| theme | Color theme of the SubMenu (inherits from Menu by default) | `light` \| `dark` | - | - |
| onTitleClick | Callback executed when the sub-menu title is clicked | (info: { key: string; domEvent: MouseEvent }) => void | - | - |
| popupRender | Custom popup renderer for current sub-menu | (node: VueNode, info: { item: SubMenuProps; keys: string[] }) => VueNode | - | - |

#### MenuItemGroupType

Define `type` as `group` to make as group:

```ts
const groupItem = {
  type: 'group', // Must have
  label: 'My Group',
  children: [],
}
```

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| children | Sub-menu items | MenuItemType[] | - | - |
| label | The title of the group | VueNode | - | - |

#### MenuDividerType

Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu. Need define the `type` as `divider`:

```ts
const dividerItem = {
  type: 'divider', // Must have
}
```

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| dashed | Whether line is dashed | boolean | false | - |

## FAQ

### Why will Menu's children be rendered twice? {#faq-render-twice}

Menu collects structure info with [twice-render](https://github.com/react-component/menu/blob/f4684514096d6b7123339cbe72e7b0f68db0bce2/src/Menu.tsx#L543) to support HOC usage. Merging into one render may cause the logic to become much more complex. Contributions to help improve the collection logic are welcomed.

### Why Menu do not responsive collapse in Flex layout? {#faq-flex-layout}

Menu will render fully item in flex layout and then collapse it. You need tell flex not consider Menu width to enable responsive ([online demo](https://codesandbox.io/s/ding-bu-dao-hang-antd-4-21-7-forked-5e3imy?file=/demo.js)):

```html
<div style="display: flex;">
  <div style="flex: none;">Some Content</div>
  <a-menu style="min-width: 0; flex: auto;" />
</div>
```

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Menu"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Message
URL: https://www.antdv-next.com/components/message.md
---

## When To Use {#when-to-use}

- To provide feedback such as success, warning, error etc.
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.

## Examples {#examples}

### Hooks usage (recommended)
Use `message.useMessage` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `message` static method, because static method cannot consume context, and ConfigProvider data will not work.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()

function info() {
  messageApi.info('Hello, Antdv Next!')
}
</script>

<template>
  <ContextHolder />
  <a-button type="primary" @click="info">
    Display normal message
  </a-button>
</template>
```
### Other types of message
Messages of success, error and warning types.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()

function success() {
  messageApi.open({
    type: 'success',
    content: 'This is a success message',
  })
}

function error() {
  messageApi.open({
    type: 'error',
    content: 'This is an error message',
  })
}

function warning() {
  messageApi.open({
    type: 'warning',
    content: 'This is a warning message',
  })
}
</script>

<template>
  <ContextHolder />
  <a-space>
    <a-button @click="success">
      Success
    </a-button>
    <a-button @click="error">
      Error
    </a-button>
    <a-button @click="warning">
      Warning
    </a-button>
  </a-space>
</template>
```
### Customize duration
Customize message display duration from default `3s` to `10s`.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()

function success() {
  messageApi.open({
    type: 'success',
    content: 'This is a prompt message for success, and it will disappear in 10 seconds',
    duration: 10,
  })
}
</script>

<template>
  <ContextHolder />
  <a-button @click="success">
    Customized display duration
  </a-button>
</template>
```
### Stacked messages
Stack configuration, disabled by default. Messages will be stacked when the amount is over `threshold`. Only the latest message is shown in the collapsed stack.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'
import { computed, ref } from 'vue'

const enabled = ref(true)
const threshold = ref(3)
const indexRef = ref(0)

const stackConfig = computed(() => ({
  stack: enabled.value
    ? {
        threshold: threshold.value,
      }
    : false,
}))

const [messageApi, ContextHolder] = message.useMessage(stackConfig)

function openMessage() {
  indexRef.value += 1
  const isOdd = indexRef.value % 2 === 1

  messageApi.open({
    type: 'info',
    content: isOdd
      ? `Message ${indexRef.value}: This is a stacked message.`
      : `Message ${indexRef.value}: This is a slightly longer stacked message.`,
    duration: 0,
  })
}
</script>

<template>
  <ContextHolder />
  <a-space size="large">
    <a-space :style="{ width: '100%' }">
      <span>Enabled:</span>
      <a-switch
        v-model:checked="enabled"
        aria-label="Enable message stack"
      />
    </a-space>
    <a-space :style="{ width: '100%' }">
      <span>Threshold:</span>
      <a-input-number
        v-model:value="threshold"
        aria-label="Stack threshold"
        :disabled="!enabled"
        :step="1"
        :min="1"
        :max="10"
      />
    </a-space>
  </a-space>
  <a-divider />
  <a-space>
    <a-button type="primary" @click="openMessage">
      <span v-text="'Open the message box'" />
    </a-button>
    <a-button @click="messageApi.destroy()">
      <span v-text="'Destroy all'" />
    </a-button>
  </a-space>
</template>
```
### Message with loading indicator
Display a global loading indicator, which is dismissed by itself asynchronously.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()
function success() {
  const close = messageApi.open({
    type: 'loading',
    content: 'Action in progress..',
    duration: 0,
  })
  // Dismiss manually and asynchronously
  setTimeout(close, 2500)
}
</script>

<template>
  <ContextHolder />
  <a-button @click="success">
    Display a loading indicator
  </a-button>
</template>
```
### Promise interface
`message` provides a promise interface for `onClose`. The above example will display a new message when the old message is about to close.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()
function success() {
  messageApi.open({
    type: 'loading',
    content: 'Action in progress..',
    duration: 2.5,
  }).then(
    () => message.success('Loading finished', 2.5),
  ).then(
    () => message.info('Loading Finished ', 2.5),
  )
}
</script>

<template>
  <ContextHolder />
  <a-button @click="success">
    Display a loading indicator
  </a-button>
</template>
```
### Customized style
The `style` and `class` are available to customize Message.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()

function success() {
  messageApi.open({
    type: 'success',
    content: 'This is a prompt message with custom class and style',
    class: 'custom-message',
    style: {
      marginTop: '20vh',
    },
  })
}
</script>

<template>
  <ContextHolder />
  <a-button @click="success">
    Customized style
  </a-button>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of messages by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()

const defaultStyles: Record<string, CSSProperties> = {
  root: {
    backgroundColor: '#f6ffed',
    border: '2px solid #95de64',
    borderRadius: '16px',
    boxShadow: '4px 4px 0 #d9f7be',
  },
  icon: {
    color: '#237804',
  },
  title: {
    color: '#237804',
    fontWeight: 600,
  },
}

function stylesFn(info: { props: any }): Record<string, CSSProperties> {
  if (info.props.type === 'error') {
    return {
      root: {
        ...defaultStyles.root,
        backgroundColor: '#fff2f0',
        borderColor: '#ffccc7',
        boxShadow: '4px 4px 0 #ffccc7',
      },
      icon: {
        color: '#cf1322',
      },
      title: {
        color: '#cf1322',
        fontWeight: 600,
      },
    }
  }
  return defaultStyles
}

function showObjectStyle() {
  messageApi.open({
    type: 'success',
    content: 'This is a message with object styles',
    styles: defaultStyles,
  })
}

function showFunctionStyle() {
  messageApi.open({
    type: 'error',
    content: 'This is a message with function styles',
    styles: stylesFn as any,
  })
}
</script>

<template>
  <ContextHolder />
  <a-space>
    <a-button @click="showObjectStyle">
      Object style
    </a-button>
    <a-button type="primary" @click="showFunctionStyle">
      Function style
    </a-button>
  </a-space>
</template>
```
### Update Message Content
Update message content with unique `key`.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'

const key = 'updatable'

const [messageApi, ContextHolder] = message.useMessage()
function openMessage() {
  messageApi.open({
    key,
    type: 'loading',
    content: 'Loading...',
  })
  setTimeout(() => {
    messageApi.open({
      key,
      type: 'success',
      content: 'Loaded!',
      duration: 2,
    })
  }, 2500)
}
</script>

<template>
  <ContextHolder />
  <a-button type="primary" @click="openMessage">
    Open the message box
  </a-button>
</template>
```
### Static method (deprecated)
Static methods cannot consume Context provided by `ConfigProvider`. When enable `layer`, they may also cause style errors. Please use hooks version or `App` provided instance first.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'

function info() {
  message.info('This is an info message')
}
</script>

<template>
  <a-button type="primary" @click="info">
    Static Method
  </a-button>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Static Methods {#static-methods}

- `message.success(content, [duration], onClose)`
- `message.error(content, [duration], onClose)`
- `message.info(content, [duration], onClose)`
- `message.warning(content, [duration], onClose)`
- `message.loading(content, [duration], onClose)`
- `message.open(config)`
- `message.destroy(key?: Key)`
- `message.config(options)`
- `message.useMessage(config)`

### Arguments {#arguments}

| Argument | Description | Type | Default |
| --- | --- | --- | --- |
| content | The content of the message | VueNode \| ArgsProps | - |
| duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |
| onClose | Specify a function that will be called when the message is closed | () =&gt; void | - |

`afterClose` can be called in thenable interface:

- `message[level](content, [duration]).then(afterClose)`
- `message[level](content, [duration], onClose).then(afterClose)`

where `level` refers one static methods of `message`. The result of `then` method will be a Promise.

### Config {#config}

The properties of `config` are as follows:

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| class | Customized CSS class | string | - | - | ✓ |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | ArgsClassNamesType | - | - | ✓ |
| content | The content of the message | VueNode | - | - | × |
| duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 | - | × |
| icon | Customized Icon | VueNode | - | - | × |
| pauseOnHover | Keep the timer running or not on hover | boolean | true | - | × |
| key | The unique identifier of the Message | Key | - | - | × |
| style | Customized inline style | CSSProperties | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | ArgsStylesType | - | - | ✓ |
| type | Notice type | NoticeType | - | - | × |
| onClick | Specify a function that will be called when the message is clicked | (e: MouseEvent) =&gt; void | - | - | × |
| onClose | Specify a function that will be called when the message is closed | () =&gt; void | - | - | × |

### Global configuration {#global-config}

`message.config(options)`

```js
message.config({
  top: 100,
  duration: 2,
  maxCount: 3,
  rtl: true,
  prefixCls: 'my-message',
  stack: true,
})
```

| Argument | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| duration | Time before auto-dismiss, in seconds | number | 3 | - | × |
| getContainer | Return the mount node for Message, but still display at fullScreen | () =&gt; HTMLElement \| ShadowRoot | () =&gt; document.body | - | × |
| maxCount | Max message show, drop oldest if exceed limit | number | - | - | × |
| prefixCls | The prefix class name of message node | string | `ant-message` | - | × |
| rtl | Whether to enable RTL mode | boolean | false | - | × |
| stack | Stack mode. Messages are collapsed when the threshold is exceeded, and collapsed mode only shows the latest message | boolean \| &#123; threshold: number &#125; | false | 1.5.5 | × |
| top | Distance from top | string \| number | 8 | - | × |
| transitionName | Animation name | string | - | - | × |
| pauseOnHover | Keep the timer running or not on hover | boolean | true | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | ArgsClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | ArgsStylesType | - | - | ✓ |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Message"></ComponentTokenTable>

## FAQ

### Why I can not access context, ConfigProvider `locale/prefixCls/theme` in message? {#faq-context-redux}

Calling `message` methods will render a new instance which does not inherit the current context. When you need context info, use `message.useMessage` to get `api` and `ContextHolder`, then render it inside your component tree:

```vue
<script setup>
import { message } from 'antdv-next'

const [api, ContextHolder] = message.useMessage()
</script>

<template>
  <ContextHolder />
</template>
```

**Note:** You must insert `ContextHolder` into your children with hooks. You can use static methods if you do not need context connection.

> [App Package Component](/components/app) can be used to simplify `useMessage` and other methods that need to manually implant ContextHolder.

If you still need to use static methods and want them to read `locale`, `theme`, or other ConfigProvider settings, configure a global `holderRender` once:

```ts
import { App, ConfigProvider } from 'antdv-next'
import { h } from 'vue'
import zhCN from 'antdv-next/locale/zh_CN'

ConfigProvider.config({
  holderRender: children =>
    h(ConfigProvider, { locale: zhCN }, {
      default: () => h(App, null, () => children),
    }),
})
```

Then `message.info`, `message.success` and other static methods will render with that wrapped context.

### How to set static methods prefixCls? {#faq-set-prefix-cls}

You can config with [`ConfigProvider.config`](/components/config-provider#config).

---
Title: Modal
URL: https://www.antdv-next.com/components/modal.md
---

## When To Use {#when-to-use}

When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information.

Additionally, if you need to show a simple confirmation dialog, you can use [`App.useApp`](/components/app/) hooks.

## Examples {#examples}

### Basic
Basic modal.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const open = shallowRef(false)

function handleOk() {
  open.value = false
}
</script>

<template>
  <a-flex gap="small">
    <a-button type="primary" @click="open = true">
      Open Modal
    </a-button>
  </a-flex>
  <a-modal
    v-model:open="open"
    title="Basic Modal"
    :closable="{ 'aria-label': 'Custom Close Button' }"
    @ok="handleOk"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>
```
### Asynchronously close
Asynchronously close a modal dialog when the OK button is pressed. For example, you can use this pattern when you submit a form.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
const confirmLoading = ref(false)
const modalText = ref('Content of the modal')
function showModal() {
  open.value = true
}

function handleOk() {
  modalText.value = 'The modal will be closed after two seconds'
  confirmLoading.value = true
  setTimeout(() => {
    open.value = false
    confirmLoading.value = false
  }, 2000)
}
function handleCancel() {
  console.log('Clicked cancel button')
  open.value = false
}
</script>

<template>
  <a-button type="primary" @click="showModal">
    Open Modal with async logic
  </a-button>
  <a-modal
    v-model:open="open"
    title="Title"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>{{ modalText }}</p>
  </a-modal>
</template>
```
### Customized Footer
A more complex example which define a customized footer button bar. The dialog will change to loading state after clicking the submit button, and when the loading is done, the modal dialog will be closed.

You could set `footer` to `null` if you don't need default footer buttons.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
const open = ref(false)

function showModal() {
  open.value = true
}

function handleOk() {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    open.value = false
  }, 3000)
}

function handleCancel() {
  open.value = false
}
</script>

<template>
  <a-button type="primary" @click="showModal">
    Open Modal with customized footer
  </a-button>
  <a-modal
    v-model:open="open"
    title="Title"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #footer>
      <a-button key="back" @click="handleCancel">
        Return
      </a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
        Submit
      </a-button>
      <a-button key="link" href="https://google.com" target="_blank" type="primary" :loading="loading" @click="handleOk">
        Search on Google
      </a-button>
    </template>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>
```
### mask
mask effect.
```vue
<script setup lang="ts">
import { Modal } from 'antdv-next'

const modalConfig = {
  title: 'Title',
  content: 'Some contents...',
}

const [modal, ContextHolder] = Modal.useModal()

function showBlur() {
  modal.confirm({ ...modalConfig, mask: { blur: true } })
}

function showDimmed() {
  modal.confirm({ ...modalConfig, mask: { blur: false } })
}

function showNoMask() {
  modal.confirm({ ...modalConfig, mask: false })
}
</script>

<template>
  <a-space>
    <a-button @click="showBlur">
      blur
    </a-button>
    <a-button @click="showDimmed">
      Dimmed mask
    </a-button>
    <a-button @click="showNoMask">
      No mask
    </a-button>
  </a-space>
  <ContextHolder />
</template>
```
### Loading
Set the loading status of Modal.
```vue
<script lang="ts" setup>
import { ref } from 'vue'

const open = ref(false)
const loading = ref(true)
function showLoading() {
  open.value = true
  loading.value = true

  // Simple loading mock. You should add cleanup logic in real world.
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

<template>
  <a-button type="primary" @click="showLoading">
    Open Modal
  </a-button>
  <a-modal
    v-model:open="open"
    :loading="loading"
    @cancel="open = false"
  >
    <template #title>
      <p>Loading Modal</p>
    </template>
    <template #footer>
      <a-button type="primary" @click="showLoading">
        Reload
      </a-button>
    </template>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>
```
### Customized Footer render function
Customize the footer rendering function to support extensions on top of the original.
```vue
<script setup lang="ts">
import { Button, Modal } from 'antdv-next'
import { h, ref } from 'vue'

const open = ref(false)

function showModal() {
  open.value = true
}

function handleOk() {
  open.value = false
}
function handleCancel() {
  open.value = false
}

function handleConfirm() {
  Modal.confirm({
    title: 'Confirm',
    content: 'Bla bla ...',
    footer: ({ extra }: any) => {
      return [
        h(Button, undefined, { default: () => 'Custom Button' }),
        h(extra.OkBtn),
        h(extra.CancelBtn),
      ]
    },
  })
}
</script>

<template>
  <a-space>
    <a-button type="primary" @click="showModal">
      Open Modal
    </a-button>
    <a-button type="primary" @click="handleConfirm">
      Open Modal Confirm
    </a-button>
  </a-space>
  <a-modal
    v-model:open="open"
    title="Title"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #footer="{ extra }">
      <a-button> Custom Button</a-button>
      <component :is="extra.CancelBtn" />
      <component :is="extra.OkBtn" />
    </template>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>
```
### Use hooks to get context
Use `Modal.useModal` to get `contextHolder` with context accessible issue. Only hooks method support Promise `await` operation.
```vue
<script setup lang="ts">
import type { InjectionKey, Ref } from 'vue'
import { Modal } from 'antdv-next'
import { computed, defineComponent, h, inject, provide, ref } from 'vue'

const [modal, ContextModal] = Modal.useModal()

const ReachableContextKey: InjectionKey<Ref<string>> = Symbol('ReachableContextKey')
const UnreachableContextKey: InjectionKey<Ref<string | null>> = Symbol('UnreachableContextKey')

const ReachableConsumer = defineComponent(() => {
  const value = inject(ReachableContextKey, ref())
  return () => {
    return `Reachable: ${value.value}!`
  }
})

const UnreachableConsumer = defineComponent(() => {
  const value = inject(UnreachableContextKey, ref(null))
  return () => {
    return `Unreachable: ${value.value}!`
  }
})

const config = {
  title: 'Use Hook!',
  content: () => [
    h(ReachableConsumer),
    h('br'),
    h(UnreachableConsumer),
  ],
}
const ReachableProvider = defineComponent(
  (props, { slots }) => {
    provide(ReachableContextKey, computed(() => props.value))
    return () => {
      return slots?.default?.()
    }
  },
  {
    props: ['value'],
  },
)

const UnreachableProvider = defineComponent((props, { slots }) => {
  provide(UnreachableContextKey, computed(() => props.value))
  return () => {
    return slots?.default?.()
  }
}, {
  props: ['value'],
})

async function handleClick() {
  const confirmed = await modal.confirm(config)
  console.log('Confirmed: ', confirmed)
}
</script>

<template>
  <ReachableProvider value="Light">
    <a-space>
      <a-button @click="handleClick">
        Confirm
      </a-button>
      <a-button
        @click="() => {
          modal.warning(config)
        }"
      >
        Warning
      </a-button>
      <a-button
        @click="() => {
          modal.info(config)
        }"
      >
        Info
      </a-button>
      <a-button
        @click="() => {
          modal.error(config)
        }"
      >
        Error
      </a-button>
    </a-space>
    <ContextModal />
    <UnreachableProvider value="Bamboo" />
  </ReachableProvider>
</template>
```
### Internationalization
To customize the text of the buttons, you need to set `okText` and `cancelText` props.
```vue
<script lang="ts" setup>
import { ref } from 'vue'

const open = ref(false)

function showModal() {
  open.value = true
}
function hideModal() {
  open.value = false
}
</script>

<template>
  <a-button type="primary" @click="showModal">
    Modal
  </a-button>
  <a-modal
    v-model:open="open"
    title="Modal"
    ok-text="确定"
    cancel-text="取消"
    @cancel="hideModal"
    @ok="hideModal"
  >
    <p>Bla bla ...</p>
    <p>Bla bla ...</p>
    <p>Bla bla ...</p>
  </a-modal>
</template>
```
### Manual to update destroy
Manually updating and destroying a modal through instance.
```vue
<script setup lang="ts">
import { Modal } from 'antdv-next'

const [modal, ContextHolder] = Modal.useModal()
function countDown() {
  let secondsToGo = 5
  const instance = modal.success({
    title: 'This is a notification message',
    content: `This modal will be destroyed after ${secondsToGo} second.`,
  })

  const timer = setInterval(() => {
    secondsToGo -= 1
    instance.update({
      content: `This modal will be destroyed after ${secondsToGo} second.`,
    })
  }, 1000)

  setTimeout(() => {
    clearInterval(timer)
    instance.destroy()
  }, secondsToGo * 1000)
}
</script>

<template>
  <a-button @click="countDown">
    Open modal to close in 5s
  </a-button>
  <ContextHolder />
</template>
```
### To customize the position of modal
You can use `centered`, `style.top` or other styles to set position of modal dialog.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const modalTopOpen = ref(false)
const modalCenterOpen = ref(false)
</script>

<template>
  <a-space direction="vertical" :size="24">
    <a-button type="primary" @click="modalTopOpen = true">
      Display a modal dialog at 20px to Top
    </a-button>
    <a-modal
      v-model:open="modalTopOpen"
      title="20px to Top"
      :style="{ top: '20px' }"
      @ok="modalTopOpen = false"
      @cancel="modalTopOpen = false"
    >
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
    </a-modal>

    <a-button type="primary" @click="modalCenterOpen = true">
      Vertically centered modal dialog
    </a-button>
    <a-modal
      v-model:open="modalCenterOpen"
      title="Vertically centered modal dialog"
      centered
      @ok="modalCenterOpen = false"
      @cancel="modalCenterOpen = false"
    >
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
    </a-modal>
  </a-space>
</template>
```
### Customize footer buttons props
Passing `okButtonProps` and `cancelButtonProps` will customize the OK button and cancel button props.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
function showModal() {
  open.value = true
}

function handleOk(e: MouseEvent) {
  console.log(e)
  open.value = false
}

function handleCancel(e: MouseEvent) {
  console.log(e)
  open.value = false
}
</script>

<template>
  <a-button type="primary" @click="showModal">
    Open Modal with customized button props
  </a-button>
  <a-modal
    v-model:open="open"
    title="Basic Modal"
    :ok-button-props="{ disabled: true }"
    :cancel-button-props="{ disabled: true }"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>
```
### Custom modal content render
Custom modal content render. You can integrate drag libraries if needed.
```vue
<script setup lang="ts">
import { h, ref } from 'vue'

const open = ref(false)

function renderModal(node: any) {
  return h('div', { class: 'modal-render-wrapper' }, [node])
}
</script>

<template>
  <a-button type="primary" @click="open = true">
    Open Custom Render Modal
  </a-button>
  <a-modal
    v-model:open="open"
    title="Custom Render Modal"
    :modal-render="renderModal"
    @ok="open = false"
    @cancel="open = false"
  >
    <p>Just don't learn physics at school and your life will be full of magic and miracles.</p>
    <br>
    <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
  </a-modal>
</template>

<style scoped>
.modal-render-wrapper {
  padding: 8px;
  background: rgba(245, 245, 245, 0.7);
  border-radius: 8px;
}
</style>
```
### To customize the width of modal
Use `width` to set the width of the modal dialog.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
const openResponsive = ref(false)
</script>

<template>
  <a-flex vertical gap="medium" align="flex-start">
    <a-button type="primary" @click="open = true">
      Open Modal of 1000px width
    </a-button>
    <a-modal
      v-model:open="open"
      title="Modal 1000px width"
      centered
      :width="1000"
      @ok="open = false"
      @cancel="open = false"
    >
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
    </a-modal>

    <a-button type="primary" @click="openResponsive = true">
      Open Modal of responsive width
    </a-button>
    <a-modal
      v-model:open="openResponsive"
      title="Modal responsive width"
      centered
      :width="{
        xs: '90%',
        sm: '80%',
        md: '70%',
        lg: '60%',
        xl: '50%',
        xxl: '40%',
      }"
      @ok="openResponsive = false"
      @cancel="openResponsive = false"
    >
      <p>some contents...</p>
      <p>some contents...</p>
      <p>some contents...</p>
    </a-modal>
  </a-flex>
</template>
```
### Static Method
Static methods cannot consume Context provided by ConfigProvider. When enable `layer`, they may also cause style errors. Please use hooks version or `App` provided instance first.
```vue
<script setup lang="ts">
import { Modal } from 'antdv-next'
import { h } from 'vue'

function info() {
  Modal.info({
    title: 'This is a notification message',
    content: h('div', [
      h('p', 'some messages...some messages...'),
      h('p', 'some messages...some messages...'),
    ]),
    onOk() {},
  })
}

function success() {
  Modal.success({
    content: 'some messages...some messages...',
  })
}

function error() {
  Modal.error({
    title: 'This is an error message',
    content: 'some messages...some messages...',
  })
}

function warning() {
  Modal.warning({
    title: 'This is a warning message',
    content: 'some messages...some messages...',
  })
}
</script>

<template>
  <a-space wrap>
    <a-button @click="info">
      Info
    </a-button>
    <a-button @click="success">
      Success
    </a-button>
    <a-button @click="error">
      Error
    </a-button>
    <a-button @click="warning">
      Warning
    </a-button>
  </a-space>
</template>
```
### Static confirmation
Use `confirm()` to show a confirmation modal dialog. Let onCancel/onOk function return a promise object to delay closing the dialog.
```vue
<script setup lang="ts">
import { ExclamationCircleFilled } from '@antdv-next/icons'
import { Modal } from 'antdv-next'
import { h } from 'vue'

const confirm = Modal.confirm
function showConfirm() {
  confirm({
    title: 'Do you want to delete these items?',
    icon: h(ExclamationCircleFilled),
    content: 'Some descriptions',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}

function showPromiseConfirm() {
  confirm({
    title: 'Do you want to delete these items?',
    icon: h(ExclamationCircleFilled),
    content: 'When clicked the OK button, this dialog will be closed after 1 second',
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
      }).catch(() => console.log('Oops errors!'))
    },
    onCancel() {},
  })
}

function showDeleteConfirm() {
  confirm({
    title: 'Are you sure delete this task?',
    icon: h(ExclamationCircleFilled),
    content: 'Some descriptions',
    okText: 'Yes',
    okType: 'danger',
    cancelText: 'No',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}

function showPropsConfirm() {
  confirm({
    title: 'Are you sure delete this task?',
    icon: h(ExclamationCircleFilled),
    content: 'Some descriptions',
    okText: 'Yes',
    okType: 'danger',
    okButtonProps: {
      disabled: true,
    },
    cancelText: 'No',
    onOk() {
      console.log('OK')
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}
</script>

<template>
  <a-space wrap>
    <a-button @click="showConfirm">
      Confirm
    </a-button>
    <a-button @click="showPromiseConfirm">
      With Confirm
    </a-button>
    <a-button type="dashed" @click="showDeleteConfirm">
      Delete
    </a-button>
    <a-button type="dashed" @click="showPropsConfirm">
      With extra props
    </a-button>
  </a-space>
</template>
```
### destroy confirmation modal dialog
`Modal.destroyAll()` will destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically.
```vue
<script setup lang="ts">
import { ExclamationCircleOutlined } from '@antdv-next/icons'
import { Button, Modal } from 'antdv-next'
import { h } from 'vue'

const confirm = Modal.confirm

function destroyAll() {
  Modal.destroyAll()
}

function showConfirm() {
  for (let i = 0; i < 3; i += 1) {
    setTimeout(() => {
      confirm({
        icon: h(ExclamationCircleOutlined),
        content: h(Button, {
          onClick: destroyAll,
        }, {
          default: () => 'Click to destroy All',
        }),
        onOk() {
          console.log('OK')
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    }, i * 500)
  }
}
</script>

<template>
  <a-button @click="showConfirm">
    Confirm
  </a-button>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Modal by passing objects or functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { ModalProps } from 'antdv-next'
import { computed, ref } from 'vue'

const modalOpen = ref(false)
const modalFnOpen = ref(false)

const lineStyle = {
  lineHeight: '28px',
}

const classes = computed(() => ({
  container: 'custom-modal-container',
}))

const styles: ModalProps['styles'] = {
  mask: {
    backgroundImage: `linear-gradient(to top, #18181b 0, rgba(21, 21, 22, 0.2) 100%)`,
  },
}

const stylesFn: ModalProps['styles'] = {
  container: {
    borderRadius: '14px',
    border: '1px solid #ccc',
    padding: '0',
    overflow: 'hidden',
  },
  header: {
    padding: '16px',
  },
  body: {
    padding: '16px',
  },
  footer: {
    padding: '16px 10px',
    backgroundColor: '#fafafa',
  },
}

const sharedProps = computed<ModalProps>(() => ({
  centered: true,
  classes: classes.value,
}))
</script>

<template>
  <a-flex gap="medium">
    <a-button @click="modalOpen = true">
      Open Style Modal
    </a-button>
    <a-button type="primary" @click="modalFnOpen = true">
      Open Function Modal
    </a-button>

    <a-modal
      v-bind="sharedProps"
      v-model:open="modalOpen"
      :footer="null"
      title="Custom Style Modal"
      :styles="styles"
    >
      <div :style="lineStyle">
        Following the Ant Design specification, we developed a React UI library antd that contains a
        set of high quality components and demos for building rich, interactive user interfaces.
      </div>
      <div :style="lineStyle">
        🌈 Enterprise-class UI designed for web applications.
      </div>
      <div :style="lineStyle">
        📦 A set of high-quality React components out of the box.
      </div>
      <div :style="lineStyle">
        🛡 Written in TypeScript with predictable static types.
      </div>
      <div :style="lineStyle">
        ⚙️ Whole package of design resources and development tools.
      </div>
      <div :style="lineStyle">
        🌍 Internationalization support for dozens of languages.
      </div>
      <div :style="lineStyle">
        🎨 Powerful theme customization in every detail.
      </div>
    </a-modal>

    <a-modal
      v-bind="sharedProps"
      v-model:open="modalFnOpen"
      title="Custom Function Modal"
      :styles="stylesFn"
      :mask="{ enabled: true, blur: true }"
    >
      <div :style="lineStyle">
        Following the Ant Design specification, we developed a React UI library antd that contains a
        set of high quality components and demos for building rich, interactive user interfaces.
      </div>
      <div :style="lineStyle">
        🌈 Enterprise-class UI designed for web applications.
      </div>
      <div :style="lineStyle">
        📦 A set of high-quality React components out of the box.
      </div>
      <div :style="lineStyle">
        🛡 Written in TypeScript with predictable static types.
      </div>
      <div :style="lineStyle">
        ⚙️ Whole package of design resources and development tools.
      </div>
      <div :style="lineStyle">
        🌍 Internationalization support for dozens of languages.
      </div>
      <div :style="lineStyle">
        🎨 Powerful theme customization in every detail.
      </div>
      <template #footer>
        <a-button
          :style="{ borderColor: '#ccc', color: '#171717', backgroundColor: '#fff' }"
          @click="modalFnOpen = false"
        >
          Cancel
        </a-button>
        <a-button
          type="primary"
          :style="{ backgroundColor: '#171717' }"
          @click="modalOpen = true"
        >
          Submit
        </a-button>
      </template>
    </a-modal>
  </a-flex>
</template>

<style scoped>
.custom-modal-container {
  border-radius: 10px;
  padding: 10px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| afterClose | Specify a function that will be called when modal is closed completely | () => void | - | - | × |
| afterOpenChange | Callback when the animation ends when Modal is turned on and off | (open: boolean) => void | - | - | × |
| cancelButtonProps | The cancel button props | ButtonProps | - | - | ✓ |
| cancelText | Text of the Cancel button | VueNode | `Cancel` | - | × |
| centered | Centered Modal | boolean | false | - | ✓ |
| classes | Customize class for each semantic structure inside the Modal component. Supports object or function. | ModalClassNamesType | - | - | ✓ |
| closable | Whether a close (x) button is visible on top right or not | boolean \| [ClosableType](#closabletype) | true | - | ✓ |
| closeIcon | Custom close icon. Close button will be hidden when setting to `null` or `false` | VueNode | &lt;CloseOutlined /> | - | ✓ |
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false | - | × |
| destroyOnHidden | Whether to unmount child components on close | boolean | false | - | × |
| focusTriggerAfterClose | Whether need to focus trigger element after dialog is closed | boolean | true | - | × |
| footer | Footer content, set as `footer={null}` when you don't need default buttons | VueNode \| (params: { originNode: VueNode, extra: { OkBtn: any, CancelBtn: any } }) => any | (OK and Cancel buttons) | - | × |
| forceRender | Force render Modal | boolean | false | - | × |
| focusable | Configuration for focus management in the Modal | `{ trap?: boolean, focusTriggerAfterClose?: boolean }` | - | - | ✓ |
| getContainer | The mounted node for Modal but still display at fullscreen | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | - | × |
| keyboard | Whether support press esc to close | boolean | true | - | × |
| loading | Show the skeleton | boolean | false | - | × |
| mask | Mask effect | boolean \| `{enabled?: boolean, blur?: boolean, closable?: boolean}` | true | mask.closable: 1.0.3 | ✓ |
| ~~maskClosable~~ | Whether to close the modal dialog when the mask (area outside the modal) is clicked. Please use `mask.closable` instead. | boolean | true |  | × |
| modalRender | Custom modal content render | (node: any) => any | - | - | × |
| mousePosition | Set animation start position | MousePosition | - | - | × |
| okButtonProps | The ok button props | ButtonProps | - | - | ✓ |
| okText | Text of the OK button | VueNode | `OK` | - | × |
| okType | Button `type` of the OK button | LegacyButtonType | `primary` | - | × |
| open | Whether the modal dialog is visible or not, support `v-model:open` | boolean | false | - | × |
| rootClass | Root container class | string | - | - | × |
| rootStyle | Root container style | CSSProperties | - | - | × |
| scrollLock | Whether to lock body scroll when modal opens | boolean | true | 1.4.0 | × |
| styles | Customize inline style for each semantic structure inside the Modal component. Supports object or function. | ModalStylesType | - | - | ✓ |
| title | The modal dialog's title | VueNode | - | - | × |
| transitionName | Transition name of dialog | string | - | - | × |
| maskTransitionName | Transition name of mask | string | - | - | × |
| width | Width of the modal dialog | string \| number \| Partial<Record<Breakpoint, string \| number>> | 520 | - | × |
| wrapClassName | The class name of the container of the modal dialog | string | - | - | × |
| wrapProps | Wrapper element props | Record<string, any> | - | - | × |
| zIndex | The `z-index` of the Modal | number | 1000 | - | × |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| ok | Callback when the OK button is clicked | (e: MouseEvent) => void | - |
| cancel | Callback when the mask, close button or Cancel button is clicked | (e: MouseEvent) => void | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Modal content | () => any | - |
| title | Title | () => any | - |
| footer | Footer content | (params: { originNode: VueNode, extra: { OkBtn: any, CancelBtn: any } }) => any | - |
| okText | OK button text | () => any | - |
| cancelText | Cancel button text | () => any | - |
| closeIcon | Custom close icon | () => any | - |
| modalRender | Custom modal content render | (node: any) => any | - |

### Note

- The state of Modal will be preserved at its component lifecycle by default, if you wish to open it with a brand new state every time, set `destroyOnHidden` on it.
- If you use Form in Modal, and need to clear fields when closing, set `<a-form :preserve="false" />`.
- `Modal.method()` RTL mode only supports hooks usage.

### Modal.method() {#modalmethod}

There are five ways to display the information based on the content's nature:

- `Modal.info`
- `Modal.success`
- `Modal.error`
- `Modal.warning`
- `Modal.confirm`

The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| afterClose | Specify a function that will be called when modal is closed completely | () => void | - | - |
| autoFocusButton | Specify which button to autofocus | null \| `ok` \| `cancel` | `ok` | - |
| cancelButtonProps | The cancel button props | ButtonProps | - | - |
| cancelText | Text of the Cancel button with Modal.confirm | string | `Cancel` | - |
| centered | Centered Modal | boolean | false | - |
| class | Container class | string | - | - |
| rootClass | Root container class | string | - | - |
| closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean \| [ClosableType](#closabletype) | false | - |
| closeIcon | Custom close icon | VueNode | - | - |
| content | Content | VueNode | - | - |
| footer | Footer content, set as `footer: null` when you don't need default buttons | VueNode \| (params: { originNode: VueNode, extra: { OkBtn: any, CancelBtn: any } }) => any | - | - |
| getContainer | Return the mount node for Modal | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | - |
| icon | Custom icon | VueNode | &lt;ExclamationCircleFilled /> | - |
| keyboard | Whether support press esc to close | boolean | true | - |
| mask | Mask effect | boolean \| [MaskType](#masktype) | true | - |
| ~~maskClosable~~ | Whether to close the modal dialog when the mask is clicked. Please use `mask.closable` instead. | boolean | false | - |
| okButtonProps | The ok button props | ButtonProps | - | - |
| okText | Text of the OK button | string | `OK` | - |
| okType | Button `type` of the OK button | LegacyButtonType | `primary` | - |
| scrollLock | Whether to lock body scroll when modal opens | boolean | true | 1.4.0 |
| style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - | - |
| title | Title | VueNode | - | - |
| type | Dialog type | `info` \| `success` \| `error` \| `warn` \| `warning` \| `confirm` | `confirm` | - |
| width | Width of the modal dialog | string \| number | 416 | - |
| wrapClassName | The class name of the container of the modal dialog | string | - | - |
| zIndex | The `z-index` of the Modal | number | 1000 | - |
| onCancel | Click to onCancel callback, the parameter is the closing function | (close?: () => void) => void | - | - |
| onOk | Click to onOk callback, the parameter is the closing function | (close?: () => void) => void | - | - |

All the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference.

### ClosableType {#closabletype}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| afterClose | Specify a function that will be called when modal is closed completely | () => void | - | - |
| closeIcon | Custom close icon | VueNode | undefined | - |
| disabled | Whether disabled close icon | boolean | false | - |
| onClose | Trigger when modal close | () => void | undefined | - |

### MaskType {#masktype}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| enabled | Do you want to enable masking | boolean | true | - |
| blur | Whether to enable virtualization effect | boolean | false | - |
| closable | Whether to close the modal dialog when the mask is clicked, When using functional calls, the default value is `false` | boolean | true | - |

```ts
const modal = Modal.info()

modal.update({
  title: 'Updated title',
  content: 'Updated content',
})

modal.update(prevConfig => ({
  ...prevConfig,
  title: `${prevConfig.title} (New)`,
}))

modal.destroy()
```

- `Modal.destroyAll`

`Modal.destroyAll()` could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically.

### Modal.useModal() {#modal-use-modal}

When you need using Context, you can use `contextHolder` which created by `Modal.useModal` to insert into children. Modal created by hooks will get all the context where `contextHolder` are. Created `modal` has the same creating function with `Modal.method`.

```vue
<script setup lang="ts">
import { Modal } from 'antdv-next'
import { onMounted } from 'vue'

const [modal, ContextHolder] = Modal.useModal()

onMounted(() => {
  modal.confirm({
    title: 'Confirm',
    content: 'content',
  })
})
</script>

<template>
  <ContextHolder />
</template>
```

`modal.confirm` return method:

- `destroy`: Destroy current modal
- `update`: Update current modal
- `then`: (Hooks only) Promise chain call, support `await` operation

```ts
const confirmed = await modal.confirm({ ... })
```

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Modal"></ComponentTokenTable>

## FAQ

### Why content not update when Modal closed? {#faq-content-not-update}

Modal will use memo to avoid content jumping when closed. Also, if you use Form in Modal, you can reset `initialValues` by calling `resetFields` in effect.

### Why I can not access context in Modal.xxx? {#faq-context}

Modal static methods create an instance without context connection. When you need context info (like ConfigProvider context), you can use `Modal.useModal` to get `modal` instance and `contextHolder` node.

If you still need to use `Modal.xxx` static methods and want them to read `locale`, `theme`, or other ConfigProvider settings, configure a global `holderRender` once:

```ts
import { App, ConfigProvider } from 'antdv-next'
import { h } from 'vue'
import zhCN from 'antdv-next/locale/zh_CN'

ConfigProvider.config({
  holderRender: children =>
    h(ConfigProvider, { locale: zhCN }, {
      default: () => h(App, null, () => children),
    }),
})
```

Then `Modal.confirm`, `Modal.info` and other static methods will render with that wrapped context.

---
Title: Notification
URL: https://www.antdv-next.com/components/notification.md
---

## When To Use {#when-to-use}

To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:

- A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
- A notification that is pushed by the application.

## Examples {#examples}

### Hooks usage (recommended)
Use `notification.useNotification` to get `contextHolder` with context accessible issue. Please note that, we recommend to use top level registration instead of `notification` static method, because static method cannot consume context, and ConfigProvider data will not work.
```vue
<script setup lang="ts">
import {
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
} from '@antdv-next/icons'
import { notification } from 'antdv-next'
import { defineComponent, h, inject, provide, reactive } from 'vue'

const ContextKey = Symbol('notification-context')
const contextValue = reactive({ name: 'Antdv Next' })

provide(ContextKey, contextValue)

const ContextText = defineComponent(() => {
  const context = inject(ContextKey, { name: 'Default' }) as { name: string }
  return () => `Hello, ${context.name}!`
})

const [api, ContextHolder] = notification.useNotification()

// eslint-disable-next-line unused-imports/no-unused-vars
const placements = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] as const

type NotificationPlacement = (typeof placements)[number]

function openNotification(placement: NotificationPlacement) {
  api.info({
    title: `Notification ${placement}`,
    description: h(ContextText),
    placement,
  })
}
</script>

<template>
  <ContextHolder />
  <a-space>
    <a-button type="primary" @click="openNotification('topLeft')">
      <template #icon>
        <RadiusUpleftOutlined />
      </template>
      topLeft
    </a-button>
    <a-button type="primary" @click="openNotification('topRight')">
      <template #icon>
        <RadiusUprightOutlined />
      </template>
      topRight
    </a-button>
  </a-space>
  <a-divider />
  <a-space>
    <a-button type="primary" @click="openNotification('bottomLeft')">
      <template #icon>
        <RadiusBottomleftOutlined />
      </template>
      bottomLeft
    </a-button>
    <a-button type="primary" @click="openNotification('bottomRight')">
      <template #icon>
        <RadiusBottomrightOutlined />
      </template>
      bottomRight
    </a-button>
  </a-space>
</template>
```
### Duration after which the notification box is closed
`Duration` can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0, the notification box will never close automatically.
```vue
<script setup lang="ts">
import { notification } from 'antdv-next'

const [api, ContextHolder] = notification.useNotification()

function openNotification() {
  api.open({
    title: 'Notification Title',
    description:
      'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
    duration: 0,
  })
}
</script>

<template>
  <ContextHolder />
  <a-button type="primary" @click="openNotification">
    Open the notification box
  </a-button>
</template>
```
### Notification with icon
A notification box with a icon at the left side.
```vue
<script setup lang="ts">
import { notification } from 'antdv-next'

const [api, ContextHolder] = notification.useNotification()

type NotificationType = 'success' | 'info' | 'warning' | 'error'

function openNotificationWithIcon(type: NotificationType) {
  api[type]({
    title: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  })
}
</script>

<template>
  <ContextHolder />
  <a-flex gap="8" wrap="wrap">
    <a-button color="green" variant="outlined" @click="openNotificationWithIcon('success')">
      Success
    </a-button>
    <a-button color="blue" variant="outlined" @click="openNotificationWithIcon('info')">
      Info
    </a-button>
    <a-button color="yellow" variant="outlined" @click="openNotificationWithIcon('warning')">
      Warning
    </a-button>
    <a-button color="red" variant="outlined" @click="openNotificationWithIcon('error')">
      Error
    </a-button>
  </a-flex>
</template>
```
### Custom close button
To customize the style or font of the close button.
```vue
<script setup lang="ts">
import { Button, notification, Space } from 'antdv-next'
import { h } from 'vue'

const [api, ContextHolder] = notification.useNotification()

function close() {
  console.log('Notification was closed. Either the close button was clicked or duration time elapsed.')
}

function openNotification() {
  const key = `open${Date.now()}`
  const actions = h(
    Space,
    { size: 8 },
    () => [
      h(
        Button,
        {
          type: 'link',
          size: 'small',
          onClick: () => api.destroy(),
        },
        { default: () => 'Destroy All' },
      ),
      h(
        Button,
        {
          type: 'primary',
          size: 'small',
          onClick: () => api.destroy(key),
        },
        { default: () => 'Confirm' },
      ),
    ],
  )

  api.open({
    title: 'Notification Title',
    description:
      'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
    key,
    onClose: close,
    actions,
  })
}
</script>

<template>
  <ContextHolder />
  <a-button type="primary" @click="openNotification">
    Open the notification box
  </a-button>
</template>
```
### Customized icon
The icon can be customized to any VueNode.
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
import { notification } from 'antdv-next'
import { h } from 'vue'

const [api, ContextHolder] = notification.useNotification()

function openNotification() {
  api.open({
    title: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    icon: h(SmileOutlined, { style: { color: '#108ee9' } }),
  })
}
</script>

<template>
  <ContextHolder />
  <a-button type="primary" @click="openNotification">
    Open the notification box
  </a-button>
</template>
```
### Placement
A notification box can appear from the `top` `bottom` `topLeft` `topRight` `bottomLeft` or `bottomRight` of the viewport via `placement`.
```vue
<script lang="ts" setup>
import { BorderBottomOutlined, BorderTopOutlined, RadiusBottomleftOutlined, RadiusBottomrightOutlined, RadiusUpleftOutlined, RadiusUprightOutlined } from '@antdv-next/icons'
import { notification } from 'antdv-next'

const [api, ContextHolder] = notification.useNotification()

function openNotification(placement: string) {
  api.info({
    title: `Notification ${placement}`,
    description: 'This is the content of the notification.',
    placement: placement as any,
  })
}
</script>

<template>
  <ContextHolder />
  <a-space>
    <a-button type="primary" @click="openNotification('top')">
      <template #icon>
        <BorderTopOutlined />
      </template>
      top
    </a-button>
    <a-button type="primary" @click="openNotification('bottom')">
      <template #icon>
        <BorderBottomOutlined />
      </template>
      bottom
    </a-button>
  </a-space>
  <a-divider />
  <a-space>
    <a-button type="primary" @click="openNotification('topLeft')">
      <template #icon>
        <RadiusUpleftOutlined />
      </template>
      topLeft
    </a-button>
    <a-button type="primary" @click="openNotification('topRight')">
      <template #icon>
        <RadiusUprightOutlined />
      </template>
      topRight
    </a-button>
  </a-space>
  <a-divider />
  <a-space>
    <a-button type="primary" @click="openNotification('bottomLeft')">
      <template #icon>
        <RadiusBottomleftOutlined />
      </template>
      bottomLeft
    </a-button>
    <a-button type="primary" @click="openNotification('bottomRight')">
      <template #icon>
        <RadiusBottomrightOutlined />
      </template>
      bottomRight
    </a-button>
  </a-space>
</template>
```
### Customized style
The style and class are available to customize Notification.
```vue
<script setup lang="ts">
import { notification } from 'antdv-next'

const [api, ContextHolder] = notification.useNotification()

function openNotification() {
  api.open({
    title: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    class: 'custom-class',
    style: {
      width: '600px',
    },
  })
}
</script>

<template>
  <ContextHolder />
  <a-button type="primary" @click="openNotification">
    Open the notification box
  </a-button>
</template>
```
### Update message content
Update content with a unique key.
```vue
<script setup lang="ts">
import { notification } from 'antdv-next'

const key = 'updatable'

const [api, ContextHolder] = notification.useNotification()

function openNotification() {
  api.open({
    key,
    title: 'Notification Title',
    description: 'description.',
  })

  setTimeout(() => {
    api.open({
      key,
      title: 'New Title',
      description: 'New description.',
    })
  }, 1000)
}
</script>

<template>
  <ContextHolder />
  <a-button type="primary" @click="openNotification">
    Open the notification box
  </a-button>
</template>
```
### Stack
Stack configuration, enabled by default. More than 3 notifications will be automatically stacked, and could be changed by `threshold`.
```vue
<script setup lang="ts">
import { notification } from 'antdv-next'
import { computed, ref } from 'vue'

const enabled = ref(true)
const threshold = ref(3)

const notificationConfig = computed(() => {
  return {
    stack: enabled.value
      ? {
          threshold: threshold.value,
        }
      : false,
  }
})

const [api, ContextHolder] = notification.useNotification(notificationConfig)

function openNotification() {
  api.open({
    title: 'Notification Title',
    description: Array.from(
      { length: Math.round(Math.random() * 5) + 1 },
      () => 'This is the content of the notification.',
    ).join('\n'),
    duration: false,
  })
}

function toggleEnabled(value: boolean) {
  enabled.value = value
}

function updateThreshold(value: number | null) {
  threshold.value = value || 1
}
</script>

<template>
  <ContextHolder />
  <a-space size="large">
    <a-space :style="{ width: '100%' }">
      <span>Enabled:</span>
      <a-switch :checked="enabled" @change="toggleEnabled" />
    </a-space>
    <a-space :style="{ width: '100%' }">
      <span>Threshold:</span>
      <a-input-number
        :value="threshold"
        :min="1"
        :max="10"
        :step="1"
        :disabled="!enabled"
        @change="updateThreshold"
      />
    </a-space>
  </a-space>
  <a-divider />
  <a-button type="primary" @click="openNotification">
    Open the notification box
  </a-button>
</template>
```
### Show with progress
Show progress bar for auto-closing notification.
```vue
<script lang="ts" setup>
import { notification } from 'antdv-next'

const [api, ContextHolder] = notification.useNotification()

function openNotification(pauseOnHover: boolean) {
  api.open({
    title: 'Notification Title',
    description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    showProgress: true,
    pauseOnHover,
  })
}
</script>

<template>
  <ContextHolder />
  <a-space>
    <a-button type="primary" @click="openNotification(true)">
      Pause on hover
    </a-button>
    <a-button type="primary" @click="openNotification(false)">
      Don't pause on hover
    </a-button>
  </a-space>
</template>
```
### Static method (deprecated)
Static methods cannot consume Context provided by `ConfigProvider`. When enable `layer`, they may also cause style errors. Please use hooks version or `App` provided instance first.
```vue
<script setup lang="ts">
import { notification } from 'antdv-next'

function openNotification() {
  notification.open({
    title: 'Notification Title',
    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    onClick: () => {
      console.log('Notification Clicked!')
    },
  })
}
</script>

<template>
  <a-button type="primary" @click="openNotification">
    Open the notification box
  </a-button>
</template>
```
### Customize progress bar color
Customize the progress bar color by configuring the component token.
```vue
<script setup lang="ts">
import { notification } from 'antdv-next'

const COLOR_BG = 'linear-gradient(135deg, #6253e1, #04befe)'

const [api, ContextHolder] = notification.useNotification()

function openNotification() {
  api.open({
    title: 'Customize progress bar color',
    description: 'You can use component token to customize the progress bar color',
    showProgress: true,
    duration: 20,
  })
}
</script>

<template>
  <a-config-provider
    :theme="{
      components: {
        Notification: {
          progressBg: COLOR_BG,
        },
      },
    }"
  >
    <ContextHolder />
    <a-button class="linear-gradient-button" type="primary" @click="openNotification">
      Show custom progress color
    </a-button>
  </a-config-provider>
</template>

<style>
.linear-gradient-button {
  background: linear-gradient(135deg, #6253e1, #04befe);
  border-color: transparent;
}

.linear-gradient-button:hover {
  background: linear-gradient(135deg, #6f60e8, #2fc9ff);
}
</style>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Notification by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { notification } from 'antdv-next'

const [api, ContextHolder] = notification.useNotification()

const defaultStyles: Record<string, CSSProperties> = {
  root: {
    backgroundColor: '#f6ffed',
    border: '2px solid #95de64',
    borderRadius: '16px',
    boxShadow: '4px 4px 0 #d9f7be',
  },
  icon: {
    color: '#237804',
  },
  title: {
    color: '#237804',
    fontWeight: 600,
  },
  description: {
    color: '#3f6600',
  },
}

function styleFn(info: { props: any }): Record<string, CSSProperties> {
  if (info.props.type === 'error') {
    return {
      ...defaultStyles,
      root: {
        ...defaultStyles.root,
        backgroundColor: '#fff2f0',
        borderColor: '#ffccc7',
        boxShadow: '4px 4px 0 #ffccc7',
      },
      icon: {
        color: '#cf1322',
      },
      title: {
        color: '#cf1322',
      },
      description: {
        color: '#5c0011',
      },
    }
  }
  return defaultStyles
}

const sharedProps = {
  title: 'Notification Title',
  description: 'This is a notification description.',
  duration: false as const,
}

function openDefault() {
  api.info({
    ...sharedProps,
    styles: defaultStyles,
  })
}

function openError() {
  api.error({
    ...sharedProps,
    type: 'error',
    styles: styleFn as any,
  })
}
</script>

<template>
  <ContextHolder />
  <a-space>
    <a-button type="primary" @click="openDefault">
      Default Notification
    </a-button>
    <a-button @click="openError">
      Error Notification
    </a-button>
  </a-space>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Static Methods {#static-methods}

- `notification.success(config)`
- `notification.error(config)`
- `notification.info(config)`
- `notification.warning(config)`
- `notification.open(config)`
- `notification.destroy(key?: Key)`
- `notification.config(options)`
- `notification.useNotification(config)`

### ArgsProps {#args-props}

The properties of `config` are as follows:

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| title | The title of notification box | VueNode | - | - | × |
| description | The content of notification box | VueNode | - | - | × |
| actions | Customized button group | VueNode | - | - | × |
| key | The unique identifier of the Notification | Key | - | - | × |
| duration | Time in seconds before Notification is closed. When set to `0` or `false`, it will never be closed automatically | number \| false | 4.5 | - | × |
| showProgress | Show progress bar for auto-closing notification | boolean | - | - | × |
| pauseOnHover | Keep the timer running or not on hover | boolean | true | - | × |
| icon | Customized icon | VueNode | - | - | × |
| placement | Position of Notification, can be one of `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | NotificationPlacement | `topRight` | - | × |
| class | Customized CSS class | string | - | - | ✓ |
| style | Customized inline style | CSSProperties | - | - | ✓ |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | NotificationClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | NotificationStylesType | - | - | ✓ |
| type | Notification type | IconType | - | - | × |
| onClick | Specify a function that will be called when the notification is clicked | () =&gt; void | - | - | × |
| onClose | Trigger when notification closed | () =&gt; void | - | - | × |
| closeIcon | Custom close icon. Set to null or false to hide close button | VueNode | true | - | ✓ |
| closable | Whether to show close button | boolean \| ClosableType | true | - | × |
| props | Props passed to the notification `div`, supports `data-testid`, `aria-*`, or `role` | DivProps | - | - | × |
| role | The semantics of notification content recognized by screen readers | 'alert' \| 'status' | `alert` | - | × |

### notification.useNotification {#use-notification}

The properties of `config` are as follows:

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 | - | × |
| bottom | Distance from the bottom of the viewport, when `placement` is `bottom` `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 | - | × |
| placement | Position of Notification, can be one of `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | NotificationPlacement | `topRight` | - | × |
| getContainer | Return the mount node for Notification | () =&gt; HTMLElement \| ShadowRoot | () =&gt; document.body | - | × |
| duration | Time in seconds before Notification is closed. When set to `0` or `false`, it will never be closed automatically | number \| false | 4.5 | - | × |
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | - | × |
| rtl | Whether to enable RTL mode | boolean | false | - | × |
| stack | Notifications will be stacked when amount is over threshold | boolean \| &#123; threshold?: number &#125; | &#123; threshold: 3 &#125; | - | × |
| showProgress | Show progress bar for auto-closing notification | boolean | - | - | × |
| pauseOnHover | Keep the timer running or not on hover | boolean | true | - | × |
| closeIcon | Custom close icon. Set to null or false to hide close button | VueNode | true | - | ✓ |
| prefixCls | - | string | `ant-notification` | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | NotificationClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | NotificationStylesType | - | - | ✓ |

### ClosableType {#closabletype}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| closeIcon | Custom close icon | VueNode | - | - |
| onClose | Trigger when notification close | () =&gt; void | - | - |
| disabled | Whether the close button is disabled | boolean | - | - |

### Global configuration {#global-config}

`notification.config(options)`

```js
notification.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3,
  rtl: true,
})
```

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 | - |
| bottom | Distance from the bottom of the viewport, when `placement` is `bottom` `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 | - |
| duration | Time in seconds before Notification is closed. When set to `0` or `false`, it will never be closed automatically | number \| false | 4.5 | - |
| showProgress | Show progress bar for auto-closing notification | boolean | - | - |
| pauseOnHover | Keep the timer running or not on hover | boolean | true | - |
| prefixCls | - | string | `ant-notification` | - |
| getContainer | Return the mount node for Notification | () =&gt; HTMLElement \| ShadowRoot | () =&gt; document.body | - |
| placement | Position of Notification, can be one of `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | NotificationPlacement | `topRight` | - |
| closeIcon | Custom close icon. Set to null or false to hide close button | VueNode | true | - |
| closable | Whether to show close button | ClosableType | - | - |
| rtl | Whether to enable RTL mode | boolean | false | - |
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | - |
| props | Props passed to the notification `div`, supports `data-testid`, `aria-*`, or `role` | DivProps | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Notification"></ComponentTokenTable>

## FAQ

### Why I can not access context, ConfigProvider `locale/prefixCls/theme` in notification? {#faq-context-redux}

Calling `notification` methods will render a new instance which does not inherit the current context. When you need context info, use `notification.useNotification` to get `api` and `ContextHolder`, then render it inside your component tree:

```vue
<script setup>
import { notification } from 'antdv-next'

const [api, ContextHolder] = notification.useNotification()
</script>

<template>
  <ContextHolder />
</template>
```

**Note:** You must insert `ContextHolder` into your children with hooks. You can use static methods if you do not need context connection.

> [App Package Component](/components/app) can be used to simplify `useNotification` and other methods that need to manually implant ContextHolder.

If you still need to use static methods and want them to read `locale`, `theme`, or other ConfigProvider settings, configure a global `holderRender` once:

```ts
import { App, ConfigProvider } from 'antdv-next'
import { h } from 'vue'
import zhCN from 'antdv-next/locale/zh_CN'

ConfigProvider.config({
  holderRender: children =>
    h(ConfigProvider, { locale: zhCN }, {
      default: () => h(App, null, () => children),
    }),
})
```

Then `notification.open`, `notification.success` and other static methods will render with that wrapped context.

### How to set static methods prefixCls? {#faq-set-prefix-cls}

You can config with [`ConfigProvider.config`](/components/config-provider#config).

### Why doesn't `style="width: max-content"` work on Notification? {#faq-notification-width}

Notification uses a fixed-width layout so the stacked card style can stay consistent. Because of this, intrinsic widths such as `max-content`, `min-content`, and `fit-content(...)` are not supported on the outer notification node.

If you need to customize the notification width, use the component token `width`:

```vue
<template>
  <a-config-provider
    :theme="{
      components: {
        Notification: {
          width: 480,
        },
      },
    }"
  >
    <a-app />
  </a-config-provider>
</template>
```

If you only need the content to size itself, render your own node in `title` or `description`, and apply `max-content` to the inner node instead of the notification root.

---
Title: Pagination
URL: https://www.antdv-next.com/components/pagination.md
---

## When To Use {#when-to-use}

- When it will take a long time to load/render all items.
- If you want to browse the data by navigating through pages.

## Examples {#examples}

### Basic
Basic pagination.
```vue
<template>
  <a-pagination :default-current="1" :total="50" />
</template>
```
### Align
Set pagination alignment with `align`.
```vue
<template>
  <a-space direction="vertical" size="medium" style="width: 100%">
    <a-pagination align="start" :default-current="1" :total="50" />
    <a-pagination align="center" :default-current="1" :total="50" />
    <a-pagination align="end" :default-current="1" :total="50" />
  </a-space>
</template>
```
### More
More pages.
```vue
<template>
  <a-pagination :default-current="6" :total="500" />
</template>
```
### Changer
Change `pageSize`.
```vue
<script setup lang="ts">
import type { PaginationEmits } from 'antdv-next'

const handleShowSizeChange: PaginationEmits['showSizeChange'] = (current, pageSize) => {
  console.log(current, pageSize)
}
</script>

<template>
  <a-space direction="vertical" size="medium" style="width: 100%">
    <a-pagination
      show-size-changer
      :default-current="3"
      :total="500"
      @show-size-change="handleShowSizeChange"
    />
    <a-pagination
      show-size-changer
      :default-current="3"
      :total="500"
      disabled
      @show-size-change="handleShowSizeChange"
    />
  </a-space>
</template>
```
### Jumper
Jump to a page directly.
```vue
<script setup lang="ts">
import type { PaginationEmits } from 'antdv-next'

const handleChange: PaginationEmits['change'] = (pageNumber) => {
  console.log('Page: ', pageNumber)
}
</script>

<template>
  <a-space direction="vertical" size="medium" style="width: 100%">
    <a-pagination
      show-quick-jumper
      :default-current="2"
      :total="500"
      @change="handleChange"
    />
    <a-pagination
      show-quick-jumper
      :default-current="2"
      :total="500"
      disabled
      @change="handleChange"
    />
  </a-space>
</template>
```
### Mini size
Mini size pagination.
```vue
<script setup lang="ts">
import type { PaginationProps } from 'antdv-next'

const showTotal: PaginationProps['showTotal'] = total => `Total ${total} items`
</script>

<template>
  <a-space direction="vertical" size="medium" style="width: 100%">
    <a-pagination size="small" :total="50" />
    <a-pagination size="small" :total="50" show-size-changer show-quick-jumper />
    <a-pagination size="small" :total="50" :show-total="showTotal" />
    <a-pagination
      size="small"
      :total="50"
      disabled
      :show-total="showTotal"
      show-size-changer
      show-quick-jumper
    />
  </a-space>
</template>
```
### Simple mode
Simple mode.
```vue
<template>
  <a-space direction="vertical" size="medium" style="width: 100%">
    <a-pagination simple :default-current="2" :total="50" />
    <a-pagination :simple="{ readOnly: true }" :default-current="2" :total="50" />
    <a-pagination simple :default-current="2" :total="50" disabled />
  </a-space>
</template>
```
### Controlled
Controlled page number.
```vue
<script setup lang="ts">
import type { PaginationEmits } from 'antdv-next'
import { ref } from 'vue'

const current = ref(3)

const handleChange: PaginationEmits['change'] = (page) => {
  console.log(page)
  current.value = page
}
</script>

<template>
  <a-pagination :current="current" :total="50" @change="handleChange" />
</template>
```
### Total number
You can show the total number of data by setting `showTotal`.
```vue
<script setup lang="ts">
import type { PaginationProps } from 'antdv-next'

const showTotal: PaginationProps['showTotal'] = total => `Total ${total} items`
const showRangeTotal: PaginationProps['showTotal'] = (total, range) => `${range[0]}-${range[1]} of ${total} items`
</script>

<template>
  <a-space direction="vertical" size="medium" style="width: 100%">
    <a-pagination
      :total="85"
      :show-total="showTotal"
      :default-page-size="20"
      :default-current="1"
    />
    <a-pagination
      :total="85"
      :show-total="showRangeTotal"
      :default-page-size="20"
      :default-current="1"
    />
  </a-space>
</template>
```
### Show All
Show all configured prop.
```vue
<script setup lang="ts">
import type { PaginationProps } from 'antdv-next'

const showTotal: PaginationProps['showTotal'] = total => `Total ${total} items`
</script>

<template>
  <a-pagination
    :total="85"
    show-size-changer
    show-quick-jumper
    :show-total="showTotal"
  />
</template>
```
### Prev and next
Use text link for prev and next button.
```vue
<script setup lang="ts">
import type { PaginationProps } from 'antdv-next'
import { h } from 'vue'

const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
  if (type === 'prev') {
    return h('a', 'Previous')
  }
  if (type === 'next') {
    return h('a', 'Next')
  }
  return originalElement
}
</script>

<template>
  <a-pagination :total="500" :item-render="itemRender" />
</template>
```
### Custom component
Replace the page size changer with `components`.
```vue
<script setup lang="ts">
import type { PaginationProps } from 'antdv-next'
import { InputNumber } from 'antdv-next'
import { defineComponent, h } from 'vue'

const SizeChanger = defineComponent({
  name: 'SizeChanger',
  props: {
    value: { type: Number, required: true },
    disabled: { type: Boolean, default: false },
  },
  emits: ['change'],
  setup(props, { emit }) {
    return () =>
      h(InputNumber, {
        'aria-label': 'Page Size',
        'disabled': props.disabled,
        'min': 1,
        'precision': 0,
        'style': { width: '100px' },
        'value': props.value,
        'onChange': (nextValue: number | string | null) => {
          if (nextValue !== null) {
            emit('change', Number(nextValue))
          }
        },
      })
  },
})

const components: PaginationProps['components'] = {
  sizeChanger: SizeChanger,
}
</script>

<template>
  <a-pagination
    show-size-changer
    :components="components"
    :default-current="3"
    :total="500"
  />
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Pagination by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { PaginationProps } from 'antdv-next'
import { useCssModule } from 'vue'

const moduleStyles = useCssModule()

const classes: PaginationProps['classes'] = {
  root: moduleStyles.root,
}

const stylesObject: PaginationProps['styles'] = {
  item: {
    borderRadius: '999px',
  },
}

const stylesFn: PaginationProps['styles'] = ({ props }) => {
  if (props.size === 'small') {
    return {
      item: {
        backgroundColor: 'rgba(200, 200, 200, 0.3)',
        marginInlineEnd: '4px',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-pagination :total="500" :classes="classes" :styles="stylesObject" />
    <a-pagination :total="500" size="small" :classes="classes" :styles="stylesFn" />
  </a-flex>
</template>

<style module>
.root {
  border: 2px dashed #ccc;
  padding: 8px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| align | Alignment of pagination | `start` \| `center` \| `end` | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | PaginationClassNamesType | - | - | ✓ |
| components | Customize internal components | &#123; sizeChanger?: Component&lt;PaginationSizeChangerProps&gt; &#125; | - | - | × |
| current | Current page number | number | - | - | × |
| defaultCurrent | Default initial page number | number | 1 | - | × |
| defaultPageSize | Default number of data items per page | number | 10 | - | × |
| disabled | Disable pagination | boolean | - | - | × |
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | - | × |
| itemRender | To customize item's innerHTML | (page: number, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element: VueNode) => VueNode | - | - | × |
| pageSize | Number of data items per page | number | - | - | × |
| pageSizeOptions | Specify the sizeChanger options | (string \| number)[] | ['10', '20', '50', '100'] | - | × |
| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - | - | × |
| rootClass | Root container class | string | - | - | × |
| showLessItems | Show less page items | boolean | false | - | × |
| showQuickJumper | Determine whether you can jump to pages directly | boolean \| \{ goButton?: VueNode \} | false | - | × |
| showSizeChanger | Determine whether to show `pageSize` select | boolean \| SelectProps | - | - | ✓ |
| totalBoundaryShowSizeChanger | When `total` larger than it, `showSizeChanger` will be true | number | 50 | - | × |
| showTitle | Show page item's title | boolean | true | - | × |
| showTotal | To display the total number and range | (total: number, range: [number, number]) => VueNode | - | - | × |
| simple | Whether to use simple mode | boolean \| \{ readOnly?: boolean \} | - | - | × |
| size | Component size | `large` \| `medium` \| `small` | `medium` | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | PaginationStylesType | - | - | ✓ |
| total | Total number of data items | number | 0 | - | × |
| locale | Pagination locale | PaginationLocale | - | - | × |
| prevIcon | Custom previous icon | VueNode | - | - | × |
| nextIcon | Custom next icon | VueNode | - | - | × |
| jumpPrevIcon | Custom jump-prev icon | VueNode | - | - | × |
| jumpNextIcon | Custom jump-next icon | VueNode | - | - | × |
| selectComponentClass | Deprecated, not official support | any | - | - | × |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Called when the page number or `pageSize` is changed | (page: number, pageSize: number) => void | - |
| showSizeChange | Called when `pageSize` is changed | (current: number, size: number) => void | - |
| update:current | Update current page | (page: number) => void | - |
| update:pageSize | Update page size | (pageSize: number) => void | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| itemRender | Customize page item | (ctx: { page: number; type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next'; element: VueNode }) => any | - |
| showTotal | Customize total display | (ctx: { total: number; range: [number, number] }) => any | - |
| prevIcon | Custom previous icon | () => any | - |
| nextIcon | Custom next icon | () => any | - |
| jumpPrevIcon | Custom jump-prev icon | () => any | - |
| jumpNextIcon | Custom jump-next icon | () => any | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token {#design-token}

<ComponentTokenTable component="Pagination"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Popconfirm
URL: https://www.antdv-next.com/components/popconfirm.md
---

## When To Use

A simple and compact dialog used for asking for user confirmation.

The difference with the `confirm` modal dialog is that it's more lightweight than the static popped full-screen confirm modal.

## Examples

### Basic
The basic example supports the title and description props of confirmation.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'

const [messageApi, ContextHolder] = message.useMessage()

function confirm(e?: MouseEvent) {
  console.log(e)
  messageApi.success('Click on Yes')
}

function cancel(e?: MouseEvent) {
  console.log(e)
  messageApi.error('Click on No')
}
</script>

<template>
  <ContextHolder />
  <a-popconfirm
    title="Delete the task"
    description="Are you sure to delete this task?"
    ok-text="Yes"
    cancel-text="No"
    @confirm="confirm"
    @cancel="cancel"
  >
    <a-button danger>
      Delete
    </a-button>
  </a-popconfirm>
</template>
```
### Locale text
Set `okText` and `cancelText` props to customize the button's labels.
```vue
<template>
  <a-popconfirm
    title="Delete the task"
    description="Are you sure to delete this task?"
    ok-text="Yes"
    cancel-text="No"
  >
    <a-button danger>
      Delete
    </a-button>
  </a-popconfirm>
</template>
```
### Placement
There are 12 `placement` options available. Set `arrow` with `pointAtCenter: true` if you want the arrow to point at the center of target.
```vue
<script setup lang="ts">
const title = 'Are you sure to delete this task?'
const description = 'Delete the task'
const buttonWidth = 80
</script>

<template>
  <a-config-provider :button="{ style: { width: `${buttonWidth}px`, margin: '4px' } }">
    <a-flex vertical justify="center" align="center" class="demo">
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-popconfirm
          placement="topLeft"
          :title="title"
          :description="description"
          ok-text="Yes"
          cancel-text="No"
        >
          <a-button>TL</a-button>
        </a-popconfirm>
        <a-popconfirm
          placement="top"
          :title="title"
          :description="description"
          ok-text="Yes"
          cancel-text="No"
        >
          <a-button>Top</a-button>
        </a-popconfirm>
        <a-popconfirm
          placement="topRight"
          :title="title"
          :description="description"
          ok-text="Yes"
          cancel-text="No"
        >
          <a-button>TR</a-button>
        </a-popconfirm>
      </a-flex>
      <a-flex :style="{ width: `${buttonWidth * 5 + 32}px` }" justify="space-between" align="center">
        <a-flex align="center" vertical>
          <a-popconfirm
            placement="leftTop"
            :title="title"
            :description="description"
            ok-text="Yes"
            cancel-text="No"
          >
            <a-button>LT</a-button>
          </a-popconfirm>
          <a-popconfirm
            placement="left"
            :title="title"
            :description="description"
            ok-text="Yes"
            cancel-text="No"
          >
            <a-button>Left</a-button>
          </a-popconfirm>
          <a-popconfirm
            placement="leftBottom"
            :title="title"
            :description="description"
            ok-text="Yes"
            cancel-text="No"
          >
            <a-button>LB</a-button>
          </a-popconfirm>
        </a-flex>
        <a-flex align="center" vertical>
          <a-popconfirm
            placement="rightTop"
            :title="title"
            :description="description"
            ok-text="Yes"
            cancel-text="No"
          >
            <a-button>RT</a-button>
          </a-popconfirm>
          <a-popconfirm
            placement="right"
            :title="title"
            :description="description"
            ok-text="Yes"
            cancel-text="No"
          >
            <a-button>Right</a-button>
          </a-popconfirm>
          <a-popconfirm
            placement="rightBottom"
            :title="title"
            :description="description"
            ok-text="Yes"
            cancel-text="No"
          >
            <a-button>RB</a-button>
          </a-popconfirm>
        </a-flex>
      </a-flex>
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-popconfirm
          placement="bottomLeft"
          :title="title"
          :description="description"
          ok-text="Yes"
          cancel-text="No"
        >
          <a-button>BL</a-button>
        </a-popconfirm>
        <a-popconfirm
          placement="bottom"
          :title="title"
          :description="description"
          ok-text="Yes"
          cancel-text="No"
        >
          <a-button>Bottom</a-button>
        </a-popconfirm>
        <a-popconfirm
          placement="bottomRight"
          :title="title"
          :description="description"
          ok-text="Yes"
          cancel-text="No"
        >
          <a-button>BR</a-button>
        </a-popconfirm>
      </a-flex>
    </a-flex>
  </a-config-provider>
</template>
```
### Auto Shift
Auto adjust Popup and arrow position when Popconfirm is close to the edge of the screen. Will be out of screen when exceed limitation.
```vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'

const open = ref(false)

onMounted(() => {
  setTimeout(() => {
    document.documentElement.scrollTop = document.documentElement.clientHeight
    document.documentElement.scrollLeft = document.documentElement.clientWidth

    requestAnimationFrame(() => {
      open.value = true
    })
  }, 10)
})
</script>

<template>
  <div class="h-300vh w-300vw flex items-center justify-center">
    <a-popconfirm title="Thanks for using antd. Have a nice day !" :open="open">
      <a-button type="primary">
        Scroll The Window
      </a-button>
    </a-popconfirm>
  </div>
</template>
```
### Conditional trigger
Make it pop up under some conditions.
```vue
<script setup lang="ts">
import { message } from 'antdv-next'
import { ref } from 'vue'

const [messageApi, ContextHolder] = message.useMessage()

const open = ref(false)
const condition = ref(true)

function confirm() {
  open.value = false
  messageApi.success('Next step.')
}

function cancel() {
  open.value = false
  messageApi.error('Click on cancel.')
}

function handleOpenChange(value: boolean) {
  if (!value) {
    open.value = value
    return
  }
  if (condition.value) {
    confirm()
  }
  else {
    open.value = value
  }
}
</script>

<template>
  <ContextHolder />
  <a-popconfirm
    title="Delete the task"
    description="Are you sure to delete this task?"
    :open="open"
    ok-text="Yes"
    cancel-text="No"
    @open-change="handleOpenChange"
    @confirm="confirm"
    @cancel="cancel"
  >
    <a-button danger>
      Delete a task
    </a-button>
  </a-popconfirm>
  <br>
  <br>
  Whether directly execute:
  <a-switch v-model:checked="condition" />
</template>
```
### Customize icon
Set `icon` props to customize the icon.
```vue
<script setup lang="ts">
import { QuestionCircleOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-popconfirm
    title="Delete the task"
    description="Are you sure to delete this task?"
  >
    <template #icon>
      <QuestionCircleOutlined style="color: red" />
    </template>
    <a-button danger>
      Delete
    </a-button>
  </a-popconfirm>
</template>
```
### Asynchronously close
Asynchronously close a popconfirm when a the OK button is pressed. For example, you can use this pattern when you submit a form.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
const confirmLoading = ref(false)

function showPopconfirm() {
  open.value = true
}

function handleOk() {
  confirmLoading.value = true
  setTimeout(() => {
    open.value = false
    confirmLoading.value = false
  }, 2000)
}

function handleCancel() {
  console.log('Clicked cancel button')
  open.value = false
}
</script>

<template>
  <a-popconfirm
    title="Title"
    description="Open Popconfirm with async logic"
    :open="open"
    :ok-button-props="{ loading: confirmLoading }"
    @confirm="handleOk"
    @cancel="handleCancel"
  >
    <a-button type="primary" @click="showPopconfirm">
      Open Popconfirm with async logic
    </a-button>
  </a-popconfirm>
</template>
```
### Asynchronously close on Promise
Asynchronously close a popconfirm when the OK button is pressed. For example, you can use this pattern when you submit a form.
```vue
<script setup lang="ts">
function confirm() {
  return new Promise((resolve) => {
    setTimeout(() => resolve(null), 3000)
  })
}

function handleOpenChange() {
  console.log('open change')
}
</script>

<template>
  <a-popconfirm
    title="Title"
    description="Open Popconfirm with Promise"
    @confirm="confirm"
    @open-change="handleOpenChange"
  >
    <a-button type="primary">
      Open Popconfirm with Promise
    </a-button>
  </a-popconfirm>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Popconfirm by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { PopconfirmProps } from 'antdv-next'

const classes: PopconfirmProps['classes'] = {
  container: 'demo-popconfirm-container',
}

const stylesObject: PopconfirmProps['styles'] = {
  container: {
    backgroundColor: '#eee',
    boxShadow: 'inset 5px 5px 3px #fff, inset -5px -5px 3px #ddd, 0 0 3px rgba(0,0,0,0.2)',
  },
  title: {
    color: '#262626',
  },
  content: {
    color: '#262626',
  },
}

const stylesFn: PopconfirmProps['styles'] = (info) => {
  if (info?.props?.arrow === false) {
    return {
      container: {
        backgroundColor: 'rgba(53, 71, 125, 0.8)',
        padding: '12px',
        borderRadius: '4px',
      },
      title: {
        color: '#fff',
      },
      content: {
        color: '#fff',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex gap="medium">
    <a-popconfirm
      title="Object text"
      description="Object description"
      :classes="classes"
      :styles="stylesObject"
      :arrow="false"
    >
      <a-button>Object Style</a-button>
    </a-popconfirm>
    <a-popconfirm
      title="Function text"
      description="Function description"
      :classes="classes"
      :styles="stylesFn"
      :arrow="false"
      :ok-button-props="{ styles: { root: { backgroundColor: 'rgba(53, 71, 125, 0.6)', color: '#fff' } } }"
      :cancel-button-props="{ styles: { root: { borderColor: 'rgba(53, 71, 125, 0.6)', backgroundColor: '#fff', color: 'rgba(53, 71, 125, 0.8)' } } }"
    >
      <a-button type="primary">
        Function Style
      </a-button>
    </a-popconfirm>
  </a-flex>
</template>

<style>
.demo-popconfirm-container {
  padding: 10px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| cancelButtonProps | The cancel button props | ButtonProps | - | - | × |
| cancelText | The text of the Cancel button | VueNode | `Cancel` | - | × |
| disabled | Whether to show popconfirm when clicking its children node | boolean | false | - | × |
| icon | Customize icon of confirmation | VueNode | &lt;ExclamationCircleFilled /&gt; | - | × |
| okButtonProps | The ok button props | ButtonProps | - | - | × |
| okText | The text of the Confirm button | VueNode | `OK` | - | × |
| okType | Button `type` of the Confirm button | LegacyButtonType | `primary` | - | × |
| showCancel | Show cancel button | boolean | true | - | × |
| title | The title of the confirmation box | VueNode | - | - | × |
| description | The description of the confirmation box | VueNode | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | PopconfirmClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | PopconfirmStylesType | - | - | ✓ |

Popconfirm also supports all Popover props. See [Popover](/components/popover#api).

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| openChange | Callback when popconfirm visibility changes | (open: boolean, e?: MouseEvent \| KeyboardEvent) =&gt; void | - |
| confirm | Callback of confirmation | (e?: MouseEvent) =&gt; void | - |
| cancel | Callback of cancel | (e?: MouseEvent) =&gt; void | - |
| popupClick | Callback of popup click | (e: MouseEvent) =&gt; void | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| title | The title of the confirmation box | () =&gt; any | - |
| description | The description of the confirmation box title | () =&gt; any | - |
| icon | Customize icon of confirmation | () =&gt; any | - |
| okText | The text of the Confirm button | () =&gt; any | - |
| cancelText | The text of the Cancel button | () =&gt; any | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Popconfirm"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

For more questions, please refer to [Tooltip FAQ](/components/tooltip#faq).

---
Title: Popover
URL: https://www.antdv-next.com/components/popover.md
---

## When To Use

A simple popup card to provide extra information or operations.

Comparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons.

## Examples

### Basic
The most basic example. The size of the floating layer depends on the contents region.
```vue
<template>
  <a-popover title="Title">
    <template #content>
      <div>
        <p>Content</p>
        <p>Content</p>
      </div>
    </template>
    <a-button type="primary">
      Hover me
    </a-button>
  </a-popover>
</template>

<style scoped>
:global(.ant-popover-content p) {
  margin: 0;
}
</style>
```
### Three ways to trigger
Mouse to click, focus and move in.
```vue
<template>
  <a-space wrap>
    <a-popover title="Title" trigger="hover">
      <template #content>
        <div>
          <p>Content</p>
          <p>Content</p>
        </div>
      </template>
      <a-button>Hover me</a-button>
    </a-popover>
    <a-popover title="Title" trigger="focus">
      <template #content>
        <div>
          <p>Content</p>
          <p>Content</p>
        </div>
      </template>
      <a-button>Focus me</a-button>
    </a-popover>
    <a-popover title="Title" trigger="click">
      <template #content>
        <div>
          <p>Content</p>
          <p>Content</p>
        </div>
      </template>
      <a-button>Click me</a-button>
    </a-popover>
  </a-space>
</template>
```
### Placement
There are 12 `placement` options available.
```vue
<script setup lang="ts">
import { h } from 'vue'

const title = 'Title'
const content = h('div', [
  h('p', 'Content'),
  h('p', 'Content'),
])
const buttonWidth = 80
</script>

<template>
  <a-config-provider :button="{ style: { width: `${buttonWidth}px`, margin: '4px' } }">
    <a-flex vertical justify="center" align="center" class="demo">
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-popover placement="topLeft" :title="title" :content="content">
          <a-button>TL</a-button>
        </a-popover>
        <a-popover placement="top" :title="title" :content="content">
          <a-button>Top</a-button>
        </a-popover>
        <a-popover placement="topRight" :title="title" :content="content">
          <a-button>TR</a-button>
        </a-popover>
      </a-flex>
      <a-flex :style="{ width: `${buttonWidth * 5 + 32}px` }" justify="space-between" align="center">
        <a-flex align="center" vertical>
          <a-popover placement="leftTop" :title="title" :content="content">
            <a-button>LT</a-button>
          </a-popover>
          <a-popover placement="left" :title="title" :content="content">
            <a-button>Left</a-button>
          </a-popover>
          <a-popover placement="leftBottom" :title="title" :content="content">
            <a-button>LB</a-button>
          </a-popover>
        </a-flex>
        <a-flex align="center" vertical>
          <a-popover placement="rightTop" :title="title" :content="content">
            <a-button>RT</a-button>
          </a-popover>
          <a-popover placement="right" :title="title" :content="content">
            <a-button>Right</a-button>
          </a-popover>
          <a-popover placement="rightBottom" :title="title" :content="content">
            <a-button>RB</a-button>
          </a-popover>
        </a-flex>
      </a-flex>
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-popover placement="bottomLeft" :title="title" :content="content">
          <a-button>BL</a-button>
        </a-popover>
        <a-popover placement="bottom" :title="title" :content="content">
          <a-button>Bottom</a-button>
        </a-popover>
        <a-popover placement="bottomRight" :title="title" :content="content">
          <a-button>BR</a-button>
        </a-popover>
      </a-flex>
    </a-flex>
  </a-config-provider>
</template>
```
### Arrow
Hide arrow by `arrow`.
```vue
<script setup lang="ts">
import type { PopoverProps } from 'antdv-next'
import { computed, h, shallowRef } from 'vue'

const buttonWidth = shallowRef(80)
const arrow = shallowRef<'Show' | 'Hide' | 'Center'>('Show')
const mergedArrow = computed<PopoverProps['arrow']>(() => {
  if (arrow.value === 'Hide') {
    return false
  }
  if (arrow.value === 'Show') {
    return true
  }
  return { pointAtCenter: true }
})

const title = 'Title'
const content = h('div', [
  h('p', 'Content'),
  h('p', 'Content'),
])
</script>

<template>
  <a-config-provider :button="{ style: { width: `${buttonWidth}px`, margin: '4px' } }">
    <a-segmented
      v-model:value="arrow"
      :options="['Show', 'Hide', 'Center']"
      style="margin-bottom: 24px"
    />
    <a-flex vertical justify="center" align="center" class="demo">
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-popover placement="topLeft" :title="title" :content="content" :arrow="mergedArrow">
          <a-button>TL</a-button>
        </a-popover>
        <a-popover placement="top" :title="title" :content="content" :arrow="mergedArrow">
          <a-button>Top</a-button>
        </a-popover>
        <a-popover placement="topRight" :title="title" :content="content" :arrow="mergedArrow">
          <a-button>TR</a-button>
        </a-popover>
      </a-flex>
      <a-flex :style="{ width: `${buttonWidth * 5 + 32}px` }" justify="space-between" align="center">
        <a-flex align="center" vertical>
          <a-popover placement="leftTop" :title="title" :content="content" :arrow="mergedArrow">
            <a-button>LT</a-button>
          </a-popover>
          <a-popover placement="left" :title="title" :content="content" :arrow="mergedArrow">
            <a-button>Left</a-button>
          </a-popover>
          <a-popover placement="leftBottom" :title="title" :content="content" :arrow="mergedArrow">
            <a-button>LB</a-button>
          </a-popover>
        </a-flex>
        <a-flex align="center" vertical>
          <a-popover placement="rightTop" :title="title" :content="content" :arrow="mergedArrow">
            <a-button>RT</a-button>
          </a-popover>
          <a-popover placement="right" :title="title" :content="content" :arrow="mergedArrow">
            <a-button>Right</a-button>
          </a-popover>
          <a-popover placement="rightBottom" :title="title" :content="content" :arrow="mergedArrow">
            <a-button>RB</a-button>
          </a-popover>
        </a-flex>
      </a-flex>
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-popover placement="bottomLeft" :title="title" :content="content" :arrow="mergedArrow">
          <a-button>BL</a-button>
        </a-popover>
        <a-popover placement="bottom" :title="title" :content="content" :arrow="mergedArrow">
          <a-button>Bottom</a-button>
        </a-popover>
        <a-popover placement="bottomRight" :title="title" :content="content" :arrow="mergedArrow">
          <a-button>BR</a-button>
        </a-popover>
      </a-flex>
    </a-flex>
  </a-config-provider>
</template>
```
### Auto Shift
Auto adjust Popup and arrow position when Popover is close to the edge of the screen. Will be out of screen when exceed limitation.
```vue
<script setup lang="ts">
import { onMounted, ref } from 'vue'

const open = ref(false)

onMounted(() => {
  setTimeout(() => {
    document.documentElement.scrollTop = document.documentElement.clientHeight
    document.documentElement.scrollLeft = document.documentElement.clientWidth

    requestAnimationFrame(() => {
      open.value = true
    })
  }, 10)
})
</script>

<template>
  <div class="h-300vh w-300vw flex items-center justify-center">
    <a-popover content="Thanks for using antd. Have a nice day !" :open="open">
      <a-button type="primary">
        Scroll The Window
      </a-button>
    </a-popover>
  </div>
</template>
```
### Controlling the close of the dialog
Use `open` prop to control the display of the card.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)

function hide() {
  open.value = false
}
</script>

<template>
  <a-popover v-model:open="open" title="Title" trigger="click">
    <template #content>
      <a href="" @click.prevent="hide">Close</a>
    </template>
    <a-button type="primary">
      Click me
    </a-button>
  </a-popover>
</template>
```
### Hover with click popover
The following example shows how to create a popover which can be hovered and clicked.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const clicked = ref(false)
const hovered = ref(false)

function hide() {
  clicked.value = false
  hovered.value = false
}

function handleHoverChange(value: boolean) {
  hovered.value = value
  if (value) {
    clicked.value = false
  }
}

function handleClickChange(value: boolean) {
  clicked.value = value
  if (value) {
    hovered.value = false
  }
}
</script>

<template>
  <a-popover
    title="Hover title"
    trigger="hover"
    :open="hovered"
    :style="{ width: '500px' }"
    @open-change="handleHoverChange"
  >
    <template #content>
      <div>This is hover content.</div>
    </template>
    <a-popover
      title="Click title"
      trigger="click"
      :open="clicked"
      @open-change="handleClickChange"
    >
      <template #content>
        <div>
          This is click content.
          <a href="" @click.prevent="hide">Close</a>
        </div>
      </template>
      <a-button>Hover and click</a-button>
    </a-popover>
  </a-popover>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Popover by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { PopoverProps } from 'antdv-next'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const classes: PopoverProps['classes'] = {
  container: 'demo-popover-container',
}

const stylesObject: PopoverProps['styles'] = {
  container: {
    backgroundColor: '#eee',
    boxShadow: 'inset 5px 5px 3px #fff, inset -5px -5px 3px #ddd, 0 0 3px rgba(0,0,0,0.2)',
  },
  title: {
    color: '#262626',
  },
  content: {
    color: '#262626',
  },
}

const stylesFn: PopoverProps['styles'] = (info) => {
  if (info?.props?.arrow === false) {
    return {
      container: {
        backgroundColor: 'rgba(53, 71, 125, 0.8)',
        padding: '12px',
        borderRadius: '4px',
      },
      title: {
        color: '#fff',
      },
      content: {
        color: '#fff',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex gap="medium">
    <a-popover
      content="Object text"
      :classes="classes"
      :styles="stylesObject"
      :arrow="false"
    >
      <a-button>Object Style</a-button>
    </a-popover>
    <a-popover
      content="Function text"
      :classes="classes"
      :styles="stylesFn"
      :arrow="false"
    >
      <a-button type="primary">
        Function Style
      </a-button>
    </a-popover>
  </a-flex>
</template>

<style>
.demo-popover-container {
  padding: v-bind('`${token.paddingXS}px`');
  border: 1px dashed v-bind('token.colorBorder');
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| title | Title of the card | VueNode | - | - | × |
| content | Content of the card | VueNode | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | PopoverClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | PopoverStylesType | - | - | ✓ |

Popover also supports all Tooltip props. See [Tooltip](/components/tooltip#api).

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| openChange | Callback when popover visibility changes | (open: boolean, e?: MouseEvent \| KeyboardEvent) =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| title | Title of the card | () =&gt; any | - |
| content | Content of the card | () =&gt; any | - |

## Note

Please ensure that the child node of `Popover` can accept `mouseenter`, `mouseleave`, `focus`, `click` events.

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Popover" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

For more questions, please refer to [Tooltip FAQ](/components/tooltip#faq).

---
Title: Progress
URL: https://www.antdv-next.com/components/progress.md
---

## When To Use {#when-to-use}

If it will take a long time to complete an operation, you can use `Progress` to show the current progress and status.

- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
- When you need to display the completion percentage of an operation.

## Examples {#examples}

### Progress bar
A standard progress bar.
```vue
<template>
  <a-flex gap="small" vertical>
    <a-progress :percent="30" />
    <a-progress :percent="50" status="active" />
    <a-progress :percent="70" status="exception" />
    <a-progress :percent="100" />
    <a-progress :percent="50" :show-info="false" />
  </a-flex>
</template>
```
### Circular progress bar
A circular progress bar.
```vue
<template>
  <a-flex gap="small" wrap>
    <a-progress type="circle" :percent="75" />
    <a-progress type="circle" :percent="70" status="exception" />
    <a-progress type="circle" :percent="100" />
  </a-flex>
</template>
```
### Mini size progress bar
Appropriate for a narrow area.
```vue
<template>
  <a-flex vertical gap="small" style="width: 180px">
    <a-progress :percent="30" size="small" />
    <a-progress :percent="50" size="small" status="active" />
    <a-progress :percent="70" size="small" status="exception" />
    <a-progress :percent="100" size="small" />
  </a-flex>
</template>
```
### Responsive circular progress bar
Responsive circular progress bar. When `size` is smaller than 20, progress information will be displayed in Tooltip.
```vue
<template>
  <a-flex align="center" gap="small">
    <a-progress
      type="circle"
      rail-color="#e6f4ff"
      :percent="60"
      :stroke-width="20"
      :size="14"
      :format="number => `In progress, ${number}% complete`"
    />
    <span>Code release</span>
  </a-flex>
</template>
```
### Mini size circular progress bar
A smaller circular progress bar.
```vue
<template>
  <a-flex wrap gap="small">
    <a-progress type="circle" :percent="30" :size="80" />
    <a-progress type="circle" :percent="70" status="exception" :size="80" />
    <a-progress type="circle" :percent="100" :size="80" />
  </a-flex>
</template>
```
### Dynamic
A dynamic progress bar is better.
```vue
<script setup lang="ts">
import { MinusOutlined, PlusOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const percent = ref(0)

function increase() {
  percent.value = Math.min(100, percent.value + 10)
}

function decline() {
  percent.value = Math.max(0, percent.value - 10)
}
</script>

<template>
  <a-flex vertical gap="small">
    <a-flex vertical gap="small">
      <a-progress :percent="percent" type="line" />
      <a-progress :percent="percent" type="circle" />
    </a-flex>
    <a-space-compact>
      <a-button @click="decline">
        <template #icon>
          <MinusOutlined />
        </template>
      </a-button>
      <a-button @click="increase">
        <template #icon>
          <PlusOutlined />
        </template>
      </a-button>
    </a-space-compact>
  </a-flex>
</template>
```
### Custom text format
You can set a custom text by setting the `format` prop.
```vue
<template>
  <a-flex gap="small" wrap>
    <a-progress type="circle" :percent="75" :format="percent => `${percent} Days`" />
    <a-progress type="circle" :percent="100" :format="() => 'Done'" />
  </a-flex>
</template>
```
### Dashboard
By setting `type="dashboard"`, you can get a dashboard style of progress easily.
```vue
<script setup lang="ts">
import type { ProgressProps } from 'antdv-next'
import { ref } from 'vue'

type GapPlacement = NonNullable<ProgressProps['gapPlacement']>

const gapPlacement = ref<GapPlacement>('bottom')
const gapDegree = ref<number>(50)
</script>

<template>
  <a-flex vertical gap="large">
    <div>
      gapDegree:
      <a-segmented
        v-model:value="gapDegree"
        :options="[
          { label: 50, value: 50 },
          { label: 100, value: 100 },
        ]"
      />
    </div>
    <div>
      gapPlacement:
      <a-segmented
        v-model:value="gapPlacement"
        :options="[
          { label: 'start', value: 'start' },
          { label: 'end', value: 'end' },
          { label: 'top', value: 'top' },
          { label: 'bottom', value: 'bottom' },
        ]"
      />
    </div>
    <a-progress type="dashboard" :gap-degree="gapDegree" :percent="30" :gap-placement="gapPlacement" />
  </a-flex>
</template>
```
### Progress bar with success segment
Show several parts of progress with different status.
```vue
<template>
  <a-flex gap="small" vertical>
    <a-tooltip title="3 done / 3 in progress / 4 to do">
      <a-progress :percent="60" :success="{ percent: 30 }" />
    </a-tooltip>
    <a-flex gap="small" wrap>
      <a-tooltip title="3 done / 3 in progress / 4 to do">
        <a-progress type="circle" :percent="60" :success="{ percent: 30 }" />
      </a-tooltip>
      <a-tooltip title="3 done / 3 in progress / 4 to do">
        <a-progress type="dashboard" :percent="60" :success="{ percent: 30 }" />
      </a-tooltip>
    </a-flex>
  </a-flex>
</template>
```
### Stroke Linecap
By setting `strokeLinecap="butt"`, you can change the linecaps from `round` to `butt`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) for more information.
```vue
<template>
  <a-flex vertical gap="small">
    <a-progress stroke-linecap="butt" :percent="75" />
    <a-flex wrap gap="small">
      <a-progress stroke-linecap="butt" type="circle" :percent="75" />
      <a-progress stroke-linecap="butt" type="dashboard" :percent="75" />
    </a-flex>
  </a-flex>
</template>
```
### Custom line gradient
Gradient encapsulation, `circle` and `dashboard` will ignore `strokeLinecap` when setting gradient.
```vue
<script setup lang="ts">
const twoColors = {
  '0%': '#108ee9',
  '100%': '#87d068',
}

const conicColors = {
  '0%': '#87d068',
  '50%': '#ffe58f',
  '100%': '#ffccc7',
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-progress :percent="99.9" :stroke-color="twoColors" />
    <a-progress :percent="50" status="active" :stroke-color="{ from: '#108ee9', to: '#87d068' }" />
    <a-flex gap="small" wrap>
      <a-progress type="circle" :percent="90" :stroke-color="twoColors" />
      <a-progress type="circle" :percent="100" :stroke-color="twoColors" />
      <a-progress type="circle" :percent="93" :stroke-color="conicColors" />
    </a-flex>
    <a-flex gap="small" wrap>
      <a-progress type="dashboard" :percent="90" :stroke-color="twoColors" />
      <a-progress type="dashboard" :percent="100" :stroke-color="twoColors" />
      <a-progress type="dashboard" :percent="93" :stroke-color="conicColors" />
    </a-flex>
  </a-flex>
</template>
```
### Progress bar with steps
A progress bar with steps.
```vue
<script setup lang="ts">
import { green, red } from '@ant-design/colors'
</script>

<template>
  <a-flex gap="small" vertical>
    <a-progress :percent="50" :steps="3" />
    <a-progress :percent="30" :steps="5" />
    <a-progress :percent="100" :steps="5" size="small" :stroke-color="green[6]" />
    <a-progress :percent="60" :steps="5" :stroke-color="[green[6]!, green[6]!, red[5]!]" />
  </a-flex>
</template>
```
### Circular progress bar with steps
A circular progress bar that supports steps and color segments, default gap is 2px.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const stepsCount = ref(5)
const stepsGap = ref(7)
</script>

<template>
  <div>
    <a-typography-title :level="5">
      Custom count:
    </a-typography-title>
    <a-slider v-model:value="stepsCount" :min="2" :max="10" />
    <a-typography-title :level="5">
      Custom gap:
    </a-typography-title>
    <a-slider v-model:value="stepsGap" :step="4" :min="0" :max="40" />
    <a-flex wrap gap="medium" style="margin-top: 16px">
      <a-progress
        type="dashboard"
        :steps="8"
        :percent="50"
        rail-color="rgba(0, 0, 0, 0.06)"
        :stroke-width="20"
      />
      <a-progress
        type="circle"
        :percent="100"
        :steps="{ count: stepsCount, gap: stepsGap }"
        rail-color="rgba(0, 0, 0, 0.06)"
        :stroke-width="20"
      />
    </a-flex>
  </div>
</template>
```
### Progress size
The size of progress.
```vue
<template>
  <a-flex vertical gap="medium">
    <a-flex vertical gap="small" style="width: 300px">
      <a-progress :percent="50" />
      <a-progress :percent="50" size="small" />
      <a-progress :percent="50" :size="[300, 20]" />
    </a-flex>
    <a-flex align="center" wrap :gap="30">
      <a-progress type="circle" :percent="50" />
      <a-progress type="circle" :percent="50" size="small" />
      <a-progress type="circle" :percent="50" :size="20" />
    </a-flex>
    <a-flex align="center" wrap :gap="30">
      <a-progress type="dashboard" :percent="50" />
      <a-progress type="dashboard" :percent="50" size="small" />
      <a-progress type="dashboard" :percent="50" :size="20" />
    </a-flex>
    <a-flex align="center" wrap :gap="30">
      <a-progress :steps="3" :percent="50" />
      <a-progress :steps="3" :percent="50" size="small" />
      <a-progress :steps="3" :percent="50" :size="20" />
      <a-progress :steps="3" :percent="50" :size="[20, 30]" />
    </a-flex>
  </a-flex>
</template>
```
### Change progress value position
Change the position of the progress value, you can use `percentPosition` to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.
```vue
<template>
  <a-flex gap="small" vertical>
    <a-progress
      :percent="0"
      :percent-position="{ align: 'center', type: 'inner' }"
      :size="[200, 20]"
      stroke-color="#E6F4FF"
    />
    <a-progress :percent="10" :percent-position="{ align: 'center', type: 'inner' }" :size="[300, 20]" />
    <a-progress
      :percent="50"
      :percent-position="{ align: 'start', type: 'inner' }"
      :size="[300, 20]"
      stroke-color="#B7EB8F"
    />
    <a-progress
      :percent="60"
      :percent-position="{ align: 'end', type: 'inner' }"
      :size="[300, 20]"
      stroke-color="#001342"
    />
    <a-progress :percent="100" :percent-position="{ align: 'center', type: 'inner' }" :size="[400, 20]" />
    <a-progress :percent="60" :percent-position="{ align: 'start', type: 'outer' }" />
    <a-progress :percent="100" :percent-position="{ align: 'start', type: 'outer' }" />
    <a-progress :percent="60" :percent-position="{ align: 'center', type: 'outer' }" size="small" />
    <a-progress :percent="100" :percent-position="{ align: 'center', type: 'outer' }" />
  </a-flex>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Progress by passing objects or functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { ProgressProps } from 'antdv-next'

const classes: ProgressProps['classes'] = {
  root: 'demo-progress-root',
  rail: 'demo-progress-rail',
  track: 'demo-progress-track',
}

const stylesFn: ProgressProps['styles'] = (info) => {
  const percent = info?.props?.percent ?? 0
  const hue = 200 - (200 * percent) / 100
  return {
    track: {
      backgroundImage: `
        linear-gradient(
          to right,
          hsla(${hue}, 85%, 65%, 1),
          hsla(${hue + 30}, 90%, 55%, 0.95)
        )`,
      borderRadius: 8,
      transition: 'all 0.3s ease',
    },
    rail: {
      backgroundColor: 'rgba(0, 0, 0, 0.1)',
      borderRadius: 8,
    },
  } as ProgressProps['styles']
}
</script>

<template>
  <a-flex vertical gap="large">
    <a-progress :classes="classes" :styles="stylesFn" :percent="10" />
    <a-progress :classes="classes" :styles="stylesFn" :percent="20" />
    <a-progress :classes="classes" :styles="stylesFn" :percent="40" />
    <a-progress :classes="classes" :styles="stylesFn" :percent="60" />
    <a-progress :classes="classes" :styles="stylesFn" :percent="80" />
    <a-progress :classes="classes" :styles="stylesFn" :percent="99" />
  </a-flex>
</template>

<style>
.demo-progress-root {
  width: 100%;
}

.demo-progress-rail {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.demo-progress-track {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

Properties shared by all types.

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | ProgressClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | ProgressStylesType | - | - | ✓ |
| rootClass | Root container class | string | - | - | × |
| type | To set the type, options: `line` `circle` `dashboard` | ProgressType | `line` | - | × |
| percent | To set the completion percentage | number | 0 | - | × |
| format | The template function of the content | (percent?: number, successPercent?: number) =&gt; any | (percent) =&gt; percent + `%` | - | × |
| status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | (typeof ProgressStatuses)[number] | - | - | × |
| showInfo | Whether to display the progress value and the status icon | boolean | true | - | × |
| strokeWidth | - | number | - | - | × |
| strokeLinecap | To set the style of the progress linecap | 'butt' \| 'square' \| 'round' | `round` | - | × |
| strokeColor | The color of progress bar | string \| string[] \| ProgressGradient | - | - | × |
| railColor | The color of unfilled part | string | - | - | × |
| success | Configs of successfully progress bar | SuccessProps | - | - | × |
| trailColor | The color of unfilled part. Please use `railColor` instead | string | - | - | × |
| width | Deprecated. Use `size` instead | number | - | - | × |
| size | Progress size | number \| [number \| string, number] \| ProgressSize \| &#123; width?: number, height?: number &#125; | `medium` | - | × |

### `type="line"` {#type-line}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| steps | The total step count | number | - | - |
| rounding | The function to round the value | (step: number) =&gt; number | Math.round | - |
| strokeColor | The color of progress bar, render `linear-gradient` when passing an object, could accept `string[]` when has `steps`. | string \| string[] \| ProgressGradient | - | - |
| percentPosition | Progress value position, passed in object, `align` indicates the horizontal position of the value, `type` indicates whether the value is inside or outside the progress bar | PercentPositionType | &#123; align: 'end', type: 'outer' &#125; | - |

### `type="circle"` {#type-circle}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| steps | The total step count. When passing an object, `count` refers to the number of steps, and `gap` refers to the distance between them. When passing a number, the default value for `gap` is 2. | number \| &#123; count: number, gap: number &#125; | - | - |
| strokeColor | The color of circular progress, render gradient when passing an object | string \| ProgressGradient | - | - |
| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - |

### `type="dashboard"` {#type-dashboard}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| steps | The total step count. When passing an object, `count` refers to the number of steps, and `gap` refers to the distance between them. When passing a number, the default value for `gap` is 2. | number \| &#123; count: number, gap: number &#125; | - | - |
| gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 | - |
| gapPlacement | The gap placement, options: `top` `bottom` `start` `end` | GapPlacement | `bottom` | - |
| gapPosition | Deprecated. Please use `gapPlacement` instead | GapPosition | `bottom` | - |
| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>


## Design Token {#design-token}

<ComponentTokenTable component="Progress"></ComponentTokenTable>

---
Title: QRCode
URL: https://www.antdv-next.com/components/qr-code.md
---

## When To Use

Used when the text needs to be converted into a QR Code.

## Examples

<!-- prettier-ignore -->
<demo src="./demo/base.vue">base</demo>
<demo src="./demo/icon.vue">With Icon</demo>
<demo src="./demo/status.vue">other status</demo>
<demo src="./demo/customStatusRender.vue">custom status render</demo>
<demo src="./demo/type.vue">Custom Render Type</demo>
<demo src="./demo/customSize.vue">Custom Size</demo>
<demo src="./demo/customColor.vue">Custom Color</demo>
<demo src="./demo/download.vue">Download QRCode</demo>
<demo src="./demo/errorLevel.vue">Error Level</demo>
<demo src="./demo/Popover.vue">Advanced Usage</demo>
<!-- <demo src="./demo/style-class.vue">Custom semantic dom styling</demo> -->

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| value | scanned text | string \| string[] | - | - | × |
| type | render type | `canvas` \| `svg` | `canvas` | - | × |
| icon | include image url (only image link are supported) | string | - | - | × |
| size | QRCode size | number | 160 | - | × |
| iconSize | include image size | number \| &#123; width: number; height: number &#125; | 40 | - | × |
| color | QRCode Color | string | `#000` | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| bgColor | QRCode Background Color | string | `transparent` | - | × |
| marginSize | Quiet zone size (in modules). `0` means no margin | number | `0` | - | × |
| bordered | Whether has border style | boolean | `true` | - | × |
| errorLevel | Error Code Level | `'L'` \| `'M'` \| `'Q'` \| `'H'` | `'M'` | - | × |
| boostLevel | If enabled, the Error Correction Level of the result may be higher than the specified Error Correction Level | boolean | true | - | × |
| status | QRCode status | `'active'` \| `'expired'` \| `'loading'` \| `'scanned'` | `'active'` | - | × |
| statusRender | custom status render | (info: StatusRenderInfo) =&gt; VueNode | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| refresh | Refresh the QR code | () =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| statusRender | custom status render | (info: StatusRenderInfo) =&gt; any | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="QRCode"></ComponentTokenTable>

## FAQ

### About QRCode ErrorLevel {#faq-error-correction-level}

The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.

Generally, the QR code is divided into 4 error correction levels: Level `L` can correct about `7%` errors, Level `M` can correct about `15%` errors, Level `Q` can correct about `25%` errors, and Level `H` can correct about `30%` errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.

> For more information, see the: [https://www.qrcode.com/en/about/error_correction](https://www.qrcode.com/en/about/error_correction.html)

### ⚠️⚠️⚠️ Cannot scan the QR code? {#faq-cannot-scan}

If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels.

You can configure the QR code to be larger through size, or shorten the link through short link services.

---
Title: Radio
URL: https://www.antdv-next.com/components/radio.md
---

## When To Use

- Used to select a single state from multiple options.
- The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.

```vue
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
</script>

<template>
  <!-- When use RadioGroup, recommended ✅ -->
  <a-radio-group
    v-model:value="value"
    :options="[
      { value: 1, label: 'A' },
      { value: 2, label: 'B' },
      { value: 3, label: 'C' },
    ]"
  />
  <!--  No recommended 🙅🏻‍♀️  -->
  <a-radio-group v-model:value="value">
    <a-radio :value="1">
      A
    </a-radio>
    <a-radio :value="2">
      B
    </a-radio>
    <a-radio :value="3">
      C
    </a-radio>
  </a-radio-group>
</template>
```

## Examples

### Basic
The simplest use.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const val = shallowRef()
</script>

<template>
  <a-radio v-model:checked="val">
    Radio
  </a-radio>
</template>
```
### disabled
Radio unavailable.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const disabled = shallowRef(true)
function toggleDisabled() {
  disabled.value = !disabled.value
}
</script>

<template>
  <a-space direction="vertical">
    <a-space>
      <a-radio :checked="false" :disabled="disabled">
        Disabled
      </a-radio>
      <a-radio :checked="true" :disabled="disabled">
        Disabled
      </a-radio>
    </a-space>
    <a-button type="primary" @click="toggleDisabled">
      Toggle disabled
    </a-button>
  </a-space>
</template>
```
### Radio Group
A group of radio components.
```vue
<script setup lang="ts">
import type { RadioOptionType } from 'antdv-next'
import { BarChartOutlined, DotChartOutlined, LineChartOutlined, PieChartOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

const iconsMap: any = {
  1: LineChartOutlined,
  2: DotChartOutlined,
  3: BarChartOutlined,
  4: PieChartOutlined,
}
const options: RadioOptionType[] = [
  {
    value: 1,
    class: 'option-1',
    label: 'LineChat',
  },
  {
    value: 2,
    class: 'option-2',
    label: 'DotChart',
  },
  {
    value: 3,
    class: 'option-3',
    label: 'BarChart',
  },
  {
    value: 4,
    class: 'option-4',
    label: 'PieChart',
  },
]
const val = shallowRef(1)
</script>

<template>
  <a-radio-group v-model:value="val" :options="options">
    <template #labelRender="{ item }">
      <a-flex gap="small" justify="center" align="center" vertical>
        <component :is="iconsMap[item.value]" style="font-size: 18px;" />
        {{ item.label }}
      </a-flex>
    </template>
  </a-radio-group>
</template>
```
### Vertical Radio.Group
Vertical Radio.Group, with more radios.
```vue
<script setup lang="ts">
import type { RadioGroupProps } from 'antdv-next'
import { shallowRef } from 'vue'

const val = shallowRef(1)

const buttonOptions: RadioGroupProps['options'] = [
  { label: 'Apple', value: 'Apple', class: 'label-1' },
  { label: 'Pear', value: 'Pear', class: 'label-2' },
  { label: 'Orange', value: 'Orange', title: 'Orange', class: 'label-3' },
]
</script>

<template>
  <a-flex align="start" gap="large">
    <div style="flex: 1">
      <a-radio-group v-model:value="val" vertical>
        <a-radio :value="1">
          Option A
        </a-radio>
        <a-radio :value="2">
          Option B
        </a-radio>
        <a-radio :value="3">
          Option C
        </a-radio>
        <a-radio :value="4">
          More...
          <a-input v-if="val === 4" style="width: 100px; margin-left: 10px" />
        </a-radio>
      </a-radio-group>
    </div>
    <div style="flex: 1">
      <a-radio-group :options="buttonOptions" option-type="button" vertical />
    </div>
  </a-flex>
</template>
```
### Block Radio.Group
The `block` property will make a Radio.Group fit to its parent width.
```vue
<script setup lang="ts">
import type { CheckboxOptionType } from 'antdv-next'
import { shallowRef } from 'vue'

const options: CheckboxOptionType[] = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
]
const value = shallowRef('Apple')
</script>

<template>
  <a-flex vertical gap="medium">
    <a-radio-group v-model:value="value" block :options="options" />
    <a-radio-group
      v-model:value="value"
      block
      :options="options"
      option-type="button"
      button-style="solid"
    />
    <a-radio-group
      v-model:value="value"
      block
      :options="options"
      option-type="button"
    />
  </a-flex>
</template>
```
### Radio.Group group - optional
Render radios by configuring `options`. Radio type can also be set through the `optionType` parameter.
```vue
<script setup lang="ts">
import type { CheckboxOptionType } from 'antdv-next'
import { shallowRef } from 'vue'

const plainOptions = ['Apple', 'Pear', 'Orange']
const options: CheckboxOptionType[] = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', title: 'Orange' },
]
const optionsWithDisabled: CheckboxOptionType[] = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange', disabled: true },
]

const value1 = shallowRef('Apple')
const value2 = shallowRef('Apple')
const value3 = shallowRef('Apple')
const value4 = shallowRef('Apple')
</script>

<template>
  <a-flex vertical gap="medium">
    <a-radio-group v-model:value="value1" :options="plainOptions" />
    <a-radio-group v-model:value="value2" :options="optionsWithDisabled" />
    <br>
    <a-radio-group v-model:value="value3" :options="options" option-type="button" />
    <a-radio-group v-model:value="value4" :options="optionsWithDisabled" option-type="button" button-style="solid" />
  </a-flex>
</template>
```
### radio style
The combination of radio button style.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef('a')
</script>

<template>
  <a-flex vertical gap="medium">
    <a-radio-group v-model:value="value">
      <a-radio-button value="a">
        Hangzhou
      </a-radio-button>
      <a-radio-button value="b">
        Shanghai
      </a-radio-button>
      <a-radio-button value="c">
        Beijing
      </a-radio-button>
      <a-radio-button value="d">
        Chengdu
      </a-radio-button>
    </a-radio-group>
    <a-radio-group v-model:value="value">
      <a-radio-button value="a">
        Hangzhou
      </a-radio-button>
      <a-radio-button value="b" disabled>
        Shanghai
      </a-radio-button>
      <a-radio-button value="c">
        Beijing
      </a-radio-button>
      <a-radio-button value="d">
        Chengdu
      </a-radio-button>
    </a-radio-group>
    <a-radio-group v-model:value="value" disabled>
      <a-radio-button value="a">
        Hangzhou
      </a-radio-button>
      <a-radio-button value="b">
        Shanghai
      </a-radio-button>
      <a-radio-button value="c">
        Beijing
      </a-radio-button>
      <a-radio-button value="d">
        Chengdu
      </a-radio-button>
    </a-radio-group>
  </a-flex>
</template>
```
### Radio.Group with name
Passing the `name` property to all `input[type="radio"]` that are in the same Radio.Group. It is usually used to let the browser see your Radio.Group as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Radio.Group.
```vue
<script setup lang="ts">
import type { CheckboxOptionType } from 'antdv-next'
import { shallowRef } from 'vue'

const options: CheckboxOptionType[] = [
  { label: 'A', value: 1 },
  { label: 'B', value: 2 },
  { label: 'C', value: 3 },
  { label: 'D', value: 4 },
]
const val = shallowRef(1)
</script>

<template>
  <a-radio-group v-model:value="val" name="radiogroup" :options="options" />
</template>
```
### Size
There are three sizes available: large, medium, and small. It can coordinate with input box.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef()
</script>

<template>
  <a-flex vertical gap="medium">
    <a-radio-group v-model:value="value" size="small" default-value="a">
      <a-radio-button value="a">
        Hangzhou
      </a-radio-button>
      <a-radio-button value="b">
        Shanghai
      </a-radio-button>
      <a-radio-button value="c">
        Beijing
      </a-radio-button>
      <a-radio-button value="d">
        Chengdu
      </a-radio-button>
    </a-radio-group>
    <a-radio-group v-model:value="value" default-value="a">
      <a-radio-button value="a">
        Hangzhou
      </a-radio-button>
      <a-radio-button value="b">
        Shanghai
      </a-radio-button>
      <a-radio-button value="c">
        Beijing
      </a-radio-button>
      <a-radio-button value="d">
        Chengdu
      </a-radio-button>
    </a-radio-group>
    <a-radio-group v-model:value="value" size="large" disabled default-value="a">
      <a-radio-button value="a">
        Hangzhou
      </a-radio-button>
      <a-radio-button value="b">
        Shanghai
      </a-radio-button>
      <a-radio-button value="c">
        Beijing
      </a-radio-button>
      <a-radio-button value="d">
        Chengdu
      </a-radio-button>
    </a-radio-group>
  </a-flex>
</template>
```
### Solid radio button
Solid radio button style.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef('a')
</script>

<template>
  <a-flex vertical gap="medium">
    <a-radio-group v-model:value="value" button-style="solid">
      <a-radio-button value="a">
        Hangzhou
      </a-radio-button>
      <a-radio-button value="b">
        Shanghai
      </a-radio-button>
      <a-radio-button value="c">
        Beijing
      </a-radio-button>
      <a-radio-button value="d">
        Chengdu
      </a-radio-button>
    </a-radio-group>
    <a-radio-group v-model:value="value" button-style="solid">
      <a-radio-button value="a">
        Hangzhou
      </a-radio-button>
      <a-radio-button value="b" disabled>
        Shanghai
      </a-radio-button>
      <a-radio-button value="c">
        Beijing
      </a-radio-button>
      <a-radio-button value="d">
        Chengdu
      </a-radio-button>
    </a-radio-group>
  </a-flex>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Radio/RadioButton

#### Props {#radio-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| checked | Specifies whether the radio is selected, support `v-model:checked` | boolean | false |  | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | -| ✓ |
| disabled | Disable radio | boolean | false |  | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - | ✓ |
| value | According to value for comparison, to determine whether the selected | any | - |  | × |

#### Methods {#radio-methods}

| Name    | Description  |
| ------- | ------------ |
| blur()  | Remove focus |
| focus() | Get focus    |

### RadioGroup

Radio group can wrap a group of `Radio`.

#### Props {#radiogroup-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| block | Option to fit RadioGroup width to its parent width | boolean | false | - |
| buttonStyle | The style type of radio button | `outline` \| `solid` | `outline` |  |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | - |
| defaultValue | Default selected value | any | - |  |
| disabled | Disable all radio buttons | boolean | false |  |
| name | The `name` property of all `input[type="radio"]` children. If not set, it will fallback to a randomly generated name | string | - |  |
| options | Set children optional | string\[] \| number\[] \| Array&lt;[CheckboxOptionType](#checkboxoptiontype)> | - |  |
| optionType | Set Radio optionType | `default` \| `button` | `default` | - |
| orientation | Orientation | `horizontal` \| `vertical` | `horizontal` |  |
| size | The size of radio button style | `large` \| `medium` \| `small` | - |  |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - |
| value | Used for setting the currently selected value, support `v-model:value` | any | - |  |
| vertical | If true, the Radio group will be vertical. Simultaneously existing with `orientation`, `orientation` takes priority | boolean | false |  |

#### Events {#radiogroup-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | The callback function that is triggered when the state changes  | (e: RadioChangeEvent) =&gt; void | - |

#### Slots {#radiogroup-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| labelRender | label render slot | (params: &#123; item: CheckboxOptionType, index: number &#125;) =&gt; any | - |

## Types

### CheckboxOptionType

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| label | The text used to display as the Radio option | `string` | - | - |
| value | The value associated with the Radio option | `string` \| `number` \| `boolean` | - | - |
| style | The style to apply to the Radio option | `CSSProperties` | - | - |
| class | class of the Radio option | `string` | - | - |
| disabled | Specifies whether the Radio option is disabled | `boolean` | `false` | - |
| title | Adds the Title attribute value | `string` | - | - |
| id | Adds the Radio Id attribute value | `string` | - | - |
| onChange | Triggered when this option is checked, before the Radio Group `change` event | `(e: RadioChangeEvent) => void` | - | - |
| required | Specifies whether the Radio option is required | `boolean` | `false` | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Radio"></ComponentTokenTable>

---
Title: Rate
URL: https://www.antdv-next.com/components/rate.md
---

## When To Use {#when-to-use}

- Show evaluation.
- A quick rating operation on something.

## Examples {#examples}

### Basic
The simplest usage.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(0)
</script>

<template>
  <a-rate v-model:value="value" />
</template>
```
### Half star
Support select half star.
```vue
<script lang="ts" setup>
import { ref } from 'vue'

const val = ref(2.5)
</script>

<template>
  <a-rate v-model:value="val" allow-half />
</template>
```
### Show copywriting
Add copywriting in rate components.
```vue
<script setup lang="ts">
import type { RateProps } from 'antdv-next'
import { ref } from 'vue'

function getDescTitle(value: number, desc: RateProps['tooltips']) {
  const item = desc?.[value - 1]
  return typeof item === 'object' ? item.title : item
}
const desc: RateProps['tooltips'] = [
  'terrible',
  { placement: 'top', title: 'bad', trigger: 'hover' },
  'normal',
  'good',
  'wonderful',
]
const value = ref(3)
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-rate v-model:value="value" :tooltips="desc" />
    <template v-if="value">
      <span>{{ getDescTitle(value, desc) }}</span>
    </template>
  </a-flex>
</template>
```
### Read only
Read only, can't use mouse to interact.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(2)
</script>

<template>
  <a-rate v-model:value="value" disabled />
</template>
```
### Clear star
Support set allow to clear star when click again.
```vue
<script lang="ts" setup>
import { ref } from 'vue'

const val = ref(3)
const val1 = ref(3)
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-flex gap="medium">
      <a-rate v-model:value="val" />
      <span>allowClear: true</span>
    </a-flex>
    <a-flex gap="medium">
      <a-rate v-model:value="val1" :allow-clear="false" />
      <span>allowClear: false</span>
    </a-flex>
  </a-flex>
</template>
```
### Other Character
Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.
```vue
<script lang="ts" setup>
import { HeartOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'

const value1 = ref(0)
const value2 = ref(0)
const value3 = ref(0)
</script>

<template>
  <a-flex vertical gap="medium">
    <a-rate v-model:value="value1" :character="h(HeartOutlined)" allow-half />
    <a-rate v-model:value="value2" character="A" allow-half style="font-size: 36px" />
    <a-rate v-model:value="value3" character="好" allow-half />
  </a-flex>
</template>
```
### Customize character
Can customize each character using `(RateProps) => VueNode`.
```vue
<script lang="ts" setup>
import { FrownOutlined, MehOutlined, SmileOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'

const customIcons: Record<number, any> = {
  1: h(FrownOutlined),
  2: h(FrownOutlined),
  3: h(MehOutlined),
  4: h(SmileOutlined),
  5: h(SmileOutlined),
}
const value = ref(2)
const value2 = ref(3)
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-rate v-model:value="value" :character="({ index = 0 }) => index + 1" />
    <a-rate v-model:value="value2" :character="({ index = 0 }) => customIcons[index + 1]" />
  </a-flex>
</template>
```
### Sizes
Three sizes.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref(0)
const value2 = ref(0)
const value3 = ref(0)
</script>

<template>
  <a-flex vertical :gap="12">
    <a-rate v-model:value="value1" size="large" />
    <a-rate v-model:value="value2" />
    <a-rate v-model:value="value3" size="small" />
  </a-flex>
</template>
```
### Component Token
Component Token Debug.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(2.5)
</script>

<template>
  <a-config-provider
    :theme="{
      components: {
        Rate: {
          starColor: 'blue',
          starSize: 40,
          starHoverScale: 'scale(2)',
          starBg: 'red',
        },
      },
    }"
  >
    <a-rate v-model:value="value" allow-half />
  </a-config-provider>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowClear | Whether to allow clear when click again | boolean | true |  | × |
| allowHalf | Whether to allow semi selection | boolean | false |  | × |
| character | The custom character of rate | VueNode \| (RateProps) => VueNode | &lt;StarFilled /> | - | × |
| count | Star count | number | 5 |  | × |
| defaultValue | Default value | number | 0 |  | × |
| disabled | If read only, unable to interact | boolean | false |  | × |
| keyboard | Support keyboard operation | boolean | true | - | × |
| size | Star size | 'small' \| 'medium' \| 'large' | 'medium' |  | × |
| tooltips | Customize tooltip by each character | [TooltipProps](/components/tooltip#api)[\] \| string\[] | - |  | × |
| value | The current value, support `v-model:value` | number | - |  | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback when select value | (value: number) =&gt; void | - |
| hoverChange | Callback when hover item | (value: number) =&gt; void | - |
| focus | Callback when component get focus | () =&gt; void | - |
| blur | Callback when component lose focus | () =&gt; void | - |
| keydown | Callback when keydown on component | (e: KeyboardEvent) =&gt; void | - |
| mouseleave | Callback when mouse leaves the component | (e: FocusEvent) =&gt; void | - |

### Methods

| Name    | Description  |
| ------- | ------------ |
| blur()  | Remove focus |
| focus() | Get focus    |

## Design Token

<ComponentTokenTable component="Rate"></ComponentTokenTable>

---
Title: Result
URL: https://www.antdv-next.com/components/result.md
---

## When To Use

Use when important operations need to inform the user to process the results and the feedback is more complicated.

## Examples

### Success
Show successful results.
```vue
<template>
  <a-result
    status="success"
    title="Successfully Purchased Cloud Server ECS!"
    sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
  >
    <template #extra>
      <a-button key="console" type="primary">
        Go Console
      </a-button>
      <a-button key="buy">
        Buy Again
      </a-button>
    </template>
  </a-result>
</template>
```
### Info
Show processing results.
```vue
<template>
  <a-result
    title="Your operation has been executed"
  >
    <template #extra>
      <a-button key="console" type="primary">
        Go Console
      </a-button>
    </template>
  </a-result>
</template>
```
### Warning
The result of the warning.
```vue
<template>
  <a-result
    status="warning"
    title="There are some problems with your operation."
  >
    <template #extra>
      <a-button key="console" type="primary">
        Go Console
      </a-button>
    </template>
  </a-result>
</template>
```
### 403
you are not authorized to access this page.
```vue
<template>
  <a-result
    status="403"
    title="403"
    sub-title="Sorry, you are not authorized to access this page."
  >
    <template #extra>
      <a-button type="primary">
        Back Home
      </a-button>
    </template>
  </a-result>
</template>
```
### 404
The page you visited does not exist.
```vue
<template>
  <a-result
    status="404"
    title="404"
    sub-title="Sorry, the page you visited does not exist."
  >
    <template #extra>
      <a-button type="primary">
        Back Home
      </a-button>
    </template>
  </a-result>
</template>
```
### 500
Something went wrong on server.
```vue
<template>
  <a-result
    status="500"
    title="500"
    sub-title="Sorry, something went wrong."
  >
    <template #extra>
      <a-button type="primary">
        Back Home
      </a-button>
    </template>
  </a-result>
</template>
```
### Error
Complex error feedback.
```vue
<script lang="ts" setup>
import { CloseCircleOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-result
    status="error"
    title="Submission Failed"
    sub-title="Please check and modify the following information before resubmitting."
  >
    <template #extra>
      <a-button key="console" type="primary">
        Go Console
      </a-button>
      <a-button key="buy">
        Buy Again
      </a-button>
    </template>
    <div>
      <CloseCircleOutlined class="site-result-demo-error-icon" /> Your account is not yet
      eligible to apply. <a>Apply Unlock &gt;</a>
    </div>
  </a-result>
</template>

<style>
.site-result-demo-error-icon {
  color: red;
}
</style>
```
### Custom icon
Custom icon.
```vue
<script lang="ts" setup>
import { SmileOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-result
    title="Great, we have done all the operations!"
  >
    <template #extra>
      <a-button type="primary">
        Next
      </a-button>
    </template>
    <template #icon>
      <SmileOutlined />
    </template>
  </a-result>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Result by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { ResultProps } from 'antdv-next'

const classesObject: ResultProps['classes'] = {
  root: 'demo-result-root',
  title: 'demo-result-title',
  subTitle: 'demo-result-subtitle',
  icon: 'demo-result-icon',
  extra: 'demo-result-extra',
  body: 'demo-result-body',
}

const classesFn: ResultProps['classes'] = (info) => {
  if (info.props.status === 'success') {
    return {
      root: 'demo-result-root--success',
    } satisfies ResultProps['classes']
  }
  return {
    root: 'demo-result-root--default',
  } satisfies ResultProps['classes']
}

const stylesObject: ResultProps['styles'] = {
  root: { borderWidth: '2px', borderStyle: 'dashed', padding: '16px' },
  title: { fontStyle: 'italic', color: '#1890ff' },
  subTitle: { fontWeight: 'bold' },
  icon: { opacity: 0.8 },
  extra: { backgroundColor: '#f0f0f0', padding: 'px' },
  body: { backgroundColor: '#fafafa', padding: '12px' },
}

const stylesFn: ResultProps['styles'] = (info) => {
  if (info.props.status === 'error') {
    return {
      root: { backgroundColor: '#fff2f0', borderColor: '#ff4d4f' },
      title: { color: '#ff4d4f' },
    } satisfies ResultProps['styles']
  }
  else {
    return {
      root: { backgroundColor: '#f6ffed', borderColor: '#52c41a' },
      title: { color: '#52c41a' },
    } satisfies ResultProps['styles']
  }
}
</script>

<template>
  <a-result
    status="info"
    title="classes Object"
    sub-title="This is a subtitle"
    :styles="stylesObject"
    :classes="classesObject"
  >
    <template #extra>
      <a-button type="primary">
        Action
      </a-button>
    </template>
    <div>Content area</div>
  </a-result>
  <a-result
    status="success"
    title="classes Function"
    sub-title="Dynamic class names"
    :styles="stylesFn"
    :classes="classesFn"
  >
    <template #extra>
      <a-button type="primary">
        Action
      </a-button>
    </template>
  </a-result>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props }) => Record<[SemanticDOM](#semantic-dom), string> | - |  | ✓ |
| extra | Operating area | VueNode | - |  | × |
| icon | Custom back icon | VueNode | - |  | × |
| status | Result status, decide icons and colors | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |  | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props }) => Record<[SemanticDOM](#semantic-dom), CSSProperties> | - |  | ✓ |
| subTitle | The subTitle | VueNode | - |  | × |
| title | The title | VueNode | - |  | × |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| icon | Custom back icon | - | - |
| title | The title | - | - |
| subTitle | The subTitle | - | - |
| extra | Operating area | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Result"></ComponentTokenTable>

---
Title: Segmented
URL: https://www.antdv-next.com/components/segmented.md
---

## When To Use {#when-to-use}

- When displaying multiple options and user can select a single option;
- When switching the selected option, the content of the associated area changes.

## Examples {#examples}

### Basic
The most basic usage.
```vue
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('Daily')
</script>

<template>
  <a-segmented v-model:value="value" :options="['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']" @change="(value) => console.log(value)" />
</template>
```
### Vertical Direction
Make it vertical.
```vue
<script setup lang="ts">
import { AppstoreOutlined, BarsOutlined } from '@antdv-next/icons'

const iconObj: Record<string, any> = {
  List: BarsOutlined,
  Kanban: AppstoreOutlined,
}
</script>

<template>
  <a-segmented
    orientation="vertical"
    :options="[
      { value: 'List' },
      { value: 'Kanban' },
    ]"
  >
    <template #iconRender="{ value }">
      <component :is="iconObj[value]" v-if="iconObj[value]" />
    </template>
  </a-segmented>
</template>
```
### Block Segmented
`block` property will make the Segmented fit to its parent width.
```vue
<script lang="ts" setup>
import { reactive, ref } from 'vue'

const data = reactive([123, 456, 'longtext-longtext-longtext-longtext'])
const value = ref(data[0])
</script>

<template>
  <a-segmented v-model:value="value" block :options="data" />
</template>
```
### Round shape
Round shape of Segmented.
```vue
<script setup lang="ts">
import { MoonOutlined, SunOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

const size = shallowRef<any>('medium')
const iconObj: Record<string, any> = {
  light: SunOutlined,
  dark: MoonOutlined,
}
</script>

<template>
  <a-flex gap="small" align="flex-start" vertical>
    <a-segmented v-model:value="size" :options="['small', 'medium', 'large']" />
    <a-segmented :options="[{ value: 'light' }, { value: 'dark' }]" :size="size" shape="round">
      <template #iconRender="{ value }">
        <component :is="iconObj[value]" v-if="iconObj[value]" />
      </template>
    </a-segmented>
  </a-flex>
</template>
```
### Custom Render
Custom each Segmented Item.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const spring = ref('spring')
</script>

<template>
  <a-segmented
    :options="[
      {
        value: 'user1',
        tooltip: { title: 'hello user1', color: 'gold' },
      },
      {
        value: 'user2',
        tooltip: { title: 'hello user2', color: 'pink' },
      },
      {
        value: 'user3',
        tooltip: { title: 'hello user3', color: 'geekblue' },
      },
    ]"
  >
    <template #labelRender="{ value }">
      <template v-if="value === 'user1'">
        <div style="padding: 4px">
          <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
          <div>User 1</div>
        </div>
      </template>
      <template v-else-if="value === 'user2'">
        <div style="padding: 4px">
          <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
          <div>User 2</div>
        </div>
      </template>
      <template v-else-if="value === 'user3'">
        <div style="padding: 4px">
          <a-avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
          <div>User 3</div>
        </div>
      </template>
    </template>
  </a-segmented>
  <br>
  <br>
  <a-segmented
    v-model:value="spring"
    :options="[
      {
        value: 'spring',
      },
      {
        value: 'summer',
      },
      {
        value: 'autumn',
      },
      {
        value: 'winter',
      },
    ]"
  >
    <template #labelRender="{ value }">
      <template v-if="value === 'spring'">
        <div style="padding: 4px">
          <div>Spring</div>
          <div>Jan-Mar</div>
        </div>
      </template>
      <template v-else-if="value === 'summer'">
        <div style="padding: 4px">
          <div>Summer</div>
          <div>Apr-Jun</div>
        </div>
      </template>
      <template v-else-if="value === 'autumn'">
        <div style="padding: 4px">
          <div>Autumn</div>
          <div>Jul-Sept</div>
        </div>
      </template>
      <template v-else-if="value === 'winter'">
        <div style="padding: 4px">
          <div>Winter</div>
          <div>Oct-Dec</div>
        </div>
      </template>
    </template>
  </a-segmented>
</template>
```
### Dynamic
Load options dynamically.
```vue
<script lang="ts" setup>
import { reactive, ref } from 'vue'

const data = reactive(['Daily', 'Weekly', 'Monthly'])
const isDisabled = ref(false)
function loadMore() {
  data.push(...['Quarterly', 'Yearly'])
  isDisabled.value = true
};
const value = ref(data[0])
</script>

<template>
  <a-segmented v-model:value="value" :options="data" />
  <br>
  <br>
  <a-button type="primary" :disabled="isDisabled" @click="loadMore">
    Load More
  </a-button>
</template>
```
### Disabled
Disabled Segmented.
```vue
<script lang="ts" setup>
import { reactive, ref } from 'vue'

const data = reactive(['Map', 'Transit', 'Satellite'])
const data2 = reactive([
  'Daily',
  { label: 'Weekly', value: 'Weekly', disabled: true },
  'Monthly',
  { label: 'Quarterly', value: 'Quarterly', disabled: true },
  'Yearly',
])
const value = ref(data[0])
const value2 = ref('Daily')
</script>

<template>
  <div>
    <a-segmented v-model:value="value" disabled :options="data" />
    <br>
    <br>
    <a-segmented v-model:value="value2" :options="data2" />
  </div>
</template>
```
### Three sizes of Segmented
There are three sizes of an Segmented: large (40px), default (32px) and small (24px).
```vue
<script lang="ts" setup>
import { reactive, ref } from 'vue'

const data = reactive(['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'])
const value = ref(data[0])
const value2 = ref(data[0])
const value3 = ref(data[0])
</script>

<template>
  <a-segmented v-model:value="value" :options="data" size="large" />
  <br>
  <br>
  <a-segmented v-model:value="value2" :options="data" />
  <br>
  <br>
  <a-segmented v-model:value="value3" :options="data" size="small" />
</template>
```
### With Icon
Set icon for Segmented Item.
```vue
<script setup lang="ts">
import { AppstoreOutlined, BarsOutlined } from '@antdv-next/icons'
import { h } from 'vue'

// Icons from third-party libraries (e.g. lucide) render as a bare `<svg>`
// rather than an `.anticon` wrapper. It stays vertically centred with the label.
function CalendarIcon() {
  return h(
    'svg',
    {
      'viewBox': '0 0 24 24',
      'width': '1em',
      'height': '1em',
      'fill': 'none',
      'stroke': 'currentColor',
      'stroke-width': 2,
      'aria-hidden': 'true',
    },
    [
      h('rect', { x: 3, y: 4, width: 18, height: 18, rx: 2 }),
      h('path', { d: 'M16 2v4M8 2v4M3 10h18' }),
    ],
  )
}

const options = [
  { label: 'List', value: 'List', icon: h(BarsOutlined) },
  { label: 'Kanban', value: 'Kanban', icon: h(AppstoreOutlined) },
  { label: 'Calendar', value: 'Calendar', icon: h(CalendarIcon) },
]

const options2 = [
  { label: 'List', value: 'List' },
  { label: 'Kanban', value: 'Kanban' },
]
</script>

<template>
  <a-segmented :options="options" />
  <br>
  <br>
  <a-segmented :options="options2">
    <template #iconRender="{ value }">
      <template v-if="value === 'List'">
        <BarsOutlined />
      </template>
      <template v-else-if="value === 'Kanban'">
        <AppstoreOutlined />
      </template>
    </template>
  </a-segmented>
</template>
```
### With Icon only
Set icon without label for Segmented Item.
```vue
<script setup lang="ts">
import { AppstoreOutlined, BarsOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const options = [
  { value: 'List', icon: h(BarsOutlined) },
  { value: 'Kanban', icon: h(AppstoreOutlined) },
]
const options2 = [
  { value: 'List' },
  { value: 'Kanban' },
]
</script>

<template>
  <a-segmented :options="options" />
  <br>
  <br>
  <a-segmented :options="options2">
    <template #iconRender="{ value }">
      <template v-if="value === 'List'">
        <BarsOutlined />
      </template>
      <template v-else-if="value === 'Kanban'">
        <AppstoreOutlined />
      </template>
    </template>
  </a-segmented>
</template>
```
### With name
Passing the name property to all input[type="radio"] that are in the same Segmented. It is usually used to let the browser see your Segmented as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same Segmented.
```vue
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('Weekly')
</script>

<template>
  <a-segmented v-model:value="value" :options="['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']" name="group" />
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Segmented by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { SegmentedProps } from 'antdv-next'
import { CloudOutlined, RocketOutlined, ThunderboltOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const classes: SegmentedProps['classes'] = {
  root: 'custom-segmented-root',
}
const styleFn: SegmentedProps['styles'] = (info) => {
  if (info.props.vertical) {
    return {
      root: {
        border: '1px solid #77BEF0',
        padding: '4px',
        width: '100px',
      },
      icon: {
        color: '#77BEF0',
      },
      item: {
        textAlign: 'start',
      },
    } satisfies SegmentedProps['styles']
  }
  return {}
}

const styles: SegmentedProps['styles'] = {
  root: {
    padding: '4px',
    width: '260px',
  },
}

const options: SegmentedProps['options'] = [
  {
    label: 'Boost',
    value: 'boost',
    icon: h(RocketOutlined),
  },
  {
    label: 'Stream',
    value: 'stream',
    icon: h(ThunderboltOutlined),
  },
  {
    label: 'Cloud',
    value: 'cloud',
    icon: h(CloudOutlined),
  },
]
const segmentedSharedProps: SegmentedProps = {
  options,
  classes,
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-segmented v-bind="segmentedSharedProps" :styles="styles" />
    <a-segmented v-bind="segmentedSharedProps" :styles="styleFn" vertical />
  </a-flex>
</template>

<style scoped>
.custom-segmented-root {
  padding: 2px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| block | Option to fit width to its parent\'s width | boolean | false |  | × |
| classes | Customize class for each semantic structure inside the Segmented component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props }) => Record<[SemanticDOM](#semantic-dom), string> | - |  | ✓ |
| defaultValue | Default selected value | string \| number |  |  | × |
| disabled | Disable all segments | boolean | false |  | × |
| options | Set children optional | string\[] \| number\[] \| SegmentedItemType\[] | [] |  | × |
| orientation | Orientation | `horizontal` \| `vertical` | `horizontal` |  | × |
| size | The size of the Segmented. | `large` \| `medium` \| `small` | `medium` |  | × |
| styles | Customize inline style for each semantic structure inside the Segmented component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props }) => Record<[SemanticDOM](#semantic-dom), CSSProperties> | - |  | ✓ |
| vertical | Orientation，Simultaneously existing with `orientation`, `orientation` takes priority | boolean | `false` | - | × |
| value | Currently selected value, support `v-model:value` | string \| number |  |  | × |
| shape | shape of Segmented | `default` \| `round` | `default` | - | × |
| name | The `name` property of all `input[type="radio"]` children. if not set, it will fallback to a randomly generated name | string |  |- | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | The callback function that is triggered when the state changes  | function(value: string \| number) | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| iconRender | icon render slot | (option: SegmentedLabeledOption) =&gt; any | - |
| labelRender | label render slot | (option: SegmentedLabeledOption) =&gt; any | - |

## Types

### SegmentedItemType

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | Disabled state of segmented item | boolean | false |  |
| class | The additional css class | string | - |  |
| icon | Display icon for Segmented item | VueNode | - |  |
| label | Display text for Segmented item | VueNode | - |  |
| tooltip | tooltip for Segmented item | string \| [TooltipProps](../tooltip#api) | - |  |
| value | Value for Segmented item | string \| number | - |  |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Segmented"></ComponentTokenTable>

---
Title: Select
URL: https://www.antdv-next.com/components/select.md
---

## When To Use {#when-to-use}

- A dropdown menu for displaying choices - an elegant alternative to the native `<select>` element.
- Utilizing [Radio](/components/radio) is recommended when there are fewer total options (less than 5).
- You probably need [AutoComplete](/components/auto-complete) if you're looking for an input box that can be typed or selected.

## Examples {#examples}

<!-- prettier-ignore -->
### Basic Usage
Basic Usage.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const options = [
  { value: 'jack', label: 'Jack' },
  { value: 'lucy', label: 'Lucy' },
  { value: 'Yiminghe', label: 'yiminghe' },
  { value: 'disabled', label: 'Disabled', disabled: true },
]
const value1 = shallowRef('lucy')
const value2 = shallowRef('lucy')
</script>

<template>
  <a-space wrap>
    <div>
      {{ value1 }}
    </div>
    <a-select v-model:value="value1" style="width: 120px" :options="options" />
    <a-select v-model:value="value2" style="width: 120px" disabled :options="[{ value: 'lucy', label: 'lucy' }]" />
  </a-space>
</template>
```
### Select with search field
Search the options while expanded.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef<string>()

const options = [
  { value: 'jack', label: 'Jack' },
  { value: 'lucy', label: 'Lucy' },
  { value: 'tom', label: 'Tom' },
]

function onChange(val: string) {
  console.log(`selected ${val}`)
}

function onSearch(val: string) {
  console.log('search:', val)
}
</script>

<template>
  <a-select
    v-model:value="value"
    show-search
    option-filter-prop="label"
    placeholder="Select a person"
    :options="options"
    @change="onChange"
    @search="onSearch"
  />
</template>
```
### Multiple fields search
Multiple fields search with `optionFilterProp` as array.
```vue
<script setup lang="ts">
const options = [
  { value: 'a11', label: 'a11', otherField: 'c11' },
  { value: 'b22', label: 'b22', otherField: 'b11' },
  { value: 'c33', label: 'c33', otherField: 'b33' },
  { value: 'd44', label: 'd44', otherField: 'd44' },
]
</script>

<template>
  <a-select
    placeholder="Select an option"
    show-search
    :option-filter-prop="['label', 'otherField']"
    :options="options"
  />
</template>
```
### Custom Search
Customize search using `filterOption`.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef<string>()

const options = [
  { value: '1', label: 'Jack' },
  { value: '2', label: 'Lucy' },
  { value: '3', label: 'Tom' },
]

function filterOption(input: string, option: { label?: string }) {
  return (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
}
</script>

<template>
  <a-select
    v-model:value="value"
    show-search
    :filter-option="filterOption"
    placeholder="Select a person"
    :options="options"
  />
</template>
```
### Multiple selection
Multiple selection, selecting from existing items.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const options = Array.from({ length: 26 }, (_, i) => {
  const value = (i + 10).toString(36) + (i + 10)
  return { label: value, value }
})

const value1 = shallowRef(['a10', 'c12'])
const value2 = shallowRef(['a10', 'c12'])

function handleChange(value: string[]) {
  console.log(`selected ${value}`)
}
</script>

<template>
  <a-space style="width: 100%" vertical>
    <a-select
      v-model:value="value1"
      mode="multiple"
      allow-clear
      style="width: 100%"
      placeholder="Please select"
      :options="options"
      @change="handleChange"
    />
    <a-select
      v-model:value="value2"
      mode="multiple"
      disabled
      style="width: 100%"
      placeholder="Please select"
      :options="options"
      @change="handleChange"
    />
  </a-space>
</template>
```
### Sizes
The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

type SizeType = 'large' | 'medium' | 'small'

const options = Array.from({ length: 26 }, (_, i) => {
  const value = (i + 10).toString(36) + (i + 10)
  return { value, label: value }
})

const size = shallowRef<SizeType>('medium')
const value1 = shallowRef('a10')
const value2 = shallowRef(['a10', 'c12'])
const value3 = shallowRef(['a10', 'c12'])

function handleChange(val: string | string[]) {
  console.log(`Selected: ${val}`)
}
</script>

<template>
  <a-radio-group v-model:value="size">
    <a-radio-button value="large">
      Large
    </a-radio-button>
    <a-radio-button value="medium">
      Default
    </a-radio-button>
    <a-radio-button value="small">
      Small
    </a-radio-button>
  </a-radio-group>
  <br>
  <br>
  <a-space vertical style="width: 100%">
    <a-select
      v-model:value="value1"
      :size="size"
      style="width: 200px"
      :options="options"
      @change="handleChange"
    />
    <a-select
      v-model:value="value2"
      mode="multiple"
      :size="size"
      placeholder="Please select"
      style="width: 100%"
      :options="options"
      @change="handleChange"
    />
    <a-select
      v-model:value="value3"
      mode="tags"
      :size="size"
      placeholder="Please select"
      style="width: 100%"
      :options="options"
      @change="handleChange"
    />
  </a-space>
</template>
```
### Custom dropdown options
Use `optionRender` to customize the rendering dropdown options.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef(['china'])

const options = [
  {
    label: 'China',
    value: 'china',
    emoji: '🇨🇳',
    desc: 'China (中国)',
  },
  {
    label: 'USA',
    value: 'usa',
    emoji: '🇺🇸',
    desc: 'USA (美国)',
  },
  {
    label: 'Japan',
    value: 'japan',
    emoji: '🇯🇵',
    desc: 'Japan (日本)',
  },
  {
    label: 'Korea',
    value: 'korea',
    emoji: '🇰🇷',
    desc: 'Korea (韩国)',
  },
]

function handleChange(val: string[]) {
  console.log(`selected ${val}`)
}
</script>

<template>
  <a-select
    v-model:value="value"
    mode="multiple"
    style="width: 100%"
    placeholder="select one country"
    :options="options"
    @change="handleChange"
  >
    <template #optionRender="{ option }">
      <a-space>
        <span role="img" :aria-label="option.data.label">
          {{ option.data.emoji }}
        </span>
        {{ option.data.desc }}
      </a-space>
    </template>
  </a-select>
</template>
```
### Search with sort
Search the options with sorting.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef<string>()

const options = [
  { value: '1', label: 'Not Identified' },
  { value: '2', label: 'Closed' },
  { value: '3', label: 'Communicated' },
  { value: '4', label: 'Identified' },
  { value: '5', label: 'Resolved' },
  { value: '6', label: 'Cancelled' },
]

function filterSort(optionA: { label?: string }, optionB: { label?: string }) {
  return (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())
}
</script>

<template>
  <a-select
    v-model:value="value"
    show-search
    option-filter-prop="label"
    :filter-sort="filterSort"
    style="width: 200px"
    placeholder="Search to Select"
    :options="options"
  />
</template>
```
### Tags
Allow user to select tags from list or input custom tag.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const options = Array.from({ length: 26 }, (_, i) => {
  const value = (i + 10).toString(36) + (i + 10)
  return { value, label: value }
})

const value = shallowRef<string[]>([])

function handleChange(val: string[]) {
  console.log(`selected ${val}`)
}
</script>

<template>
  <a-select
    v-model:value="value"
    mode="tags"
    style="width: 100%"
    placeholder="Tags Mode"
    :options="options"
    @change="handleChange"
  />
</template>
```
### Option Group
Using `OptGroup` to group the options.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef('Lucy')

const options = [
  {
    label: 'manager',
    title: 'manager',
    options: [
      { label: 'Jack', value: 'Jack' },
      { label: 'Lucy', value: 'Lucy' },
    ],
  },
  {
    label: 'engineer',
    title: 'engineer',
    options: [
      { label: 'Chloe', value: 'Chloe' },
      { label: 'Lucas', value: 'Lucas' },
    ],
  },
]

function handleChange(val: string) {
  console.log(`selected ${val}`)
}
</script>

<template>
  <a-select
    v-model:value="value"
    style="width: 200px"
    :options="options"
    @change="handleChange"
  />
</template>

<style scoped>

</style>
```
### Coordinate
Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated. [Cascader](/components/cascader) component is strongly recommended in this case.
```vue
<script setup lang="ts">
import { computed, shallowRef } from 'vue'

const cityData: Record<string, string[]> = {
  Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
  Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
}

const provinceData: string[] = ['Zhejiang', 'Jiangsu']

const province = shallowRef(provinceData[0]!)
const secondCity = shallowRef(cityData[provinceData[0]!]![0])

const cities = computed(() => cityData[province.value] ?? [])

function handleProvinceChange(value: string) {
  province.value = value
  secondCity.value = cityData[value]?.[0] ?? ''
}
</script>

<template>
  <a-space wrap>
    <a-select
      v-model:value="province"
      style="width: 120px"
      :options="provinceData.map((p) => ({ label: p, value: p }))"
      @change="handleProvinceChange"
    />
    <a-select
      v-model:value="secondCity"
      style="width: 120px"
      :options="cities.map((c) => ({ label: c, value: c }))"
    />
  </a-space>
</template>
```
### Search Box
Search with remote data.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

interface OptionItem {
  value: string
  label: string
}

let timeout: ReturnType<typeof setTimeout> | null = null
let currentValue = ''

const data = shallowRef<OptionItem[]>([])
const value = shallowRef<string>()

function fetchData(val: string, callback: (data: OptionItem[]) => void) {
  if (timeout) {
    clearTimeout(timeout)
    timeout = null
  }
  currentValue = val

  const params = new URLSearchParams({ code: 'utf-8', q: val })

  const fake = () => {
    fetch(`https://suggest.taobao.com/sug?${params.toString()}`)
      .then(response => response.json())
      .then(({ result }) => {
        if (currentValue === val) {
          const options = result.map((item: string[]) => ({
            value: item[0],
            label: item[0],
          }))
          callback(options)
        }
      })
  }

  if (val) {
    timeout = setTimeout(fake, 300)
  }
  else {
    callback([])
  }
}

function handleSearch(val: string) {
  fetchData(val, (options) => {
    data.value = options
  })
}
</script>

<template>
  <a-select
    v-model:value="value"
    show-search
    :filter-option="false"
    placeholder="input search text"
    style="width: 200px"
    :default-active-first-option="false"
    :suffix-icon="null"
    :not-found-content="null"
    :options="data"
    @search="handleSearch"
  />
</template>
```
### Get value of selected item
As a default behavior, the `onChange` callback can only get the `value` of the selected item. The `labelInValue` prop can be used to get the `label` property of the selected item.

The `label` of the selected item will be packed as an object for passing to the `onChange` callback.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef({ value: 'lucy', label: 'Lucy (101)' })

const options = [
  { value: 'jack', label: 'Jack (100)' },
  { value: 'lucy', label: 'Lucy (101)' },
]

function handleChange(val: { value: string, label: string }) {
  console.log(val) // { value: "lucy", key: "lucy", label: "Lucy (101)" }
}
</script>

<template>
  <a-select
    v-model:value="value"
    label-in-value
    style="width: 120px"
    :options="options"
    @change="handleChange"
  />
</template>
```
### Automatic tokenization
Try to copy `Lucy,Jack` and paste to the input. Only available in tags and multiple mode.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const options = Array.from({ length: 26 }, (_, i) => {
  const value = (i + 10).toString(36) + (i + 10)
  return { value, label: value }
})

function handleChange(value: string[]) {
  console.log(`selected ${value}`)
}
const value = ref()
</script>

<template>
  <a-select
    v-model:value="value"
    mode="tags"
    style="width: 100%"
    :token-separators="[',']"
    :options="options"
    @change="handleChange"
  />
</template>
```
### Search and Select Users
A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.
```vue
<script setup lang="ts">
import { debounce } from 'es-toolkit'
import { shallowRef } from 'vue'

interface UserValue {
  label: string
  value: string
  avatar?: string
}

const value = shallowRef<UserValue[]>([])
const options = shallowRef<UserValue[]>([])
const fetching = shallowRef(false)

let fetchId = 0

async function fetchUserList(username: string): Promise<UserValue[]> {
  console.log('fetching user', username)
  return fetch(`https://660d2bd96ddfa2943b33731c.mockapi.io/api/users/?search=${username}`)
    .then(res => res.json())
    .then((res) => {
      const results = Array.isArray(res) ? res : []
      return results.map((user: { name: string, id: string, avatar: string }) => ({
        label: user.name,
        value: user.id,
        avatar: user.avatar,
      }))
    })
}

const debounceFetcher = debounce((val: string) => {
  fetchId += 1
  const currentFetchId = fetchId
  options.value = []
  fetching.value = true

  fetchUserList(val).then((newOptions) => {
    if (currentFetchId !== fetchId) {
      return
    }
    options.value = newOptions
    fetching.value = false
  })
}, 300)

function handleSearch(val: string) {
  debounceFetcher(val)
}
</script>

<template>
  <a-select
    v-model:value="value"
    mode="multiple"
    label-in-value
    show-search
    :auto-clear-search-value="false"
    :filter-option="false"
    placeholder="Select users"
    style="width: 100%"
    :options="options"
    @search="handleSearch"
  >
    <template #notFoundContent>
      <a-spin v-if="fetching" size="small" />
      <span v-else>No results found</span>
    </template>
    <template #optionRender="{ option }">
      <div style="display: flex; align-items: center">
        <a-avatar v-if="option.data.avatar" :src="option.data.avatar" style="margin-right: 8px" />
        {{ option.data.label }}
      </div>
    </template>
  </a-select>
</template>
```
### Prefix and Suffix
Custom `prefix` and `suffixIcon`.
```vue
<script setup lang="ts">
import { MehOutlined, SmileOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

const options = [
  { value: 'jack', label: 'Jack' },
  { value: 'lucy', label: 'Lucy' },
  { value: 'Yiminghe', label: 'yiminghe' },
  { value: 'disabled', label: 'Disabled', disabled: true },
]

const value1 = shallowRef('lucy')
const value2 = shallowRef('lucy')
const value3 = shallowRef('lucy')
const value4 = shallowRef(['lucy'])
const value5 = shallowRef(['lucy'])
const value6 = shallowRef(['lucy'])

function handleChange(val: string | string[]) {
  console.log(`selected ${val}`)
}
</script>

<template>
  <a-space wrap>
    <a-select
      v-model:value="value1"
      prefix="User"
      placeholder="Select User"
      style="width: 200px"
      :options="options"
      allow-clear
      show-search
      @change="handleChange"
    />
    <a-select
      v-model:value="value2"
      placeholder="Select"
      style="width: 120px"
      :options="options"
      @change="handleChange"
    >
      <template #suffixIcon>
        <SmileOutlined />
      </template>
    </a-select>
    <a-select
      v-model:value="value3"
      placeholder="Select"
      style="width: 120px"
      disabled
      :options="[{ value: 'lucy', label: 'Lucy' }]"
    >
      <template #suffixIcon>
        <MehOutlined />
      </template>
    </a-select>
    <br>
    <a-select
      v-model:value="value4"
      prefix="User"
      placeholder="Select"
      mode="multiple"
      style="width: 200px"
      :options="options"
      @change="handleChange"
    />
    <a-select
      v-model:value="value5"
      placeholder="Select"
      mode="multiple"
      style="width: 120px"
      :options="options"
      @change="handleChange"
    >
      <template #suffixIcon>
        <SmileOutlined />
      </template>
    </a-select>
    <a-select
      v-model:value="value6"
      placeholder="Select"
      mode="multiple"
      style="width: 120px"
      disabled
      :options="[{ value: 'lucy', label: 'Lucy' }]"
    >
      <template #suffixIcon>
        <MehOutlined />
      </template>
    </a-select>
  </a-space>
</template>
```
### Custom dropdown
Customize the dropdown menu via `popupRender`. If you want to close the dropdown after clicking the custom content, you need to control `open` prop.
```vue
<script setup lang="ts">
import { PlusOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

let index = 0

const items = shallowRef(['jack', 'lucy'])
const name = shallowRef('')

function addItem(e: MouseEvent) {
  e.preventDefault()
  items.value = [...items.value, name.value || `New item ${index++}`]
  name.value = ''
}
</script>

<template>
  <a-select
    style="width: 300px"
    placeholder="custom dropdown render"
    :options="items.map((item) => ({ label: item, value: item }))"
  >
    <template #popupRender="menu">
      <component :is="menu" />
      <a-divider style="margin: 8px 0" />
      <a-space style="padding: 0 8px 4px">
        <a-input
          v-model:value="name"
          placeholder="Please enter item"
          @keydown.stop
        />
        <a-button type="text" @click="addItem">
          <template #icon>
            <PlusOutlined />
          </template>
          Add item
        </a-button>
      </a-space>
    </template>
  </a-select>
</template>
```
### Hide Already Selected
Hide already selected options in the dropdown.
```vue
<script setup lang="ts">
import { computed, shallowRef } from 'vue'

const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters']

const selectedItems = shallowRef<string[]>([])

const filteredOptions = computed(() =>
  OPTIONS.filter(o => !selectedItems.value.includes(o)).map(item => ({
    value: item,
    label: item,
  })),
)
</script>

<template>
  <a-select
    v-model:value="selectedItems"
    mode="multiple"
    placeholder="Inserted are removed"
    style="width: 100%"
    :options="filteredOptions"
  />
</template>
```
### Variants
Variants of Select, there are four variants: `outlined` `filled` `borderless` and `underlined`.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const options = [
  { value: 'jack', label: 'Jack' },
  { value: 'lucy', label: 'Lucy' },
  { value: 'Yiminghe', label: 'yiminghe' },
]

const value1 = shallowRef<string>()
const value2 = shallowRef(['lucy'])
const value3 = shallowRef<string>()
const value4 = shallowRef(['lucy'])
const value5 = shallowRef<string>()
const value6 = shallowRef(['lucy'])
const value7 = shallowRef<string>()
const value8 = shallowRef(['lucy'])
</script>

<template>
  <a-flex :gap="12" vertical>
    <a-flex :gap="8">
      <a-select
        v-model:value="value1"
        placeholder="Outlined"
        style="flex: 1"
        :options="options"
      />
      <a-select
        v-model:value="value2"
        mode="multiple"
        placeholder="Outlined"
        style="flex: 1"
        :options="options"
      />
    </a-flex>
    <a-flex :gap="8">
      <a-select
        v-model:value="value3"
        placeholder="Filled"
        variant="filled"
        style="flex: 1"
        :options="options"
      />
      <a-select
        v-model:value="value4"
        mode="multiple"
        placeholder="Filled"
        variant="filled"
        style="flex: 1"
        :options="options"
      />
    </a-flex>
    <a-flex :gap="8">
      <a-select
        v-model:value="value5"
        placeholder="Borderless"
        variant="borderless"
        style="flex: 1"
        :options="options"
      />
      <a-select
        v-model:value="value6"
        mode="multiple"
        placeholder="Borderless"
        variant="borderless"
        style="flex: 1"
        :options="options"
      />
    </a-flex>
    <a-flex :gap="8">
      <a-select
        v-model:value="value7"
        placeholder="Underlined"
        variant="underlined"
        style="flex: 1"
        :options="options"
      />
      <a-select
        v-model:value="value8"
        mode="multiple"
        placeholder="Underlined"
        variant="underlined"
        style="flex: 1"
        :options="options"
      />
    </a-flex>
  </a-flex>
</template>
```
### Clear suffix
Show edge cases when `allowClear` hides suffix content.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const longLabel = 'A very very very very very very very long selected label'

const options = [
  { value: 'long', label: longLabel },
  { value: 'short', label: 'Short option' },
]

const selectStyle = { width: '280px' }

const value1 = shallowRef('long')
const value2 = shallowRef('long')

function handleSuffixClick() {
  console.log('suffix clicked')
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-flex vertical gap="small">
      <span>Interactive suffix</span>
      <a-select
        v-model:value="value1"
        allow-clear
        :options="options"
        :style="selectStyle"
      >
        <template #suffixIcon>
          <button
            type="button"
            :style="{
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              padding: '0 8px',
              color: 'rgba(0, 0, 0, 0.88)',
              background: '#fff',
              cursor: 'pointer',
            }"
            @mousedown.stop
            @click="handleSuffixClick"
          >
            Suffix
          </button>
        </template>
      </a-select>
    </a-flex>

    <a-flex vertical gap="small">
      <span>No suffix</span>
      <a-select
        v-model:value="value2"
        allow-clear
        :suffix-icon="null"
        :options="options"
        :style="selectStyle"
      />
    </a-flex>
  </a-flex>
</template>
```
### Custom Tag Render
Allows for custom rendering of tags.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const options = [
  { value: 'gold' },
  { value: 'lime' },
  { value: 'green' },
  { value: 'cyan' },
]

const value = shallowRef(['gold', 'cyan'])

function onPreventMouseDown(event: MouseEvent) {
  event.preventDefault()
  event.stopPropagation()
}
</script>

<template>
  <a-select
    v-model:value="value"
    mode="multiple"
    style="width: 100%"
    :options="options"
  >
    <template #tagRender="{ label, value: tagValue, closable, onClose }">
      <a-tag
        :color="tagValue"
        :closable="closable"
        style="margin-inline-end: 4px"
        @mousedown="onPreventMouseDown"
        @close="onClose"
      >
        {{ label }}
      </a-tag>
    </template>
  </a-select>
</template>
```
### Custom Selected Label Render
Allows custom rendering of the currently selected label, which can be used for value backfill but the corresponding option is missing and does not want to directly render the value.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const options = [
  { label: 'gold', value: 'gold' },
  { label: 'lime', value: 'lime' },
  { label: 'green', value: 'green' },
  { label: 'cyan', value: 'cyan' },
]

const value = shallowRef('1')
</script>

<template>
  <a-select
    v-model:value="value"
    style="width: 100%"
    :options="options"
  >
    <template #labelRender="{ label, value: val }">
      <template v-if="label">
        {{ val }}
      </template>
      <span v-else>No option match</span>
    </template>
  </a-select>
</template>
```
### Responsive maxTagCount
Auto collapse to tag with responsive case. Not recommend use in large form case since responsive calculation has a perf cost.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const options = Array.from({ length: 26 }, (_, i) => {
  const value = (i + 10).toString(36) + (i + 10)
  return { label: `Long Label: ${value}`, value }
})

const value = shallowRef(['a10', 'c12', 'h17', 'j19', 'k20'])
const value1 = shallowRef(['a10', 'c12', 'h17', 'j19'])
</script>

<template>
  <a-space vertical style="width: 100%">
    <a-select
      v-model:value="value"
      mode="multiple"
      style="width: 100%"
      :options="options"
      placeholder="Select Item..."
      max-tag-count="responsive"
    />
    <a-select
      mode="multiple"
      style="width: 100%"
      disabled
      :options="options"
      placeholder="Select Item..."
      max-tag-count="responsive"
    />
    <a-select
      v-model:value="value1"
      mode="multiple"
      style="width: 100%"
      :options="options"
      placeholder="Select Item..."
      max-tag-count="responsive"
    >
      <template #maxTagPlaceholder="omittedValues">
        <a-tooltip>
          <template #title>
            {{ omittedValues.map((v: any) => v.label).join(', ') }}
          </template>
          <span>Hover Me</span>
        </a-tooltip>
      </template>
    </a-select>
  </a-space>
</template>
```
### Big Data
Select use [virtual scroll](https://github.com/react-component/virtual-list) which get better performance, turn off it by setting `:virtual="false"`.
```vue
<script setup lang="ts">
import type { SelectProps } from 'antdv-next'
import { shallowRef } from 'vue'

const options: SelectProps['options'] = []
for (let i = 0; i < 100000; i++) {
  const value = `${i.toString(36)}${i}`
  options.push({
    label: value,
    value,
    disabled: i === 10,
  })
}
const value = shallowRef(['a10', 'c12'])
</script>

<template>
  <a-typography-title :level="4">
    {{ options?.length }} Items
  </a-typography-title>
  <a-select v-model:value="value" mode="multiple" style="width: 100%" placeholder="Please select" :options="options" />
</template>

<style scoped>

</style>
```
### Status
Add status to Select with `status`, which could be `error` or `warning`.
```vue
<script setup lang="ts">
</script>

<template>
  <a-space vertical style="width: 100%">
    <a-select status="error" style="width: 100%" />
    <a-select status="warning" style="width: 100%" />
  </a-space>
</template>
```
### Placement
You can manually specify the position of the popup via `placement`.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

type Placement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'

const placement = shallowRef<Placement>('topLeft')
const value = shallowRef('HangZhou')

const options = [
  { value: 'HangZhou', label: 'HangZhou #310000' },
  { value: 'NingBo', label: 'NingBo #315000' },
  { value: 'WenZhou', label: 'WenZhou #325000' },
]
</script>

<template>
  <a-radio-group v-model:value="placement">
    <a-radio-button value="topLeft">
      topLeft
    </a-radio-button>
    <a-radio-button value="topRight">
      topRight
    </a-radio-button>
    <a-radio-button value="bottomLeft">
      bottomLeft
    </a-radio-button>
    <a-radio-button value="bottomRight">
      bottomRight
    </a-radio-button>
  </a-radio-group>
  <br>
  <br>
  <a-select
    v-model:value="value"
    style="width: 120px"
    :popup-match-select-width="false"
    :placement="placement"
    :options="options"
  />
</template>
```
### Max Count
You can set the `maxCount` prop to control the max number of items can be selected. When the limit is exceeded, the options will become disabled.
```vue
<script setup lang="ts">
import { DownOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

const MAX_COUNT = 3

const value = shallowRef<string[]>(['Ava Swift'])

const options = [
  { value: 'Ava Swift', label: 'Ava Swift' },
  { value: 'Cole Reed', label: 'Cole Reed' },
  { value: 'Mia Blake', label: 'Mia Blake' },
  { value: 'Jake Stone', label: 'Jake Stone' },
  { value: 'Lily Lane', label: 'Lily Lane' },
  { value: 'Ryan Chase', label: 'Ryan Chase' },
  { value: 'Zoe Fox', label: 'Zoe Fox' },
  { value: 'Alex Grey', label: 'Alex Grey' },
  { value: 'Elle Blair', label: 'Elle Blair' },
]
</script>

<template>
  <a-select
    v-model:value="value"
    mode="multiple"
    :max-count="MAX_COUNT"
    style="width: 100%"
    placeholder="Please select"
    :options="options"
  >
    <template #suffixIcon>
      <span>{{ value.length }} / {{ MAX_COUNT }}</span>
      <DownOutlined />
    </template>
  </a-select>
</template>
```
### Custom semantic dom styling
You can customize the semantic dom style of Select by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import { MehOutlined } from '@antdv-next/icons'

const options = [
  { value: 'GuangZhou', label: 'GuangZhou' },
  { value: 'ShenZhen', label: 'ShenZhen' },
]

const stylesObject = {
  prefix: {
    color: '#1890ff',
  },
  suffix: {
    color: '#1890ff',
  },
}

const stylesFilled = {
  prefix: {
    color: '#722ed1',
  },
  suffix: {
    color: '#722ed1',
  },
  popup: {
    root: {
      border: '1px solid #722ed1',
    },
  },
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-select
      :options="options"
      :classes="{ root: 'custom-select' }"
      :styles="stylesObject"
      placeholder="Object"
    >
      <template #prefix>
        <MehOutlined />
      </template>
    </a-select>
    <a-select
      :options="options"
      :classes="{ root: 'custom-select' }"
      :styles="stylesFilled"
      placeholder="Function"
      variant="filled"
    >
      <template #prefix>
        <MehOutlined />
      </template>
    </a-select>
  </a-flex>
</template>

<style>
.custom-select {
  border-radius: 8px;
  width: 300px;
}
</style>
```

## API

### Property {#property}

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowClear | Show clear button | boolean \| &#123; clearIcon?: VueNode &#125; | false | - | ✓ |
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags` | boolean | true | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | - | × |
| disabled | Whether disabled select | boolean | false | - | × |
| dropdownClassName | The className of dropdown menu, **Deprecated. Use `classes.popup.root` instead** | string | - | - | × |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width, **Deprecated. Use `popupMatchSelectWidth` instead** | boolean \| number | - | - | × |
| dropdownRender | Customize dropdown content, **Deprecated. Use `popupRender` instead** | (originNode: VNode) =&gt; VueNode | - | - | × |
| dropdownStyle | The style of dropdown menu, **Deprecated. Use `styles.popup.root` instead** | CSSProperties | - | - | × |
| fieldNames | Customize node label, value, options, groupLabel field name | object | &#123; label: 'label', value: 'value', options: 'options', groupLabel: 'label' &#125; | - | × |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| (inputValue: string, option?: Option) =&gt; boolean | true | - | × |
| filterSort | Sort function for search options sorting, see Array.sort's compareFunction | (optionA: Option, optionB: Option, info: &#123; searchValue: string &#125;) =&gt; number | - | - | × |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to body. When position issues happen, try to modify it into scrollable content and position it relative | (triggerNode: HTMLElement) =&gt; HTMLElement | () =&gt; document.body | - | × |
| labelInValue | Whether to embed label in value, turn the format of value from `string` to `&#123; value: string, label: VueNode &#125;` | boolean | false | - | × |
| listHeight | Config popup height | number | 256 | - | × |
| loading | Indicate loading state | boolean | false | - | × |
| maxCount | The max number of items can be selected, only applies when `mode` is `multiple` or `tags` | number | - | - | × |
| maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| 'responsive' | - | - | × |
| maxTagPlaceholder | Placeholder for not showing tags | VueNode \| (omittedValues: LabeledValue[]) =&gt; VueNode | - | - | × |
| maxTagTextLength | Max tag text length to show | number | - | - | × |
| menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | VueNode | - | - | ✓ |
| mode | Set mode of Select | 'multiple' \| 'tags' | - | - | × |
| notFoundContent | Specify content to show when no result matches | VueNode | `No data` | - | × |
| open | Controlled open state of dropdown | boolean | - | - | × |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true. If options is set, it should be set to label. When a string[] is provided, multiple fields are searched using OR matching | string \| string[] | value | - | × |
| options | Select options. Will get better perf than jsx definition | &#123; label: VueNode; value: string &#125;[] | - | - | × |
| optionRender | Customize the rendering dropdown options | (option: FlattenOptionData&lt;BaseOptionType&gt;, info: &#123; index: number &#125;) =&gt; VueNode | - | - | × |
| placeholder | The placeholder of select | VNode | - | - | × |
| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | - | × |
| popupClassName | The className of dropdown menu, use `classes.popup.root` instead | string | - | - | × |
| popupMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | - | × |
| popupRender | Customize dropdown content | (originNode: VNode) =&gt; VueNode | - | - | × |
| prefix | The custom prefix | VueNode | - | - | × |
| removeIcon | The custom remove icon | VueNode | - | - | ✓ |
| searchValue | The current input "search" text | string | - | - | × |
| showSearch | Whether select is searchable | boolean \| Object | single: false, multiple: true | - | ✓ |
| size | Size of Select input | `large` \| `medium` \| `small` | `medium` | - | × |
| status | Set validation status | 'error' \| 'warning' | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |
| suffixIcon | The custom suffix icon. Customize icon will not response click open to avoid icon designed to do other interactive. You can use `pointer-events: none` style to bypass | VueNode | `<DownOutlined />` | - | ✓ |
| tagRender | Customize tag render, only applies when `mode` is set to `multiple` or `tags` | (props) =&gt; VueNode | - | - | × |
| labelRender | Customize selected label render | (props: LabelInValueType) =&gt; VueNode | - | - | × |
| tokenSeparators | Separator used to tokenize, only applies when `mode="tags"` | string[] | - | - | × |
| value | Current selected option (considered as a immutable array), support `v-model:value` | string \| string[] \| number \| number[] | - | - | × |
| variant | Variants of selector | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
| virtual | Disable virtual scroll when set to false | boolean | true | - | × |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| active | Called when keyboard or mouse interaction occurs | (value: string \| number) =&gt; void | - |
| blur | Called when blur | (event: FocusEvent) =&gt; void | - |
| change | Called when select an option or input value change | (value, option: Option \| Array&lt;Option&gt;) =&gt; void | - |
| clear | Called when clear | () =&gt; void | - |
| deselect | Called when an option is deselected, param is the selected option's value. Only called for `multiple` or `tags`, effective in multiple or tags mode only | (value: string \| number) =&gt; void | - |
| dropdownVisibleChange | Called when dropdown open, **Deprecated. Use `openChange` instead** | (open: boolean) =&gt; void | - |
| focus | Called when focus | (event: FocusEvent) =&gt; void | - |
| inputKeydown | Called when key pressed | (event: KeyboardEvent) =&gt; void | - |
| openChange | Called when dropdown open | (open: boolean) =&gt; void | - |
| popupScroll | Called when dropdown scrolls | (event: UIEvent) =&gt; void | - |
| search | Callback function that is fired when input changed | (value: string) =&gt; void | - |
| select | Called when an option is selected, the params are option's value (or key) and option instance | (value: string \| number, option: Option) =&gt; void | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| labelRender | Customize selected label render | (props: LabelInValueType) =&gt; VueNode | - |
| maxTagPlaceholder | Placeholder for not showing tags | (omittedValues: LabeledValue[]) =&gt; VueNode | - |
| menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | VueNode | - |
| notFoundContent | Specify content to show when no result matches | VueNode | - |
| optionRender | Customize the rendering dropdown options | (option: FlattenOptionData&lt;BaseOptionType&gt;, info: &#123; index: number &#125;) =&gt; VueNode | - |
| popupRender | Customize dropdown content | (originNode: VNode) =&gt; VueNode | - |
| prefix | The custom prefix | VueNode | - |
| removeIcon | The custom remove icon | VueNode | - |
| suffixIcon | The custom suffix icon. Customize icon will not response click open to avoid icon designed to do other interactive. You can use `pointer-events: none` style to bypass | VueNode | - |
| tagRender | Customize tag render, only applies when `mode` is set to `multiple` or `tags` | (props) =&gt; VueNode | - |

### Select Methods {#methods}

| Name | Description | Version |
| --- | --- | --- |
| blur() | Remove focus | - |
| focus() | Get focus | - |

### showSearch {#showsearch}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags` | boolean | true | - |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| (inputValue: string, option?: Option) =&gt; boolean | true | - |
| filterSort | Sort function for search options sorting, see Array.sort's compareFunction | (optionA: Option, optionB: Option, info: &#123; searchValue: string &#125;) =&gt; number | - | - |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true. If options is set, it should be set to label. When a string[] is provided, multiple fields are searched using OR matching | string \| string[] | value | - |
| searchValue | The current input "search" text | string | - | - |
| onSearch | Callback function that is fired when input changed | (value: string) =&gt; void | - | - |

### Option props

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | Disable this option | boolean | false | - |
| title | title attribute of Select Option | string | - | - |
| value | Default to filter with this property | string \| number | - | - |

### OptGroup props

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| key | Group key | string | - | - |
| label | Group label | string \| VueNode | - | - |
| title | title attribute of Select Option | string | - | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Select"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### Why sometimes search will show 2 same option when in `tags` mode? {#faq-tags-mode-duplicate}

It's caused by option with different `label` and `value`. You can use `optionFilterProp="label"` to change filter logic instead.

### When I click elements in popupRender, the select dropdown will not be closed? {#faq-popup-not-close}

You can control it by `open` prop.

### I don't want dropdown close when click inside `popupRender`? {#faq-popup-keep-open}

Select will close when it lose focus. You can prevent event to handle this:

```html
  <a-select>
    <template #popupRender>
      <div
        @mousedown="(e) => {
          e.preventDefault()
          e.stopPropagation()
        }"
      >
        Some Content
      </div>
    </template>
  </a-select>
```

### Why sometimes customize Option cause scroll break? {#faq-custom-option-scroll}

Virtual scroll internal set item height as `24px`. You need to adjust `listItemHeight` when your option height is less and `listHeight` config list container height:

```html
  <a-select :list-item-height="10" :list-height="250" />
```

Note: `listItemHeight` and `listHeight` are internal props. Please only modify when necessary.

### Why a11y test report missing `aria-` props? {#faq-aria-attribute}

Select only create a11y auxiliary node when operating on. Please open Select and retry. For `aria-label` & `aria-labelledby` miss warning, please add related prop to Select with your own requirement.

Default virtual scrolling will create a mock element to simulate an accessible binding. If a screen reader needs to fully access the entire list, you can set `:virtual="false"` to disable virtual scrolling and the accessibility option will be bound to the actual element.

### Custom tags generated using `tagRender` slot will pop up a drop-down box when clicked to close {#faq-tagrender-dropdown}

If you don't want a drop-down menu to appear automatically after clicking on an element (such as a close icon), you can prevent the `mousedown` event from propagating on it.

```html
  <a-select>
    <template #tagRender="{ closable, label, onClose }">
      <span class="border">
        &#123;&#123; label &#125;&#125;
        <span
          v-if="closable"
          class="cursor-pointer"
          @mousedown.stop
          @click="onClose"
        >
          ❎
        </span>
      </span>
    </template>
  </a-select>
```

---
Title: Skeleton
URL: https://www.antdv-next.com/components/skeleton.md
---

## When To Use {#when-to-use}

- When a resource needs long time to load.
- When the component contains lots of information, such as List or Card.
- Only works when loading data for the first time.
- Could be replaced by Spin in any situation, but can provide a better user experience.

## Examples {#examples}

### Basic
Simplest Skeleton usage.
```vue
<template>
  <a-skeleton />
</template>
```
### Complex combination
Complex combination with avatar and multiple paragraphs.
```vue
<template>
  <a-skeleton avatar :paragraph="{ rows: 4 }" />
</template>
```
### Active Animation
Display active animation.
```vue
<template>
  <a-skeleton active />
</template>
```
### Button/Avatar/Input/Image/Node
Skeleton Button, Avatar, Input, Image and Node.
```vue
<script setup lang="ts">
import { DotChartOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

type SizeType = 'large' | 'medium' | 'small'
type ButtonShapeType = 'circle' | 'square' | 'round' | 'default'
type AvatarShapeType = 'circle' | 'square'

const active = ref(false)
const block = ref(false)
const size = ref<SizeType>('medium')
const buttonShape = ref<ButtonShapeType>('default')
const avatarShape = ref<AvatarShapeType>('circle')
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-space>
      <a-skeleton-button :active="active" :size="size" :shape="buttonShape" :block="block" />
      <a-skeleton-avatar :active="active" :size="size" :shape="avatarShape" />
      <a-skeleton-input :active="active" :size="size" />
    </a-space>
    <a-skeleton-button :active="active" :size="size" :shape="buttonShape" :block="block" />
    <a-skeleton-input :active="active" :size="size" :block="block" />
    <a-space>
      <a-skeleton-image :active="active" />
      <a-skeleton-node :active="active" style="width: 160px" />
      <a-skeleton-node :active="active">
        <DotChartOutlined style="font-size: 40px; color: #bfbfbf" />
      </a-skeleton-node>
    </a-space>
    <a-divider />
    <a-form layout="inline" style="margin: 16px 0">
      <a-space :size="16" wrap>
        <a-form-item label="Active">
          <a-switch v-model:value="active" />
        </a-form-item>
        <a-form-item label="Button and Input Block">
          <a-switch v-model:value="block" />
        </a-form-item>
        <a-form-item label="Size">
          <a-radio-group v-model:value="size">
            <a-radio-button value="large">
              Large
            </a-radio-button>
            <a-radio-button value="medium">
              Medium
            </a-radio-button>
            <a-radio-button value="small">
              Small
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="Button Shape">
          <a-radio-group v-model:value="buttonShape">
            <a-radio-button value="default">
              Default
            </a-radio-button>
            <a-radio-button value="square">
              Square
            </a-radio-button>
            <a-radio-button value="round">
              Round
            </a-radio-button>
            <a-radio-button value="circle">
              Circle
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="Avatar Shape">
          <a-radio-group v-model:value="avatarShape">
            <a-radio-button value="square">
              Square
            </a-radio-button>
            <a-radio-button value="circle">
              Circle
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
      </a-space>
    </a-form>
  </a-flex>
</template>
```
### Contains sub component
Skeleton contains sub component.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
function showSkeleton() {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 3000)
}
</script>

<template>
  <a-space vertical style="width: 100%" :size="16">
    <a-skeleton :loading="loading" active>
      <h4 style="margin-bottom: 16px">
        Antdv Next, a design language
      </h4>
      <p>
        We supply a series of design principles, practical patterns and high quality design
        resources (Sketch and Axure), to help people create their product prototypes beautifully
        and efficiently.
      </p>
    </a-skeleton>
    <a-button :disabled="loading" @click="showSkeleton">
      Show Skeleton
    </a-button>
  </a-space>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Skeleton by passing objects or functions through `classes` and `styles`.
```vue
<script setup lang="ts">
const classes = {
  root: 'skeleton-root',
  header: 'skeleton-header',
}

const styles = {
  avatar: {
    border: '1px solid #aaa',
  },
  title: {
    border: '1px solid #aaa',
  },
}

function stylesFn(info: { props: { active?: boolean } }) {
  if (info.props?.active) {
    return {
      root: {
        border: '1px solid rgba(229, 243, 254, 0.3)',
      },
      title: {
        backgroundColor: 'rgba(229, 243, 254, 0.5)',
        height: '20px',
        borderRadius: '20px',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex gap="medium">
    <a-skeleton
      :classes="classes"
      :styles="styles"
      avatar
      :paragraph="false"
    />
    <a-skeleton
      :classes="{ ...classes, paragraph: 'skeleton-paragraph' }"
      :styles="stylesFn"
      active
    />
  </a-flex>
</template>

<style scoped>
.skeleton-root {
  border-radius: 10px;
  padding: 12px;
}

.skeleton-header {
  margin-bottom: 12px;
}

.skeleton-paragraph > li {
  background-color: rgba(229, 243, 254, 0.5);
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Skeleton

#### Props {#skeleton-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| active | Show animation effect | boolean | false | - | × |
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#skeletonavatarprops) | false | - | × |
| loading | Display the skeleton when true | boolean | - | - | × |
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#skeletonparagraphprops) | true | - | × |
| round | Show paragraph and title radius when true | boolean | false | - | × |
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#skeletontitleprops) | true | - | × |
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - | ✓ |

### SkeletonAvatar

#### Props {#skeletonavatar-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| active | Show animation effect, only valid when used avatar independently | boolean | false | - |
| shape | Set the shape of avatar | `circle` \| `square` | `circle` | - |
| size | Set the size of avatar | number \| `large` \| `medium` \| `small` | `medium` | - |

### SkeletonTitle

#### Props {#skeletontitle-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| width | Set the width of title | number \| string | - | - |

### SkeletonParagraph

#### Props {#skeletonparagraph-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| rows | Set the row count of paragraph | number | - | - |
| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array&lt;number \| string&gt; | - | - |

### SkeletonAvatar

#### Props {#skeletonavatar-avatar}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| active | Show animation effect | boolean | false | - |
| shape | Set the shape of avatar | `circle` \| `square` | `circle` | - |
| size | Set the size of avatar | number \| `large` \| `medium` \| `small` | `medium` | - |
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |

### SkeletonButton

#### Props {#skeletonbutton-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| active | Show animation effect | boolean | false | - |
| block | Option to fit button width to its parent width | boolean | false | - |
| shape | Set the shape of button | `circle` \| `round` \| `square` \| `default` | - | - |
| size | Set the size of button | `large` \| `medium` \| `small` | `medium` | - |
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |

### SkeletonInput

#### Props {#skeletoninput-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| active | Show animation effect | boolean | false | - |
| size | Set the size of input | `large` \| `medium` \| `small` | `medium` | - |
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |

### SkeletonImage

#### Props {#skeletonimage-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| active | Show animation effect | boolean | false | - |
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |

### SkeletonNode

#### Props {#skeletonnode-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| active | Show animation effect | boolean | false | - |
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

### Skeleton.Element

<demo src="./demo/_semantic_element.vue" simplify="true"></demo>

## Design Token

<ComponentTokenTable component="Skeleton"></ComponentTokenTable>

---
Title: Slider
URL: https://www.antdv-next.com/components/slider.md
---

## When To Use {#when-to-use}

Used to input a value within a specified range.

## Examples {#examples}

### Basic
Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const disabled = ref(false)
const value = ref(30)
const valueRange = ref([20, 50])
</script>

<template>
  <a-slider v-model:value="value" :disabled="disabled" />
  <a-slider v-model:value="valueRange" range :disabled="disabled" />
  Disabled: <a-switch v-model:checked="disabled" size="small" />
</template>
```
### Slider with InputNumber
Synchronize with [InputNumber](/components/input-number/) component.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const inputValue = ref<number>(1)
const inputValueDecimal = ref<number>(0)
</script>

<template>
  <a-space style="width: 100%" vertical>
    <a-row>
      <a-col :span="12">
        <a-slider
          v-model:value="inputValue"
          :min="1"
          :max="20"
        />
      </a-col>
      <a-col :span="4">
        <a-input-number
          v-model:value="inputValue"
          :min="1"
          :max="20"
          style="margin: 0 16px"
        />
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12">
        <a-slider
          v-model:value="inputValueDecimal"
          :min="0"
          :max="1"
          :step="0.01"
        />
      </a-col>
      <a-col :span="4">
        <a-input-number
          v-model:value="inputValueDecimal"
          :min="0"
          :max="1"
          style="margin: 0 16px"
          :step="0.01"
        />
      </a-col>
    </a-row>
  </a-space>
</template>
```
### Slider with icon
You can add an icon beside the slider to make it meaningful.
```vue
<script setup lang="ts">
import { FrownOutlined, SmileOutlined } from '@antdv-next/icons'
import { computed, ref } from 'vue'

const props = defineProps<{
  min?: number
  max?: number
}>()

const min = computed(() => props.min ?? 0)
const max = computed(() => props.max ?? 20)
const value = ref(0)

const mid = computed(() => Number(((max.value - min.value) / 2).toFixed(5)))
const preColorCls = computed(() => (value.value >= mid.value ? '' : 'icon-wrapper-active'))
const nextColorCls = computed(() => (value.value >= mid.value ? 'icon-wrapper-active' : ''))
</script>

<template>
  <div class="icon-wrapper">
    <FrownOutlined :class="preColorCls" />
    <a-slider v-model:value="value" :min="min" :max="max" />
    <SmileOutlined :class="nextColorCls" />
  </div>
</template>

<style scoped>
.icon-wrapper {
  position: relative;
  padding: 0 30px;
}

.icon-wrapper .anticon {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 16px;
  line-height: 1;
}

.icon-wrapper .icon-wrapper-active {
  color: rgba(0, 0, 0, 0.45);
}

.icon-wrapper .anticon:first-child {
  inset-inline-start: 0;
}

.icon-wrapper .anticon:last-child {
  inset-inline-end: 0;
}
</style>
```
### Customize tooltip
Use `tooltip.formatter` to format content of `Tooltip`. If `tooltip.formatter` is null, hide it.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(30)
const value2 = ref(30)

function formatter(value: number) {
  return `${value}%`
}
</script>

<template>
  <a-slider v-model:value="value" :tooltip="{ formatter }" />
  <a-slider v-model:value="value2" :tooltip="{ formatter: null }" />
</template>
```
### Event
The `onChange` callback function will fire when the user changes the slider's value. The `onChangeComplete` callback function will fire when `mouseup` or `keyup` fired.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(30)
const valueRange = ref([20, 50])

function onChange(val: number | number[]) {
  console.log('onChange: ', val)
}

function onChangeComplete(val: number | number[]) {
  console.log('onChangeComplete: ', val)
}
</script>

<template>
  <a-slider v-model:value="value" @change="onChange" @after-change="onChangeComplete" />
  <a-slider
    v-model:value="valueRange"
    range
    :step="10"
    @change="onChange"
    @after-change="onChangeComplete"
  />
</template>
```
### Graduated slider
Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb. When `included` is false, means that different thumbs are coordinative. when `step` is null, users can only slide the thumbs onto marks.
```vue
<script setup lang="ts">
import { h, ref } from 'vue'

const marks = ref<Record<number, any>>({
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: h('strong', '100°C'),
  },
})

const value1 = ref(37)
const value2 = ref([26, 37])
const value3 = ref(37)
const value4 = ref(37)
const value5 = ref(37)
</script>

<template>
  <h4>included=true</h4>
  <a-slider v-model:value="value1" :marks="marks" />
  <a-slider v-model:value="value2" range :marks="marks" />

  <h4>included=false</h4>
  <a-slider v-model:value="value3" :marks="marks" :included="false" />

  <h4>marks & step</h4>
  <a-slider v-model:value="value4" :marks="marks" :step="10" />

  <h4>step=null</h4>
  <a-slider v-model:value="value5" :marks="marks" :step="null" />
</template>

<style scoped>
h4 {
  margin: 0 0 16px;
}

:deep(.ant-slider-with-marks) {
  margin-bottom: 44px;
}
</style>
```
### Vertical
The vertical Slider.
```vue
<script setup lang="ts">
import { h, ref } from 'vue'

const value = ref(30)
const valueRange = ref([20, 50])
const valueMarks = ref([26, 37])

const style = {
  display: 'inline-block',
  height: '300px',
  marginInlineStart: '70px',
}

const marks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: { color: '#f50' },
    label: h('strong', '100°C'),
  },
}
</script>

<template>
  <div :style="style">
    <a-slider v-model:value="value" vertical />
  </div>
  <div :style="style">
    <a-slider v-model:value="valueRange" vertical range :step="10" />
  </div>
  <div :style="style">
    <a-slider v-model:value="valueMarks" vertical range :marks="marks" />
  </div>
</template>
```
### Control ToolTip
When `tooltip.open` is `true`, ToolTip will always show, if set to `false` the ToolTip will not show, even if dragging or hovering.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(30)
</script>

<template>
  <a-slider v-model:value="value" :tooltip="{ open: true }" />
</template>
```
### Reverse
Using `reverse` to render slider reversely.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const reverse = ref(true)
const value = ref(30)
const valueRange = ref([20, 50])
</script>

<template>
  <a-slider v-model:value="value" :reverse="reverse" />
  <a-slider v-model:value="valueRange" range :reverse="reverse" />
  Reversed: <a-switch v-model:checked="reverse" size="small" />
</template>
```
### Draggable Track
Make range track draggable by setting `range.draggableTrack`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref([20, 50])
</script>

<template>
  <a-slider v-model:value="value" :range="{ draggableTrack: true }" />
</template>
```
### Multiple Handles
Multiple handles combination.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref([0, 10, 20])

function getGradientColor(percentage: number) {
  const startColor = [135, 208, 104]
  const endColor = [255, 204, 199]

  const midColor = startColor.map((start, i) => {
    const end = endColor[i]
    const delta = end - start
    return (start + delta * percentage).toFixed(0)
  })

  return `rgb(${midColor.join(',')})`
}
</script>

<template>
  <a-slider
    v-model:value="value"
    range
    :styles="{
      track: {
        background: 'transparent',
      },
      tracks: {
        background: `linear-gradient(to right, ${getGradientColor(value[0] / 100)} 0%, ${getGradientColor(value[value.length - 1] / 100)} 100%)`,
      },
    }"
  />
</template>
```
### Dynamic edit nodes
Click to add a node, drag out or press the key to delete the node.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref([20, 80])
</script>

<template>
  <a-slider
    v-model:value="value"
    :range="{ editable: true, minCount: 1, maxCount: 5 }"
  />
</template>
```
### Disable specific handles
In Range mode, `disabled` accepts a boolean array to disable specific handles individually.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref([20, 50, 80])
const disabled = ref([false, false, false])

const handleOptions = [
  { key: 'start', label: 'Disabled Handle 1' },
  { key: 'middle', label: 'Disabled Handle 2' },
  { key: 'end', label: 'Disabled Handle 3' },
]
</script>

<template>
  <a-slider
    v-model:value="value"
    :range="{ draggableTrack: true, minCount: 2, maxCount: 5 }"
    :disabled="disabled"
  />
  <a-flex gap="small" align="center" justify="flex-start" :style="{ marginTop: '16px' }">
    <a-checkbox
      v-for="(handle, index) in handleOptions"
      :key="`item-${handle.key}`"
      v-model:checked="disabled[index]"
    >
      {{ handle.label }}
    </a-checkbox>
  </a-flex>
</template>
```
### Customize Semantic Elements
You can customize the [semantic dom](#semantic-dom) style of Sliders by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(30)
const valueVertical = ref(30)

const stylesObject = {
  track: { backgroundImage: 'linear-gradient(180deg, #91caff, #1677ff)' },
  handle: { borderColor: '#1677ff', boxShadow: '0 2px 8px #1677ff' },
}

function stylesFn(info: any) {
  if (info.props.orientation === 'vertical') {
    return {
      root: { height: '300px' },
      track: { backgroundImage: 'linear-gradient(180deg, #722cc0, #722ed1)' },
      handle: { borderColor: '#722ed1', boxShadow: '0 2px 8px #722ed1' },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-slider v-model:value="value" class="custom-slider" :styles="stylesObject" />
    <a-slider
      v-model:value="valueVertical"
      class="custom-slider-vertical"
      orientation="vertical"
      reverse
      :styles="stylesFn"
    />
  </a-flex>
</template>

<style scoped>
.custom-slider {
  width: 300px;
}
.custom-slider-vertical {
  width: 100px;
}
.custom-slider-vertical:hover :deep(.ant-slider-handle):after {
  box-shadow: 0 0 0 2px #722ed1;
}

.custom-slider-vertical :deep(.ant-slider-handle):hover::after,
.custom-slider-vertical :deep(.ant-slider-handle):active::after,
.custom-slider-vertical :deep(.ant-slider-handle):focus::after,
.custom-slider-vertical :deep(.ant-slider-handle)::after {
  box-shadow: 0 0 0 2px #722ed1;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props {#props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| defaultValue | The default value of the slider. When `range` is false, use number, otherwise, use [number, number] | number \| [number, number] | 0 \| [0, 0] | - | × |
| disabled | If true, the slider will not be interactive. Pass `boolean[]` to disable specific handles individually in Range mode | boolean \| boolean[] | false | boolean[]: 1.4.0 | × |
| dots | Whether the thumb can only be dragged to tick marks | boolean | false | - | × |
| included | Takes effect when `marks` is not null. True means containment and false means coordinative | boolean | true | - | × |
| keyboard | Support using keyboard to move handlers | boolean | true | - | × |
| marks | Tick marks of Slider. The type of key must be `number`, and must be in closed interval [min, max]. Each mark can declare its own style | object | &#123; number: VueNode &#125; \| &#123; number: &#123; style: CSSProperties, label: VueNode &#125; &#125; | - | × |
| max | The maximum value the slider can slide to | number | 100 | - | × |
| min | The minimum value the slider can slide to | number | 0 | - | × |
| orientation | Orientation direction | `horizontal` \| `vertical` | `horizontal` | - | × |
| range | Enable dual thumb mode for range selection | boolean \| [RangeConfig](#rangeconfig) | false | - | × |
| reverse | Reverse the component | boolean | false | - | × |
| step | The granularity the slider can step through values. Must be greater than 0, and be divisible by (max - min). When `step` is `null` and `marks` exist, valid points will only be marks, `min` and `max` | number \| null | 1 | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |
| tooltip | The tooltip related props | [TooltipConfig](#tooltipconfig) | - | - | × |
| value | The value of slider. When `range` is false, use number, otherwise, use [number, number], support `v-model:value` | number \| [number, number] | - | - | × |
| vertical | If true, the slider will be vertical. Simultaneously existing with `orientation`, `orientation` takes priority | boolean | false | - | × |

### RangeConfig

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| draggableTrack | Whether range track can be dragged | boolean | false | - |
| editable | Dynamic edit nodes. Cannot be used with `draggableTrack` | boolean | false | - |
| minCount | The minimum count of nodes | number | 0 | - |
| maxCount | The maximum count of nodes | number | - | - |

### TooltipConfig

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoAdjustOverflow | Whether to automatically adjust the popup position | boolean | true | - |
| formatter | Slider will pass its value to `formatter`, display its value in Tooltip, and hide the Tooltip when the returned value is null | (value: number) =&gt; VueNode \| null | IDENTITY | - |
| getPopupContainer | The DOM container of the Tooltip. The default behavior is to create a div element in the body | (triggerNode: HTMLElement) =&gt; HTMLElement | () =&gt; document.body | - |
| open | If true, Tooltip will always be visible; if false, it will never be visible, even when dragging or hovering | boolean | - | - |
| placement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - | - |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback function that is fired when the user changes the slider's value | (value: number \| [number, number]) =&gt; void | - |
| changeComplete | Fire when `mouseup` or `keyup` is fired | (value: number \| [number, number]) =&gt; void | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| mark | Custom mark content | (mark: &#123; point: number; label?: any &#125;) =&gt; VueNode | - |

### Methods {#methods}

| Name | Description | Version |
| --- | --- | --- |
| blur() | Remove focus | - |
| focus() | Get focus | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Slider"></ComponentTokenTable>

---
Title: Space
URL: https://www.antdv-next.com/components/space.md
---

## When To Use

- Avoid components clinging together and set a unified space.
- Use Space.Compact when child form components are compactly connected and the border is collapsed.

### Difference with Flex component

- Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
- Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.

## Examples {#examples}

### Basic Usage
Horizontal spacing between adjacent components.
```vue
<script setup lang="ts">
import { UploadOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-space>
    Space
    <a-button type="primary">
      Button
    </a-button>
    <a-upload>
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        Click to Upload
      </a-button>
    </a-upload>

    <a-popconfirm title="Are you sure delete this task?" ok-text="Yes" cancel-text="No">
      <a-button>
        Confirm
      </a-button>
    </a-popconfirm>
  </a-space>
</template>
```
### Vertical Space
Vertical spacing between adjacent components.
```vue
<template>
  <a-space orientation="vertical" size="medium" style="display: flex;">
    <a-card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
    <a-card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
    <a-card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
  </a-space>
</template>
```
### Space Size
Customize space size.
```vue
<script setup lang="ts">
import type { SizeType } from 'antdv-next'
import { ref } from 'vue'

const size = ref<SizeType | 'customize'>('small')
const customizeSize = ref(0)
</script>

<template>
  <a-radio-group v-model:value="size">
    <a-radio value="small">
      Small
    </a-radio>
    <a-radio value="medium">
      Medium
    </a-radio>
    <a-radio value="large">
      Large
    </a-radio>
    <a-radio value="customize">
      Customize
    </a-radio>
  </a-radio-group>

  <br>
  <br>

  <template v-if="size === 'customize'">
    <a-slider v-model:value="customizeSize" />
    <br>
  </template>

  <a-space :size="size === 'customize' ? customizeSize : size">
    <a-button type="primary">
      Primary
    </a-button>
    <a-button>Default</a-button>
    <a-button type="dashed">
      Dashed
    </a-button>
    <a-button type="link">
      Link
    </a-button>
  </a-space>
</template>
```
### Align
Set alignment.
```vue
<template>
  <div class="flex flex-wrap items-start">
    <div class="flex-none my-2 mx-1 p-1 border border-solid border-[#40a9ff]">
      <a-space align="center">
        center
        <a-button type="primary">
          Primary
        </a-button>
        <span class="inline-block pt-8 px-2 pb-4 bg-[rgba(150,150,150,0.2)]">Block</span>
      </a-space>
    </div>
    <div class="flex-none my-2 mx-1 p-1 border border-solid border-[#40a9ff]">
      <a-space align="start">
        start
        <a-button type="primary">
          Primary
        </a-button>
        <span class="inline-block pt-8 px-2 pb-4 bg-[rgba(150,150,150,0.2)]">Block</span>
      </a-space>
    </div>
    <div class="flex-none my-2 mx-1 p-1 border border-solid border-[#40a9ff]">
      <a-space align="end">
        end
        <a-button type="primary">
          Primary
        </a-button>
        <span class="inline-block pt-8 px-2 pb-4 bg-[rgba(150,150,150,0.2)]">Block</span>
      </a-space>
    </div>
    <div class="flex-none my-2 mx-1 p-1 border border-solid border-[#40a9ff]">
      <a-space align="baseline">
        baseline
        <a-button type="primary">
          Primary
        </a-button>
        <span class="inline-block pt-8 px-2 pb-4 bg-[rgba(150,150,150,0.2)]">Block</span>
      </a-space>
    </div>
  </div>
</template>
```
### Wrap
Auto wrap.
```vue
<template>
  <a-space :size="[8, 16]" wrap>
    <a-button v-for="item in 20" :key="item">
      Button
    </a-button>
  </a-space>
</template>
```
### Separator
Separator between adjacent components.
```vue
<template>
  <a-space>
    <template #separator>
      <a-divider type="vertical" />
    </template>

    <a-typography-link>
      Link
    </a-typography-link>
    <a-typography-link>
      Link
    </a-typography-link>
    <a-typography-link>
      Link
    </a-typography-link>
  </a-space>
</template>
```
### Compact Mode for form component
Compact layout component, suitable for combining input boxes, selectors and other components.
```vue
<script setup lang="ts">
import { CopyOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const zhejiangJiangsuOptions = [
  { label: 'Zhejiang', value: 'Zhejiang' },
  { label: 'Jiangsu', value: 'Jiangsu' },
]

const option12Options = [
  { label: 'Option1', value: 'Option1' },
  { label: 'Option2', value: 'Option2' },
]

const option11Options = [
  { label: 'Option1-1', value: 'Option1-1' },
  { label: 'Option1-2', value: 'Option1-2' },
]

const option22Options = [
  { label: 'Option2-1', value: 'Option2-1' },
  { label: 'Option2-2', value: 'Option2-2' },
]

const betweenExceptOptions = [
  { label: 'Between', value: '1' },
  { label: 'Except', value: '2' },
]

const signOptions = [
  { label: 'Sign Up', value: 'Sign Up' },
  { label: 'Sign In', value: 'Sign In' },
]

const emailOptions = [{ value: 'text 1' }, { value: 'text 2' }]

const addressOptions = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
]

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          { value: 'leaf1', title: 'leaf1' },
          { value: 'leaf2', title: 'leaf2' },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          { value: 'leaf3', title: 'leaf3' },
        ],
      },
    ],
  },
]

const value = ref('leaf1')
</script>

<template>
  <a-space orientation="vertical">
    <a-space-compact block>
      <a-input style="width: 20%" default-value="0571" />
      <a-input style="width: 30%" default-value="26888888" />
    </a-space-compact>
    <a-space-compact block size="small">
      <a-input style="width: calc(100% - 200px)" default-value="https://ant.design" />
      <a-button type="primary">
        Submit
      </a-button>
    </a-space-compact>
    <a-space-compact block>
      <a-input style="width: calc(100% - 200px)" default-value="https://ant.design" />
      <a-button type="primary">
        Submit
      </a-button>
    </a-space-compact>
    <a-space-compact block>
      <a-input
        style="width: calc(100% - 200px)"
        default-value="git@github.com:ant-design/ant-design.git"
      />
      <a-tooltip title="copy git url">
        <a-button>
          <template #icon>
            <CopyOutlined />
          </template>
        </a-button>
      </a-tooltip>
    </a-space-compact>
    <a-space-compact block>
      <a-select
        allow-clear
        default-value="Zhejiang"
        :options="zhejiangJiangsuOptions"
      />
      <a-input style="width: 50%" default-value="Xihu District, Hangzhou" />
    </a-space-compact>
    <a-space-compact block>
      <a-select
        allow-clear
        mode="multiple"
        default-value="Zhejiang"
        style="width: 50%"
        :options="zhejiangJiangsuOptions"
      />
      <a-input style="width: 50%" default-value="Xihu District, Hangzhou" />
    </a-space-compact>
    <a-space-compact block>
      <a-input-search style="width: 30%" default-value="0571" />
      <a-input-search allow-clear style="width: 50%" default-value="26888888" />
      <a-input-search style="width: 20%" default-value="+1" />
    </a-space-compact>
    <a-space-compact block>
      <a-select
        default-value="Option1"
        :options="option12Options"
      />
      <a-input style="width: 50%" default-value="input content" />
      <a-input-number :default-value="12" />
    </a-space-compact>
    <a-space-compact block>
      <a-input style="width: 50%" default-value="input content" />
      <a-date-picker style="width: 50%" />
    </a-space-compact>
    <a-space-compact block>
      <a-range-picker style="width: 70%" />
      <a-input style="width: 30%" default-value="input content" />
      <a-button type="primary">
        Search
      </a-button>
    </a-space-compact>
    <a-space-compact block>
      <a-input style="width: 30%" default-value="input content" />
      <a-range-picker style="width: 70%" />
    </a-space-compact>
    <a-space-compact block>
      <a-select
        default-value="Option1-1"
        :options="option11Options"
      />
      <a-select
        default-value="Option2-2"
        :options="option22Options"
      />
    </a-space-compact>
    <a-space-compact block>
      <a-select
        default-value="1"
        :options="betweenExceptOptions"
      />
      <a-input style="width: 100px; text-align: center" placeholder="Minimum" />
      <a-input
        class="site-input-split"
        style="width: 30px; border-inline-start: 0; border-inline-end: 0; pointer-events: none"
        placeholder="~"
        disabled
      />
      <a-input
        class="site-input-right"
        style="width: 100px; text-align: center"
        placeholder="Maximum"
      />
    </a-space-compact>
    <a-space-compact block>
      <a-select
        default-value="Sign Up"
        style="width: 30%"
        :options="signOptions"
      />
      <a-auto-complete
        style="width: 70%"
        placeholder="Email"
        :options="emailOptions"
      />
    </a-space-compact>
    <a-space-compact block>
      <a-time-picker style="width: 70%" />
      <a-cascader
        style="width: 70%"
        :options="addressOptions"
        placeholder="Select Address"
      />
    </a-space-compact>
    <a-space-compact block>
      <a-time-range-picker />
      <a-tree-select
        v-model:value="value"
        show-search
        style="width: 60%"
        :styles="{ popup: { root: { maxHeight: '400px', overflow: 'auto' } } }"
        placeholder="Please select"
        allow-clear
        tree-default-expand-all
        :tree-data="treeData"
      >
        <template #title="{ value: val, title }">
          <b v-if="val === 'leaf3'" style="color: #08c">{{ title }}</b>
          <template v-else>
            {{ title }}
          </template>
        </template>
      </a-tree-select>
      <a-button type="primary">
        Submit
      </a-button>
    </a-space-compact>
    <a-space-compact>
      <a-input placeholder="input here" />
      <a-space-addon>$</a-space-addon>
      <a-input-number placeholder="another input" style="width: 100%" />
      <a-input-number placeholder="another input" style="width: 100%" />
      <a-space-addon>$</a-space-addon>
    </a-space-compact>
    <a-space-compact>
      <a-input placeholder="input here" />
      <a-color-picker />
    </a-space-compact>
    <a-space-compact>
      <a-button type="primary">
        Button
      </a-button>
      <a-input placeholder="input here" />
      <a-space-addon>$</a-space-addon>
    </a-space-compact>
  </a-space>
</template>
```
### Button Compact Mode
Compact button group.
```vue
<script setup lang="ts">
import {
  CommentOutlined,
  DownloadOutlined,
  EllipsisOutlined,
  HeartOutlined,
  LinkOutlined,
  MailOutlined,
  MobileOutlined,
  ShareAltOutlined,
  StarOutlined,
  WarningOutlined,
} from '@antdv-next/icons'
import { h } from 'vue'
</script>

<template>
  <a-space-compact block>
    <a-tooltip title="Link">
      <a-button>
        <template #icon>
          <LinkOutlined />
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="Comment">
      <a-button>
        <template #icon>
          <CommentOutlined />
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="Star">
      <a-button>
        <template #icon>
          <StarOutlined />
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="Heart">
      <a-button>
        <template #icon>
          <HeartOutlined />
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="Share">
      <a-button>
        <template #icon>
          <ShareAltOutlined />
        </template>
      </a-button>
    </a-tooltip>
    <a-tooltip title="Download">
      <a-button>
        <template #icon>
          <DownloadOutlined />
        </template>
      </a-button>
    </a-tooltip>

    <a-dropdown
      placement="bottomRight" :menu="{
        items: [
          {
            key: '1',
            label: 'Report',
            icon: () => h(WarningOutlined),
          },
          {
            key: '2',
            label: 'Mail',
            icon: () => h(MailOutlined),
          },
          {
            key: '3',
            label: 'Mobile',
            icon: () => h(MobileOutlined),
          },
        ],
        onClick: () => console.log('click dropdown'),
      }
      " :trigger="['click']"
    >
      <a-button>
        <template #icon>
          <EllipsisOutlined />
        </template>
      </a-button>
    </a-dropdown>
  </a-space-compact>

  <br>

  <a-space-compact block>
    <a-button type="primary">
      Button 1
    </a-button>
    <a-button type="primary">
      Button 2
    </a-button>
    <a-button type="primary">
      Button 3
    </a-button>
    <a-button type="primary">
      Button 4
    </a-button>
    <a-tooltip title="Tooltip">
      <a-button type="primary" disabled>
        <DownloadOutlined />
      </a-button>
    </a-tooltip>
    <a-tooltip type="primary" title="Tooltip">
      <a-button>
        <DownloadOutlined />
      </a-button>
    </a-tooltip>
  </a-space-compact>

  <br>

  <a-space-compact block>
    <a-button type="primary">
      Button 1
    </a-button>
    <a-button type="primary">
      Button 2
    </a-button>
    <a-button type="primary">
      Button 3
    </a-button>
    <a-tooltip title="Tooltip">
      <a-button type="primary" disabled>
        <DownloadOutlined />
      </a-button>
    </a-tooltip>
    <a-tooltip type="primary" title="Tooltip">
      <a-button>
        <DownloadOutlined />
      </a-button>
    </a-tooltip>
    <a-button type="primary">
      Button 4
    </a-button>

    <a-dropdown
      placement="bottomRight" :menu="{
        items: [
          {
            key: '1',
            label: '1st item',
          },
          {
            key: '2',
            label: '2nd item',
          },
          {
            key: '3',
            label: '3rd item',
          },
        ],
        onClick: () => console.log('click dropdown'),
      }
      " :trigger="['click']"
    >
      <a-button type="primary">
        <template #icon>
          <EllipsisOutlined />
        </template>
      </a-button>
    </a-dropdown>
  </a-space-compact>
</template>
```
### Vertical Compact Mode
Vertical compact button group.
```vue
<template>
  <a-space>
    <a-space-compact orientation="vertical">
      <a-button>Button 1</a-button>
      <a-button>Button 2</a-button>
      <a-button>Button 3</a-button>
    </a-space-compact>
    <a-space-compact orientation="vertical">
      <a-button type="dashed">
        Button 1
      </a-button>
      <a-button type="dashed">
        Button 2
      </a-button>
      <a-button type="dashed">
        Button 3
      </a-button>
    </a-space-compact>
    <a-space-compact orientation="vertical">
      <a-button type="primary">
        Button 1
      </a-button>
      <a-button type="primary">
        Button 2
      </a-button>
      <a-button type="primary">
        Button 3
      </a-button>
    </a-space-compact>
  </a-space>
</template>
```
### Custom semantic dom styling
Customize semantic structure styles and class names. Supports both object and function forms.
```vue
<script setup lang="ts">
import type { SpaceProps } from 'antdv-next'

const classesObject: SpaceProps['classes'] = {
  root: 'demo-space-root',
  item: 'demo-space-item',
  separator: 'demo-space-separator',
}

const classesFn: SpaceProps['classes'] = (info) => {
  if (info.props.orientation === 'vertical') {
    return {
      root: 'demo-space-root--vertical',
    } satisfies SpaceProps['classes']
  }
  else {
    return {
      root: 'demo-space-root--horizontal',
    } satisfies SpaceProps['classes']
  }
}

const stylesObject: SpaceProps['styles'] = {
  root: { borderWidth: '2px', borderStyle: 'dashed', padding: '8px', marginBottom: '10px' },
  item: { backgroundColor: '#f0f0f0', padding: '4px' },
  separator: { color: 'red', fontWeight: 'bold' },
}

const stylesFn: SpaceProps['styles'] = (info) => {
  if (info.props.size === 'large') {
    return {
      root: {
        backgroundColor: '#e6f7ff',
        borderColor: '#1890ff',
        padding: '8px',
      },
    } satisfies SpaceProps['styles']
  }
  else {
    return {
      root: {
        backgroundColor: '#fff7e6',
        borderColor: '#fa8c16',
      },
    } satisfies SpaceProps['styles']
  }
}
</script>

<template>
  <div>
    <a-space :styles="stylesObject" :classes="classesObject" separator="•">
      <a-button>Styled Button 1</a-button>
      <a-button>Styled Button 2</a-button>
      <a-button>Styled Button 3</a-button>
    </a-space>
    <a-space size="large" :styles="stylesFn" :classes="classesFn">
      <a-button>Large Space Button 1</a-button>
      <a-button>Large Space Button 2</a-button>
      <a-button>Large Space Button 3</a-button>
    </a-space>
  </div>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Space

#### Props {#space-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| align | Align items | `start` \| `end` \| `center` \| `baseline` | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| orientation | The space direction | `vertical` \| `horizontal` | `horizontal` | - | × |
| separator | Set separator | VueNode | - | - | × |
| size | The space size | [Size](#size) \| [[Size](#size), [Size](#size)] | `small` | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |
| vertical | Orientation, Simultaneously configure with `orientation` and prioritize `orientation` | boolean | false | - | × |
| wrap | Auto wrap line, when `horizontal` effective | boolean | false | - | × |

#### Slots {#space-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| separator | Set separator | () =&gt; VueNode | - |

### Size

`'small' | 'middle' | 'large' | number`

### SpaceCompact

Use Space.Compact when child form components are compactly connected and the border is collapsed. The supported components are:

- Button
- AutoComplete
- Cascader
- DatePicker
- Input/Input.Search
- InputNumber
- Select
- TimePicker
- TreeSelect

#### Props {#space-compact-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| block | Option to fit width to its parent's width | boolean | false | - |
| orientation | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | - |
| size | Set child component size | `large` \| `medium` \| `small` | `medium` | - |
| vertical | Orientation, Simultaneously configure with `orientation` and prioritize `orientation` | boolean | false | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Space" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Spin
URL: https://www.antdv-next.com/components/spin.md
---

## When To Use

When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.

## Examples

### Basic Usage
A simple loading status.
```vue
<template>
  <a-spin />
</template>
```
### Size
A small `Spin` is used for loading text, default sized `Spin` for loading a card-level block, and large `Spin` used for loading a **page**.
```vue
<template>
  <a-flex align="center" gap="medium">
    <a-spin size="small" />
    <a-spin />
    <a-spin size="large" />
  </a-flex>
</template>
```
### Embedded mode
Embedding content into `Spin` will set it into loading state.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-spin :spinning="loading">
      <a-alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    </a-spin>
    <a-flex align="center" gap="small">
      <span>Loading state:</span>
      <a-switch v-model:checked="loading" />
    </a-flex>
  </a-flex>
</template>
```
### Customized description
Customize the description text.
```vue
<template>
  <a-flex gap="medium" vertical>
    <a-flex gap="medium">
      <a-spin description="Loading" size="small">
        <div style="padding: 50px;background: rgba(0, 0, 0, 0.05);border-radius: 4px;" />
      </a-spin>
      <a-spin description="Loading">
        <div style="padding: 50px;background: rgba(0, 0, 0, 0.05);border-radius: 4px;" />
      </a-spin>
      <a-spin description="Loading" size="large">
        <div style="padding: 50px;background: rgba(0, 0, 0, 0.05);border-radius: 4px;" />
      </a-spin>
    </a-flex>
    <a-spin description="Loading...">
      <a-alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    </a-spin>
  </a-flex>
</template>
```
### Delay
Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-spin :spinning="loading" :delay="500">
      <a-alert
        message="Alert message title"
        description="Further details about the context of this alert."
        type="info"
      />
    </a-spin>
    <a-flex align="center" gap="small">
      <span>Loading state:</span>
      <a-switch v-model:checked="loading" />
    </a-flex>
  </a-flex>
</template>
```
### Custom spinning indicator
Use custom loading indicator.
```vue
<script setup lang="ts">
import { LoadingOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-flex align="center" gap="medium">
    <a-spin size="small">
      <template #indicator>
        <LoadingOutlined spin />
      </template>
    </a-spin>
    <a-spin>
      <template #indicator>
        <LoadingOutlined spin />
      </template>
    </a-spin>
    <a-spin size="large">
      <template #indicator>
        <LoadingOutlined spin />
      </template>
    </a-spin>
    <a-spin>
      <template #indicator>
        <LoadingOutlined spin style="font-size: 48px" />
      </template>
    </a-spin>
  </a-flex>
</template>
```
### Progress
Show the progress. When `percent="auto"` is set, an indeterminate progress will be displayed.
```vue
<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue'

const auto = ref(false)
const percent = ref(-50)
let timerRef: ReturnType<typeof setTimeout> | null = null

const mergedPercent = computed(() => auto.value ? 'auto' : percent.value)

function updatePercent() {
  timerRef = setTimeout(() => {
    const prev = percent.value
    const nextPercent = prev + 5
    percent.value = nextPercent > 150 ? -50 : nextPercent
  }, 100)
}

watch(percent, (_n, _o, onCleanup) => {
  updatePercent()

  onCleanup(() => {
    if (timerRef) {
      clearTimeout(timerRef)
      timerRef = null
    }
  })
}, {
  immediate: true,
})

watch(auto, () => {
  percent.value = -50
})

onUnmounted(() => {
  if (timerRef) {
    clearTimeout(timerRef)
    timerRef = null
  }
})
</script>

<template>
  <a-flex align="center" gap="medium">
    <a-switch
      v-model:checked="auto"
      checked-children="Auto"
      un-checked-children="Auto"
    />
    <a-spin :percent="mergedPercent" size="small" />
    <a-spin :percent="mergedPercent" />
    <a-spin :percent="mergedPercent" size="large" />
  </a-flex>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Spin by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { SpinProps } from 'antdv-next'

const classes: SpinProps['classes'] = {
  root: 'demo-spin-root',
}

const stylesObject: SpinProps['styles'] = {
  indicator: {
    color: '#00d4ff',
  },
}

const stylesFn: SpinProps['styles'] = (info) => {
  if (info?.props?.size === 'small') {
    return {
      indicator: {
        color: '#722ed1',
      },
    }
  }
  return {}
}

const sharedProps: SpinProps = {
  spinning: true,
  percent: 0,
  classes,
}
</script>

<template>
  <a-flex align="center" gap="medium">
    <a-spin v-bind="sharedProps" :styles="stylesObject" />
    <a-spin v-bind="sharedProps" :styles="stylesFn" size="small" />
  </a-flex>
</template>

<style>
.demo-spin-root {
  padding: 8px;
}
</style>
```
### Fullscreen
The `fullscreen` mode is perfect for creating page loaders. It adds a dimmed overlay with a centered spinner.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const spinning = ref(false)
const percent = ref(0)

function showLoader() {
  spinning.value = true
  let ptg = -10

  const interval = setInterval(() => {
    ptg += 5
    percent.value = ptg

    if (ptg > 120) {
      clearInterval(interval)
      spinning.value = false
      percent.value = 0
    }
  }, 100)
}
</script>

<template>
  <div>
    <a-button @click="showLoader">
      Show fullscreen
    </a-button>
    <a-spin :spinning="spinning" :percent="percent" fullscreen />
  </div>
</template>
```
### Nested debug
Debug example for standalone Spin components nested inside a wrapping Spin. The inner
ones should not pick up the outer overlay's absolute centering styles.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(true)
const dataSource = ['Apple', 'Banana']
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-spin :spinning="loading">
      <a-flex vertical gap="small" :style="{ padding: '16px', border: '1px solid #d9d9d9' }">
        <a-flex v-for="item in dataSource" :key="item" align="center" justify="space-between">
          <span>{{ item }}</span>
          <a-spin size="small" />
        </a-flex>
      </a-flex>
    </a-spin>
    <a-flex align="center" gap="small">
      <span>Outer loading state:</span>
      <a-switch v-model:checked="loading" />
    </a-flex>
  </a-flex>
</template>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| spinning | Whether Spin is visible | boolean | true | - | × |
| size | The size of Spin, options: `small`, `medium` and `large` | SpinSize | `medium` | - | × |
| ~~tip~~ | `deprecated, use description`Customize description content when Spin has children | VueNode | - | - | × |
| description | Customize description content | VueNode | - | - | × |
| delay | Specifies a delay in milliseconds for loading state (prevent flush) | number | - | - | × |
| wrapperClassName | The className of wrapper when Spin has children | string | - | - | × |
| indicator | The node of the spinning indicator | VueNode | - | - | ✓ |
| fullscreen | Display a backdrop with the `Spin` component | boolean | false | - | × |
| percent | The progress percentage, when set to `auto`, it will be an indeterminate progress | number \| 'auto' | - | - | × |
| rootClass | Root container class | string | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | SpinClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | SpinStylesType | - | - | ✓ |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| default | Content to wrap with Spin | () =&gt; any | - |
| indicator | The node of the spinning indicator | () =&gt; any | - |
| ~~tip~~ | `deprecated, use description`Customize description content when Spin has children | () =&gt; any | - |
| description | Customize description content | () =&gt; any | - |

### Static Methods

- `Spin.setDefaultIndicator(indicator: VueNode)`

  You can define default spin element globally.

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Spin"></ComponentTokenTable>

---
Title: Splitter
URL: https://www.antdv-next.com/components/splitter.md
---

## When To Use

Provide a draggable split panel for creating complex multi-column or multi-row layouts.

## Examples {#examples}

### Basic
Set the default size with `defaultSize`, and restrict the panel size with `min` and `max`.
```vue
<template>
  <a-splitter style="height: 200px;box-shadow: 0 0 10px rgba(0,0,0,0.1)">
    <a-splitter-panel default-size="40%" min="20%" max="70%">
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          First
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>
    <a-splitter-panel>
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          Second
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>
  </a-splitter>
</template>
```
### Vertical
Vertical split panel.
```vue
<template>
  <a-splitter orientation="vertical" style="height: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
    <a-splitter-panel>
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          First
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>
    <a-splitter-panel>
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          Second
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>
  </a-splitter>
</template>
```
### Controlled
Control panel size with `size` and `onResize`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const sizes = ref<(number | string)[]>(['50%', '50%'])
const enabled = ref(true)

function handleResize(newSizes: number[]) {
  sizes.value = newSizes
}

function handleReset() {
  sizes.value = ['50%', '50%']
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-splitter
      style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
      @resize="handleResize"
    >
      <a-splitter-panel :size="sizes[0]" :resizable="enabled">
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            First
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel :size="sizes[1]">
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            Second
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
    </a-splitter>
    <a-flex gap="medium" justify="space-between">
      <a-switch
        v-model:checked="enabled"
        checked-children="Enabled"
        un-checked-children="Disabled"
      />
      <a-button @click="handleReset">
        Reset
      </a-button>
    </a-flex>
  </a-flex>
</template>
```
### Collapsible
Collapsible panel.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const motion = ref(true)
</script>

<template>
  <a-flex vertical gap="medium">
    <a-flex gap="medium">
      <a-switch
        v-model:checked="motion"
        checked-children="motion"
        un-checked-children="motion"
      />
    </a-flex>

    <a-splitter
      :collapsible="{ motion }"
      style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
    >
      <a-splitter-panel collapsible min="20%">
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            First
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel collapsible>
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            Second
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
    </a-splitter>

    <a-splitter
      :collapsible="{ motion }"
      orientation="vertical"
      style="height: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
    >
      <a-splitter-panel collapsible min="20%">
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            First
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel collapsible>
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            Second
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
    </a-splitter>
  </a-flex>
</template>
```
### Collapsible Icon
Control the display of collapsible icon with `showCollapsibleIcon`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const showIconMode = ref<'auto' | boolean>(true)

const options = [
  { label: 'Auto', value: 'auto' },
  { label: 'True', value: true },
  { label: 'False', value: false },
]
</script>

<template>
  <a-flex vertical :gap="20">
    <a-flex :gap="5">
      <p>ShowCollapsibleIcon:</p>
      <a-radio-group v-model:value="showIconMode" :options="options" />
    </a-flex>
    <a-splitter style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
      <a-splitter-panel
        :collapsible="{ start: true, end: true, showCollapsibleIcon: showIconMode }"
        min="20%"
      >
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            First
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel
        :collapsible="{ start: true, end: true, showCollapsibleIcon: showIconMode }"
      >
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            Second
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel
        :collapsible="{ start: true, end: true, showCollapsibleIcon: showIconMode }"
      >
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            Third
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
    </a-splitter>
  </a-flex>
</template>
```
### Multiple
Multiple panels split.
```vue
<script setup lang="ts">
</script>

<template>
  <a-splitter style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
    <a-splitter-panel collapsible>
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          Panel 1
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>
    <a-splitter-panel :collapsible="{ start: true }">
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          Panel 2
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>
    <a-splitter-panel>
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          Panel 3
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>
  </a-splitter>
</template>
```
### Layout Group
Nested Splitter for complex layout.
```vue
<script setup lang="ts">
</script>

<template>
  <a-splitter style="height: 300px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
    <a-splitter-panel collapsible>
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          Left
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>
    <a-splitter-panel>
      <a-splitter orientation="vertical">
        <a-splitter-panel>
          <a-flex justify="center" align="center" style="height: 100%">
            <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
              Top
            </a-typography-title>
          </a-flex>
        </a-splitter-panel>
        <a-splitter-panel>
          <a-flex justify="center" align="center" style="height: 100%">
            <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
              Bottom
            </a-typography-title>
          </a-flex>
        </a-splitter-panel>
      </a-splitter>
    </a-splitter-panel>
  </a-splitter>
</template>
```
### Size Mix
Mix using pixels and percentages to set panel size.
```vue
<script setup lang="ts">
import { computed, ref } from 'vue'

const sizeBucket = ref(1)

interface SizeBucket {
  defaultSize?: number | string
  min: number | string
  max?: number | string
}

const SIZE_BUCKETS_1: SizeBucket[] = [
  {
    defaultSize: 100,
    min: 100,
    max: 200,
  },
  {
    min: 100,
    max: 200,
  },
  {
    min: '20%',
  },
]

const SIZE_BUCKETS_2: SizeBucket[] = [
  {
    min: 300,
  },
  {
    min: 100,
    max: 200,
  },
  {
    min: 600,
  },
]

const SIZE_BUCKETS = computed(() => sizeBucket.value === 1 ? SIZE_BUCKETS_1 : SIZE_BUCKETS_2)
</script>

<template>
  <div>
    <a-radio-group
      v-model:value="sizeBucket"
      style="margin-bottom: 16px"
    >
      <a-radio-button :value="1">
        Size Bucket 1
      </a-radio-button>
      <a-radio-button :value="2">
        Size Bucket 2
      </a-radio-button>
    </a-radio-group>
    <a-splitter
      :key="sizeBucket"
      style="height: 300px;  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
    >
      <a-splitter-panel
        :default-size="SIZE_BUCKETS?.[0]?.defaultSize"
        :min="SIZE_BUCKETS[0]?.min"
        :max="SIZE_BUCKETS?.[0]?.max"
      >
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            First
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel
        :min="SIZE_BUCKETS?.[1]?.min"
        :max="SIZE_BUCKETS?.[1]?.max"
      >
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            Second
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel :min="SIZE_BUCKETS?.[2]?.min">
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            Third
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
    </a-splitter>
  </div>
</template>
```
### Lazy
Lazy rendering mode, only updates panel size when mouse moves. Suitable for large pages to avoid frequent re-rendering causing lag.
```vue
<template>
  <a-space vertical style="width: 100%">
    <a-splitter lazy style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)">
      <a-splitter-panel default-size="40%" min="20%" max="70%">
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            First
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel>
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            Second
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
    </a-splitter>
    <a-splitter
      lazy
      orientation="vertical"
      style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
    >
      <a-splitter-panel default-size="40%" min="30%" max="70%">
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            First
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel>
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
            Second
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
    </a-splitter>
  </a-space>
</template>
```
### Double-clicked reset
Double-click the dragger to reset the Splitter.Panel to its default size.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const defaultSizes = ['30%', '40%', '30%']
const sizes = ref<(number | string)[]>([...defaultSizes])

function handleResize(newSizes: number[]) {
  sizes.value = newSizes
}

function handleDoubleClick() {
  sizes.value = [...defaultSizes]
}
</script>

<template>
  <a-splitter
    style="height: 200px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)"
    @resize="handleResize"
    @dragger-double-click="handleDoubleClick"
  >
    <a-splitter-panel :size="sizes[0]">
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          Panel 1
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>

    <a-splitter-panel :size="sizes[1]">
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          Panel 2
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>

    <a-splitter-panel :size="sizes[2]">
      <a-flex justify="center" align="center" style="height: 100%">
        <a-typography-title type="secondary" :level="5" style="white-space: nowrap">
          Panel 3
        </a-typography-title>
      </a-flex>
    </a-splitter-panel>
  </a-splitter>
</template>
```
### Custom semantic dom styling
Customize semantic structure styles and class names. Supports both object and function forms.
```vue
<script setup lang="ts">
import type { SplitterProps } from 'antdv-next'

const stylesObject: SplitterProps['styles'] = {
  root: { backgroundColor: '#fffbe6' },
  dragger: { backgroundColor: 'rgba(194,223,252,0.4)' },
}

const stylesFn: SplitterProps['styles'] = ({ props }) => {
  if (props.orientation === 'horizontal') {
    return {
      root: {
        borderWidth: '2px',
        borderStyle: 'dashed',
        marginBottom: '10px',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="large">
    <a-splitter
      style="height: 200px"
      root-class="shadow-secondary"
      :styles="stylesObject"
    >
      <a-splitter-panel>
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="color: #000">
            First
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel>
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5" style="color: #000">
            Second
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
    </a-splitter>
    <a-splitter
      style="height: 200px"
      root-class="shadow-secondary"
      :styles="stylesFn"
    >
      <a-splitter-panel>
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5">
            First
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
      <a-splitter-panel>
        <a-flex justify="center" align="center" style="height: 100%">
          <a-typography-title type="secondary" :level="5">
            Second
          </a-typography-title>
        </a-flex>
      </a-splitter-panel>
    </a-splitter>
  </a-flex>
</template>

<style scoped>
.shadow-secondary {
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Splitter

#### Props {#splitter-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), string&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), string&gt; | - | - | ✓ |
| collapsible | `motion` to enable collapse animation, `icon` to customize collapse icons | &#123; motion?: boolean; icon?: &#123; start?: VueNode; end?: VueNode &#125; &#125; | - | - | × |
| collapsibleIcon | Custom collapsible icon | &#123; start?: VueNode; end?: VueNode &#125; | - | 1.0.0 | × |
| draggerIcon | Custom dragger icon | VueNode | - | 1.0.0 | × |
| lazy | Lazy rendering mode | boolean | false | 1.0.0 | × |
| orientation | Layout direction | `vertical` \| `horizontal` | `horizontal` | 1.0.0 | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; \| (info: &#123; props &#125;) =&gt; Record&lt;[SemanticDOM](#semantic-dom), CSSProperties&gt; | - | - | ✓ |
| vertical | Orientation, Simultaneously existing with `orientation`, `orientation` takes priority | boolean | false | 1.0.0 | × |

#### Events {#splitter-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| collapse | Callback when expanding or collapsing | (collapsed: boolean[], sizes: number[]) =&gt; void | 1.0.0 |
| resize | Panel size change callback | (sizes: number[]) =&gt; void | - |
| resizeEnd | Drag end callback | (sizes: number[]) =&gt; void | - |
| resizeStart | Callback before dragging starts | (sizes: number[]) =&gt; void | - |

#### Slots {#splitter-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| collapsibleIconEnd | Custom collapsible end icon | () =&gt; VueNode | - |
| collapsibleIconStart | Custom collapsible start icon | () =&gt; VueNode | - |
| draggerIcon | Custom dragger icon | () =&gt; VueNode | 1.0.0 |

### SplitterPanel

#### Props {#splitter-panel-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| collapsible | Enable collapsible | boolean \| &#123; start?: boolean; end?: boolean; showCollapsibleIcon?: boolean \| 'auto' &#125; | false | 1.0.0 |
| defaultSize | Initial panel size, supports px and percentage | number \| string | - | - |
| destroyOnHidden | Destroy panel content when collapsed (`size` is 0) | boolean | false | - |
| max | Maximum threshold, supports px and percentage | number \| string | - | - |
| min | Minimum threshold, supports px and percentage | number \| string | - | - |
| resizable | Whether to enable resize | boolean | true | - |
| size | Controlled panel size, supports px and percentage | number \| string | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Splitter" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Statistic
URL: https://www.antdv-next.com/components/statistic.md
---

## When To Use {#when-to-use}

- When want to highlight some data.
- When want to display statistic data with description.

## Examples {#examples}

### Basic
Simplest Usage.
```vue
<template>
  <a-row :gutter="16">
    <a-col :span="12">
      <a-statistic title="Active Users" :value="112893" />
    </a-col>
    <a-col :span="12">
      <a-statistic title="Account Balance (CNY)" :value="112893" :precision="2" />
      <a-button style="margin: 16px" type="primary">
        Recharge
      </a-button>
    </a-col>
    <a-col :span="12">
      <a-statistic title="Active Users" :value="112893" loading />
    </a-col>
  </a-row>
</template>
```
### Unit
Add unit through `prefix` and `suffix`.
```vue
<script lang="ts" setup>
import { LikeOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-row :gutter="16">
    <a-col :span="12">
      <a-statistic title="Feedback" :value="1128">
        <template #prefix>
          <LikeOutlined />
        </template>
      </a-statistic>
    </a-col>
    <a-col :span="12">
      <a-statistic title="Unmerged" :value="93" suffix="/ 100" />
    </a-col>
  </a-row>
</template>
```
### In Card
Display statistic data in Card.
```vue
<script setup lang="ts">
import { ArrowDownOutlined, ArrowUpOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-row :gutter="16">
    <a-col :span="12">
      <a-card variant="borderless">
        <a-statistic title="Active" :value="11.28" :precision="2" :styles="{ content: { color: '#3f8600' } }" suffix="%">
          <template #prefix>
            <ArrowUpOutlined />
          </template>
        </a-statistic>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card variant="borderless">
        <a-statistic title="Idle" :value="9.3" :precision="2" :styles="{ content: { color: '#cf1322' } }" suffix="%">
          <template #prefix>
            <ArrowDownOutlined />
          </template>
        </a-statistic>
      </a-card>
    </a-col>
  </a-row>
</template>
```
### Timer
Timer component.
```vue
<script setup lang="ts">
const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30 // Dayjs is also OK
const before = Date.now() - 1000 * 60 * 60 * 24 * 2 + 1000 * 30
const tenSecondsLater = Date.now() + 10 * 1000

function onFinish() {
  console.log('finished!')
}
function onChange(val?: number) {
  if (typeof val === 'number' && 4.95 * 1000 < val && val < 5 * 1000) {
    console.log('changed!')
  }
}
</script>

<template>
  <a-row :gutter="16">
    <a-col :span="12">
      <a-statistic-timer type="countdown" :value="deadline" @finish="onFinish" />
    </a-col>
    <a-col :span="12">
      <a-statistic-timer type="countdown" title="Milliseconds" :value="deadline" format="HH:mm:ss:SSS" />
    </a-col>
    <a-col :span="12">
      <a-statistic-timer
        type="countdown" title="Countdown" :value="tenSecondsLater"
        @change="onChange"
      />
    </a-col>
    <a-col :span="12">
      <a-statistic-timer type="countup" title="Countup" :value="before" @change="onChange" />
    </a-col>
    <a-col :span="24" style="margin-top: 32px">
      <a-statistic-timer
        type="countdown"
        title="Day Level (Countdown)"
        :value="deadline"
        format="D 天 H 时 m 分 s 秒"
      />
    </a-col>
    <a-col :span="24" style="margin-top: 32px">
      <a-statistic-timer
        type="countup"
        title="Day Level (Countup)"
        :value="before"
        format="D 天 H 时 m 分 s 秒"
      />
    </a-col>
  </a-row>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of the Statistic by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { StatisticProps } from 'antdv-next'
import { ArrowDownOutlined, ArrowUpOutlined } from '@antdv-next/icons'

const classes = {
  root: 'custom-statistic-root',
}
const styleFn: StatisticProps['styles'] = ({ props }) => {
  const numValue = Number(props.value ?? 0)
  const isNegative = Number.isFinite(numValue) && numValue < 0
  if (isNegative) {
    return {
      title: {
        color: '#ff4d4f',
      },
      content: {
        color: '#ff7875',
      },
    } satisfies StatisticProps['styles']
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-statistic
      :value="93241"
      title="Monthly Active Users"
      :classes="classes"
      :styles="{ title: { color: '#1890ff', fontWeight: '600px' }, content: { fontSize: '24px' } }"
      suffix="users"
    >
      <template #prefix>
        <ArrowUpOutlined />
      </template>
    </a-statistic>

    <a-statistic
      :value="-18.7"
      title="Yearly Loss"
      :precision="1"
      :classes="classes"
      :styles="styleFn"
      suffix="%"
    >
      <template #prefix>
        <ArrowDownOutlined />
      </template>
    </a-statistic>
  </a-flex>
</template>

<style scoped>
.custom-statistic-root {
  border: 2px dashed #ccc;
  padding: 16px;
  border-radius: 8px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Statistic

#### Props {#statistic-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the Statistic component. Supports object or function | StatisticClassNamesType | - | - | ✓ |
| decimalSeparator | The decimal separator | string | `.` | - | × |
| formatter | Customize value display logic | (value: number \| string) =&gt; VueNode | - | - | × |
| groupSeparator | Group separator | string | `,` | - | × |
| loading | Loading status of Statistic | boolean | false | - | × |
| precision | The precision of input value | number | - | - | × |
| prefix | The prefix node of value | VueNode | - | - | × |
| styles | Customize inline style for each semantic structure inside the Statistic component. Supports object or function | StatisticStylesType | - | - | ✓ |
| suffix | The suffix node of value | VueNode | - | - | × |
| title | Display title | VueNode | - | - | × |
| value | Display value | string \| number | - | - | × |
| valueStyle | Set value section style | CSSProperties | - | - | × |

#### Slots {#statistic-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| formatter | Customize value display logic | (value: number \| string) =&gt; VueNode | - |
| prefix | The prefix node of value | () =&gt; VueNode | - |
| suffix | The suffix node of value | () =&gt; VueNode | - |
| title | Display title | () =&gt; VueNode | - |

### Statistic.Timer

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | StatisticClassNamesType | - | - |
| format | Format as [dayjs](https://day.js.org/) | string | `HH:mm:ss` | - |
| prefix | The prefix node of value | VueNode | - | - |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | StatisticStylesType | - | - |
| suffix | The suffix node of value | VueNode | - | - |
| title | Display title | VueNode | - | - |
| type | Timer type, countdown or countup | `countdown` \| `countup` | - | - |
| value | Set target time | number | - | - |
| valueStyle | Set value section style | CSSProperties | - | - |

#### Events {#timer-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Trigger when time's changing | (value: number) =&gt; void | - |
| finish | Trigger when time's up, only to be called when type is `countdown` | () =&gt; void | - |

#### Slots {#timer-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| prefix | The prefix node of value | () =&gt; VueNode | - |
| suffix | The suffix node of value | () =&gt; VueNode | - |
| title | Display title | () =&gt; VueNode | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token {#design-token}

<ComponentTokenTable component="Statistic"></ComponentTokenTable>

---
Title: Steps
URL: https://www.antdv-next.com/components/steps.md
---

## When To Use {#when-to-use}

When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.

## Examples {#examples}

### Basic
The most basic step bar. Use the `variant` property to set different styles and `size` to control the size.
```vue
<script lang="ts" setup>
const content = 'This is a content.'
const items = [
  {
    title: 'Finished',
    content,
  },
  {
    title: 'In Progress',
    content,
    subTitle: 'Left 00:00:08',
  },
  {
    title: 'Waiting',
    content,
  },
]
</script>

<template>
  <a-flex vertical gap="large">
    <a-steps :current="1" :items="items" />
    <a-steps :current="1" :items="items" variant="outlined" />
    <a-steps :current="1" :items="items" size="small" />
    <a-steps :current="1" :items="items" size="small" variant="outlined" />
  </a-flex>
</template>
```
### Error Status
By using `status` of `Steps`, you can specify the state for current step.
```vue
<script lang="ts" setup>
const content = 'This is a content'
const items = [
  {
    title: 'Finished',
    content,
  },
  {
    title: 'In Process',
    content,
  },
  {
    title: 'Waiting',
    content,
  },
]
</script>

<template>
  <a-steps :current="1" status="error" :items="items" />
</template>
```
### Vertical
A simple step bar in the vertical orientation.
```vue
<script lang="ts" setup>
const content = 'This is a content.'

const items = [
  {
    title: 'Finished',
    content,
  },
  {
    title: 'In Progress',
    content,
  },
  {
    title: 'Waiting',
    content,
  },
]
</script>

<template>
  <a-flex>
    <div :style="{ flex: 1 }">
      <a-steps orientation="vertical" :current="1" :items="items" />
    </div>
    <div :style="{ flex: 1 }">
      <a-steps orientation="vertical" :current="1" :items="items" size="small" />
    </div>
  </a-flex>
</template>
```
### Clickable
Setting `onChange` makes Steps clickable.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const content = 'This is a content.'

const items = [
  {
    title: 'Step 1',
    content,
  },
  {
    title: 'Step 2',
    content,
  },
  {
    title: 'Step 3',
    content,
  },
]
const current = ref(0)
</script>

<template>
  <a-steps v-model:current="current" :items="items" />
  <a-divider />
  <a-steps v-model:current="current" :items="items" orientation="vertical" />
</template>
```
### Panel Steps
Panel style steps.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

const items = [
  {
    title: 'Step 1',
    subTitle: '00:00',
    content: 'This is a content.',
  },
  {
    title: 'Step 2',
    content: 'This is a content.',
    status: 'error' as const,
  },
  {
    title: 'Step 3',
    content: 'This is a content.',
  },
]

function handleChange(value: number) {
  console.log('onChange:', value)
  current.value = value
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-steps
      v-model:current="current"
      type="panel"
      :items="items"
      @change="handleChange"
    />
    <a-steps
      v-model:current="current"
      type="panel"
      size="small"
      variant="outlined"
      :items="items"
      @change="handleChange"
    />
  </a-flex>
</template>
```
### With icon
You can use your own custom icons by setting the property `icon` for `items`.
```vue
<script setup lang="ts">
import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const items = [
  {
    title: 'Login',
    status: 'finish' as const,
    icon: h(UserOutlined),
  },
  {
    title: 'Verification',
    status: 'finish' as const,
    icon: h(SolutionOutlined),
  },
  {
    title: 'Pay',
    status: 'process' as const,
    icon: h(LoadingOutlined),
  },
  {
    title: 'Done',
    status: 'wait' as const,
    icon: h(SmileOutlined),
  },
]
</script>

<template>
  <a-steps :items="items" />
</template>
```
### Title Placement and Progress
You can customize the display for Steps with progress dot style.
```vue
<script setup lang="ts">
const content = 'This is a content.'

const items = [
  {
    title: 'Finished',
    content,
  },
  {
    title: 'In Progress',
    content,
  },
  {
    title: 'Waiting',
    content,
  },
]
</script>

<template>
  <a-flex vertical gap="medium">
    <a-steps
      :current="1"
      title-placement="vertical"
      :items="items"
      ellipsis
    />
    <a-steps
      :current="1"
      :percent="60"
      title-placement="vertical"
      :items="items"
    />
    <a-steps
      :current="1"
      :percent="80"
      size="small"
      title-placement="vertical"
      :items="items"
    />
  </a-flex>
</template>
```
### Dot Style
Steps with progress dot style.
```vue
<script setup lang="ts">
const items = [
  {
    title: 'Finished',
    content: 'This is a content.',
  },
  {
    title: 'In Progress',
    content: 'This is a content.',
  },
  {
    title: 'Waiting',
    content: 'This is a content.',
  },
]
</script>

<template>
  <a-flex vertical gap="medium">
    <a-steps
      type="dot"
      :current="1"
      :items="items"
    />
    <a-steps
      type="dot"
      :current="1"
      :items="items"
      variant="outlined"
    />
    <a-divider />
    <a-flex gap="medium">
      <a-steps
        type="dot"
        orientation="vertical"
        :current="1"
        :style="{ flex: 'auto' }"
        :items="items"
      />
      <a-steps
        type="dot"
        orientation="vertical"
        :current="1"
        :style="{ flex: 'auto' }"
        :items="items"
        variant="outlined"
      />
    </a-flex>
  </a-flex>
</template>
```
### Navigation Steps
Navigation steps.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

const itemsWithContent = [
  {
    title: 'Step 1',
    subTitle: '00:00:05',
    status: 'finish' as const,
    content: 'This is a content.',
  },
  {
    title: 'Step 2',
    subTitle: '00:01:02',
    status: 'process' as const,
    content: 'This is a content.',
  },
  {
    title: 'Step 3',
    subTitle: 'waiting for longlong time',
    status: 'wait' as const,
    content: 'This is a content.',
  },
]

const itemsBasic = [
  {
    status: 'finish' as const,
    title: 'Step 1',
  },
  {
    status: 'process' as const,
    title: 'Step 2',
  },
  {
    status: 'wait' as const,
    title: 'Step 3',
  },
  {
    status: 'wait' as const,
    title: 'Step 4',
  },
]

const itemsWithDisabled = [
  {
    status: 'finish' as const,
    title: 'finish 1',
  },
  {
    status: 'finish' as const,
    title: 'finish 2',
  },
  {
    status: 'process' as const,
    title: 'current process',
  },
  {
    status: 'wait' as const,
    title: 'wait',
    disabled: true,
  },
]

function handleChange(value: number) {
  console.log('onChange:', value)
  current.value = value
}
</script>

<template>
  <a-flex vertical gap="large">
    <a-steps
      v-model:current="current"
      type="navigation"
      size="small"
      :items="itemsWithContent"
      @change="handleChange"
    />

    <a-steps
      v-model:current="current"
      type="navigation"
      :items="itemsBasic"
      @change="handleChange"
    />

    <a-steps
      v-model:current="current"
      type="navigation"
      size="small"
      :items="itemsWithDisabled"
      @change="handleChange"
    />
  </a-flex>
</template>
```
### Inline Steps
Inline type steps, suitable for displaying the process and current state of the object in the list content scene.
```vue
<script setup lang="ts">
const items = [
  {
    title: 'Step 1',
    content: 'This is Step 1',
  },
  {
    title: 'Step 2',
    content: 'This is Step 2',
  },
  {
    title: 'Step 3',
    content: 'This is Step 3',
  },
]
const data = [
  {
    title: 'Antdv Next Title 1',
    current: 0,
  },
  {
    title: 'Antdv Next Title 2',
    current: 1,
    status: 'error',
  },
  {
    title: 'Antdv Next Title 3',
    current: 2,
  },
  {
    title: 'Antdv Next Title 4',
    current: 1,
  },
]
</script>

<template>
  <a-flex vertical>
    <div
      v-for="(item, index) in data"
      :key="index"
      class="flex items-start py-4 border-b border-[var(--ant-color-split)]"
    >
      <div class="flex flex-1 items-start">
        <div class="mr-4">
          <a-avatar :src="`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`" />
        </div>
        <div class="min-w-0">
          <div class="mb-1">
            <a href="https://antdv-next.com">{{ item.title }}</a>
          </div>
          <div class="text-[var(--ant-color-text-secondary)]">
            Antdv Next, a design language for background applications, is refined by Ant UED Team
          </div>
        </div>
      </div>
      <div class="ml-6">
        <a-steps
          type="inline"
          :current="item.current"
          :status="item.status as 'error'"
          :items="items"
        />
      </div>
    </div>
  </a-flex>
</template>
```
### Inline Style Combination
Inline step bar modifies the style and aligns through `offset`.
```vue
<script setup lang="ts">
import type { StepsProps } from 'antdv-next'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const items: StepsProps['items'] = Array.from({ length: 5 }, (_, index) => ({
  title: `Step ${index + 1}`,
  subTitle: 'Sub Title',
  content: `This is Step ${index + 1}`,
}))

const offsetItems = items.slice(2)
</script>

<template>
  <a-flex vertical>
    <a-steps type="inline" :current="1" :items="items" />
    <a-steps
      type="inline"
      :current="4"
      status="finish"
      :items="items"
      :styles="{
        itemTitle: { color: token.colorPrimaryText },
        itemSubtitle: { color: token.colorPrimaryTextActive },
        itemRail: { background: token.colorTextDisabled },
      }"
    />
    <a-steps type="inline" :current="1" :items="offsetItems" :offset="2" />
  </a-flex>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Steps by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { StepsProps } from 'antdv-next'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const classes: StepsProps['classes'] = {
  root: 'steps-demo-root',
}

const stylesObject: StepsProps['styles'] = {
  itemIcon: {
    borderRadius: '30%',
  },
  itemContent: {
    fontStyle: 'italic',
  },
}

const stylesFn: StepsProps['styles'] = (info) => {
  if (info?.props?.type === 'navigation') {
    return {
      root: {
        borderColor: '#1890ff',
      },
    }
  }
  return {}
}

const items: StepsProps['items'] = [
  { title: 'Finished', content: 'This is a content.' },
  { title: 'In Progress', content: 'This is a content.' },
  { title: 'Waiting', content: 'This is a content.' },
]
</script>

<template>
  <a-flex vertical gap="medium">
    <a-steps :items="items" :current="1" :classes="classes" :styles="stylesObject" />
    <a-steps
      :items="items"
      :current="1"
      type="navigation"
      :classes="classes"
      :styles="stylesFn"
    />
  </a-flex>
</template>

<style>
.steps-demo-root {
  border-width: 2px;
  border-style: dashed;
  border-color: v-bind('token.colorBorder');
  border-radius: v-bind('`${token.borderRadius}px`');
  padding: v-bind('`${token.padding}px`');
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

The whole of the step bar.

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | StepsClassNamesType | - | - | ✓ |
| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`, support `v-model:current` | number | 0 | - | × |
| iconRender | Custom render icon, please use `items.icon` first | (oriNode, info: &#123; index, active, item &#125;) =&gt; VueNode | - | - | × |
| initial | Set the initial step, counting from 0 | number | 0 | - | × |
| items | StepItem content | [StepItem](#stepitem)[] | [] | - | × |
| maxCount | Maximum number of step items to display (`>= 3`). Hidden step ranges are collapsed into disabled ellipsis steps | number | - | 1.4.0 | × |
| orientation | To specify the orientation of the step bar, `horizontal` or `vertical` | `horizontal` \| `vertical` | `horizontal` | - | × |
| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | - | × |
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. `titlePlacement` will be `vertical` | boolean \| (iconDot, &#123; index, status, title, content &#125;) =&gt; VueNode | false | - | × |
| responsive | Change to vertical direction when screen width smaller than `532px` | boolean | true | - | × |
| size | To specify the size of the step bar, `medium` and `small` are currently supported | `medium` \| `small` | `medium` | - | × |
| status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | `wait` \| `process` \| `finish` \| `error` | `process` | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | StepsStylesType | - | - | ✓ |
| titlePlacement | Place title and content with `horizontal` or `vertical` direction | `horizontal` \| `vertical` | `horizontal` | - | × |
| type | Type of steps, can be set to one of the following values: `default` `dot` `inline` `navigation` `panel` | `default` \| `dot` \| `inline` \| `navigation` \| `panel` | `default` | - | × |
| variant | Config style variant | `filled` \| `outlined` | `filled` | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Trigger when Step is changed | (current: number) =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| iconRender | Custom render icon, please use `items.icon` first | (info: &#123; oriNode, index, active, item &#125;) =&gt; VueNode | - |
| progressDot | Custom progress dot | (iconDot, &#123; index, status, title, content &#125;) =&gt; VueNode | - |

## Types

### StepItem

A single step in the step bar.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| content | Description of the step, optional property | VueNode | - | - |
| disabled | Disable click | boolean | false | - |
| icon | Icon of the step, optional property | VueNode | - | - |
| status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | `wait` \| `process` \| `finish` \| `error` | `wait` | - |
| subTitle | Subtitle of the step | VueNode | - | - |
| title | Title of the step | VueNode | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Steps"></ComponentTokenTable>

---
Title: Switch
URL: https://www.antdv-next.com/components/switch.md
---

## When To Use {#when-to-use}

- If you need to represent the switching between two states or on-off state.
- The difference between `Switch` and `Checkbox` is that `Switch` will trigger a state change directly when you toggle it, while `Checkbox` is generally used for state marking, which should work in conjunction with submit operation.

## Examples {#examples}

### Basic
The most basic usage.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const checked = shallowRef(true)

function onChange(checked: boolean) {
  console.log(`switch to ${checked}`)
}
</script>

<template>
  <a-switch v-model:checked="checked" @change="onChange" />
</template>
```
### Disabled
Disabled state of `Switch`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const disabled = ref(true)
const checked = ref(true)

function toggle() {
  disabled.value = !disabled.value
}
</script>

<template>
  <a-space vertical>
    <a-switch v-model:checked="checked" :disabled="disabled" />
    <a-button type="primary" @click="toggle">
      Toggle disabled
    </a-button>
  </a-space>
</template>
```
### Text & icon
With text and icon.
```vue
<script setup lang="ts">
import { CheckOutlined, CloseOutlined, FrownOutlined, SmileOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-flex gap="medium" align="flex-start" justify="flex-start" vertical>
    <a-switch checked-children="On" un-checked-children="Off" default-checked />
    <a-switch :checked-children="1" :un-checked-children="0" default-checked />
    <a-switch default-checked>
      <template #checkedChildren>
        <CheckOutlined />
      </template>
      <template #unCheckedChildren>
        <CloseOutlined />
      </template>
    </a-switch>
    <a-switch default-checked>
      <template #checkedChildren>
        <a-flex :gap="4" justify="flex-start" align="center">
          <SmileOutlined />
          Happy
        </a-flex>
      </template>
      <template #unCheckedChildren>
        <a-flex :gap="4" justify="flex-start" align="center">
          <FrownOutlined />
          Sad
        </a-flex>
      </template>
    </a-switch>
  </a-flex>
</template>
```
### Two sizes
`size="small"` represents a small sized switch.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const checked1 = shallowRef(true)
const checked2 = shallowRef(true)
</script>

<template>
  <a-switch v-model:checked="checked1" />
  <br>
  <a-switch v-model:checked="checked2" size="small" />
</template>
```
### Loading
Mark a pending state of switch.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const checked1 = shallowRef(true)
const checked2 = shallowRef(false)
</script>

<template>
  <a-switch v-model:checked="checked1" loading />
  <br>
  <a-switch v-model:checked="checked2" size="small" loading />
</template>
```
### Custom component token
Custom component token.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const checked = shallowRef(true)
const theme = {
  components: {
    Switch: {
      trackHeight: 14,
      trackMinWidth: 32,
      // opacityLoading: 0.1,
      colorPrimary: 'rgb(25, 118, 210, 0.5)',
      trackPadding: -3,
      handleSize: 20,
      handleBg: 'rgb(25, 118, 210)',
      handleShadow:
        'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',
      // innerMinMargin: 4,
      // innerMaxMargin: 8,
    },
  },
}
</script>

<template>
  <a-config-provider :theme="theme">
    <a-space>
      <a-switch v-model:checked="checked" />
    </a-space>
  </a-config-provider>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Switch by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const classes = {
  root: 'custom-switch-root',
}

const stylesObject = {
  root: {
    backgroundColor: '#F5D2D2',
  },
}

function stylesFn(info: any) {
  if (info.props.size === 'medium') {
    return {
      root: {
        backgroundColor: '#BDE3C3',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical align="flex-start" justify="flex-start" gap="medium">
    <a-switch
      size="small"
      checked-children="on"
      un-checked-children="off"
      :styles="stylesObject"
      :classes="{ root: 'custom-switch-root' }"
    />
    <a-switch
      size="medium"
      checked-children="on"
      un-checked-children="off"
      :styles="stylesFn"
      :classes="classes"
    />
    <a-switch
      default-checked
      :classes="{ root: 'mui-root', indicator: 'mui-indicator' }"
    />
  </a-flex>
</template>

<style scoped>
.custom-switch-root {
  width: 40px;
  background-color: v-bind('token.colorPrimary');
}

.mui-root {
  min-width: 32px;
  height: 14px;
  line-height: 14px;
}

.mui-root.mui-root.ant-switch-checked {
  background-color: rgb(25 118 210 / 50%);
}

.mui-root.mui-root.ant-switch-checked :deep(.ant-switch-handle) {
  inset-inline-start: calc(100% - 17px);
}

:deep(.mui-indicator) {
  top: -3px;
  width: 20px;
  height: 20px;
}

:deep(.mui-indicator.mui-indicator.mui-indicator) {
  inset-inline-start: -3px;
}

:deep(.mui-indicator.mui-indicator.mui-indicator)::before {
  background-color: rgb(25 118 210);
  border-radius: 999px;
  box-shadow:
    rgba(0, 0, 0, 0.2) 0 2px 1px -1px,
    rgba(0, 0, 0, 0.14) 0 1px 1px 0,
    rgba(0, 0, 0, 0.12) 0 1px 4px 0;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props {#props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| autoFocus | Auto focus when component mounted | boolean | false | - | × |
| checked | Determine whether the Switch is checked, support `v-model:checked` | string \| number \| boolean \| object | false | - | × |
| checkedChildren | The content to be shown when the state is checked | VueNode | - | - | × |
| checkedValue | The value when checked | string \| number \| boolean \| object | true | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | SwitchClassNamesType | - | - | ✓ |
| defaultChecked | Whether to set the initial state | string \| number \| boolean \| object | false | - | × |
| defaultValue | Alias for `defaultChecked` | string \| number \| boolean \| object | - | - | × |
| disabled | Disable switch | boolean | false | - | × |
| loading | Loading state of switch | boolean | false | - | × |
| size | The size of the Switch, options: `medium` `small` | `medium` \| `small` | `medium` | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | SwitchStylesType | - | - | ✓ |
| unCheckedChildren | The content to be shown when the state is unchecked | VueNode | - | - | × |
| unCheckedValue | The value when unchecked | string \| number \| boolean \| object | false | - | × |
| value | Alias for `checked`, support `v-model:value` | string \| number \| boolean \| object | - | - | × |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Trigger when the checked state is changing | (checked: boolean, event: Event) =&gt; void | - |
| click | Trigger when clicked | (checked: boolean, event: Event) =&gt; void | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| checkedChildren | The content to be shown when the state is checked | () =&gt; VueNode | - |
| unCheckedChildren | The content to be shown when the state is unchecked | () =&gt; VueNode | - |

### Methods {#methods}

| Name | Description | Version |
| --- | --- | --- |
| blur() | Remove focus | - |
| focus() | Get focus | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Switch"></ComponentTokenTable>

## FAQ

### Why not work in Form.Item? {#faq-binding-data}

Form.Item default bind value to `value` property, but Switch value property is `checked`. You can use `v-model:checked` to change bind property.

```vue
<a-form-item name="fieldA">
  <a-switch v-model:checked="form.fieldA" />
</a-form-item>
```

---
Title: Table
URL: https://www.antdv-next.com/components/table.md
---

## When To Use

- To display a collection of structured data.
- To sort, search, paginate, filter data.

## How To Use

Specify `dataSource` of Table as an array of data.

```vue
<script setup lang="ts">
const dataSource = [
  {
    key: '1',
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
]

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
]
</script>

<template>
  <a-table :data-source="dataSource" :columns="columns" />
</template>
```

## Examples {#examples}

### Basic
Simple table with actions.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { h } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

const columns: TableProps<DataType>['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => h('a', text),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, record) => record.tags,
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => h('span', [`Invite ${record.name}`, ' | ', 'Delete']),
  },
]

const dataSource: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

function tagColor(tag: string) {
  if (tag === 'loser') {
    return 'volcano'
  }
  return tag.length > 5 ? 'geekblue' : 'green'
}
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'tags'">
        <a-space size="small" wrap>
          <a-tag v-for="tag in record.tags" :key="tag" :color="tagColor(tag)">
            {{ tag.toUpperCase() }}
          </a-tag>
        </a-space>
      </template>
      <template v-else-if="column.key === 'action'">
        <a-space size="medium">
          <a>Invite {{ record.name }}</a>
          <a>Delete</a>
        </a-space>
      </template>
    </template>
  </a-table>
</template>
```
### Bordered
Add border, title and footer for table.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
]
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource" bordered />
</template>
```
### Ajax
This example shows how to fetch and present data from a remote server, and how to implement filtering and sorting in server side by sending related parameters to server.

Setting `rowSelection.preserveSelectedRowKeys` to keep the `key` when enable selection.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { reactive, ref } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps<DataType>['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const loading = ref(false)
const dataSource = ref<DataType[]>([])

const pagination = reactive({
  current: 1,
  pageSize: 5,
  total: 0,
  showSizeChanger: true,
})

function makeData(page: number, pageSize: number) {
  const data: DataType[] = []
  for (let i = 0; i < pageSize; i++) {
    const index = (page - 1) * pageSize + i + 1
    data.push({
      key: `${index}`,
      name: `Edward ${index}`,
      age: 20 + (index % 10),
      address: `London, Park Lane no. ${index}`,
    })
  }
  return data
}

function fetchData() {
  loading.value = true
  const { current, pageSize } = pagination
  setTimeout(() => {
    dataSource.value = makeData(current, pageSize)
    pagination.total = 46
    loading.value = false
  }, 500)
}

function handleTableChange(pager: any) {
  console.log(pager)
  pagination.current = pager.current
  pagination.pageSize = pager.pageSize
  fetchData()
}

fetchData()
</script>

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  />
</template>
```
### Pagination
Table pagination settings.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { computed, ref } from 'vue'

type TablePagination = NonNullable<Exclude<TableProps['pagination'], boolean>>
type TablePaginationPlacement = NonNullable<TablePagination['placement']>[number]

interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

const topOptions = [
  { label: 'topStart', value: 'topStart' },
  { label: 'topCenter', value: 'topCenter' },
  { label: 'topEnd', value: 'topEnd' },
  { label: 'none', value: 'none' },
]

const bottomOptions = [
  { label: 'bottomStart', value: 'bottomStart' },
  { label: 'bottomCenter', value: 'bottomCenter' },
  { label: 'bottomEnd', value: 'bottomEnd' },
  { label: 'none', value: 'none' },
]

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
  { title: 'Tags', dataIndex: 'tags', key: 'tags' },
  { title: 'Action', key: 'action' },
]

const dataSource: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]

const top = ref<TablePaginationPlacement>('topStart')
const bottom = ref<TablePaginationPlacement>('bottomEnd')
const pagination = computed<TableProps['pagination']>(() => ({
  placement: [top.value, bottom.value],
}))

function getTagColor(tag: string) {
  if (tag === 'loser') {
    return 'volcano'
  }
  return tag.length > 5 ? 'geekblue' : 'green'
}
</script>

<template>
  <div>
    <div>
      <a-radio-group
        v-model:value="top"
        style="margin-bottom: 10px"
        :options="topOptions"
      />
    </div>
    <a-radio-group
      v-model:value="bottom"
      style="margin-bottom: 10px"
      :options="bottomOptions"
    />
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
    >
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.key === 'name'">
          <a>{{ text }}</a>
        </template>
        <template v-else-if="column.key === 'tags'">
          <a-space size="small" wrap>
            <a-tag
              v-for="tag in record.tags"
              :key="tag"
              :color="getTagColor(tag)"
            >
              {{ tag.toUpperCase() }}
            </a-tag>
          </a-space>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space size="medium">
            <a>Invite {{ record.name }}</a>
            <a>Delete</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>
```
### Size
There are two compacted table sizes: `medium` and `small`. The `small` size is used in Modals only.

<style>#table-demo-size h4 { margin-bottom: 16px; }</style>
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
]
</script>

<template>
  <a-divider>Medium size table</a-divider>
  <a-table :columns="columns" :data-source="dataSource" size="medium" />
  <a-divider>Small size table</a-divider>
  <a-table :columns="columns" :data-source="dataSource" size="small" />
</template>
```
### Sticky Header
For long table，need to scroll to view the header and scroll bar，then you can now set the fixed header and scroll bar to follow the page.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { ref } from 'vue'

interface DataType {
  key: number
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  {
    title: 'Full Name',
    width: 100,
    dataIndex: 'name',
    key: 'name',
    fixed: 'start',
  },
  {
    title: 'Age',
    width: 100,
    dataIndex: 'age',
    key: 'age',
    fixed: 'start',
  },
  { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
  { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
  { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
  { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
  { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
  { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
  { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  {
    title: 'Action',
    key: 'operation',
    fixed: 'end',
    width: 100,
  },
]

const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
  key: i,
  name: `Edward ${i}`,
  age: 32,
  address: `London Park no. ${i}`,
}))

const fixedTop = ref(false)
</script>

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :scroll="{ x: 1500 }"
    :sticky="{ offsetHeader: 64 }"
  >
    <template #summary>
      <a-table-summary :fixed="fixedTop ? 'top' : 'bottom'">
        <a-table-summary-row>
          <a-table-summary-cell :index="0" :col-span="2">
            <a-switch
              v-model:checked="fixedTop"
              checked-children="Fixed Top"
              un-checked-children="Fixed Top"
            />
          </a-table-summary-cell>
          <a-table-summary-cell :index="2" :col-span="8">
            Scroll Context
          </a-table-summary-cell>
          <a-table-summary-cell :index="10">
            Fix Right
          </a-table-summary-cell>
        </a-table-summary-row>
      </a-table-summary>
    </template>
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a>action</a>
      </template>
    </template>
  </a-table>
</template>
```
### Fixed Header
Display large amounts of data in scrollable view.

> Specify width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no [long word to break table layout](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241).
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: number
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name', width: 150 },
  { title: 'Age', dataIndex: 'age', key: 'age', width: 100 },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const dataSource: DataType[] = Array.from({ length: 100 }).map((_, i) => ({
  key: i,
  name: `Edward King ${i}`,
  age: 32,
  address: `London, Park Lane no. ${i}`,
}))
</script>

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :pagination="{ pageSize: 50 }"
    :scroll="{ y: 275 }"
  />
</template>
```
### Auto Height
Wrap Table to make it always fill the container height automatically.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { Table } from 'antdv-next'
import { defineComponent, h, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'

// ===================== Wrapper =====================
const measureClasses = {
  header: 'measure-header',
  pagination: 'measure-pagination',
}

const tableClasses = {
  header: {
    wrapper: measureClasses.header,
  },
  pagination: {
    root: measureClasses.pagination,
  },
}

const AutoHeightTable = defineComponent<TableProps<any>>(
  (props, { attrs }) => {
    const rootRef = shallowRef<InstanceType<typeof Table>>()
    const scrollY = ref(0)
    const sectionHeight = ref(0)

    const getHeight = (target: string | HTMLElement) => {
      const ele = typeof target === 'string'
        ? rootRef.value?.nativeElement?.querySelector<HTMLElement>(`.${target}`)
        : target

      if (ele) {
        const styles = getComputedStyle(ele)
        const marginTop = Number.parseFloat(styles.marginTop) || 0
        const marginBottom = Number.parseFloat(styles.marginBottom) || 0

        return ele.getBoundingClientRect().height + marginTop + marginBottom
      }

      return 0
    }

    let resizeObserver: ResizeObserver | undefined

    onMounted(() => {
      const element = rootRef.value?.nativeElement
      if (!element)
        return

      const measure = () => {
        const totalHeight = getHeight(element)
        const headerHeight = getHeight(measureClasses.header)
        const paginationHeight = getHeight(measureClasses.pagination)

        scrollY.value = Math.max(0, Math.floor(totalHeight - headerHeight - paginationHeight))
        sectionHeight.value = totalHeight - paginationHeight
      }

      measure()

      resizeObserver = new ResizeObserver(measure)
      resizeObserver.observe(element)
    })

    onBeforeUnmount(() => {
      resizeObserver?.disconnect()
    })

    return () => {
      const { scroll, ...restProps } = props
      return h(Table, {
        ...restProps,
        ...attrs,
        ref: rootRef,
        scroll: { ...scroll, y: scrollY.value },
        style: { height: '100%' },
        styles: {
          section: {
            height: `${sectionHeight.value}px`,
          },
        },
        classes: tableClasses,
      })
    }
  },
  {
    name: 'AutoHeightTable',
    props: ['columns', 'dataSource', 'scroll'] as any,
  },
)

// ==================== Usage ====================

interface DataType {
  key: number
  name: string
  age: number
  address: string
}

const columns: TableProps<DataType>['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: '20%',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: '20%',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    width: '60%',
  },
]

function genData(length: number): DataType[] {
  return Array.from({ length }).map((_, index) => ({
    key: index,
    name: `Edward King ${index}`,
    age: 32 + index,
    address: `London, Park Lane no. ${index}`,
  }))
}

const dataMore = genData(30)
const dataLess = genData(2)

const hasData = ref(true)
</script>

<template>
  <a-flex vertical gap="medium" align="start">
    <a-switch
      v-model:checked="hasData"
      checked-children="More Data"
      un-checked-children="More Data"
    />
    <div
      :style="{
        height: '400px',
        boxSizing: 'border-box',
        background: 'rgba(140, 140, 140, 0.03)',
        padding: '16px',
        alignSelf: 'stretch',
      }"
    >
      <AutoHeightTable :columns="columns" :data-source="hasData ? dataMore : dataLess" />
    </div>
  </a-flex>
</template>
```
### Fixed Columns
To fix some columns and scroll inside other columns, and you must set `scroll.x` meanwhile.

> Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no [long word to break table layout](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241).
>
> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Full Name', dataIndex: 'name', key: 'name', width: 100, fixed: 'start' },
  { title: 'Age', dataIndex: 'age', key: 'age', width: 100, fixed: 'start', sorter: true },
  { title: 'Column 1', dataIndex: 'address', key: '1' },
  { title: 'Column 2', dataIndex: 'address', key: '2' },
  { title: 'Column 3', dataIndex: 'address', key: '3' },
  { title: 'Column 4', dataIndex: 'address', key: '4' },
  { title: 'Column 5', dataIndex: 'address', key: '5' },
  { title: 'Column 6', dataIndex: 'address', key: '6' },
  { title: 'Column 7', dataIndex: 'address', key: '7' },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  { title: 'Column 9', dataIndex: 'address', key: '9' },
  { title: 'Column 10', dataIndex: 'address', key: '10' },
  { title: 'Column 11', dataIndex: 'address', key: '11' },
  { title: 'Column 12', dataIndex: 'address', key: '12' },
  { title: 'Column 13', dataIndex: 'address', key: '13' },
  { title: 'Column 14', dataIndex: 'address', key: '14' },
  { title: 'Column 15', dataIndex: 'address', key: '15' },
  { title: 'Column 16', dataIndex: 'address', key: '16' },
  { title: 'Column 17', dataIndex: 'address', key: '17' },
  { title: 'Column 18', dataIndex: 'address', key: '18' },
  { title: 'Column 19', dataIndex: 'address', key: '19' },
  { title: 'Column 20', dataIndex: 'address', key: '20' },
  { title: 'Action', key: 'operation', fixed: 'end', width: 100 },
]

const dataSource: DataType[] = [
  { key: '1', name: 'Olivia', age: 32, address: 'New York Park' },
  { key: '2', name: 'Ethan', age: 40, address: 'London Park' },
]
</script>

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :pagination="false"
    :scroll="{ x: 'max-content' }"
  >
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a>action</a>
      </template>
    </template>
  </a-table>
</template>
```
### Fixed Columns & Header
A Solution for displaying large amounts of data with long columns.

> Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no [long word to break table layout](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241).
>
> A fixed value which is greater than table width for `scroll.x` is recommended. The sum of unfixed columns should not greater than `scroll.x`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: number
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Full Name', dataIndex: 'name', key: 'name', width: 100, fixed: 'start' },
  { title: 'Age', dataIndex: 'age', key: 'age', width: 100, fixed: 'start' },
  { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
  { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
  { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
  { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
  { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
  { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
  { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  { title: 'Column 9', dataIndex: 'address', key: '9' },
  { title: 'Column 10', dataIndex: 'address', key: '10' },
  { title: 'Column 11', dataIndex: 'address', key: '11' },
  { title: 'Column 12', dataIndex: 'address', key: '12' },
  { title: 'Column 13', dataIndex: 'address', key: '13' },
  { title: 'Column 14', dataIndex: 'address', key: '14' },
  { title: 'Column 15', dataIndex: 'address', key: '15' },
  { title: 'Column 16', dataIndex: 'address', key: '16' },
  { title: 'Column 17', dataIndex: 'address', key: '17' },
  { title: 'Column 18', dataIndex: 'address', key: '18' },
  { title: 'Column 19', dataIndex: 'address', key: '19' },
  { title: 'Column 20', dataIndex: 'address', key: '20' },
  { title: 'Action', key: 'operation', fixed: 'end', width: 100 },
]

const dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({
  key: i,
  name: `Edward King ${i}`,
  age: 32,
  address: `London, Park Lane no. ${i}`,
}))
</script>

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :scroll="{ x: 'max-content', y: 275 }"
  >
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a>action</a>
      </template>
    </template>
  </a-table>
</template>
```
### Wide Fixed Columns
Fixed column only when scroll some distance, and scroll to stack other columns. Recommend use with `bordered`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Full Name', dataIndex: 'name', key: 'name', width: 100, fixed: 'start' },
  { title: 'Age', dataIndex: 'age', key: 'age', width: 100 },
  { title: 'Column 1', dataIndex: 'address', key: '1', fixed: 'start' },
  { title: 'Column 2', dataIndex: 'address', key: '2' },
  { title: 'Column 3', dataIndex: 'address', key: '3' },
  { title: 'Column 4', dataIndex: 'address', key: '4' },
  { title: 'Column 5', dataIndex: 'address', key: '5' },
  { title: 'Column 6', dataIndex: 'address', key: '6' },
  { title: 'Column 7', dataIndex: 'address', key: '7' },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  { title: 'Column 9', dataIndex: 'address', key: '9' },
  { title: 'Column 10', dataIndex: 'address', key: '10' },
  { title: 'Column 11', dataIndex: 'address', key: '11' },
  { title: 'Column 12', dataIndex: 'address', key: '12' },
  { title: 'Column 13', dataIndex: 'address', key: '13' },
  { title: 'Column 14', dataIndex: 'address', key: '14' },
  { title: 'Column 15', dataIndex: 'address', key: '15' },
  { title: 'Column 16', dataIndex: 'address', key: '16' },
  { title: 'Column 17', dataIndex: 'address', key: '17' },
  { title: 'Column 18', dataIndex: 'address', key: '18' },
  { title: 'Column 19', dataIndex: 'address', key: '19' },
  { title: 'Column 20', dataIndex: 'address', key: '20' },
  { title: 'Action 1', key: 'action1', fixed: 'end', width: 90 },
  { title: 'Action 2', key: 'action2', width: 90 },
  { title: 'Action 3', key: 'action3', fixed: 'end', width: 90 },
]

const dataSource: DataType[] = [
  { key: '1', name: 'Olivia', age: 32, address: 'New York Park' },
  { key: '2', name: 'Ethan', age: 40, address: 'London Park' },
]
</script>

<template>
  <a-table
    bordered
    :columns="columns"
    :data-source="dataSource"
    :scroll="{ x: 'max-content' }"
    :pagination="false"
  >
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'action1' || column.key === 'action2' || column.key === 'action3'">
        <a>action</a>
      </template>
    </template>
  </a-table>
</template>
```
### Narrow Table
There are two compacted table sizes: `medium` and `small`. The `small` size is used in Modals only.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const dataSource: DataType[] = Array.from({ length: 200 }).map((_, key) => ({
  key: String(key),
  name: 'Sample Name',
  age: 30 + (key % 5),
  address: `Sample Address ${key}`,
}))
</script>

<template>
  <div style="width: 300px">
    <a-table
      :columns="columns"
      :data-source="dataSource"
      size="small"
      :pagination="{ defaultCurrent: 13 }"
    />
  </div>
</template>
```
### Responsive
Responsive columns.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Name (all screens)', dataIndex: 'name', key: 'name' },
  { title: 'Age (medium screen or bigger)', dataIndex: 'age', key: 'age', responsive: ['md'] },
  { title: 'Address (large screen or bigger)', dataIndex: 'address', key: 'address', responsive: ['lg'] },
]

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
]
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template #bodyCell="{ column, text }">
      <template v-if="column.key === 'name'">
        <a>{{ text }}</a>
      </template>
    </template>
  </a-table>
</template>
```
### Grouped Columns
Group table head with `columns[n].children`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  street: string
  building: string
  number: number
  companyAddress: string
  companyName: string
  gender: string
}

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    fixed: 'start',
    filters: [
      { text: 'Joe', value: 'Joe' },
      { text: 'John', value: 'John' },
    ],
    onFilter: (value, record) => record.name.indexOf(String(value)) === 0,
  },
  {
    title: 'Other',
    children: [
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: 150,
        sorter: (a, b) => a.age - b.age,
      },
      {
        title: 'Address',
        children: [
          { title: 'Street', dataIndex: 'street', key: 'street', width: 150 },
          {
            title: 'Block',
            children: [
              { title: 'Building', dataIndex: 'building', key: 'building', width: 100 },
              { title: 'Door No.', dataIndex: 'number', key: 'number', width: 100 },
            ],
          },
        ],
      },
    ],
  },
  {
    title: 'Company',
    children: [
      {
        title: 'Company Address',
        dataIndex: 'companyAddress',
        key: 'companyAddress',
        width: 200,
      },
      {
        title: 'Company Name',
        dataIndex: 'companyName',
        key: 'companyName',
      },
    ],
  },
  {
    title: 'Gender',
    dataIndex: 'gender',
    key: 'gender',
    width: 80,
    fixed: 'end',
  },
]

const dataSource: DataType[] = Array.from({ length: 100 }).map((_, i) => ({
  key: String(i),
  name: 'John Brown',
  age: i + 1,
  street: 'Lake Park',
  building: 'C',
  number: 2035,
  companyAddress: 'Lake Street 42',
  companyName: 'SoftLake Co',
  gender: 'M',
}))
</script>

<template>
  <a-table
    class="custom-table"
    :columns="columns"
    :data-source="dataSource"
    bordered
    size="medium"
    :scroll="{ x: 'calc(700px + 50%)', y: 47 * 5 }"
  />
</template>

<style scoped>
.custom-table :deep(.ant-table .ant-table-container .ant-table-body),
.custom-table :deep(.ant-table .ant-table-container .ant-table-content) {
  scrollbar-width: thin;
  scrollbar-color: #eaeaea transparent;
}
</style>
```
### Rowspan & Colspan
Table column title supports `colSpan` that set in `column`.

Table cell supports `colSpan` and `rowSpan` that set in onCell return object. When each of them is set to `0`, the cell will not be rendered.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { h } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
  tel: string
  phone: number
  address: string
}

function sharedOnCell(_: any, index?: number) {
  if (index === 1) {
    return { colSpan: 0 }
  }
  return {}
}

const columns: TableProps['columns'] = [
  {
    title: 'RowHead',
    dataIndex: 'key',
    rowScope: 'row',
  },
  {
    title: 'Name',
    dataIndex: 'name',
    render: text => h('a', text),
    onCell: (_, index) => ({
      colSpan: index === 1 ? 5 : 1,
    }),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    onCell: sharedOnCell,
  },
  {
    title: 'Home phone',
    colSpan: 2,
    dataIndex: 'tel',
    onCell: (_, index) => {
      if (index === 3) {
        return { rowSpan: 2 }
      }
      if (index === 4) {
        return { rowSpan: 0 }
      }
      if (index === 1) {
        return { colSpan: 0 }
      }
      return {}
    },
  },
  {
    title: 'Phone',
    colSpan: 0,
    dataIndex: 'phone',
    onCell: sharedOnCell,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    onCell: sharedOnCell,
  },
]

const dataSource: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sydney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
]
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource" bordered />
</template>
```
### Summary
Set summary content by `summary` prop. Sync column fixed status with `Table.Summary.Cell`. You can fixed it by set `Table.Summary` `fixed` prop.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  borrow: number
  repayment: number
}

interface FixedDataType {
  key: number
  name: string
  description: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Borrow', dataIndex: 'borrow', key: 'borrow' },
  { title: 'Repayment', dataIndex: 'repayment', key: 'repayment' },
]

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', borrow: 10, repayment: 33 },
  { key: '2', name: 'Jim Green', borrow: 100, repayment: 0 },
  { key: '3', name: 'Joe Black', borrow: 10, repayment: 10 },
  { key: '4', name: 'Jim Red', borrow: 75, repayment: 45 },
]

const fixedColumns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', fixed: true, width: 100 },
  { title: 'Description', dataIndex: 'description' },
]

const fixedDataSource = Array.from({ length: 20 }).map<FixedDataType>((_, i) => ({
  key: i,
  name: ['Light', 'Bamboo', 'Little'][i % 3]!,
  description: 'Everything that has a beginning, has an end.',
}))
</script>

<template>
  <a-flex vertical gap="small">
    <a-table
      bordered
      class="custom-summary-table"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
    >
      <template #summary="pageData">
        <a-table-summary>
          <a-table-summary-row>
            <a-table-summary-cell :index="0">
              Total
            </a-table-summary-cell>
            <a-table-summary-cell :index="1">
              <a-typography-text type="danger">
                {{ pageData.reduce((sum, item) => sum + item.borrow, 0) }}
              </a-typography-text>
            </a-table-summary-cell>
            <a-table-summary-cell :index="2">
              <a-typography-text>
                {{ pageData.reduce((sum, item) => sum + item.repayment, 0) }}
              </a-typography-text>
            </a-table-summary-cell>
          </a-table-summary-row>
          <a-table-summary-row>
            <a-table-summary-cell :index="0">
              Balance
            </a-table-summary-cell>
            <a-table-summary-cell :index="1" :col-span="2">
              <a-typography-text type="danger">
                {{ pageData.reduce((sum, item) => sum + item.borrow - item.repayment, 0) }}
              </a-typography-text>
            </a-table-summary-cell>
          </a-table-summary-row>
        </a-table-summary>
      </template>
    </a-table>
    <a-table
      bordered
      class="custom-summary-table"
      :columns="fixedColumns"
      :data-source="fixedDataSource"
      :pagination="false"
      :scroll="{ x: 2000, y: 500 }"
    >
      <template #summary>
        <a-table-summary fixed>
          <a-table-summary-row>
            <a-table-summary-cell :index="0">
              Summary
            </a-table-summary-cell>
            <a-table-summary-cell :index="1">
              This is a summary content
            </a-table-summary-cell>
          </a-table-summary-row>
        </a-table-summary>
      </template>
    </a-table>
  </a-flex>
</template>

<style>
.custom-summary-table .ant-table-body,
.custom-summary-table .ant-table-content {
  scrollbar-width: thin;
  scrollbar-color: #eaeaea transparent;
}
</style>
```
### Custom Empty
Custom empty status.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
]
</script>

<template>
  <a-table :columns="columns" :data-source="[]">
    <template #emptyText>
      <div class="table-empty color-text-tertiary px-8px py-0">
        No data yet
      </div>
    </template>
  </a-table>
</template>
```
### Custom Filter Panel
Implement a customized column search example via `filterDropdown`.

Add the `boolean` type parameter `closeDropdown` to the function `clearFilters`. Whether to close the filter menu is `true` by default. Add the `boolean` type parameter `confirm` to clear whether to submit the option during filtering. The default is `true`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { SearchOutlined } from '@antdv-next/icons'
import { h, nextTick, ref } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

type DataIndex = keyof DataType

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Joe Black', age: 42, address: 'London No. 1 Lake Park' },
  { key: '3', name: 'Jim Green', age: 32, address: 'Sydney No. 1 Lake Park' },
  { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' },
]

const searchText = ref('')
const searchedColumn = ref<DataIndex | ''>('')
const searchInput = ref<any>(null)

function handleSearch(selectedKeys: string[], confirm: any, dataIndex: DataIndex) {
  confirm()
  searchText.value = selectedKeys[0] || ''
  searchedColumn.value = dataIndex
}

function handleReset(clearFilters?: () => void) {
  clearFilters?.()
  searchText.value = ''
}

function highlightText(text: string, keyword: string) {
  if (!keyword) {
    return text
  }
  const lowerText = text.toLowerCase()
  const lowerKey = keyword.toLowerCase()
  const index = lowerText.indexOf(lowerKey)
  if (index === -1) {
    return text
  }
  const before = text.slice(0, index)
  const match = text.slice(index, index + keyword.length)
  const after = text.slice(index + keyword.length)
  return [before, h('mark', { class: 'table-highlight' }, match), after]
}

function getColumnSearchProps(dataIndex: DataIndex): NonNullable<TableProps['columns']>[number] {
  return {
    filterDropdown: () => null,
    filterDropdownProps: {
      onOpenChange(open) {
        if (open) {
          nextTick(() => {
            searchInput.value?.focus?.()
            searchInput.value?.select?.()
          })
        }
      },
    },
    onFilter: (value, record) => String(record[dataIndex]).toLowerCase().includes(String(value).toLowerCase()),
    render: (text) => {
      const raw = text ? String(text) : ''
      if (searchedColumn.value === dataIndex) {
        return highlightText(raw, searchText.value)
      }
      return raw
    },
  }
}

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: '30%',
    ...getColumnSearchProps('name'),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: '20%',
    ...getColumnSearchProps('age'),
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    ...getColumnSearchProps('address'),
    sorter: (a, b) => a.address.length - b.address.length,
    sortDirections: ['descend', 'ascend'],
  },
]

function getDataIndex(column: any): DataIndex | null {
  const dataIndex = column?.dataIndex
  if (typeof dataIndex === 'string') {
    return dataIndex as DataIndex
  }
  return null
}
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template #filterIcon="{ filtered }">
      <SearchOutlined :style="{ color: filtered ? '#1677ff' : undefined }" />
    </template>
    <template #filterDropdown="{ column, setSelectedKeys, selectedKeys, confirm, clearFilters, close }">
      <template v-if="getDataIndex(column)">
        <div class="p-8px" @keydown.stop>
          <a-input
            ref="searchInput"
            class="mb-8px block"
            :placeholder="`Search111 ${getDataIndex(column)}`"
            :value="String(selectedKeys[0] || '')"
            @update:value="value => setSelectedKeys(value ? [String(value)] : [])"
            @keydown.enter="handleSearch(selectedKeys as string[], confirm, getDataIndex(column)!)"
          />
          <a-space>
            <a-button
              type="primary"
              size="small"
              style="width: 90px"
              @click="handleSearch(selectedKeys as string[], confirm, getDataIndex(column)!)"
            >
              Search
            </a-button>
            <a-button
              size="small"
              style="width: 90px"
              @click="handleReset(clearFilters)"
            >
              Reset
            </a-button>
            <a-button
              type="link"
              size="small"
              @click="() => { confirm({ closeDropdown: false }); searchText = String(selectedKeys[0] || ''); searchedColumn = getDataIndex(column)! }"
            >
              Filter
            </a-button>
            <a-button
              type="link"
              size="small"
              @click="close?.()"
            >
              Close
            </a-button>
          </a-space>
        </div>
      </template>
    </template>
  </a-table>
</template>

<style>
.table-highlight {
  background: #ffc069;
  padding: 0;
}
</style>
```
### Close Custom Filter Panel
Closing a custom filter panel does not submit staged values automatically. Stage a value and click the header filter icon again to close the panel; `change` only fires after an explicit `confirm`.
```vue
<script setup lang="ts">
import type { TableEmits, TableProps } from 'antdv-next'
import { Button, Input, Space } from 'antdv-next'
import { h, ref } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
}

const dataSource: DataType[] = [
  { key: '1', name: 'John', age: 32 },
  { key: '2', name: 'Jim', age: 42 },
  { key: '3', name: 'Joe', age: 22 },
]

const changeCount = ref(0)
const appliedFilter = ref('')

const columns: TableProps<DataType>['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    onFilter: (value, record) => record.name.includes(String(value)),
    filterDropdown: ({ clearFilters, confirm, selectedKeys, setSelectedKeys }) => h(
      'div',
      {
        class: 'custom-filter-close-panel',
        onKeydown: (event: KeyboardEvent) => event.stopPropagation(),
      },
      [
        h(Input, {
          class: 'custom-filter-stage-input',
          placeholder: 'Stage a name',
          value: String(selectedKeys[0] || ''),
          'onUpdate:value': (value: string) => setSelectedKeys(value ? [value] : []),
        }),
        h(Space, null, {
          default: () => [
            h(Button, {
              class: 'custom-filter-apply',
              size: 'small',
              type: 'primary',
              onClick: () => confirm(),
            }, { default: () => 'Apply' }),
            h(Button, {
              class: 'custom-filter-reset',
              size: 'small',
              onClick: () => clearFilters?.({ confirm: true, closeDropdown: true }),
            }, { default: () => 'Reset' }),
          ],
        }),
      ],
    ),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
]

const handleChange: TableEmits<DataType>['change'] = (_, filters) => {
  changeCount.value += 1
  const nameFilter = filters.name
  appliedFilter.value = Array.isArray(nameFilter) ? nameFilter.map(String).join(', ') : ''
}
</script>

<template>
  <a-space direction="vertical">
    <div class="custom-filter-status">
      <span data-testid="change-count">Change events: {{ changeCount }}</span>
      <span data-testid="applied-filter">Applied filter: {{ appliedFilter || 'none' }}</span>
    </div>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      @change="handleChange"
    />
  </a-space>
</template>

<style scoped>
.custom-filter-close-panel {
  display: flex;
  width: 220px;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.custom-filter-status {
  display: flex;
  gap: 16px;
}
</style>
```
### Filter Search
`filterSearch` is used to enable search of filter items, and you can set a custom filter method through `filterSearch:(input, record) => boolean`.
```vue
<script setup lang="ts">
import type { TableEmits, TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      { text: 'Joe', value: 'Joe' },
      { text: 'Category 1', value: 'Category 1' },
      { text: 'Category 2', value: 'Category 2' },
    ],
    filterMode: 'tree',
    filterSearch: true,
    onFilter: (value, record) => record.name.startsWith(String(value)),
    width: '30%',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    filters: [
      { text: 'London', value: 'London' },
      { text: 'New York', value: 'New York' },
    ],
    onFilter: (value, record) => record.address.startsWith(String(value)),
    filterSearch: true,
    width: '40%',
  },
]

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
  { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' },
]

const handleChange: TableEmits['change'] = (pagination, filters, sorter, extra) => {
  console.log('params', pagination, filters, sorter, extra)
}
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource" @change="handleChange" />
</template>
```
### Tree Filter
You can use `filterMode` to change default filter interface, options: `menu`(default) and `tree`.

> `filterSearch` is used for making filter dropdown items searchable.
```vue
<script setup lang="ts">
import type { TableEmits, TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'Joe',
        value: 'Joe',
      },
      {
        text: 'Category 1',
        value: 'Category 1',
        children: [
          { text: 'Yellow', value: 'Yellow' },
          { text: 'Pink', value: 'Pink' },
        ],
      },
      {
        text: 'Category 2',
        value: 'Category 2',
        children: [
          { text: 'Green', value: 'Green' },
          { text: 'Black', value: 'Black' },
        ],
      },
    ],
    filterMode: 'tree',
    filterSearch: true,
    onFilter: (value, record) => record.name.includes(String(value)),
    width: '30%',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    filters: [
      { text: 'London', value: 'London' },
      { text: 'New York', value: 'New York' },
    ],
    onFilter: (value, record) => record.address.startsWith(String(value)),
    filterSearch: true,
    width: '40%',
  },
]

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
  { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' },
]

const handleChange: TableEmits['change'] = (pagination, filters, sorter, extra) => {
  console.log('params', pagination, filters, sorter, extra)
}
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource" @change="handleChange" />
</template>
```
### Sorting & Filtering
Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection, `filterOnClose` to specify whether to trigger filter when the filter menu closes.

Use `defaultFilteredValue` to make a column filtered by default.

Use `sorter` to make a column sortable. `sorter` can be a function of the type `sorter: function(rowA, rowB) { ... }` for sorting data locally.

`sortDirections: ['ascend', 'descend']` defines available sort methods for each columns, effective for all columns when set on table props. You can set as `['ascend', 'descend', 'ascend']` to prevent sorter back to default status.

Use `defaultSortOrder` to make a column sorted by default.

If a `sortOrder` or `defaultSortOrder` is specified with the value `ascend` or `descend`, you can access this value from within the function passed to the `sorter` as explained above. Such a function can take the form: `function(a, b, sortOrder) { ... }`.
```vue
<script setup lang="ts">
import type { TableEmits, TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    showSorterTooltip: { target: 'full-header' },
    filters: [
      { text: 'Joe', value: 'Joe' },
      { text: 'Jim', value: 'Jim' },
      {
        text: 'Submenu',
        value: 'Submenu',
        children: [
          { text: 'Green', value: 'Green' },
          { text: 'Black', value: 'Black' },
        ],
      },
    ],
    onFilter: (value, record) => record.name.indexOf(String(value)) === 0,
    sorter: (a, b) => a.name.length - b.name.length,
    sortDirections: ['descend'],
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    filters: [
      { text: 'London', value: 'London' },
      { text: 'New York', value: 'New York' },
    ],
    onFilter: (value, record) => record.address.indexOf(String(value)) === 0,
  },
]

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
  { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' },
]

const onChange: TableEmits['change'] = (pagination, filters, sorter, extra) => {
  console.log('params', pagination, filters, sorter, extra)
}
</script>

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :show-sorter-tooltip="{ target: 'sorter-icon' }"
    @change="onChange"
  />
</template>
```
### Multiple Sorter
`column.sorter` support `multiple` to config the priority of sort columns. Though `sorter.compare` to customize compare function. You can also leave it empty to use the interactive only.
```vue
<script setup lang="ts">
import type { TableEmits, TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  chinese: number
  math: number
  english: number
}

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Chinese Score',
    dataIndex: 'chinese',
    key: 'chinese',
    sorter: {
      compare: (a, b) => a.chinese - b.chinese,
      multiple: 3,
    },
  },
  {
    title: 'Math Score',
    dataIndex: 'math',
    key: 'math',
    sorter: {
      compare: (a, b) => a.math - b.math,
      multiple: 2,
    },
  },
  {
    title: 'English Score',
    dataIndex: 'english',
    key: 'english',
    sorter: {
      compare: (a, b) => a.english - b.english,
      multiple: 1,
    },
  },
]

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', chinese: 98, math: 60, english: 70 },
  { key: '2', name: 'Jim Green', chinese: 98, math: 66, english: 89 },
  { key: '3', name: 'Joe Black', chinese: 98, math: 90, english: 70 },
  { key: '4', name: 'Jim Red', chinese: 88, math: 99, english: 89 },
]

const onChange: TableEmits['change'] = (pagination, filters, sorter, extra) => {
  console.log('params', pagination, filters, sorter, extra)
}
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource" @change="onChange" />
</template>
```
### Order Columns
You can control the order of the expand and select columns by using `Table.EXPAND_COLUMN` and `Table.SELECTION_COLUMN`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { Table } from 'antdv-next'

interface DataType {
  key: number
  name: string
  age: number
  address: string
  description: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  Table.EXPAND_COLUMN,
  { title: 'Age', dataIndex: 'age', key: 'age' },
  Table.SELECTION_COLUMN,
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const dataSource: DataType[] = [
  {
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  },
  {
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
  },
  {
    key: 3,
    name: 'Not Expandable',
    age: 29,
    address: 'Jiangsu No. 1 Lake Park',
    description: 'This not expandable',
  },
  {
    key: 4,
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    description: 'My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park.',
  },
]
</script>

<template>
  <a-table
    :columns="columns"
    :row-selection="{}"
    :expandable="{ expandedRowRender: record => record.description }"
    :data-source="dataSource"
  />
</template>
```
### Hidden Columns
Hide columns with `hidden`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { computed, ref } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const baseColumns: TableProps['columns'] = [
  { title: 'Column 1', dataIndex: 'address', key: '1' },
  { title: 'Column 2', dataIndex: 'address', key: '2' },
  { title: 'Column 3', dataIndex: 'address', key: '3' },
  { title: 'Column 4', dataIndex: 'address', key: '4' },
  { title: 'Column 5', dataIndex: 'address', key: '5' },
  { title: 'Column 6', dataIndex: 'address', key: '6' },
  { title: 'Column 7', dataIndex: 'address', key: '7' },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
]

const defaultCheckedList = baseColumns.map(item => item?.key as string)
const checkedList = ref<string[]>(defaultCheckedList)

const options = baseColumns.map(({ key, title }) => ({
  label: title as string,
  value: key as string,
}))

const columns = computed(() =>
  baseColumns.map(item => ({
    ...item,
    hidden: !checkedList.value.includes(item?.key as string),
  })),
)

const dataSource: DataType[] = [
  { key: '1', name: 'John Brown', age: 32, address: 'New York Park' },
  { key: '2', name: 'Jim Green', age: 40, address: 'London Park' },
]
</script>

<template>
  <div>
    <a-divider>Columns displayed</a-divider>
    <a-checkbox-group
      v-model:value="checkedList"
      :options="options"
    />
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :style="{ marginTop: '24px' }"
    />
  </div>
</template>
```
### Drag Row Sorting
With custom elements, we can achieve drag-and-drop sorting using native browser APIs.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { ref } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const dataSource = ref<DataType[]>([
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
])

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const dragKey = ref<string | null>(null)

const onRow: TableProps['onRow'] = record => ({
  draggable: true,
  onDragstart: () => {
    dragKey.value = record.key
  },
  onDragover: (event: DragEvent) => {
    event.preventDefault()
  },
  onDrop: () => {
    if (!dragKey.value || dragKey.value === record.key) {
      return
    }
    const current = [...dataSource.value]
    const fromIndex = current.findIndex(item => item.key === dragKey.value)
    const toIndex = current.findIndex(item => item.key === record.key)
    if (fromIndex === -1 || toIndex === -1) {
      return
    }
    const [moved] = current.splice(fromIndex, 1)
    current.splice(toIndex, 0, moved!)
    dataSource.value = current
    dragKey.value = null
  },
})
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource" :on-row="onRow" />
</template>
```
### Drag Handle Sorting
Implement a drag-and-drop operation column using native browser APIs.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { ref } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const dataSource = ref<DataType[]>([
  { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
])

const columns: TableProps['columns'] = [
  { title: '', key: 'sort', width: 48 },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const dragKey = ref<string | null>(null)

function onHandleDragStart(record: any, event: DragEvent) {
  dragKey.value = record.key
  event.dataTransfer?.setData('text/plain', record.key)
}

const onRow: TableProps['onRow'] = record => ({
  onDragover: (event: DragEvent) => {
    event.preventDefault()
  },
  onDrop: () => {
    if (!dragKey.value || dragKey.value === record.key) {
      return
    }
    const current = [...dataSource.value]
    const fromIndex = current.findIndex(item => item.key === dragKey.value)
    const toIndex = current.findIndex(item => item.key === record.key)
    if (fromIndex === -1 || toIndex === -1) {
      return
    }
    const [moved] = current.splice(fromIndex, 1)
    current.splice(toIndex, 0, moved!)
    dataSource.value = current
    dragKey.value = null
  },
})
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource" :on-row="onRow">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'sort'">
        <span class="drag-handle color-text-tertiary" draggable="true" @dragstart="onHandleDragStart(record, $event)">::</span>
      </template>
    </template>
  </a-table>
</template>

<style scoped>
.drag-handle {
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>
```
### Resizable Column
Set `resizable` on a column to resize it by dragging the header edge; `resizeColumn` fires on release. The table keeps the dragged width on its own when `columns` is not updated. This demo writes the width back through `resizeColumn` and can reset it.

Use numeric (px) `width` values on resizable tables and leave `width` unset on columns that should stay flexible. With string widths such as `'20%'` or `'200px'`, the drop position is not kept exact and columns without a width are no longer protected from being squeezed.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { ref } from 'vue'

interface DataType {
  key: number
  date: string
  amount: number
  type: string
  note: string
}

type Columns = NonNullable<TableProps<DataType>['columns']>

function defaultColumns(): Columns {
  return [
    { title: 'Date', dataIndex: 'date', key: 'date', width: 200, resizable: true },
    { title: 'Amount', dataIndex: 'amount', key: 'amount', width: 120, resizable: true, minWidth: 80, sorter: (a, b) => a.amount - b.amount },
    { title: 'Type', dataIndex: 'type', key: 'type', width: 120, resizable: true },
    { title: 'Note', dataIndex: 'note', key: 'note', width: 160, resizable: true },
    { title: 'Action', key: 'action' },
  ]
}

const columns = ref<Columns>(defaultColumns())

const dataSource: DataType[] = [
  { key: 0, date: '2018-02-11', amount: 120, type: 'income', note: 'transfer' },
  { key: 1, date: '2018-03-11', amount: 243, type: 'income', note: 'transfer' },
  { key: 2, date: '2018-04-11', amount: 98, type: 'income', note: 'transfer' },
]

const onResizeColumn: TableProps<DataType>['onResizeColumn'] = (width, _column, columnKey) => {
  columns.value = columns.value.map(col => (col.key === columnKey ? { ...col, width } : col))
}
</script>

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-button @click="columns = defaultColumns()">
      Reset widths
    </a-button>
    <a-table bordered :columns="columns" :data-source="dataSource" @resize-column="onResizeColumn">
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'action'">
          <a>Delete</a>
        </template>
      </template>
    </a-table>
  </a-space>
</template>
```
### Edit Row
Table with editable rows.
> For all editable tables, do not use `v-model:value="record.xxx"` for two-way data binding, which may cause data anomalies.
> It is recommended to use forms to collect and validate data.
```vue
<script setup lang="ts">
import type { FormInstance, TableProps } from 'antdv-next'
import { ref } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const originData = Array.from({ length: 100 }).map<DataType>((_, i) => ({
  key: i.toString(),
  name: `Edward ${i}`,
  age: 32,
  address: `London Park no. ${i}`,
}))

const dataSource = ref<DataType[]>(originData)
const formRef = ref<FormInstance | null>(null)
const formModel = ref<Record<string, any>>({ name: '', age: 0, address: '' })
const editingKey = ref('')

const editableColumns = new Set(['name', 'age', 'address'])
const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name', width: '25%' },
  { title: 'Age', dataIndex: 'age', key: 'age', width: '15%' },
  { title: 'Address', dataIndex: 'address', key: 'address', width: '40%' },
  { title: 'Operation', key: 'operation' },
]

const isEditing = (record: Record<string, any>) => record.key === editingKey.value

function edit(record: Record<string, any>) {
  formModel.value = { name: record.name, age: record.age, address: record.address }
  editingKey.value = record.key
}

async function save(key: string) {
  try {
    const values = await formRef.value?.validateFields()
    if (!values) {
      return
    }
    const newData = [...dataSource.value]
    const index = newData.findIndex(item => item.key === key)
    if (index > -1) {
      const item = newData[index]
      newData.splice(index, 1, { ...item, ...values } as DataType)
    }
    else {
      newData.push({ key, ...values } as DataType)
    }
    dataSource.value = newData
    editingKey.value = ''
  }
  catch (err) {
    console.log('Validate Failed:', err)
  }
}

function cancel() {
  editingKey.value = ''
}
</script>

<template>
  <a-form ref="formRef" :model="formModel">
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :pagination="{ onChange: cancel }"
      bordered
    >
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.key === 'operation'">
          <template v-if="isEditing(record)">
            <a-space size="small">
              <a-typography-link style="margin-inline-end: 8px" @click="save(record.key)">
                Save
              </a-typography-link>
              <a-popconfirm title="Sure to cancel?" @confirm="cancel">
                <a-typography-link>Cancel</a-typography-link>
              </a-popconfirm>
            </a-space>
          </template>
          <template v-else>
            <a-typography-link :disabled="editingKey !== ''" @click="edit(record)">
              Edit
            </a-typography-link>
          </template>
        </template>
        <template v-else-if="editableColumns.has(String(column.dataIndex))">
          <template v-if="isEditing(record)">
            <a-form-item
              :name="column.dataIndex as string"
              :rules="[{ required: true, message: `Please Input ${column.title}!` }]"
              style="margin: 0"
            >
              <a-input-number
                v-if="column.dataIndex === 'age'"
                v-model:value="formModel[column.dataIndex as string]"
              />
              <a-input
                v-else
                v-model:value="formModel[column.dataIndex as string]"
              />
            </a-form-item>
          </template>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </template>
    </a-table>
  </a-form>
</template>
```
### Edit Cell
Table with editable cells.
```vue
<script setup lang="ts">
import type { TableDataIndex, TableProps } from 'antdv-next'
import { computed, ref } from 'vue'

interface DataType {
  key: string
  name: string
  age: string
  address: string
}

const dataSource = ref<DataType[]>([
  { key: '0', name: 'Edward King 0', age: '32', address: 'London, Park Lane no. 0' },
  { key: '1', name: 'Edward King 1', age: '32', address: 'London, Park Lane no. 1' },
])
const count = ref(2)

const editing = ref<{ key: string, dataIndex: keyof DataType } | null>(null)
const inputValue = ref('')

const editableColumns = new Set(['name'])

function startEdit(record: Record<string, any>, dataIndex: TableDataIndex) {
  editing.value = { key: record.key, dataIndex }
  inputValue.value = String(record[dataIndex])
}

const columns = computed<TableProps['columns']>(() => [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: '30%',
    onCell: (record) => {
      return {
        onClick() {
          startEdit(record, 'name')
        },
      }
    },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',

  },
  { title: 'Address', dataIndex: 'address', key: 'address' },
  { title: 'Operation', key: 'operation' },
])
function saveEdit(record: Record<string, any>) {
  if (!editing.value) {
    return
  }
  const { dataIndex } = editing.value
  dataSource.value = dataSource.value.map((item) => {
    if (item.key === record.key) {
      return { ...item, [dataIndex]: inputValue.value }
    }
    return item
  })
  editing.value = null
}

function handleAdd() {
  const nextKey = String(count.value)
  dataSource.value = [
    ...dataSource.value,
    {
      key: nextKey,
      name: `Edward King ${nextKey}`,
      age: '32',
      address: `London, Park Lane no. ${nextKey}`,
    },
  ]
  count.value += 1
}

function handleDelete(key: string) {
  dataSource.value = dataSource.value.filter(item => item.key !== key)
  if (editing.value?.key === key) {
    editing.value = null
  }
}
</script>

<template>
  <div style="margin-bottom: 16px">
    <a-button type="primary" @click="handleAdd">
      Add a row
    </a-button>
  </div>
  <a-table :columns="columns" :data-source="dataSource" bordered>
    <template #bodyCell="{ column, record, text }">
      <template v-if="column.key === 'operation'">
        <a-popconfirm title="Sure to delete?" @confirm="handleDelete(record.key)">
          <a>Delete</a>
        </a-popconfirm>
      </template>
      <template v-else-if="editableColumns.has(String(column.dataIndex))">
        <template v-if="editing && editing.key === record.key && editing.dataIndex === column.dataIndex">
          <a-input
            v-model:value="inputValue"
            @keyup.enter="saveEdit(record)"
            @blur="saveEdit(record)"
          />
        </template>
        <template v-else>
          {{ text }}
        </template>
      </template>
    </template>
  </a-table>
</template>

<style>
.editable-cell {
  cursor: pointer;
  padding-inline-end: 24px;
}
</style>
```
### Ellipsis
Ellipsis cell content via setting `column.ellipsis`.

> Cannot ellipsis table header with sorters and filters for now.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name', width: 150 },
  { title: 'Age', dataIndex: 'age', key: 'age', width: 80 },
  { title: 'Address', dataIndex: 'address', key: 'address 1', ellipsis: true },
  { title: 'Long Column Long Column Long Column', dataIndex: 'address', key: 'address 2', ellipsis: true },
  { title: 'Long Column Long Column', dataIndex: 'address', key: 'address 3', ellipsis: true },
  { title: 'Long Column', dataIndex: 'address', key: 'address 4', ellipsis: true },
]

const dataSource: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  },
]
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template #bodyCell="{ column, text }">
      <template v-if="column.key === 'name'">
        <a>{{ text }}</a>
      </template>
    </template>
  </a-table>
</template>
```
### Custom Ellipsis Tooltip
Ellipsis cell content via setting `column.ellipsis.showTitle`, use `Tooltip` instead of the html title attribute.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name', width: 150 },
  { title: 'Age', dataIndex: 'age', key: 'age', width: 80 },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: { showTitle: false },
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: { showTitle: false },
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: { showTitle: false },
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: { showTitle: false },
  },
]

const dataSource: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  },
]

const addressColumnKeys = new Set(['address 1', 'address 2', 'address 3', 'address 4'])
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template #bodyCell="{ column, text }">
      <template v-if="column.key === 'name'">
        <a>{{ text }}</a>
      </template>
      <template v-else-if="addressColumnKeys.has(String(column.key))">
        <a-tooltip placement="topLeft" :title="text">
          <span class="ellipsis-text">{{ text }}</span>
        </a-tooltip>
      </template>
    </template>
  </a-table>
</template>

<style scoped>
.ellipsis-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
```
### Expand
When there's too much information to show and the table can't display all at once.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key: number
  name: string
  age: number
  address: string
  description: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
  { title: 'Action', dataIndex: '', key: 'x' },
]

const dataSource: DataType[] = [
  {
    key: 1,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  },
  {
    key: 2,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
  },
  {
    key: 3,
    name: 'Not Expandable',
    age: 29,
    address: 'Jiangsu No. 1 Lake Park',
    description: 'This not expandable',
  },
  {
    key: 4,
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    description: 'My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park.',
  },
]
</script>

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :expandable="{ rowExpandable: record => record.name !== 'Not Expandable' }"
  >
    <template #expandedRowRender="{ record }">
      <p style="margin: 0">
        {{ record.description }}
      </p>
    </template>
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'x'">
        <a>Delete</a>
      </template>
    </template>
  </a-table>
</template>
```
### Expand Sticky
Use `expandedRowOffset` to customize the offset of the expanded sub-table columns index
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { Table } from 'antdv-next'

interface DataType {
  key: number
  team: string
  name: string
  age: number
  address: string
  description: string
}

const columns: TableProps['columns'] = [
  {
    title: 'Team',
    dataIndex: 'team',
    key: 'team',
    onCell: (_record, index = 0) => (index % 2 === 0 ? { rowSpan: 2 } : { rowSpan: 0 }),
    width: 100,
  },
  Table.EXPAND_COLUMN,
  { title: 'Name', dataIndex: 'name', key: 'name', width: 150 },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
  { title: 'Action', dataIndex: '', key: 'x' },
]

const dataSource: DataType[] = [
  {
    key: 1,
    team: 'Team A',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  },
  {
    key: 2,
    team: 'Team A',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
  },
  {
    key: 3,
    team: 'Team B',
    name: 'Not Expandable',
    age: 29,
    address: 'Jiangsu No. 1 Lake Park',
    description: 'This not expandable',
  },
  {
    key: 4,
    team: 'Team B',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    description: 'My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park.',
  },
]
</script>

<template>
  <a-table
    bordered
    :columns="columns"
    :data-source="dataSource"
    :expandable="{ expandedRowOffset: 3 }"
  >
    <template #expandedRowRender="{ record }">
      <div>{{ record.description }}</div>
    </template>
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'x'">
        <a>Delete</a>
      </template>
    </template>
  </a-table>
</template>
```
### Nested Table
Showing more detailed info of every row.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'

interface ExpandedDataType {
  key: string
  date: string
  name: string
  upgradeNum: string
}

interface DataType {
  key: string
  name: string
  platform: string
  version: string
  upgradeNum: number
  creator: string
  createdAt: string
}

const items = [
  { key: '1', label: 'Action 1' },
  { key: '2', label: 'Action 2' },
]

const expandColumns: TableProps['columns'] = [
  { title: 'Date', dataIndex: 'date', key: 'date' },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Status', key: 'state' },
  { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  { title: 'Action', key: 'operation' },
]

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Platform', dataIndex: 'platform', key: 'platform' },
  { title: 'Version', dataIndex: 'version', key: 'version' },
  { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  { title: 'Creator', dataIndex: 'creator', key: 'creator' },
  { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
  { title: 'Action', key: 'operation' },
]

const expandDataSource: ExpandedDataType[] = Array.from({ length: 3 }).map((_, i) => ({
  key: String(i),
  date: '2014-12-24 23:12:00',
  name: 'This is production name',
  upgradeNum: 'Upgraded: 56',
}))

const dataSource: DataType[] = Array.from({ length: 3 }).map((_, i) => ({
  key: String(i),
  name: 'Screen',
  platform: 'iOS',
  version: '10.3.4.5654',
  upgradeNum: 500,
  creator: 'Jack',
  createdAt: '2014-12-24 23:12:00',
}))

const expandable = {
  defaultExpandedRowKeys: ['0'],
}
</script>

<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :expandable="expandable"
  >
    <template #expandedRowRender>
      <a-table
        :columns="expandColumns"
        :data-source="expandDataSource"
        :pagination="false"
      >
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'state'">
            <a-badge status="success" text="Finished" />
          </template>
          <template v-else-if="column.key === 'operation'">
            <a-space size="medium">
              <a>Pause</a>
              <a>Stop</a>
              <a-dropdown :menu="{ items }">
                <a>
                  More
                  <DownOutlined />
                </a>
              </a-dropdown>
            </a-space>
          </template>
        </template>
      </a-table>
    </template>
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a>Publish</a>
      </template>
    </template>
  </a-table>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :expandable="expandable"
    size="medium"
  >
    <template #expandedRowRender>
      <a-table
        :columns="expandColumns"
        :data-source="expandDataSource"
        :pagination="false"
      >
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'state'">
            <a-badge status="success" text="Finished" />
          </template>
          <template v-else-if="column.key === 'operation'">
            <a-space size="medium">
              <a>Pause</a>
              <a>Stop</a>
              <a-dropdown :menu="{ items }">
                <a>
                  More
                  <DownOutlined />
                </a>
              </a-dropdown>
            </a-space>
          </template>
        </template>
      </a-table>
    </template>
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a>Publish</a>
      </template>
    </template>
  </a-table>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    :expandable="expandable"
    size="small"
  >
    <template #expandedRowRender>
      <a-table
        :columns="expandColumns"
        :data-source="expandDataSource"
        :pagination="false"
      >
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'state'">
            <a-badge status="success" text="Finished" />
          </template>
          <template v-else-if="column.key === 'operation'">
            <a-space size="medium">
              <a>Pause</a>
              <a>Stop</a>
              <a-dropdown :menu="{ items }">
                <a>
                  More
                  <DownOutlined />
                </a>
              </a-dropdown>
            </a-space>
          </template>
        </template>
      </a-table>
    </template>
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a>Publish</a>
      </template>
    </template>
  </a-table>
</template>
```
### Tree Data
Display tree structure data in Table when there is field key `children` in dataSource, try to customize `childrenColumnName` property to avoid tree table structure.

You can control the indent width by setting `indentSize`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { computed, ref } from 'vue'

interface DataType {
  key: number
  name: string
  age: number
  address: string
  children?: DataType[]
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age', width: '12%' },
  { title: 'Address', dataIndex: 'address', key: 'address', width: '30%' },
]

const dataSource: DataType[] = [
  {
    key: 1,
    name: 'John Brown sr.',
    age: 60,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: 11,
        name: 'John Brown',
        age: 42,
        address: 'New York No. 2 Lake Park',
      },
      {
        key: 12,
        name: 'John Brown jr.',
        age: 30,
        address: 'New York No. 3 Lake Park',
        children: [
          {
            key: 121,
            name: 'Jimmy Brown',
            age: 16,
            address: 'New York No. 3 Lake Park',
          },
        ],
      },
      {
        key: 13,
        name: 'Jim Green sr.',
        age: 72,
        address: 'London No. 1 Lake Park',
        children: [
          {
            key: 131,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 2 Lake Park',
            children: [
              {
                key: 1311,
                name: 'Jim Green jr.',
                age: 25,
                address: 'London No. 3 Lake Park',
              },
              {
                key: 1312,
                name: 'Jimmy Green sr.',
                age: 18,
                address: 'London No. 4 Lake Park',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
  },
]

const checkStrictly = ref(false)

const rowSelection = computed<TableProps['rowSelection']>(() => ({
  checkStrictly: checkStrictly.value,
  onChange: (selectedRowKeys, selectedRows, info) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows,
      'info',
      info,
    )
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
}))
</script>

<template>
  <a-space align="center" style="margin-bottom: 16px">
    CheckStrictly:
    <a-switch v-model:checked="checkStrictly" />
  </a-space>
  <a-table :columns="columns" :data-source="dataSource" :row-selection="rowSelection" />
</template>
```
### Row Selection
Rows can be selectable by making first column as a selectable column. You can use `rowSelection.type` to set selection type. Default is `checkbox`.

> selection happens when clicking checkbox by default. You can see <https://codesandbox.io/s/000vqw38rl> if you need row-click selection behavior.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { computed, ref } from 'vue'

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const dataSource: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sydney No. 1 Lake Park',
  },
]

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const selectionType = ref<'checkbox' | 'radio'>('checkbox')

const selectedRowKeys = ref<Array<string | number>>([])
const rowSelection = computed<TableProps['rowSelection']>(() => ({
  type: selectionType.value,
  selectedRowKeys: selectedRowKeys.value,
  onChange: (_selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${_selectedRowKeys}`, 'selectedRows: ', selectedRows)
    selectedRowKeys.value = _selectedRowKeys
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User',
    name: record.name,
  }),
}))
</script>

<template>
  <div>
    <a-radio-group v-model:value="selectionType">
      <a-radio value="checkbox">
        Checkbox
      </a-radio>
      <a-radio value="radio">
        radio
      </a-radio>
    </a-radio-group>
    <a-divider />
    <a-table :columns="columns" :data-source="dataSource" :row-selection="rowSelection">
      <template #bodyCell="{ column, text }">
        <template v-if="column.key === 'name'">
          <a>{{ text }}</a>
        </template>
      </template>
    </a-table>
  </div>
</template>
```
### Custom Selection
Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { Table } from 'antdv-next'
import { computed, ref } from 'vue'

type TableRowSelection = TableProps['rowSelection']
type Key = string | number

interface DataType {
  key: Key
  name: string
  age: number
  address: string
}

const dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({
  key: i,
  name: `Edward King ${i}`,
  age: 32,
  address: `London, Park Lane no. ${i}`,
}))

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const selectedRowKeys = ref<Key[]>([])

function onSelectChange(newSelectedRowKeys: Key[]) {
  console.log('selectedRowKeys changed: ', newSelectedRowKeys)
  selectedRowKeys.value = newSelectedRowKeys
}

const rowSelection = computed<TableRowSelection>(() => ({
  selectedRowKeys: selectedRowKeys.value,
  onChange: onSelectChange,
  selections: [
    Table.SELECTION_ALL,
    Table.SELECTION_INVERT,
    Table.SELECTION_NONE,
    {
      key: 'odd',
      text: 'Select Odd Row',
      onSelect: (changeableRowKeys) => {
        selectedRowKeys.value = (changeableRowKeys as Key[]).filter((_, index) => index % 2 === 0)
      },
    },
    {
      key: 'even',
      text: 'Select Even Row',
      onSelect: (changeableRowKeys) => {
        selectedRowKeys.value = (changeableRowKeys as Key[]).filter((_, index) => index % 2 === 1)
      },
    },
  ],
}))
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource" :row-selection="rowSelection" />
</template>
```
### Selection Operations
To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { computed, ref } from 'vue'

type TableRowSelection = TableProps['rowSelection']
type Key = string | number

interface DataType {
  key: Key
  name: string
  age: number
  address: string
}

const dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({
  key: i,
  name: `Edward King ${i}`,
  age: 32,
  address: `London, Park Lane no. ${i}`,
}))

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
]

const selectedRowKeys = ref<Key[]>([])
const loading = ref(false)

function start() {
  loading.value = true
  setTimeout(() => {
    selectedRowKeys.value = []
    loading.value = false
  }, 1000)
}

function onSelectChange(newSelectedRowKeys: Key[]) {
  console.log('selectedRowKeys changed: ', newSelectedRowKeys)
  selectedRowKeys.value = newSelectedRowKeys
}

const rowSelection = computed<TableRowSelection>(() => ({
  selectedRowKeys: selectedRowKeys.value,
  onChange: onSelectChange,
}))

const hasSelected = computed(() => selectedRowKeys.value.length > 0)
</script>

<template>
  <a-flex gap="medium" vertical>
    <a-flex align="center" gap="medium">
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        Reload
      </a-button>
      <span v-if="hasSelected">
        Selected {{ selectedRowKeys.length }} items
      </span>
    </a-flex>
    <a-table :columns="columns" :data-source="dataSource" :row-selection="rowSelection" />
  </a-flex>
</template>
```
### Reset Filter
Control filters and sorters by `filteredValue` and `sortOrder`.

> 1. Defining `filteredValue` or `sortOrder` means that it is in the controlled mode.
> 2. Make sure `sortOrder` is assigned for only one column.
> 3. `column.key` is required.
```vue
<script setup lang="ts">
import type { TableEmits, TableProps } from 'antdv-next'
import { computed, ref } from 'vue'

type OnChange = NonNullable<TableEmits['change']>
type Filters = Parameters<OnChange>[1]
type Sorter = Parameters<OnChange>[2]
type Sorts = Sorter extends any[] ? Sorter[number] : Sorter

interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const dataSource: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park',
  },
]

const filteredInfo = ref<Filters>({})
const sortedInfo = ref<Record<string, any>>({})

const columns = computed<TableProps['columns']>(() => [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    filters: [
      { text: 'Joe', value: 'Joe' },
      { text: 'Jim', value: 'Jim' },
    ],
    filteredValue: filteredInfo.value?.name || null,
    onFilter: (value, record) => record.name.includes(String(value)),
    sorter: (a, b) => a.name.length - b.name.length,
    sortOrder: sortedInfo.value.columnKey === 'name' ? sortedInfo.value.order : null,
    ellipsis: true,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => a.age - b.age,
    sortOrder: sortedInfo.value.columnKey === 'age' ? sortedInfo.value.order : null,
    ellipsis: true,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    filters: [
      { text: 'London', value: 'London' },
      { text: 'New York', value: 'New York' },
    ],
    filteredValue: filteredInfo.value?.address || null,
    onFilter: (value, record) => record.address.includes(String(value)),
    sorter: (a, b) => a.address.length - b.address.length,
    sortOrder: sortedInfo.value.columnKey === 'address' ? sortedInfo.value.order : null,
    ellipsis: true,
  },
])

const handleChange: OnChange = (pagination, filters, sorter) => {
  console.log('Various parameters', pagination, filters, sorter)
  filteredInfo.value = filters
  sortedInfo.value = Array.isArray(sorter) ? ((sorter[0] || {}) as Sorts) : (sorter as Sorts)
}

function clearFilters() {
  filteredInfo.value = {}
}

function clearAll() {
  filteredInfo.value = {}
  sortedInfo.value = {} as Sorts
}

function setAgeSort() {
  sortedInfo.value = {
    order: 'descend',
    columnKey: 'age',
  } as Sorts
}
</script>

<template>
  <a-space style="margin-bottom: 16px">
    <a-button @click="setAgeSort">
      Sort age
    </a-button>
    <a-button @click="clearFilters">
      Clear filters
    </a-button>
    <a-button @click="clearAll">
      Clear filters and sorters
    </a-button>
  </a-space>
  <a-table :columns="columns" :data-source="dataSource" @change="handleChange" />
</template>
```
### Virtual List
Set `virtual` to enable virtual scroll, and `scroll.x` and `scroll.y` must be set at the same time with `number` type.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { computed, ref } from 'vue'

interface RecordType {
  id: number
  firstName: string
  lastName: string
  age: number
  address1: string
  address2: string
  address3: string
}

const fixedColumns: TableProps['columns'] = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100,
    fixed: 'start',
  },
  {
    title: 'FistName',
    dataIndex: 'firstName',
    width: 120,
    fixed: 'start',
  },
  {
    title: 'LastName',
    dataIndex: 'lastName',
    width: 120,
    fixed: 'start',
  },
  {
    title: 'Group',
    key: 'group',
    width: 120,
    render: (_text, record) => `Group ${Math.floor(record.id / 4)}`,
    onCell: record => ({
      rowSpan: record.id % 4 === 0 ? 4 : 0,
    }),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    width: 100,
    onCell: record => ({
      colSpan: record.id % 4 === 0 ? 2 : 1,
    }),
  },
  {
    title: 'Address 1',
    dataIndex: 'address1',
    onCell: record => ({
      colSpan: record.id % 4 === 0 ? 0 : 1,
    }),
  },
  {
    title: 'Address 2',
    dataIndex: 'address2',
  },
  {
    title: 'Address 3',
    dataIndex: 'address3',
  },
  {
    title: 'Action',
    key: 'action',
    width: 150,
    fixed: 'end',
  },
]

const columns: TableProps['columns'] = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 100,
  },
  {
    title: 'FistName',
    dataIndex: 'firstName',
    width: 120,
  },
  {
    title: 'LastName',
    dataIndex: 'lastName',
  },
]

const fixed = ref(true)
const bordered = ref(true)
const expanded = ref(false)
const empty = ref(false)
const count = ref(10000)
const tableRef = ref<any>(null)

const countOptions = [
  { label: 'None', value: 0 },
  { label: 'Less', value: 4 },
  { label: 'Lot', value: 10000 },
]

function getData(length: number) {
  return Array.from({ length }).map<RecordType>((_, index) => ({
    id: index,
    firstName: `First_${index.toString(16)}`,
    lastName: `Last_${index.toString(16)}`,
    age: 25 + (index % 10),
    address1: `New York No. ${index} Lake Park`,
    address2: `London No. ${index} Lake Park`,
    address3: `Sydney No. ${index} Lake Park`,
  }))
}

const data = computed(() => getData(count.value))

const mergedColumns = computed<TableProps['columns']>(() => {
  if (!fixed.value) {
    return columns
  }

  if (!expanded.value) {
    return fixedColumns
  }

  return fixedColumns.map(column => ({ ...column, onCell: undefined }))
})

const expandableProps = computed<TableProps['expandable']>(() => {
  if (!expanded.value) {
    return undefined
  }
  return {
    columnWidth: 48,
    rowExpandable: record => record.id % 2 === 0,
  }
})

const tableData = computed(() => (empty.value ? [] : data.value))

function scrollToIndex() {
  tableRef.value?.scrollTo?.({ index: 999 })
}
</script>

<template>
  <div style="padding: 64px">
    <a-space direction="vertical" style="width: 100%">
      <a-space wrap>
        <a-switch
          v-model:checked="bordered"
          checked-children="Bordered"
          un-checked-children="Bordered"
        />
        <a-switch
          v-model:checked="fixed"
          checked-children="Fixed"
          un-checked-children="Fixed"
        />
        <a-switch
          v-model:checked="expanded"
          checked-children="Expandable"
          un-checked-children="Expandable"
        />
        <a-switch
          v-model:checked="empty"
          checked-children="Empty"
          un-checked-children="Empty"
        />
        <a-segmented v-model:value="count" :options="countOptions" />
        <a-button v-if="data.length >= 999" @click="scrollToIndex">
          Scroll To index 999
        </a-button>
      </a-space>
      <a-table
        ref="tableRef"
        virtual
        :bordered="bordered"
        :columns="mergedColumns"
        :scroll="{ x: 2000, y: 400 }"
        :row-key="record => record.id"
        :data-source="tableData"
        :pagination="false"
        :row-selection="expanded ? undefined : { type: 'radio', columnWidth: 48 }"
        :expandable="expandableProps"
      >
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a-typography-link>Action1</a-typography-link>
              <a-typography-link>Action2</a-typography-link>
            </a-space>
          </template>
        </template>
        <template v-if="expanded" #expandedRowRender="{ record }">
          <p style="margin: 0">
            🎉 Expanded {{ record.address1 }}
          </p>
        </template>
      </a-table>
    </a-space>
  </div>
</template>
```
### Style & Class
You can customize the [semantic dom](#semantic-dom) style of Table by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataType {
  key?: string
  name?: string
  age?: number
  address?: string
  description?: string
}

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' },
  { title: 'Description', dataIndex: 'description', key: 'description' },
]

const dataSource: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
    description: 'My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park.',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sydney No. 2 Lake Park',
    description: 'This user is disabled.',
  },
]

const classes: TableProps['classes'] = {
  root: 'custom-table-root',
}

const styles: TableProps['styles'] = {
  root: {
    padding: '10px',
    borderRadius: '8px',
  },
  pagination: {
    root: {
      padding: '10px',
    },
  },
  body: {
    row: {
      outline: '1px dashed rgba(226, 225, 225, 0.1)',
    },
    cell: {
      outline: '1px dashed rgba(226, 225, 225, 0.1)',
    },
  },
}

const stylesFn: TableProps['styles'] = (info) => {
  if (info?.props?.size === 'medium') {
    return {
      root: {
        color: '#e0e0e0',
        borderRadius: '8px',
        boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
      },
      title: {
        backgroundImage: 'linear-gradient(90deg, #6a5acd, #836fff)',
        color: '#fff',
        fontSize: '1.25rem',
        fontWeight: 600,
        padding: '12px 16px',
      },
      footer: {
        color: '#9ca3af',
      },
      header: {
        cell: {
          fontWeight: 600,
          fontSize: '0.95rem',
          color: '#b8bdfd',
          padding: '12px 16px',
          borderBottom: '1px solid rgba(255,255,255,0.08)',
        },
      },
      pagination: {
        root: {
          padding: '10px',
        },
        item: {
          color: '#b8bdfd',
        },
      },
    } as TableProps['styles']
  }
  return {} as any
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :classes="classes"
      :pagination="{ pageSize: 3, simple: true }"
      :styles="styles"
      size="small"
      virtual
      :scroll="{ y: 300 }"
    >
      <template #title>
        Table Object Styles
      </template>
      <template #footer>
        Table Object Footer
      </template>
    </a-table>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :classes="classes"
      :pagination="{ pageSize: 3, simple: true }"
      :styles="stylesFn"
      size="medium"
    >
      <template #title>
        Table Function Styles
      </template>
      <template #footer>
        Table Function Styles
      </template>
    </a-table>
  </a-flex>
</template>

<style>
.custom-table-root {
  color: #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
</style>
```
### Dynamic Settings
Select different settings to see the result.

<style>
.table-demo-control-bar .ant-form-item {
  margin-inline-end: 16px !important;
  margin-bottom: 8px !important;
}
</style>
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'
import { computed, ref } from 'vue'

interface DataType {
  key: number
  name: string
  age: number
  address: string
  description: string
}

type SizeType = TableProps['size']
type TablePagination = NonNullable<Exclude<TableProps['pagination'], boolean>>
type TablePaginationPlacement = NonNullable<TablePagination['placement']>[number]
type ExpandableConfig = TableProps['expandable']
type TableRowSelection = TableProps['rowSelection']

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    filters: [
      { text: 'London', value: 'London' },
      { text: 'New York', value: 'New York' },
    ],
    onFilter: (value, record) => record.address.indexOf(value as string) === 0,
  },
  {
    title: 'Action',
    key: 'action',
    sorter: true,
  },
]

const dataSource = Array.from({ length: 10 }).map<DataType>((_, i) => ({
  key: i,
  name: 'John Brown',
  age: Number(`${i}2`),
  address: `New York No. ${i} Lake Park`,
  description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
}))

const defaultExpandable: ExpandableConfig = {
  expandedRowRender: record => record.description,
}

const bordered = ref(false)
const loading = ref(false)
const size = ref<SizeType>('large')
const expandableEnabled = ref(true)
const showTitle = ref(false)
const showHeader = ref(true)
const showFooter = ref(true)
const rowSelectionEnabled = ref(true)
const hasData = ref(true)
const tableLayout = ref<'unset' | 'fixed'>('unset')
const top = ref<TablePaginationPlacement>('none')
const bottom = ref<TablePaginationPlacement>('bottomEnd')
const ellipsis = ref(false)
const yScroll = ref(false)
const xScroll = ref<'unset' | 'scroll' | 'fixed'>('unset')

const scroll = computed(() => {
  const next: { x?: number | string, y?: number | string } = {}
  if (yScroll.value) {
    next.y = 240
  }
  if (xScroll.value !== 'unset') {
    next.x = '120vw'
  }
  return next
})

const tableColumns = computed<TableProps['columns']>(() => {
  const next = columns.map(column => ({
    ...column,
    ellipsis: ellipsis.value,
  }))

  if (xScroll.value === 'fixed') {
    if (next[0]) {
      next[0].fixed = true
    }
    if (next.length > 0) {
      next[next.length - 1]!.fixed = 'right'
    }
  }

  return next as TableProps['columns']
})

const expandable = computed<ExpandableConfig | undefined>(() => (
  expandableEnabled.value ? defaultExpandable : undefined
))
const rowSelection = computed<TableRowSelection | undefined>(() => (
  rowSelectionEnabled.value ? {} : undefined
))
const tableData = computed(() => (hasData.value ? dataSource : []))
const pagination = computed<TableProps['pagination']>(() => ({
  placement: [top.value, bottom.value],
}))

function handleAction() {}
</script>

<template>
  <a-form layout="inline" class="table-demo-control-bar" style="margin-bottom: 16px">
    <a-form-item label="Bordered">
      <a-switch v-model:checked="bordered" />
    </a-form-item>
    <a-form-item label="loading">
      <a-switch v-model:checked="loading" />
    </a-form-item>
    <a-form-item label="Title">
      <a-switch v-model:checked="showTitle" />
    </a-form-item>
    <a-form-item label="Column Header">
      <a-switch v-model:checked="showHeader" />
    </a-form-item>
    <a-form-item label="Footer">
      <a-switch v-model:checked="showFooter" />
    </a-form-item>
    <a-form-item label="Expandable">
      <a-switch v-model:checked="expandableEnabled" />
    </a-form-item>
    <a-form-item label="Checkbox">
      <a-switch v-model:checked="rowSelectionEnabled" />
    </a-form-item>
    <a-form-item label="Fixed Header">
      <a-switch v-model:checked="yScroll" />
    </a-form-item>
    <a-form-item label="Has Data">
      <a-switch v-model:checked="hasData" />
    </a-form-item>
    <a-form-item label="Ellipsis">
      <a-switch v-model:checked="ellipsis" />
    </a-form-item>
    <a-form-item label="Size">
      <a-radio-group v-model:value="size">
        <a-radio-button value="large">
          Large
        </a-radio-button>
        <a-radio-button value="medium">
          Medium
        </a-radio-button>
        <a-radio-button value="small">
          Small
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Table Scroll">
      <a-radio-group v-model:value="xScroll">
        <a-radio-button value="unset">
          Unset
        </a-radio-button>
        <a-radio-button value="scroll">
          Scroll
        </a-radio-button>
        <a-radio-button value="fixed">
          Fixed Columns
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Table Layout">
      <a-radio-group v-model:value="tableLayout">
        <a-radio-button value="unset">
          Unset
        </a-radio-button>
        <a-radio-button value="fixed">
          Fixed
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Pagination Top">
      <a-radio-group v-model:value="top">
        <a-radio-button value="topStart">
          TopStart
        </a-radio-button>
        <a-radio-button value="topCenter">
          TopCenter
        </a-radio-button>
        <a-radio-button value="topEnd">
          TopEnd
        </a-radio-button>
        <a-radio-button value="none">
          None
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="Pagination Bottom">
      <a-radio-group v-model:value="bottom">
        <a-radio-button value="bottomStart">
          BottomStart
        </a-radio-button>
        <a-radio-button value="bottomCenter">
          BottomCenter
        </a-radio-button>
        <a-radio-button value="bottomEnd">
          BottomEnd
        </a-radio-button>
        <a-radio-button value="none">
          None
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
  </a-form>
  <a-table
    :bordered="bordered"
    :loading="loading"
    :size="size"
    :row-selection="rowSelection"
    :expandable="expandable"
    :scroll="scroll"
    :table-layout="tableLayout === 'unset' ? undefined : tableLayout"
    :show-header="showHeader"
    :columns="tableColumns"
    :data-source="tableData"
    :pagination="pagination"
  >
    <template v-if="showTitle" #title>
      Here is title
    </template>
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'action'">
        <a-space size="medium">
          <a @click.prevent="handleAction">Delete</a>
          <a @click.prevent="handleAction">
            <a-space>
              More actions
              <DownOutlined />
            </a-space>
          </a>
        </a-space>
      </template>
    </template>
    <template v-if="showFooter" #footer>
      Here is footer
    </template>
  </a-table>
</template>
```
### Header & Body Cell Slots
Customize header and body cells via the headerCell and bodyCell slots.
```vue
<script setup lang="ts">
import type { TableProps } from 'antdv-next'

interface DataItem {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableProps['columns'] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Action',
    key: 'action',
  },
]

const dataSource: DataItem[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
  },
]

function handleAction(record: Record<string, any>) {
  console.log('Action:', record.name)
}
</script>

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span class="table-header-strong">{{ column.title }}</span>
      </template>
    </template>
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.key === 'name'">
        <a class="table-name" @click.prevent="handleAction(record)">{{ text }}</a>
      </template>
      <template v-else-if="column.key === 'action'">
        <a @click.prevent="handleAction(record)">Action</a>
      </template>
    </template>
  </a-table>
</template>

<style scoped>
.table-header-strong {
  font-weight: 600;
}

.table-name {
  color: var(--ant-color-link);
}
</style>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| bordered | Whether to show all table borders | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record\<[SemanticDOM](#semantic-dom), string\> \| (info: \{ props \})=> Record\<[SemanticDOM](#semantic-dom), string\> | - | - | ✓ |
| column | Default props for every column. See [Column](#column). It only applies when the column does not define the same property. | Partial\<[ColumnType](#column)\> | - | - | ✓ |
| columns |  Columns of table | [ColumnsType](#column)\[\] | - | - | × |
| components | Override default table elements | [components](#components) | - | - | × |
| dataSource | Data record array to be displayed | object[] | - | - | × |
| expandable | Config expandable content | [expandable](#expandable) | - |  | ✓ |
| footer | Table footer renderer. You can also use the `#footer` slot. | VueNode \| function(currentPageData) | - | - | × |
| getPopupContainer | The render container of dropdowns in table| (triggerNode) => HTMLElement | () => TableHtmlElement | - | × |
| loading | Loading status of table | boolean \| [Spin Props](/components/spin/#props) | false | - | × |
| locale | The i18n text including filter, sort, empty text, etc | object | [默认值](https://github.com/ant-design/ant-design/blob/6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4/components/locale/zh_CN.tsx#L20-L37) | - | × |
| pagination |Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | false \| TablePaginationConfig | - | - | × |
| rowClassName | Row's className | function(record, index): string | - |  | × |
| rowKey | Row's unique key, could be a string or function that returns a string | string \| function(record): string | `key` | - | ✓ |
| rowSelection | Row selection [config](#rowselection) | object | - | - | × |
| rowHoverable | Row hover | boolean | true | - | × |
| scroll | Whether the table can be scrollable, [config](#scroll) | object | - | - | ✓ |
| showHeader | Whether to show table header | boolean | true | - | × |
| showSorterTooltip | The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object | boolean \| [Tooltip props](/components/tooltip/) & `{target?: 'full-header' \| 'sorter-icon' }` | \{ target: 'full-header' \} | - | × |
| size | Size of table | `large` \| `medium` \| `small` | `large` |  | × |
| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | - | × |
| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record\<[SemanticDOM](#semantic-dom), CSSProperties\> \| (info: \{ props \})=> Record\<[SemanticDOM](#semantic-dom), CSSProperties\> | - | - | ✓ |
| summary | Summary content renderer. You can also use the `#summary` slot. | VueNode \| function(currentPageData) | - | - | × |
| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis`  |  | × |
| title | Table title renderer. You can also use the `#title` slot. | VueNode \| function(currentPageData) | - | - | × |
| dropdownPrefixCls | - | string | - | - | × |
| virtual | Support virtual list | boolean | - | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback executed when pagination, filters or sorter is changed | (     pagination: TablePaginationConfig,     filters: Record&lt;string, FilterValue \| null&gt;,     sorter: SorterResult&lt;RecordType&gt; \| SorterResult&lt;RecordType&gt;[],     extra: TableCurrentDataSource&lt;RecordType&gt;,   ) =&gt; void | - |
| update:expandedRowKeys | - | (keys: readonly Key[]) =&gt; void | - |
| scroll | Whether the table can be scrollable, [config](#scroll) | NonNullable&lt;VcTableProps['onScroll']&gt; | - |
| resizeColumn | Fired once per drag after a `resizable` column is resized; `columnKey` is the key the width is tracked by (the column `key`, or a positional key when unset) | (width: number, column: ColumnType, columnKey: Key) =&gt; void | 1.5.5 |
| headerRow | Set props on per header row | function(columns, index) | - | - |
| row | Set props on per row | function(record, index) | - | - |

<h4>onRow Usage</h4>

This applies to `onRow`, `onHeaderRow`, `column.onCell`, and `column.onHeaderCell`.

```vue
<template>
  <a-table
    :columns="columns"
    :data-source="dataSource"
    @row="onRow"
    @header-row="onHeaderRow"
  />
</template>

<script setup lang="ts">
import type { TableProps } from 'antdv-next'

const onRow: TableProps['onRow'] = (record, index) => {
  return {
    onClick: (event) => {}, // click row
    onDblclick: (event) => {}, // double click row
    onContextmenu: (event) => {}, // right button click row
    onMouseenter: (event) => {}, // mouse enter row
    onMouseleave: (event) => {}, // mouse leave row
  }
}

const onHeaderRow: TableProps['onHeaderRow'] = (columns, index) => {
  return {
    onClick: (event) => {}, // click header row
  }
}
</script>
```

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| title | Table title renderer | (data: readonly RecordType[]) =&gt; any | - |
| footer | Table footer renderer | (data: readonly RecordType[]) =&gt; any | - |
| summary | Summary content | (data: readonly RecordType[]) =&gt; any | - |
| emptyText | - | () =&gt; any | - |
| expandIcon | - | (info: any) =&gt; any | - |
| expandedRowRender | - | (ctx: &#123; record: RecordType, index: number, indent: number, expanded: boolean &#125;) =&gt; any | - |
| headerCell | - | (ctx: &#123; column: ColumnType&lt;RecordType&gt;, index: number, text: any &#125;) =&gt; any | - |
| bodyCell | - | (ctx: &#123; column: ColumnType&lt;RecordType&gt;, index: number, text: any, record: RecordType &#125;) =&gt; any | - |
| filterDropdown | - | (ctx: FilterDropdownProps & &#123; column: ColumnType&lt;RecordType&gt; &#125;) =&gt; any | - |
| filterIcon | - | (ctx: &#123; column: ColumnType&lt;RecordType&gt;, filtered: boolean &#125;) =&gt; any | - |

### Column

One of the Table `columns` prop for describing the table's columns, Column has the same API.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` | - |
| className | The className of this column | string | - | - |
| colSpan | Span of this column's title | number | - | - |
| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | - |
| defaultFilteredValue | Default filtered values | string\[] | - | - |
| filterResetToDefaultFilteredValue | click the reset button, whether to restore the default filter | boolean | false | - |
| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | - |
| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| \{ showTitle?: boolean \} | false | - |
| filterDropdown | Customized filter overlay | VueNode \| (props: [FilterDropdownProps](https://github.com/antdv-next/antdv-next/blob/main/packages/antdv-next/src/table/interface.ts#L94)) => VueNode | - | - |
| filtered | Whether the `dataSource` is filtered | boolean | false | - |
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | - |
| filterIcon | Customized filter icon | VueNode \| (filtered: boolean) => VueNode | - | - |
| filterOnClose | Whether to trigger filter when the filter menu closes | boolean | true | - |
| filterMultiple | Whether multiple filters can be selected | boolean | true | - |
| filterMode | To specify the filter interface | 'menu' \| 'tree' | 'menu' | - |
| filterSearch | Whether to be searchable for filter menu | boolean \| function(input, record):boolean | false | - |
| filters | Filter menu config | object\[] | - | - |
| filterDropdownProps | Customized dropdown props | [DropdownProps](/components/dropdown#api) | - | - |
| fixed | (IE not support) Set column to be fixed: `true`(same as `'start'`) `'start'` `'end'` | boolean \| string | false | - |
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |  |
| render | Renderer of the table cell. `value` is the value of current cell; `record` is the value object of current row; `index` is the row number. The return value should be a VueNode | (value: V, record: T, index: number): VueNode | - | - |
| resizable | Whether the column can be resized by dragging its header edge; leaf columns only. Enables horizontal scroll and `tableLayout="fixed"`. Widths are tracked by `key`, so give the column a stable `key` when columns can be added, removed or reordered; use numeric `width` values | boolean | false | 1.5.5 |
| responsive | The list of breakpoints at which to display this column. Always visible if not set | [Breakpoint](https://github.com/antdv-next/antdv-next/blob/main/packages/antdv-next/src/_util/responsiveObserver.ts#L9)\[] | - | - |
| rowScope | Set scope attribute for all cells in this column | `row` \| `rowgroup` | - | - |
| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | - |
| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props](/components/tooltip/) & `{target?: 'full-header' \| 'sorter-icon' }` | \{ target: 'full-header' \} | - |
| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | - |
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If it is server-side sorting, set to `true`, but if you want to support multi-column sorting, you can set it to `{ multiple: number }` | function \| boolean \| \{ compare: function, multiple: number \} | - | - |
| sortOrder | Order of sorted values: `ascend` `descend` `null` | `ascend` \| `descend` \| null | - | - |
| sortIcon | Customized sort icon | (props: \{ sortOrder \}) => VueNode | - | - |
| title | Title of this column | VueNode \| (\{ sortColumns, filters \}) => VueNode | - | - |
| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | - |
| minWidth | Min width of this column; the width floor when `tableLayout="auto"` and the drag lower bound when `resizable` (default 40) | number | - | - |
| hidden | Hidden this column | boolean | false | - |
| onCell | Set props on per cell | function(record, rowIndex) | - | - |
| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | - |
| onHeaderCell | Set props on per header cell | function(column) | - | - |

### ColumnGroup

| Property | Description               | Type      | Default |
| -------- | ------------------------- | --------- | ------- |
| title    | Title of the column group | VueNode | -       |

### components

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| table | Customize table element | Component | - |
| header.table | Customize header table element | Component | - |
| header.wrapper | Customize header wrapper element | Component | - |
| header.row | Customize header row element | Component | - |
| header.cell | Customize header cell element | Component | - |
| body | Customize body render function or body element collection | Function \| object | - |
| body.wrapper | Customize body wrapper element | Component | - |
| body.row | Customize body row element | Component | - |
| body.cell | Customize body cell element | Component | - |

### pagination

Properties for pagination.

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| placement | Specify the placement of `Pagination`, could be`topStart` \| `topCenter` \| `topEnd` \|`bottomStart` \| `bottomCenter` \| `bottomEnd` \| `none` | Array | \[`bottomEnd`] |

More about pagination, please check [`Pagination`](/components/pagination/).

### expandable

Properties for expandable.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| childrenColumnName | The column contains children to display | string | children | - |
| columnTitle | Set the title of the expand column | VueNode | - | - |
| columnWidth | Set the width of the expand column | string \| number | - | - |
| defaultExpandAllRows | Expand all rows initially | boolean | false | - |
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | - |
| expandedRowClassName | Expanded row's className | string \| (record, index, indent) => string | - | - |
| expandedRowKeys | Current expanded row keys | string\[] | - | - |
| expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): VueNode | - | - |
| expandIcon | Customize row expand Icon. Ref [example](https://stackblitz.com/edit/vitejs-vite-jezqinto?file=src%2FApp.vue) | function(props): VueNode | - | - |
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false | - |
| fixed | Whether the expansion icon is fixed. Optional true `left` `right` | boolean \| string | false | - |
| forceRender | Force render expanded row content before expansion. In virtual mode, only rows currently mounted by the virtual list are force-rendered; off-screen rows may still be unmounted | boolean | false | - |
| indentSize | Indent size in pixels of tree data | number | 15 | - |
| rowExpandable | Enable row can be expandable | (record) => boolean | - | - |
| showExpandColumn | Show expand column | boolean | true | - |
| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - | - |
| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - | - |

### rowSelection

Properties for row selection.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | Set the alignment of selection column | `left` \| `right` \| `center` | `left` | - |
| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | - |
| columnTitle | Set the title of the selection column | VueNode \| (originalNode: VueNode) => VueNode | - | - |
| columnWidth | Set the width of the selection column | string \| number | `32px` | - |
| fixed | Fixed selection column on the left | boolean | - | - |
| getCheckboxProps | Get Checkbox or Radio props | function(record) | - | - |
| getTitleCheckboxProps | Get title Checkbox props | function() | - | - |
| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | - |
| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | - |
| renderCell | Renderer of the table cell. Same as `render` in column | (checked: boolean, record: T, index: number, originNode: VueNode): VueNode | - | - |
| selectedRowKeys | Controlled selected row keys | string\[] \| number\[] | \[] | - |
| defaultSelectedRowKeys | Default selected row keys | string\[] \| number\[] | \[] | - |
| selections | Custom selection [config](#selection), only displays default selections when set to `true` | object\[] \| boolean | - | - |
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | - |
| onCell | Set props on per cell. Same as `onCell` in column | function(record, rowIndex) | - | - |
| onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows, info: \{ type \}) | - | - |
| onSelect | Callback executed when select/deselect one row | function(record, selected, selectedRows, nativeEvent) | - | - |

### scroll

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - | - | ✓ |
| x | Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/en-US/docs/Web/CSS/width#max-content) | string \| number \| true | - | - | ✓ |
| y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number | string \| number | - | - | ✓ |

### selection

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| key | Unique key of this selection | string | - |
| text | Display text of this selection | VueNode | - |
| onSelect | Callback executed when this selection is clicked | function(changeableRowKeys) | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Table" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### How should I troubleshoot Table performance issues? {#faq-table-performance}

Vue DevTools may add extra overhead when profiling complex tables, especially with many rows or cells. If you notice obvious lag, please try disabling Vue DevTools or testing in a clean browser environment first. If the performance issue can still be reproduced in a normal runtime, feel free to provide a minimal reproduction so we can continue to investigate.

---
Title: Tabs
URL: https://www.antdv-next.com/components/tabs.md
---

## When To Use {#when-to-use}

Antdv Next has 3 types of Tabs for different situations.

- Card Tabs: for managing too many closeable views.
- Normal Tabs: for functional aspects of a page.
- [Radio.Button](/components/radio/#radio-demo-radiobutton): for secondary tabs.

## Examples {#examples}

### Basic
Default activate first tab.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'

const items: TabsProps['items'] = [
  {
    key: '1',
    label: 'Tab 1',
    content: 'Content of Tab Pane 1',
  },
  {
    key: '2',
    label: 'Tab 2',
    content: 'Content of Tab Pane 2',
  },
  {
    key: '3',
    label: 'Tab 3',
    content: 'Content of Tab Pane 3',
  },
]
</script>

<template>
  <a-tabs :items="items" />
</template>
```
### Disabled
Disabled a tab.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'

const items: TabsProps['items'] = [
  {
    key: '1',
    label: 'Tab 1',
    content: 'Tab 1',
  },
  {
    key: '2',
    label: 'Tab 2',
    content: 'Tab 2',
    disabled: true,
  },
  {
    key: '3',
    label: 'Tab 3',
    content: 'Tab 3',
  },
]
</script>

<template>
  <a-tabs default-active-key="1" :items="items" />
</template>
```
### Centered
Centered tabs.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'

const items: TabsProps['items'] = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1)
  return {
    key: id,
    label: `Tab ${id}`,
    content: `Content of Tab Pane ${id}`,
  }
})
</script>

<template>
  <a-tabs centered :items="items" />
</template>
```
### Icon
The Tab with Icon.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'
import { AndroidOutlined, AppleOutlined } from '@antdv-next/icons'
import { h } from 'vue'

// Icons from third-party libraries (e.g. lucide) render as a bare `<svg>`
// rather than an `.anticon` wrapper. It stays vertically centred with the label.
function HeartIcon() {
  return h(
    'svg',
    {
      'viewBox': '0 0 24 24',
      'width': '1em',
      'height': '1em',
      'fill': 'currentColor',
      'aria-hidden': 'true',
    },
    [
      h('path', {
        d: 'M12 20.7l-1.4-1.3C5.4 14.8 2 11.7 2 8a5 5 0 0 1 10-1.7A5 5 0 0 1 22 8c0 3.7-3.4 6.8-8.6 11.4L12 20.7z',
      }),
    ],
  )
}

const icons = [AppleOutlined, AndroidOutlined, HeartIcon]

const items: TabsProps['items'] = icons.map((Icon, i) => {
  const id = String(i + 1)
  return {
    key: id,
    label: `Tab ${id}`,
    content: `Tab ${id}`,
    icon: () => h(Icon),
  }
})
</script>

<template>
  <a-tabs default-active-key="2" :items="items" />
</template>
```
### Indicator
Set `indicator` prop to custom indicator size and align.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'
import { ref } from 'vue'

const items: TabsProps['items'] = [
  { key: '1', label: 'Tab 1', content: 'Content of Tab Pane 1' },
  { key: '2', label: 'Tab 2', content: 'Content of Tab Pane 2' },
  { key: '3', label: 'Tab 3', content: 'Content of Tab Pane 3' },
]

type Align = 'start' | 'center' | 'end'

const alignValue = ref<Align>('center')

function onChange(key: string) {
  console.log(key)
}
</script>

<template>
  <div>
    <a-segmented
      v-model:value="alignValue"
      style="margin-bottom: 8px;"
      :options="['start', 'center', 'end']"
    />
    <a-tabs
      default-active-key="1"
      :items="items"
      :indicator="{ size: (origin: number) => origin - 20, align: alignValue }"
      @change="onChange"
    />
  </div>
</template>
```
### Scroll position
Use `scrollPosition` to control the scroll alignment of the active tab when switching.
```vue
<script setup lang="ts">
import type { RadioGroupProps, SegmentedProps, TabsProps } from 'antdv-next'
import { computed, ref } from 'vue'

type ScrollPosition = NonNullable<TabsProps['scrollPosition']>
type TabPlacement = NonNullable<TabsProps['tabPlacement']>
type ScrollPositionOption = ScrollPosition | 'custom'

const items: TabsProps['items'] = Array.from({ length: 30 }, (_, i) => {
  const id = String(i)
  return {
    key: id,
    label: `Tab ${id}`,
    content: `Content of Tab ${id}`,
  }
})

const scrollPositionOptions: SegmentedProps<ScrollPositionOption>['options'] = [
  { label: 'auto', value: 'auto' },
  { label: 'start', value: 'start' },
  { label: 'center', value: 'center' },
  { label: 'end', value: 'end' },
  { label: 'custom', value: 'custom' },
]

const tabPlacementOptions: RadioGroupProps['options'] = [
  { label: 'Horizontal', value: 'top' },
  { label: 'Vertical', value: 'start' },
]

const scrollPositionMode = ref<ScrollPositionOption>('center')
const ratio = ref(0.25)
const scrollPosition = computed<ScrollPosition>(() => scrollPositionMode.value === 'custom' ? ratio.value : scrollPositionMode.value)
const mode = ref<TabPlacement>('top')
</script>

<template>
  <a-flex vertical gap="large">
    <a-radio-group
      v-model:value="mode"
      :options="tabPlacementOptions"
      option-type="button"
    />
    <a-flex
      align="center"
      gap="small"
    >
      <a-segmented
        v-model:value="scrollPositionMode"
        :options="scrollPositionOptions"
      />
      <template v-if="scrollPositionMode === 'custom'">
        <span>ratio:</span>
        <a-input-number
          v-model:value="ratio"
          :min="0"
          :max="2"
          :step="0.05"
        />
      </template>
    </a-flex>
  </a-flex>
  <a-tabs
    default-active-key="6"
    :scroll-position="scrollPosition"
    :tab-placement="mode"
    :style="{ height: '180px', marginTop: '15px' }"
    :items="items"
  />
</template>
```
### Slide
In order to fit in more tabs, they can slide left and right (or up and down).
```vue
<script setup lang="ts">
import { ref } from 'vue'

type TabPlacement = 'top' | 'left'

interface TabItem {
  key: string
  label: string
  content: string
  disabled?: boolean
}

const mode = ref<TabPlacement>('top')

const items: TabItem[] = Array.from({ length: 30 }, (_, i) => {
  const id = String(i)
  return {
    key: id,
    label: `Tab-${id}`,
    content: `Content of tab ${id}`,
    disabled: i === 28,
  }
})

const activeKey = ref('0')
</script>

<template>
  <div>
    <a-radio-group v-model:value="mode" style="margin-bottom: 8px;">
      <a-radio-button value="top">
        Horizontal
      </a-radio-button>
      <a-radio-button value="left">
        Vertical
      </a-radio-button>
    </a-radio-group>
    <a-tabs
      v-model:active-key="activeKey"
      :tab-placement="mode"
      style="height: 220px;"
      :items="items"
    />
  </div>
</template>
```
### Extra content
You can add extra actions to the right or left or even both side of Tabs.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'
import { computed, h, ref, resolveComponent } from 'vue'

type PositionType = 'left' | 'right'

const options = ['left', 'right']

const items: TabsProps['items'] = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1)
  return {
    key: id,
    label: `Tab ${id}`,
    content: `Content of tab ${id}`,
  }
})

const position = ref<PositionType[]>(['left', 'right'])

const slot = computed(() => {
  if (position.value.length === 0) {
    return null
  }
  const result: Record<string, boolean> = {}
  position.value.forEach((dir) => {
    result[dir] = true
  })
  return result
})

const extraContent = computed(() =>
  h(resolveComponent('a-button') as any, null, { default: () => 'Extra Action' }),
)
</script>

<template>
  <div>
    <a-tabs :items="items" :tab-bar-extra-content="extraContent" />
    <br>
    <br>
    <br>
    <div>You can also specify its direction or both side</div>
    <a-divider />
    <a-checkbox-group v-model:value="position" :options="options" />
    <br>
    <br>
    <a-tabs :items="items">
      <template v-if="slot?.left" #leftExtra>
        <a-button class="tabs-extra-demo-button">
          Left Extra Action
        </a-button>
      </template>
      <template v-if="slot?.right" #rightExtra>
        <a-button>Right Extra Action</a-button>
      </template>
    </a-tabs>
  </div>
</template>

<style scoped>
.tabs-extra-demo-button {
  margin-inline-end: 16px;
}

.ant-row-rtl .tabs-extra-demo-button {
  margin-inline-end: 0;
  margin-inline-start: 16px;
}
</style>
```
### Size
Large size tabs are usually used in page header, and small size could be used in Modal.
```vue
<script setup lang="ts">
import { ref } from 'vue'

type TabSize = 'small' | 'medium' | 'large'

interface TabItem {
  key: string
  label: string
  content: string
}

const size = ref<TabSize>('small')
const activeKey = ref('1')
const items = ref<TabItem[]>([
  { key: '1', label: 'Tab 1', content: 'Content of editable tab 1' },
  { key: '2', label: 'Tab 2', content: 'Content of editable tab 2' },
  { key: '3', label: 'Tab 3', content: 'Content of editable tab 3' },
])

const staticItems: TabItem[] = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1)
  return {
    key: id,
    label: `Tab ${id}`,
    content: `Content of tab ${id}`,
  }
})

const cardItems: TabItem[] = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1)
  return {
    key: id,
    label: `Card Tab ${id}`,
    content: `Content of card tab ${id}`,
  }
})

function add() {
  const newKey = String(items.value.length + 1)
  items.value.push({
    key: newKey,
    label: `Tab ${newKey}`,
    content: `Content of editable tab ${newKey}`,
  })
  activeKey.value = newKey
}

function remove(targetKey: string) {
  const targetIndex = items.value.findIndex(item => item.key === targetKey)
  const newItems = items.value.filter(item => item.key !== targetKey)

  if (newItems.length && targetKey === activeKey.value) {
    const newIndex = targetIndex === newItems.length ? targetIndex - 1 : targetIndex
    activeKey.value = newItems[newIndex]?.key ?? newItems[0]?.key ?? '1'
  }

  items.value = newItems
}

function onEdit(targetKey: string | MouseEvent | KeyboardEvent, action: 'add' | 'remove') {
  if (action === 'add') {
    add()
  }
  else if (typeof targetKey === 'string') {
    remove(targetKey)
  }
}
</script>

<template>
  <div>
    <a-radio-group v-model:value="size" style="margin-bottom: 16px;">
      <a-radio-button value="small">
        Small
      </a-radio-button>
      <a-radio-button value="medium">
        Medium
      </a-radio-button>
      <a-radio-button value="large">
        Large
      </a-radio-button>
    </a-radio-group>
    <a-tabs
      default-active-key="1"
      :size="size"
      style="margin-bottom: 32px;"
      :items="staticItems"
    />
    <a-tabs
      default-active-key="1"
      type="card"
      :size="size"
      style="margin-bottom: 32px;"
      :items="cardItems"
    />
    <a-tabs
      v-model:active-key="activeKey"
      type="editable-card"
      :size="size"
      :items="items"
      @edit="onEdit"
    />
  </div>
</template>
```
### Placement
Tab's placement: start, end, top or bottom. Will auto switch to `top` in mobile.
```vue
<script setup lang="ts">
import { ref } from 'vue'

type TabPlacement = 'top' | 'bottom' | 'start' | 'end'

interface TabItem {
  key: string
  label: string
  content: string
}

const tabPlacement = ref<TabPlacement>('start')

const items: TabItem[] = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1)
  return {
    key: id,
    label: `Tab ${id}`,
    content: `Content of Tab ${id}`,
  }
})
</script>

<template>
  <a-space style="margin-bottom: 24px;">
    Tab placement:
    <a-radio-group v-model:value="tabPlacement">
      <a-radio-button value="top">
        top
      </a-radio-button>
      <a-radio-button value="bottom">
        bottom
      </a-radio-button>
      <a-radio-button value="start">
        start
      </a-radio-button>
      <a-radio-button value="end">
        end
      </a-radio-button>
    </a-radio-group>
  </a-space>
  <a-tabs :tab-placement="tabPlacement" :items="items" />
</template>
```
### Custom Popup Search
Customize the Tabs more dropdown menu via `more.popupRender`, here with a search box.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'
import { SearchOutlined } from '@antdv-next/icons'
import { Input, Menu, theme } from 'antdv-next'
import { computed, h, ref } from 'vue'

interface RestTab {
  key: string
  label?: any
  disabled?: boolean
}

const items: TabsProps['items'] = Array.from({ length: 30 }, (_, i) => {
  const id = String(i)
  return {
    key: id,
    label: `Tab-${id}`,
    disabled: i === 28,
    children: `Content of tab ${id}`,
  }
})

const { token } = theme.useToken()

const activeKey = ref('0')
const searchTerm = ref('')

function renderPopup(restTabs: RestTab[], onClose: () => void) {
  const keyword = searchTerm.value.toLowerCase()
  const filterTabs = keyword
    ? restTabs.filter(tab => String(tab.label).toLowerCase().includes(keyword))
    : restTabs

  return h(
    'div',
    {
      style: {
        width: '200px',
        background: token.value.colorBgContainer,
        boxShadow: token.value.boxShadow,
        borderRadius: `${token.value.borderRadiusLG}px`,
        overflow: 'hidden',
      },
    },
    [
      h(
        'div',
        {
          style: {
            padding: `${token.value.paddingXS}px ${token.value.paddingSM}px`,
            borderBottom: `${token.value.lineWidth}px ${token.value.lineType} ${token.value.colorBorder}`,
          },
        },
        [
          h(Input, {
            'placeholder': 'Search tabs...',
            'prefix': h(SearchOutlined),
            'value': searchTerm.value,
            'allowClear': true,
            'onUpdate:value': (value: any) => {
              searchTerm.value = value ?? ''
            },
          }),
        ],
      ),
      filterTabs.length
        ? h('div', { style: { maxHeight: '300px', overflowY: 'auto' } }, [
            h(Menu, {
              selectedKeys: [activeKey.value],
              items: filterTabs.map(tab => ({
                key: tab.key,
                label: tab.label,
                disabled: tab.disabled,
              })),
              onClick: ({ key }) => {
                searchTerm.value = ''
                activeKey.value = key as string
                onClose()
              },
            }),
          ])
        : h(
            'div',
            {
              style: {
                padding: `${token.value.paddingSM}px`,
                color: token.value.colorTextDisabled,
                textAlign: 'center',
              },
            },
            'No matching tabs',
          ),
    ],
  )
}

const more = computed<TabsProps['more']>(() => ({
  trigger: 'click',
  placement: 'bottomLeft',
  popupRender: (_, { restTabs, onClose }) => renderPopup(restTabs as RestTab[], onClose),
}))
</script>

<template>
  <a-tabs v-model:active-key="activeKey" :items="items" :more="more" />
</template>
```
### Card type tab
Another type of Tabs, which doesn't support vertical mode.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'

function onChange(key: string) {
  console.log(key)
}

const items: TabsProps['items'] = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1)
  return {
    key: id,
    label: `Tab ${id}`,
    content: `Content of Tab Pane ${id}`,
  }
})
</script>

<template>
  <a-tabs default-active-key="1" type="card" :items="items" @change="onChange" />
</template>
```
### Add & close tab
Only card type Tabs support adding & closable. Use `closable={false}` to disable close.
```vue
<script setup lang="ts">
import { ref } from 'vue'

interface TabItem {
  key: string
  label: string
  content: string
  closable?: boolean
}

const initialItems: TabItem[] = [
  { key: '1', label: 'Tab 1', content: 'Content of Tab 1' },
  { key: '2', label: 'Tab 2', content: 'Content of Tab 2' },
  { key: '3', label: 'Tab 3', content: 'Content of Tab 3', closable: false },
]

const activeKey = ref(initialItems[0]?.key ?? '1')
const items = ref<TabItem[]>([...initialItems])
let newTabIndex = 0

function onChange(newActiveKey: string) {
  activeKey.value = newActiveKey
}

function add() {
  const newActiveKey = `newTab${newTabIndex++}`
  items.value = [...items.value, { key: newActiveKey, label: 'New Tab', content: 'Content of new Tab' }]
  activeKey.value = newActiveKey
}

function remove(targetKey: string) {
  let newActiveKey = activeKey.value
  let lastIndex = -1
  items.value.forEach((item, i) => {
    if (item.key === targetKey) {
      lastIndex = i - 1
    }
  })
  const newPanes = items.value.filter(item => item.key !== targetKey)
  if (newPanes.length && newActiveKey === targetKey) {
    if (lastIndex >= 0 && newPanes[lastIndex]) {
      newActiveKey = newPanes[lastIndex]!.key!
    }
    else if (newPanes[0]) {
      newActiveKey = newPanes[0]!.key!
    }
  }
  items.value = newPanes
  activeKey.value = newActiveKey
}

function onEdit(targetKey: string | MouseEvent | KeyboardEvent, action: 'add' | 'remove') {
  if (action === 'add') {
    add()
  }
  else {
    remove(targetKey as string)
  }
}
</script>

<template>
  <a-tabs
    v-model:active-key="activeKey"
    type="editable-card"
    :items="items"
    @change="onChange"
    @edit="onEdit"
  />
</template>
```
### Customized trigger of new tab
Hide default plus icon, and bind event for customized trigger.
```vue
<script setup lang="ts">
import { ref } from 'vue'

interface TabItem {
  key: string
  label: string
  content: string
}

const defaultPanes: TabItem[] = Array.from({ length: 2 }).map((_, index) => {
  const id = String(index + 1)
  return {
    key: id,
    label: `Tab ${id}`,
    content: `Content of Tab Pane ${index + 1}`,
  }
})

const activeKey = ref(defaultPanes[0]?.key ?? '1')
const items = ref<TabItem[]>([...defaultPanes])
let newTabIndex = 0

function onChange(key: string) {
  activeKey.value = key
}

function add() {
  const newActiveKey = `newTab${newTabIndex++}`
  items.value = [...items.value, { key: newActiveKey, label: 'New Tab', content: 'New Tab Pane' }]
  activeKey.value = newActiveKey
}

function remove(targetKey: string) {
  const targetIndex = items.value.findIndex(pane => pane.key === targetKey)
  const newPanes = items.value.filter(pane => pane.key !== targetKey)
  if (newPanes.length && targetKey === activeKey.value) {
    const nextPane = newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex]
    if (nextPane) {
      activeKey.value = nextPane.key
    }
  }
  items.value = newPanes
}

function onEdit(targetKey: string | MouseEvent | KeyboardEvent, action: 'add' | 'remove') {
  if (action === 'add') {
    add()
  }
  else {
    remove(targetKey as string)
  }
}
</script>

<template>
  <div>
    <div style="margin-bottom: 16px;">
      <a-button @click="add">
        ADD
      </a-button>
    </div>
    <a-tabs
      v-model:active-key="activeKey"
      type="editable-card"
      hide-add
      :items="items"
      @change="onChange"
      @edit="onEdit"
    />
  </div>
</template>
```
### Customized bar of tab
Use `renderTabBar` with a sticky container to pin the tab bar.
```vue
<script setup lang="ts">
import { theme } from 'antdv-next'
import { ref } from 'vue'

interface TabItem {
  key: string
  label: string
  content: string
  style?: Record<string, any>
}

const items: TabItem[] = Array.from({ length: 3 }).map((_, i) => {
  const id = String(i + 1)
  return {
    key: id,
    label: `Tab ${id}`,
    content: `Content of Tab Pane ${id}`,
    style: i === 0 ? { height: '200px' } : undefined,
  }
})

const { token } = theme.useToken()
const activeKey = ref('1')
</script>

<template>
  <a-tabs v-model:active-key="activeKey" :items="items">
    <template #renderTabBar="{ TabNavListComponent, props }">
      <div
        style="position: sticky; top: 64px; z-index: 1;"
        :style="{ background: token.colorBgContainer }"
      >
        <component :is="TabNavListComponent" v-bind="props" />
      </div>
    </template>
  </a-tabs>
</template>
```
### Draggable Tabs
Use `renderTabBar` with drag support to reorder tabs.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'
import { ref } from 'vue'

type TabItem = NonNullable<TabsProps['items']>[number]

const items = ref<TabItem[]>([
  { key: '1', label: 'Tab 1', content: 'Content of Tab Pane 1' },
  { key: '2', label: 'Tab 2', content: 'Content of Tab Pane 2' },
  { key: '3', label: 'Tab 3', content: 'Content of Tab Pane 3' },
])

const draggingKey = ref<string | null>(null)

function getNodeKey(node: any) {
  return String(node?.props?.['data-node-key'] ?? '')
}

function handleDragStart(key: string, event: DragEvent) {
  if (!key) {
    return
  }
  draggingKey.value = key
  event.dataTransfer?.setData('text/plain', key)
  event.dataTransfer?.setDragImage?.(event.currentTarget as Element, 0, 0)
}

function handleDragEnd() {
  draggingKey.value = null
}

function handleDrop(overKey: string, event: DragEvent) {
  const activeKey = event.dataTransfer?.getData('text/plain')
  if (!activeKey || !overKey || activeKey === overKey) {
    return
  }
  const activeIndex = items.value.findIndex(item => String(item.key) === activeKey)
  const overIndex = items.value.findIndex(item => String(item.key) === overKey)
  if (activeIndex < 0 || overIndex < 0) {
    return
  }
  const next = items.value.slice()
  const [moved] = next.splice(activeIndex, 1)
  if (!moved) {
    return
  }
  next.splice(overIndex, 0, moved)
  items.value = next
}
</script>

<template>
  <a-tabs :items="items" :styles="{ item: { cursor: 'move' } }">
    <template #renderTabBar="{ TabNavListComponent, props }">
      <component :is="TabNavListComponent" v-bind="props">
        <template #default="node">
          <div
            class="draggable-tab" :class="{ 'draggable-tab--dragging': draggingKey === getNodeKey(node) }"
            draggable="true" @dragstart="(event) => handleDragStart(getNodeKey(node), event)" @dragover.prevent
            @drop="(event) => handleDrop(getNodeKey(node), event)" @dragend="handleDragEnd"
          >
            <component :is="node" />
          </div>
        </template>
      </component>
    </template>
  </a-tabs>
</template>

<style>
.draggable-tab {
  margin-left: var(--ant-tabs-horizontal-item-gutter);
}

.draggable-tab:first-child {
  margin-left: 0;
}

.draggable-tab--dragging {
  opacity: 0.6;
}
</style>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Tabs by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { TabsProps } from 'antdv-next'

const items: TabsProps['items'] = [
  { key: '1', label: 'Tab 1', content: 'Content of Tab Pane 1' },
  { key: '2', label: 'Tab 2', content: 'Content of Tab Pane 2' },
  { key: '3', label: 'Tab 3', content: 'Content of Tab Pane 3' },
]

const classes: TabsProps['classes'] = {
  root: 'custom-tabs-root',
}

const stylesObject: TabsProps['styles'] = {
  root: { borderWidth: '2px', borderStyle: 'dashed', padding: '16px', marginBottom: '10px' },
  header: { backgroundColor: 'rgba(245,245,245,0.5)' },
  item: { fontWeight: 'bold', color: '#1890ff', padding: `6px 10px` },
  indicator: { backgroundColor: 'rgba(255,77,79, 0.3)', height: '4px' },
  body: { backgroundColor: 'rgba(230,247,255,0.8)' },
  content: { padding: '16px' },
}

const stylesFn: TabsProps['styles'] = (info) => {
  if (info.props.type === 'card') {
    return {
      root: { backgroundColor: 'rgba(250,250,250, 0.8)', borderColor: '#d9d9d9' },
      header: { textAlign: 'start' },
    } satisfies TabsProps['styles']
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-tabs :items="items" :classes="classes" :styles="stylesObject" />
    <a-tabs type="card" :items="items" :classes="classes" :styles="stylesFn" />
  </a-flex>
</template>

<style>
.custom-tabs-root {
  border-width: 2px;
  border-style: dashed;
  padding: 16px;
  margin-bottom: 10px;
}
</style>
```

## API

### Property {#property}

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| activeKey | Current TabPane's key, support `v-model:active-key` | string | - | - | × |
| addIcon | Customize add icon, only works with `type="editable-card"` | VueNode | `<PlusOutlined />` | - | ✓ |
| animated | Whether to change tabs with animation | boolean \| \{ inkBar: boolean, tabPane: boolean \} | \{ inkBar: true, tabPane: false \} | - | × |
| centered | Centers tabs | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | TabsClassNamesType | - | - | ✓ |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | `The key of first tab` | - | × |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | - | × |
| indicator | Customize `size` and `align` of indicator | \{ size?: number \| (origin: number) => number; align?: `start` \| `center` \| `end` \} | - | - | ✓ |
| items | Configure tab content | TabItemType[] | [] | - | × |
| more | Customize the collapse menu | MoreProps | \{ icon: `<EllipsisOutlined />`, trigger: 'hover' \} | - | ✓ |
| moreIcon | Custom icon of the collapse menu | VueNode | `<EllipsisOutlined />` | - | ✓ |
| removeIcon | The custom icon of remove, only works with `type="editable-card"` | VueNode | `<CloseOutlined />` | - | ✓ |
| renderTabBar | Replace the TabBar | (ctx: \{ props: any; TabNavListComponent: any \}) => VueNode | - | - | × |
| scrollPosition | Scroll alignment of the active tab when switching. `auto` scrolls only when the active tab overflows and aligns it to the nearest edge | `auto` \| `start` \| `center` \| `end` \| number | `auto` | 1.5.5 | ✓ |
| size | Preset tab bar size | `large` \| `medium` \| `small` | `medium` | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | TabsStylesType | - | - | ✓ |
| tabBarExtraContent | Extra content in tab bar | VueNode \| \{ left?: VueNode, right?: VueNode \} | - | - | × |
| tabBarGutter | The gap between tabs | number | - | - | × |
| tabBarStyle | Tab bar style object | CSSProperties | - | - | × |
| tabPlacement | Placement of tabs | `top` \| `end` \| `bottom` \| `start` | `top` | - | × |
| destroyOnHidden | Whether destroy inactive TabPane when change tab | boolean | false | - | × |
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | - | × |

### TabItemType {#tabitemtype}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| closeIcon | Customize close icon in TabPane's head. Setting to `null` or `false` hides the close button | VueNode | - | - |
| destroyOnHidden | Whether destroy inactive TabPane when change tab | boolean | false | - |
| disabled | Set TabPane disabled | boolean | false | - |
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | - |
| key | TabPane's key | string | - | - |
| label | Tab header text element | VueNode | - | - |
| icon | Tab header icon element | VueNode | - | - |
| content | Tab content element | VueNode | - | - |
| closable | Whether a close (x) button is visible, only works while `type="editable-card"` | boolean | true | - |

### MoreProps {#moreprops}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| icon | The custom icon | VueNode | - | - |
| popupRender | Customize the dropdown menu render | (menu: VueNode, info: \{ restTabs: Tab[], onClose: () => void \}) => VueNode | - | - |
| DropdownProps | Dropdown props | DropdownProps | - | - |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback executed when active tab is changed | (activeKey: string) => void | - |
| edit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (e: MouseEvent \| KeyboardEvent \| string, action: 'add' \| 'remove') => void | - |
| tabClick | Callback executed when tab is clicked | (key: string, event: MouseEvent) => void | - |
| tabScroll | Trigger when tab scroll | (\{ direction: `left` \| `right` \| `top` \| `bottom` \}) => void | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| addIcon | Customize add icon, only works with `type="editable-card"` | () => any | - |
| moreIcon | Custom collapse menu icon | () => any | - |
| removeIcon | The custom icon of remove, only works with `type="editable-card"` | () => any | - |
| labelRender | Custom label render | (args: \{ item: TabItemType; index: number \}) => any | - |
| contentRender | Custom content render | (args: \{ item: TabItemType; index: number \}) => any | - |
| renderTabBar | Replace the TabBar | (args: \{ props: any; TabNavListComponent: any \}) => any | - |
| rightExtra | Extra content on the right | () => any | - |
| leftExtra | Extra content on the left | () => any | - |

### Methods {#methods}

| Method | Description | Type | Version |
| --- | --- | --- | --- |
| nativeElement | Root element | any | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Tabs"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Tag
URL: https://www.antdv-next.com/components/tag.md
---

## When To Use {#when-to-use}

- It can be used to tag by dimension or property.
- When categorizing.

## Examples {#examples}

### Basic
Usage of basic Tag, and it could be closable and customize close button by set `closeIcon` property, will display default close button when `closeIcon` is setting to `true`. Closable Tag supports `onClose` events.
```vue
<script setup lang="ts">
import { CloseCircleOutlined, DeleteOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

function preventDefault() {
  console.log('Clicked! Default Not Close.')
}
const tag2 = shallowRef(true)
function handleCloseTag2() {
  tag2.value = false
}
const tag3 = shallowRef(true)
function handleCloseTag3() {
  tag3.value = false
}
function handleClick() {
  console.log('click')
}
</script>

<template>
  <a-flex gap="small" align="center" wrap>
    <a-tag @click="handleClick">
      Tag 1
    </a-tag>

    <a-tag>
      <a href="https://github.com/ant-design/ant-design/issues/1862" target="_blank" rel="noopener noreferrer">
        Link
      </a>
    </a-tag>
    <a-tag close-icon @close="preventDefault">
      Prevent Default
    </a-tag>
    <a-tag v-if="tag2" @close="handleCloseTag2">
      <template #closeIcon>
        <CloseCircleOutlined />
      </template>
      Tag 2
    </a-tag>

    <a-tag
      v-if="tag3"
      :closable="{
        'aria-label': 'Close Button',
      }"
      @close="handleCloseTag3"
    >
      <template #closeIcon>
        <DeleteOutlined />
      </template>
      Tag 3
    </a-tag>
  </a-flex>
</template>
```
### Colorful Tag
We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.
```vue
<script setup lang="ts">
const variants = ['filled', 'solid', 'outlined'] as const
const presets = [
  'magenta',
  'red',
  'volcano',
  'orange',
  'gold',
  'lime',
  'green',
  'cyan',
  'blue',
  'geekblue',
  'purple',
]
const customs = ['#f50', '#2db7f5', '#87d068', '#108ee9']
</script>

<template>
  <div v-for="variant in variants" :key="variant">
    <a-divider title-placement="start">
      Presets {{ variant }}
    </a-divider>
    <a-flex gap="small" align="center" wrap>
      <template v-for="color in presets" :key="color">
        <a-tag :variant="variant" :color="color">
          {{ color }}
        </a-tag>
      </template>
    </a-flex>
  </div>
  <div v-for="variant in variants" :key="variant">
    <a-divider title-placement="start">
      Custom {{ variant }}
    </a-divider>
    <a-flex gap="small" align="center" wrap>
      <template v-for="color in customs" :key="color">
        <a-tag :variant="variant" :color="color">
          {{ color }}
        </a-tag>
      </template>
    </a-flex>
  </div>
</template>
```
### Add & Remove Dynamically
Generating a set of Tags by array, you can add and remove dynamically.
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { PlusOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'
import { ref, watch } from 'vue'

const tagInputStyle: CSSProperties = {
  width: '64px',
  height: '22px',
  marginInlineEnd: '8px',
  verticalAlign: 'top',
}
const { token } = theme.useToken()
const tags = ref<string[]>(['Unremovable', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const inputValue = ref('')
const editInputIndex = ref(-1)
const editInputValue = ref('')
const inputRef = ref()
const editInputRef = ref()

watch(inputVisible, (val: boolean) => {
  if (val) {
    inputRef.value?.$el?.focus()
  }
})
watch(editInputIndex, () => {
  editInputRef.value?.$el?.focus()
})
function handleClose(removedTag: string) {
  tags.value = tags.value.filter(tag => tag !== removedTag)
}
function showInput() {
  inputVisible.value = true
}
function handleInputConfirm() {
  if (inputValue.value && !tags.value.includes(inputValue.value)) {
    tags.value = [...tags.value, inputValue.value]
  }
  inputVisible.value = false
  inputValue.value = ''
}
function handleEditInputConfirm() {
  const newTags = [...tags.value]
  newTags[editInputIndex.value] = editInputValue.value
  tags.value = newTags
  editInputIndex.value = -1
  editInputValue.value = ''
}
const tagPlusStyle: CSSProperties = {
  height: '22px',
  background: token.value?.colorBgContainer,
  borderStyle: 'dashed',
}
</script>

<template>
  <a-flex gap="small" align="center" wrap>
    <template v-for="(tag, index) in tags">
      <template v-if="index === editInputIndex">
        <a-input
          :key="tag"
          ref="editInputRef"
          v-model:value="editInputValue"
          size="small"
          :style="tagInputStyle"
          @blur="handleEditInputConfirm"
          @press.enter="handleEditInputConfirm"
        />
      </template>
      <template v-if="tag.length > 20">
        <a-tooltip :key="tag" :title="tag">
          <a-tag :key="tag" :closable="index !== 0" style="user-select: none;" @close="handleClose(tag)">
            <span
              @doubleClick="(e: MouseEvent) => {
                if (index !== 0) {
                  editInputIndex = index
                  editInputValue = tag
                  e.preventDefault()
                }
              }"
            >{{ `${tag.slice(0, 20)}...` }}</span>
          </a-tag>
        </a-tooltip>
      </template>
      <template v-else>
        <a-tag :key="tag" :closable="index !== 0" style="user-select: none;" @close="handleClose(tag)">
          <span
            @doubleClick="(e: MouseEvent) => {
              if (index !== 0) {
                editInputIndex = index
                editInputValue = tag
                e.preventDefault()
              }
            }"
          >{{ tag }}</span>
        </a-tag>
      </template>
    </template>
    <template v-if="inputVisible">
      <a-input
        ref="inputRef"
        v-model:value="inputValue"
        type="text" size="small"
        :style="tagInputStyle"
        @blur="handleInputConfirm"
        @press-enter="handleInputConfirm"
      />
    </template>
    <template v-else>
      <a-tag :style="tagPlusStyle" @click="showInput">
        <PlusOutlined />
        New Tag
      </a-tag>
    </template>
  </a-flex>
</template>
```
### Checkable
`CheckableTag` works like Checkbox, click it to toggle checked state. `CheckableTagGroup` provides function that is similar to `CheckboxGroup` or `RadioGroup`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const tagsData = ['Movies', 'Books', 'Music', 'Sports']
const checked = ref(true)
const singleSelected = ref('Books')
const multipleSelected = ref<string[]>(['Movies', 'Music'])
</script>

<template>
  <a-form :label-col="{ span: 6 }">
    <a-form-item label="Checkable">
      <a-checkable-tag :checked="checked" @change="checked = !checked">
        Yes
      </a-checkable-tag>
    </a-form-item>
    <a-form-item label="Single">
      <a-checkable-tag-group v-model:value="singleSelected" :checked="singleSelected" :options="tagsData" />
    </a-form-item>
    <a-form-item label="Multiple">
      <a-checkable-tag-group v-model:value="multipleSelected" multiple :checked="multipleSelected" :options="tagsData" />
    </a-form-item>
  </a-form>
</template>
```
### Icon
You can add a custom icon to the tag via the `icon` slot.

The `icon` slot also accepts a bare `<svg>` element from a third-party icon library. It stays vertically centred with the label whether it is sized in `em` or in `px`.
```vue
<script setup lang="ts">
import { FacebookOutlined, LinkedinOutlined, TwitterOutlined, YoutubeOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const checked = ref<[boolean, boolean, boolean, boolean]>([true, false, false, false])

function handleChange(index: number, value: boolean) {
  checked.value[index] = value
}
</script>

<template>
  <a-divider title-placement="start">
    Tag with icon
  </a-divider>
  <a-flex gap="small" wrap align="center">
    <a-tag color="#55acee">
      <template #icon>
        <TwitterOutlined />
      </template>
      Twitter
    </a-tag>
    <a-tag color="#cd201f">
      <template #icon>
        <YoutubeOutlined />
      </template>
      Youtube
    </a-tag>
    <a-tag color="#3b5999">
      <template #icon>
        <FacebookOutlined />
      </template>
      Facebook
    </a-tag>
    <a-tag color="#55acee">
      <template #icon>
        <LinkedinOutlined />
      </template>
      LinkedIn
    </a-tag>
  </a-flex>
  <a-divider title-placement="start">
    CheckableTag with icon
  </a-divider>
  <a-flex gap="small" wrap align="center">
    <a-checkable-tag
      :checked="checked[0]"
      @change="(value: boolean) => handleChange(0, value)"
    >
      <template #icon>
        <TwitterOutlined />
      </template>
      Twitter
    </a-checkable-tag>
    <a-checkable-tag
      :checked="checked[1]"
      @change="(value: boolean) => handleChange(1, value)"
    >
      <template #icon>
        <YoutubeOutlined />
      </template>
      Youtube
    </a-checkable-tag>
    <a-checkable-tag
      :checked="checked[2]"
      @change="(value: boolean) => handleChange(2, value)"
    >
      <template #icon>
        <FacebookOutlined />
      </template>
      Facebook
    </a-checkable-tag>
    <a-checkable-tag
      :checked="checked[3]"
      @change="(value: boolean) => handleChange(3, value)"
    >
      <template #icon>
        <LinkedinOutlined />
      </template>
      LinkedIn
    </a-checkable-tag>
  </a-flex>
  <a-divider title-placement="start">
    Tag with third-party icon
  </a-divider>
  <a-flex gap="small" wrap align="center">
    <a-tag color="#f50">
      <template #icon>
        <!-- Sized in `em` -->
        <svg viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor" aria-hidden="true">
          <path d="M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.2 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z" />
        </svg>
      </template>
      Star (em)
    </a-tag>
    <a-tag color="#eb2f96">
      <template #icon>
        <!-- Sized in `px`, like lucide's default -->
        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
          <path d="M12 20.7l-1.4-1.3C5.4 14.8 2 11.7 2 8a5 5 0 0 1 10-1.7A5 5 0 0 1 22 8c0 3.7-3.4 6.8-8.6 11.4L12 20.7z" />
        </svg>
      </template>
      Heart (px)
    </a-tag>
    <a-tag closable>
      <template #icon>
        <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
          <path d="M12 20.7l-1.4-1.3C5.4 14.8 2 11.7 2 8a5 5 0 0 1 10-1.7A5 5 0 0 1 22 8c0 3.7-3.4 6.8-8.6 11.4L12 20.7z" />
        </svg>
      </template>
      Closable
    </a-tag>
  </a-flex>
</template>
```
### Status Tag
We preset five different colors, you can set color property such as `success`,`processing`,`error`,`default` and `warning` to indicate specific status.
```vue
<script setup lang="ts">
import {
  CheckCircleOutlined,
  ClockCircleOutlined,
  CloseCircleOutlined,
  ExclamationCircleOutlined,
  SyncOutlined,
} from '@antdv-next/icons'

const variants = ['filled', 'solid', 'outlined'] as const
const presets = [
  { status: 'success', icon: CheckCircleOutlined },
  { status: 'processing', icon: SyncOutlined },
  { status: 'warning', icon: ExclamationCircleOutlined },
  { status: 'error', icon: CloseCircleOutlined },
  { status: 'default', icon: ClockCircleOutlined },
]
</script>

<template>
  <div v-for="variant in variants" :key="variant">
    <a-divider title-placement="start">
      {{ variant }}
    </a-divider>
    <a-flex gap="small" wrap align="center">
      <template v-for="preset in presets" :key="preset.status">
        <a-tag :variant="variant" :color="preset.status">
          <template #icon>
            <component :is="preset.icon" :spin="preset.icon === SyncOutlined" />
          </template>
          {{ preset.status }}
        </a-tag>
      </template>
    </a-flex>
  </div>
</template>
```
### Customize close
The close icon can be customized using `closeIcon`.
```vue
<script setup lang="ts">
import { CloseCircleOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-flex gap="small" align="center" wrap>
    <a-tag closable close-icon="关闭">
      Tag 1
    </a-tag>
    <a-tag closable>
      Tag 2
      <template #closeIcon>
        <CloseCircleOutlined />
      </template>
    </a-tag>
  </a-flex>
</template>
```
### Disabled
Set the `disabled` property to make the tag unusable.
```vue
<script setup lang="ts">
import { CheckCircleOutlined, CloseCircleOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'
import { ref } from 'vue'

const selectedTags = ref<string[]>(['Books'])
function handleClose(tagName: string) {
  console.log(`Tag ${tagName} closed`)
  message.info(`Tag ${tagName} closed`)
};
</script>

<template>
  <a-flex vertical gap="medium">
    <a-flex gap="small" wrap>
      <a-tag disabled>
        Basic Tag
      </a-tag>
      <a-tag disabled>
        <a href="https://ant.design">Link Tag</a>
      </a-tag>
      <a-tag disabled href="https://ant.design">
        Href Tag
      </a-tag>
      <a-tag disabled color="success">
        Icon Tag
        <template #icon>
          <CheckCircleOutlined />
        </template>
      </a-tag>
    </a-flex>
  </a-flex>

  <a-flex gap="small" wrap>
    <a-tag disabled color="red">
      Preset Color Red
    </a-tag>
    <a-tag disabled color="#f50">
      Custom Color #f50 Outlined
    </a-tag>
    <a-tag disabled color="#f50" variant="solid">
      Custom Color #f50 Filled
    </a-tag>
    <a-tag disabled color="#f50" variant="filled">
      Custom Color #f50 Borderless
    </a-tag>
    <a-tag disabled color="success">
      Preset Status Success
    </a-tag>
  </a-flex>

  <a-flex gap="small" wrap>
    <template v-for="tag in ['Books', 'Movies', 'Music']" :key="tag">
      <a-checkable-tag :checked="selectedTags.includes(tag)" disabled :value="selectedTags.includes(tag)">
        {{ tag }}
      </a-checkable-tag>
    </template>
  </a-flex>

  <a-flex gap="small" wrap>
    <a-tag disabled closable @close="() => handleClose('Closable')">
      Closable Tag
    </a-tag>
    <a-tag disabled closable color="success" @close="() => handleClose('Closable Success')">
      Closable with Icon
      <template #icon>
        <CheckCircleOutlined />
      </template>
    </a-tag>
    <a-tag disabled closable>
      Closable with Custom Icon
      <template #closeIcon>
        <CloseCircleOutlined />
      </template>
    </a-tag>
  </a-flex>

  <a-flex gap="small" wrap>
    <a-tag disabled variant="filled">
      Borderless Basic
    </a-tag>
    <a-tag disabled variant="filled" color="success">
      Borderless with Icon
      <template #icon>
        <CheckCircleOutlined />
      </template>
    </a-tag>
    <a-tag disabled variant="filled" closable @close="() => handleClose('Borderless Closable')">
      Borderless Closable
    </a-tag>
  </a-flex>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Tag by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import { CheckCircleOutlined, CloseCircleOutlined } from '@antdv-next/icons'

const tagStyles = {
  root: {
    backgroundColor: '#e6f7ff',
  },
  icon: {
    color: '#52c41a',
  },
  content: {
    color: '#262626',
  },
}

const filledTagStyles = {
  root: {
    backgroundColor: '#F5EFFF',
  },
  icon: {
    color: '#8F87F1',
  },
  content: {
    color: '#8F87F1',
  },
}

const groupStyles = {
  root: {
    gap: '12px',
    padding: '8px 12px',
    backgroundColor: 'rgba(82, 196, 26, 0.08)',
    borderRadius: '8px',
  },
  item: {
    backgroundColor: 'rgba(82, 196, 26, 0.1)',
    borderColor: 'rgba(82, 196, 26, 0.3)',
    color: '#52c41a',
  },
}

const multipleGroupStyles = {
  root: {
    gap: '16px',
    padding: '8px 12px',
    backgroundColor: 'rgba(143, 135, 241, 0.08)',
    borderRadius: '8px',
  },
  item: {
    backgroundColor: 'rgba(143, 135, 241, 0.1)',
    borderColor: 'rgba(143, 135, 241, 0.3)',
    color: '#8F87F1',
    fontWeight: 500,
  },
}

const options1 = ['React', 'Vue', 'Angular']
const options2 = ['meet-student', 'thinkasany']
</script>

<template>
  <a-space size="large" vertical>
    <a-flex gap="medium">
      <a-tag :classes="{ root: 'custom-tag-root' }" :styles="tagStyles">
        <template #icon>
          <CheckCircleOutlined />
        </template>
        Object
      </a-tag>
      <a-tag
        variant="filled"
        :classes="{ root: 'custom-tag-root' }"
        :styles="filledTagStyles"
      >
        <template #icon>
          <CloseCircleOutlined />
        </template>
        Function
      </a-tag>
    </a-flex>
    <a-flex vertical gap="medium">
      <a-checkable-tag-group
        :classes="{ root: 'custom-tag-root' }"
        :styles="groupStyles"
        :options="options1"
      />
      <a-checkable-tag-group
        :classes="{ root: 'custom-tag-root' }"
        :styles="multipleGroupStyles"
        :options="options2"
        multiple
      />
    </a-flex>
  </a-space>
</template>

<style scoped>
.custom-tag-root {
  padding: 2px 6px;
  border-radius: 4px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Tag

#### Props {#tag-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| closable | Whether the Tag can be closed | boolean | false | - | ✓ |
| closeIcon | Custom close icon. Setting to `null` or `false` hides the close button | VueNode | - | - | ✓ |
| color | Color of the Tag | string | - | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | TagClassNamesType | - | - | ✓ |
| disabled | Whether the tag is disabled | boolean | false | - | × |
| href | The address to jump when clicking, when specified the tag will be rendered as `<a>` tag | string | - | - | × |
| icon | Set the icon of tag | VueNode | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | TagStylesType | - | - | ✓ |
| target | Same as target attribute of `<a>`, works when href is specified | string | - | - | × |
| variant | Variant of the tag | `filled` \| `solid` \| `outlined` | `filled` | - | ✓ |

#### Events {#tag-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| close | Callback executed when tag is closed (can be prevented by `e.preventDefault()`) | (e: MouseEvent) =&gt; void | - |

#### Slots {#tag-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| closeIcon | Custom close icon. Setting to `null` or `false` hides the close button | () =&gt; VueNode | - |
| icon | Set the icon of tag | () =&gt; VueNode | - |

### Tag.CheckableTag

#### Props {#checkable-tag-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| checked | Checked status of Tag. This is a controlled component | boolean | false | - |
| icon | Set the icon of tag | VueNode | - | - |

#### Events {#checkable-tag-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback executed when Tag is checked/unchecked | (checked: boolean) =&gt; void | - |

### Tag.CheckableTagGroup

#### Props {#checkable-tag-group-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | Record&lt;SemanticDOM, string&gt; | - | - |
| defaultValue | Initial value | string \| number \| Array&lt;string \| number&gt; \| null | - | - |
| disabled | Disable check/uncheck | boolean | false | - |
| multiple | Multiple select mode | boolean | false | - |
| options | Option list | Array&lt;&#123; label: VueNode; value: string \| number &#125; \| string \| number&gt; | - | - |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record&lt;SemanticDOM, CSSProperties&gt; | - | - |
| value | Value of checked tag(s), support `v-model:value` | string \| number \| Array&lt;string \| number&gt; \| null | - | - |

#### Events {#checkable-tag-group-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback when Tag is checked/unchecked | (value: string \| number \| Array&lt;string \| number&gt; \| null) =&gt; void | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Tag"></ComponentTokenTable>

---
Title: Timeline
URL: https://www.antdv-next.com/components/timeline.md
---

## When To Use {#when-to-use}

- When a series of information needs to be ordered by time (ascending or descending).
- When you need a timeline to make a visual connection.

## Examples {#examples}

### Basic
Basic timeline.
```vue
<script setup lang="ts">
const items = [
  {
    content: 'Create a services site 2015-09-01',
  },
  {
    content: 'Solve initial network problems 2015-09-01',
  },
  {
    content: 'Technical testing 2015-09-01',
  },
  {
    content: 'Network problems being solved 2015-09-01',
  },
]
</script>

<template>
  <a-timeline :items="items" />
</template>
```
### Variant
Use the `variant` to set the style of the timeline.
```vue
<script setup lang="ts">
const items = [
  {
    content: 'Create a services site 2015-09-01',
  },
  {
    content: 'Solve initial network problems 2015-09-01',
  },
  {
    content: 'Technical testing 2015-09-01',
  },
  {
    content: 'Network problems being solved 2015-09-01',
  },
]
</script>

<template>
  <a-timeline variant="filled" :items="items" />
</template>
```
### Pending
Node supports `loading` to indicate loading, and `reverse` property to control the order of nodes.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const reverse = ref(false)

function handleClick() {
  reverse.value = !reverse.value
}

const items = [
  {
    content: 'Create a services site 2015-09-01',
  },
  {
    content: 'Solve initial network problems 2015-09-01',
  },
  {
    content: 'Technical testing 2015-09-01',
  },
  {
    loading: true,
    content: 'Recording...',
  },
]
</script>

<template>
  <a-flex vertical gap="medium" align="flex-start">
    <a-timeline :reverse="reverse" :items="items" />
    <a-button type="primary" @click="handleClick">
      Toggle Reverse
    </a-button>
  </a-flex>
</template>
```
### Alternate
Alternate timeline.
```vue
<script setup lang="ts">
import { ClockCircleOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const items = [
  {
    content: 'Create a services site 2015-09-01',
  },
  {
    content: 'Solve initial network problems 2015-09-01',
    color: 'green',
  },
  {
    icon: () => h(ClockCircleOutlined, { style: { fontSize: '16px' } }),
    content: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.`,
  },
  {
    color: 'red',
    content: 'Network problems being solved 2015-09-01',
  },
  {
    content: 'Create a services site 2015-09-01',
  },
  {
    icon: () => h(ClockCircleOutlined, { style: { fontSize: '16px' } }),
    content: 'Technical testing 2015-09-01',
  },
]
</script>

<template>
  <a-timeline mode="alternate" :items="items" />
</template>
```
### Horizontal
Horizontal layout.
```vue
<script setup lang="ts">
const items = [
  {
    content: 'Init',
  },
  {
    content: 'Start',
  },
  {
    content: 'Pending',
  },
  {
    content: 'Complete',
  },
]
</script>

<template>
  <a-flex vertical>
    <a-timeline mode="start" orientation="horizontal" :items="items" />
    <a-divider />
    <a-timeline mode="right" orientation="horizontal" :items="items" />
    <a-divider />
    <a-timeline mode="alternate" orientation="horizontal" :items="items" />
  </a-flex>
</template>
```
### Custom
Set a node as an icon or other custom element.
```vue
<script setup lang="ts">
import { ClockCircleOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'
import { h } from 'vue'

const { token } = theme.useToken()

const items = [
  {
    content: 'Create a services site 2015-09-01',
  },
  {
    content: 'Solve initial network problems 2015-09-01',
  },
  {
    icon: () => h(ClockCircleOutlined, {
      style: {
        fontSize: '20px',
        background: token.value.colorBgContainer,
      },
    }),
    color: 'red',
    content: 'Technical testing 2015-09-01',
  },
  {
    content: 'Network problems being solved 2015-09-01',
  },
]
</script>

<template>
  <a-timeline :items="items" />
</template>
```
### Dot render
Customize timeline dots per item with the `dotRender` slot (or the prop of the same name). When the slot renders nothing for an item, it falls back to the item `icon` or the default dot. `labelRender` / `contentRender` work the same way.
```vue
<script setup lang="ts">
import { CheckCircleOutlined, CloseCircleOutlined } from '@antdv-next/icons'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const items = [
  { content: 'Create a services site 2015-09-01', state: 'done' },
  { content: 'Solve initial network problems 2015-09-01', state: 'done' },
  { content: 'Technical testing 2015-09-01', color: 'red', state: 'failed' },
  { content: 'Network problems being solved 2015-09-01' },
]
</script>

<template>
  <a-timeline :items="items">
    <template #dotRender="{ item }">
      <CheckCircleOutlined
        v-if="item.state === 'done'"
        class="dot-icon"
        :style="{ background: token.colorBgContainer }"
      />
      <CloseCircleOutlined
        v-else-if="item.state === 'failed'"
        class="dot-icon"
        :style="{ background: token.colorBgContainer }"
      />
    </template>
  </a-timeline>
</template>

<style scoped>
.dot-icon {
  font-size: 16px;
}
</style>
```
### SFC Mode
support sfc mode
```vue
<script setup lang="ts">
import { ClockCircleFilled } from '@antdv-next/icons'
</script>

<template>
  <div>
    <a-timeline>
      <a-timeline-item>
        测试
      </a-timeline-item>
      <a-timeline-item color="red">
        <div class="c-primary">
          测试
        </div>
        <template #icon>
          <ClockCircleFilled />
        </template>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>
```
### Right Alternate
End alternate timeline.
```vue
<script setup lang="ts">
import { ClockCircleOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const items = [
  {
    content: 'Create a services site 2015-09-01',
  },
  {
    content: 'Solve initial network problems 2015-09-01',
  },
  {
    icon: () => h(ClockCircleOutlined),
    color: 'red',
    content: 'Technical testing 2015-09-01',
  },
  {
    content: 'Network problems being solved 2015-09-01',
  },
]
</script>

<template>
  <a-timeline mode="right" :items="items" />
</template>
```
### Label
Use `title` show time alone.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const mode = ref<'start' | 'alternate' | 'end'>('start')

const items = [
  {
    title: '2015-09-01',
    content: 'Create a services',
  },
  {
    title: '2015-09-01 09:12:11',
    content: 'Solve initial network problems',
  },
  {
    content: 'Technical testing',
  },
  {
    title: '2015-09-01 09:12:11',
    content: 'Network problems being solved',
  },
]
</script>

<template>
  <div>
    <a-radio-group v-model:value="mode" :style="{ marginBottom: '20px' }">
      <a-radio value="start">
        Start
      </a-radio>
      <a-radio value="end">
        End
      </a-radio>
      <a-radio value="alternate">
        Alternate
      </a-radio>
    </a-radio-group>
    <a-timeline :mode="mode" :items="items" />
  </div>
</template>
```
### Title Offset
Use `titleSpan` to set the title span space.
```vue
<script lang="ts" setup>
const items = [
  { title: '05:10', content: 'Create a services' },
  { title: '09:03', content: 'Solve initial network problems' },
  { content: 'Technical testing' },
  { title: '11:28', content: 'Network problems being solved' },
]
</script>

<template>
  <a-flex vertical gap="medium">
    <a-typography-title :level="5" :style="{ margin: 0 }">
      titleSpan = 100px
    </a-typography-title>
    <a-timeline :items="items" title-span="100px" />
    <a-typography-title :level="5" :style="{ margin: 0 }">
      titleSpan = 25%
    </a-typography-title>
    <a-timeline :items="items" title-span="25%" />
    <a-typography-title :level="5" :style="{ margin: 0 }">
      titleSpan = 18, mode = end
    </a-typography-title>
    <a-timeline :items="items" :title-span="18" mode="end" />
  </a-flex>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Timeline by passing objects/functions through `classes` and `styles`.
```vue
<script lang="ts" setup>
const classes = {
  root: 'custom-timeline-root',
}

const styles = {
  itemIcon: {
    borderColor: '#1890ff',
  },
}

function stylesFn(info: any) {
  if (info.props.orientation === 'vertical') {
    return {
      root: {
        padding: '10px 6px',
        border: '1px solid #A294F9',
      },
      itemIcon: {
        borderColor: '#A294F9',
      },
    }
  }
  return {}
}

const items = [
  {
    title: '2015-09-01',
    content: 'Create a services site',
  },
  {
    title: '2015-09-01 09:12:11',
    content: 'Solve initial network problems',
  },
  {
    content: 'Technical testing',
  },
]
</script>

<template>
  <a-flex vertical gap="medium">
    <a-timeline :items="items" orientation="horizontal" :styles="styles" :classes="classes" />
    <a-timeline :items="items" orientation="vertical" :styles="stylesFn" :classes="classes" />
  </a-flex>
</template>

<style scoped>
.custom-timeline-root {
  padding: 8px;
  border-radius: 4px;
}
</style>
```
### Semantic Sample
Achieve richer custom styles by using semantic structure.
```vue
<script lang="ts" setup>
const items = [
  {
    content: 'Create a services site 2015-09-01',
  },
  {
    content: 'Solve initial network problems 2015-09-01',
    styles: {
      root: {
        height: '100px',
      },
      rail: {
        borderStyle: 'dashed',
      },
    },
  },
  {
    content: '...for a long time...',
    styles: {
      root: {
        height: '100px',
      },
      rail: {
        borderStyle: 'dashed',
      },
      content: {
        opacity: 0.45,
      },
    },
  },
  {
    content: 'Technical testing 2015-09-01',
  },

  {
    content: 'Network problems being solved 2015-09-01',
  },
]
</script>

<template>
  <a-timeline :items="items" />
</template>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| classes | Customize class for each semantic structure inside the component. Supports object or function | Record&lt;SemanticDOM, string&gt; | - | - | ✓ |
| items | Each node of timeline | TimelineItemProps[] | - | - | × |
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `left` \| `alternate` \| `right` | - | - | × |
| pending | Set the last ghost node's existence or its content. Use `item.loading` instead | VueNode | false | - | × |
| pendingDot | Set the dot of the last ghost node when pending is true. Use `item.icon` instead | VueNode | &lt;LoadingOutlined /&gt; | - | × |
| reverse | Whether reverse nodes or not | boolean | false | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record&lt;SemanticDOM, CSSProperties&gt; | - | - | ✓ |
| dotRender | Custom rendering function for timeline dot | (params: &#123; item: TimelineItemProps, index: number &#125;) =&gt; VueNode | - | - | × |
| labelRender | Custom rendering function for timeline label | (params: &#123; item: TimelineItemProps, index: number &#125;) =&gt; VueNode | - | - | × |
| contentRender | Custom rendering function for timeline content | (params: &#123; item: TimelineItemProps, index: number &#125;) =&gt; VueNode | - | - | × |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| pending | Set the last ghost node's existence or its content | () =&gt; VueNode | - |
| pendingDot | Set the dot of the last ghost node when pending is true | () =&gt; VueNode | - |
| dotRender | Custom rendering function for timeline dot | (params: &#123; item: TimelineItemProps, index: number &#125;) =&gt; VueNode | - |
| labelRender | Custom rendering function for timeline label | (params: &#123; item: TimelineItemProps, index: number &#125;) =&gt; VueNode | - |
| contentRender | Custom rendering function for timeline content | (params: &#123; item: TimelineItemProps, index: number &#125;) =&gt; VueNode | - |

## Types

### TimelineItem

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| children | Set the content | VueNode | - | - |
| color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` | - |
| dot | Customize timeline dot | VueNode | - | - |
| key | Unique key for this item | Key | - | - |
| label | Set the label | VueNode | - | - |
| loading | Set loading state | boolean | false | - |
| pending | Whether this item is pending | boolean | false | - |
| position | Customize node position | `left` \| `right` | - | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token {#design-token}

<ComponentTokenTable component="Timeline"></ComponentTokenTable>

---
Title: TimePicker
URL: https://www.antdv-next.com/components/time-picker.md
---

## When To Use

By clicking the input box, you can select a time from a popup panel.

## Examples

### Basic
Click `TimePicker`, and then we could select or input a time in panel.
```vue
<script setup lang="ts">
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import { shallowRef } from 'vue'

dayjs.extend(customParseFormat)

const value = shallowRef()

function onChange(time: any, timeString: string) {
  console.log(time, timeString)
}
</script>

<template>
  <a-time-picker
    v-model:value="value"
    @change="onChange"
  />
</template>
```
### Under Control
`value` and `onChange` should be used together,
```vue
<script setup lang="ts">
import type { Dayjs } from 'dayjs'
import { shallowRef } from 'vue'

const value = shallowRef<Dayjs>()
</script>

<template>
  <a-time-picker v-model:value="value" />
</template>
```
### Value Format
Use `valueFormat` to define the time value format. With it, `v-model:value` can directly use string values.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const singleValue = shallowRef<string | null>('12:08:23')
const rangeValue = shallowRef<[string | null, string | null] | null>(['09:30:00', '18:00:00'])
</script>

<template>
  <a-space vertical :size="12">
    <a-space>
      <a-time-picker
        v-model:value="singleValue"
        value-format="HH:mm:ss"
        format="HH:mm:ss"
        allow-clear
      />
      <span>value: {{ singleValue ?? 'null' }}</span>
    </a-space>

    <a-space>
      <a-time-range-picker
        v-model:value="rangeValue"
        value-format="HH:mm:ss"
        format="HH:mm:ss"
        allow-clear
      />
      <span>value: {{ rangeValue ? `${rangeValue[0]} ~ ${rangeValue[1]}` : 'null' }}</span>
    </a-space>
  </a-space>
</template>
```
### Three Sizes
The input box comes in three sizes: large, medium and small. Large is used in the form, while the medium size is the default.
```vue
<script setup lang="ts">
import dayjs from 'dayjs'

const defaultValue = dayjs('12:08:23', 'HH:mm:ss')
</script>

<template>
  <a-space wrap>
    <a-time-picker :default-value="defaultValue" size="large" />
    <a-time-picker :default-value="defaultValue" />
    <a-time-picker :default-value="defaultValue" size="small" />
  </a-space>
</template>
```
### Need Confirm
TimePicker will automatically determine whether to show a confirm button according to the `picker` property. You can also set the `needConfirm` property to determine whether to show a confirm button. When `needConfirm` is set, the user must click the confirm button to complete the selection. Otherwise, the selection will be submitted when the picker loses focus or select a time.
```vue
<script setup lang="ts">
function onChange(time: any, timeString: string) {
  console.log(time, timeString)
}
</script>

<template>
  <a-time-picker need-confirm @change="onChange" />
</template>
```
### disabled
A disabled state of the `TimePicker`.
```vue
<script setup lang="ts">
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'

dayjs.extend(customParseFormat)
const defaultValue = dayjs('12:08:23', 'HH:mm:ss')
</script>

<template>
  <a-time-picker :default-value="defaultValue" disabled />
</template>
```
### Hour and minute
While part of `format` is omitted, the corresponding column in panel will disappear, too.
```vue
<script setup lang="ts">
import dayjs from 'dayjs'

const format = 'HH:mm'
const defaultValue = dayjs('12:08', format)
</script>

<template>
  <a-time-picker :default-value="defaultValue" :format="format" />
</template>
```
### interval option
Show stepped options by `hourStep` `minuteStep` `secondStep`.
```vue
<script setup lang="ts">
</script>

<template>
  <a-time-picker :minute-step="15" :second-step="10" :hour-step="1" />
</template>
```
### Addon
Render addon contents to time picker panel's bottom.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)

function handleOpenChange(val: boolean) {
  open.value = val
}

function handleClose() {
  open.value = false
}
</script>

<template>
  <a-time-picker
    :open="open"
    @open-change="handleOpenChange"
  >
    <template #renderExtraFooter>
      <a-button size="small" type="primary" @click="handleClose">
        OK
      </a-button>
    </template>
  </a-time-picker>
</template>
```
### 12 hours
TimePicker of 12 hours format, with default format `h:mm:ss a`.
```vue
<script setup lang="ts">
function onChange(time: any, timeString: string) {
  console.log(time, timeString)
}
</script>

<template>
  <a-space wrap>
    <a-time-picker use12-hours @change="onChange" />
    <a-time-picker use12-hours format="h:mm:ss A" @change="onChange" />
    <a-time-picker use12-hours format="h:mm a" @change="onChange" />
  </a-space>
</template>
```
### Change on scroll
Use `changeOnScroll` and `needConfirm` to change the value when scrolling.
```vue
<script setup lang="ts">
function onChange(time: any, timeString: string) {
  console.log(time, timeString)
}
</script>

<template>
  <a-time-picker change-on-scroll :need-confirm="false" @change="onChange" />
</template>
```
### Time Range Picker
Use time range picker with `TimePicker.RangePicker`.
```vue
<script setup lang="ts">
import dayjs from 'dayjs'

const format = 'HH:mm:ss'
const defaultValue = [dayjs('12:08:23', 'HH:mm:ss'), dayjs('12:08:23', 'HH:mm:ss')]
</script>

<template>
  <a-time-range-picker :default-value="defaultValue" :format="format" />
</template>
```
### Variants
Variants of TimePicker, there are four variants: `outlined` `filled` `borderless` and `underlined`.
```vue
<script setup lang="ts">
</script>

<template>
  <a-flex vertical :gap="12">
    <a-flex :gap="8">
      <a-time-picker placeholder="Outlined" />
      <a-time-range-picker :placeholder="['Outlined Start', 'Outlined End']" />
    </a-flex>
    <a-flex :gap="8">
      <a-time-picker variant="filled" placeholder="Filled" />
      <a-time-range-picker variant="filled" :placeholder="['Filled Start', 'Filled End']" />
    </a-flex>
    <a-flex :gap="8">
      <a-time-picker variant="borderless" placeholder="Borderless" />
      <a-time-range-picker variant="borderless" :placeholder="['Borderless Start', 'Borderless End']" />
    </a-flex>
    <a-flex :gap="8">
      <a-time-picker variant="underlined" placeholder="Underlined" />
      <a-time-range-picker variant="underlined" :placeholder="['Underlined Start', 'Underlined End']" />
    </a-flex>
  </a-flex>
</template>
```
### Status
Add status to TimePicker with `status`, which could be `error` or `warning`.
```vue
<script setup lang="ts">
</script>

<template>
  <a-space vertical>
    <a-time-picker status="error" />
    <a-time-picker status="warning" />
    <a-time-range-picker status="error" />
    <a-time-range-picker status="warning" />
  </a-space>
</template>
```
### Prefix and Suffix
Custom `prefix` and `suffixIcon`.
```vue
<script setup lang="ts">
import { SmileOutlined } from '@antdv-next/icons'
import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'

dayjs.extend(customParseFormat)

const defaultOpenValue = dayjs('00:00:00', 'HH:mm:ss')

function onChange(time: any, timeString: string) {
  console.log(time, timeString)
}
</script>

<template>
  <a-space vertical :size="12">
    <a-time-picker
      :default-open-value="defaultOpenValue"
      @change="onChange"
    >
      <template #suffixIcon>
        <SmileOutlined />
      </template>
    </a-time-picker>
    <a-time-picker>
      <template #prefix>
        <SmileOutlined />
      </template>
    </a-time-picker>
    <a-time-range-picker>
      <template #prefix>
        <SmileOutlined />
      </template>
    </a-time-range-picker>
  </a-space>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of TimePicker by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { TimePickerProps } from 'antdv-next'
import { theme } from 'antdv-next'

const { useToken } = theme
const { token } = useToken()

const customClasses = {
  root: 'custom-timepicker-root',
}

const stylesObject: TimePickerProps['styles'] = {
  root: {
    borderColor: '#d9d9d9',
  },
}

const stylesFn: TimePickerProps['styles'] = (info) => {
  if (info.props.size === 'large') {
    return {
      root: {
        borderColor: '#722ed1',
      },
      suffix: {
        color: '#722ed1',
      },
      popup: {
        container: { border: '1px solid #722ed1', borderRadius: '8px' },
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-time-picker :classes="customClasses" :styles="stylesObject" placeholder="Object" />
    <a-time-picker :classes="customClasses" :styles="stylesFn" placeholder="Function" size="large" />
  </a-flex>
</template>

<style scoped>
.custom-timepicker-root {
  border: 1px solid v-bind('token.colorPrimary');
  width: 150px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### TimePicker

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowClear | Customize clear icon | boolean \| \{ clearIcon?: VueNode \} | true | - | ✓ |
| ~~addon~~ | Called from time picker panel to render an addon to its bottom, please use `renderExtraFooter` instead | () => VueNode | - | - | × |
| cellRender | Custom rendering function for picker cells | (current: number, info: \{ originNode: VueNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' \}) => VueNode | - | - | × |
| changeOnScroll | Trigger selection when scroll the column | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: \{ props \})=> Record<[SemanticDOM](#semantic-dom), string> | - |  | ✓ |
| defaultValue | To set default time | [dayjs](http://day.js.org/) | - |  | × |
| disabled | Determine whether the TimePicker is disabled | boolean | false |  | × |
| disabledTime | To specify the time that cannot be selected | [DisabledTime](#disabledtime) | - | - | × |
| format | To set the time format | string | `HH:mm:ss` |  | × |
| valueFormat | Set the binding value format. After setting, `value`, `defaultValue`, and `v-model:value` can use formatted strings, and `change` returns strings in the same format. Demo: [Value Format](#time-picker-demo-value-format) | string | - |  | × |
| getPopupContainer | To set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |  | × |
| hideDisabledOptions | Whether hide the options that can not be selected | boolean | false |  | × |
| hourStep | Interval between hours in picker | number | 1 |  | × |
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |  | × |
| minuteStep | Interval between minutes in picker | number | 1 |  | × |
| needConfirm | Need click confirm button to trigger value change | boolean | - | - | × |
| open | Whether to popup panel | boolean | false |  | × |
| placeholder | Display when there's no value | string \| \[string, string] | `Select a time` |  | × |
| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  | × |
| ~~popupClassName~~ | The className of panel, please use `classes.popup` instead | string | - |  | × |
| ~~popupStyle~~ | The style of panel, please use `styles.popup` instead | CSSProperties | - |  | × |
| prefix | The custom prefix | VueNode | - | - | × |
| previewValue | When the user selects the time hover option, the value of the input field undergoes a temporary change | false \| hover | hover | - | × |
| renderExtraFooter | Called from time picker panel to render some addon to its bottom | () => VueNode | - |  | × |
| secondStep | Interval between seconds in picker | number | 1 |  | × |
| showNow | Whether to show `Now` button on panel | boolean | - | - | × |
| size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `medium` \| `small` | - |  | × |
| status | Set validation status | 'error' \| 'warning' \| 'success' \| 'validating' | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: \{ props \})=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - |  | ✓ |
| suffixIcon | The custom suffix icon | VueNode | - |  | ✓ |
| use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false |  | × |
| value | To set time, support `v-model:value` | [dayjs](http://day.js.org/) | - |  | × |
| variant | Variants of picker | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
| onChange | A callback function, can be executed when the selected time is changing | function(time: dayjs, timeString: string): void | - |  | × |
| onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - |  | × |

#### DisabledTime

```typescript
type DisabledTime = (now: Dayjs) => {
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
  disabledMilliseconds?: (
    selectedHour: number,
    selectedMinute: number,
    selectedSecond: number,
  ) => number[]
}
```


#### Methods

| Name    | Description  | Version |
| ------- | ------------ | ------- |
| blur()  | Remove focus |         |
| focus() | Get focus    |         |

#### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| ~~addon~~ | Deprecated. Use `renderExtraFooter` instead | () => any | - |
| renderExtraFooter | Called from time picker panel to render some addon to its bottom | (mode: PickerMode) => any | - |
| suffixIcon | The custom suffix icon | () => any | - |
| prefix | The custom prefix | () => any | - |

### RangePicker

Same props from [RangePicker](/components/date-picker/#rangepicker) of DatePicker. And includes additional props:

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabledTime | To specify the time that cannot be selected | [RangeDisabledTime](#rangedisabledtime) | - | - |
| order | Order start and end time | boolean | true | - |

### RangeDisabledTime

```typescript
type RangeDisabledTime = (
  now: Dayjs,
  type = 'start' | 'end',
) => {
  disabledHours?: () => number[]
  disabledMinutes?: (selectedHour: number) => number[]
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
}
```

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="DatePicker"></ComponentTokenTable>

## FAQ

- [How to use TimePicker with customize date library like dayjs](/docs/vue/use-custom-date-library#timepicker)

---
Title: Tooltip
URL: https://www.antdv-next.com/components/tooltip.md
---

## When To Use {#when-to-use}

- The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
- To provide an explanation of a `button/text/operation`. It's often used instead of the html `title` attribute.

## Examples {#examples}

### Basic
The simplest usage.
```vue
<template>
  <a-tooltip title="prompt text">
    <span>Tooltip will show on mouse enter.</span>
  </a-tooltip>
</template>
```
### Smooth Transition
Configure Tooltip unique display through [ConfigProvider global configuration](#config-provider-tooltip-unique) to achieve smooth transition effects with only one Tooltip displayed at a time.
```vue
<script lang="ts" setup>
import SharedButton from './components/shared-button.vue'
</script>

<template>
  <a-config-provider
    :tooltip="{
      unique: true,
    }"
  >
    <a-flex vertical gap="small">
      <a-flex gap="small" justify="center">
        <SharedButton />
        <SharedButton />
      </a-flex>
      <a-flex gap="small" justify="center">
        <SharedButton placement="bottom" />
        <SharedButton placement="bottom" />
      </a-flex>
    </a-flex>
  </a-config-provider>
</template>
```
### Placement
There are 12 placement options available.
```vue
<script setup lang="ts">
const text = 'prompt text'
const buttonWidth = 80
</script>

<template>
  <a-config-provider :button="{ style: { width: `${buttonWidth}px`, margin: '4px' } }">
    <a-flex vertical justify="center" align="center" class="demo">
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-tooltip placement="topLeft" :title="text">
          <a-button>TL</a-button>
        </a-tooltip>
        <a-tooltip placement="top" :title="text">
          <a-button>Top</a-button>
        </a-tooltip>
        <a-tooltip placement="topRight" :title="text">
          <a-button>TR</a-button>
        </a-tooltip>
      </a-flex>
      <a-flex :style="{ width: `${buttonWidth * 5 + 32}px` }" justify="space-between" align="center">
        <a-flex align="center" vertical>
          <a-tooltip placement="leftTop" :title="text">
            <a-button>LT</a-button>
          </a-tooltip>
          <a-tooltip placement="left" :title="text">
            <a-button>Left</a-button>
          </a-tooltip>
          <a-tooltip placement="leftBottom" :title="text">
            <a-button>LB</a-button>
          </a-tooltip>
        </a-flex>
        <a-flex align="center" vertical>
          <a-tooltip placement="rightTop" :title="text">
            <a-button>RT</a-button>
          </a-tooltip>
          <a-tooltip placement="right" :title="text">
            <a-button>Right</a-button>
          </a-tooltip>
          <a-tooltip placement="rightBottom" :title="text">
            <a-button>RB</a-button>
          </a-tooltip>
        </a-flex>
      </a-flex>
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-tooltip placement="bottomLeft" :title="text">
          <a-button>BL</a-button>
        </a-tooltip>
        <a-tooltip placement="bottom" :title="text">
          <a-button>Bottom</a-button>
        </a-tooltip>
        <a-tooltip placement="bottomRight" :title="text">
          <a-button>BR</a-button>
        </a-tooltip>
      </a-flex>
    </a-flex>
  </a-config-provider>
</template>
```
### Arrow
Support show, hide or keep arrow in the center.
```vue
<script setup lang="ts">
import type { TooltipProps } from 'antdv-next'
import { computed, shallowRef } from 'vue'

const buttonWidth = shallowRef(80)
const arrow = shallowRef<'Show' | 'Hide' | 'Center'>('Show')
const mergedArrow = computed<TooltipProps['arrow']>(() => {
  if (arrow.value === 'Show') {
    return true
  }
  else if (arrow.value === 'Hide') {
    return false
  }
  return { pointAtCenter: true }
})
</script>

<template>
  <a-config-provider :button="{ style: { width: `${buttonWidth}px`, margin: '4px' } }">
    <a-segmented
      v-model:value="arrow"
      :options="['Show', 'Hide', 'Center']"
      style="margin-bottom: 24px"
    />
    <a-flex vertical justify="center" align="center" class="demo">
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-tooltip placement="topLeft" title="prompt text" :arrow="mergedArrow">
          <a-button>TL</a-button>
        </a-tooltip>
        <a-tooltip placement="top" title="prompt text" :arrow="mergedArrow">
          <a-button>Top</a-button>
        </a-tooltip>
        <a-tooltip placement="topRight" title="prompt text" :arrow="mergedArrow">
          <a-button>TR</a-button>
        </a-tooltip>
      </a-flex>
      <a-flex :style="{ width: `${buttonWidth * 5 + 32}px` }" justify="space-between" align="center">
        <a-flex align="center" vertical>
          <a-tooltip placement="leftTop" title="prompt text" :arrow="mergedArrow">
            <a-button>LT</a-button>
          </a-tooltip>
          <a-tooltip placement="left" title="prompt text" :arrow="mergedArrow">
            <a-button>Left</a-button>
          </a-tooltip>
          <a-tooltip placement="leftBottom" title="prompt text" :arrow="mergedArrow">
            <a-button>LB</a-button>
          </a-tooltip>
        </a-flex>
        <a-flex align="center" vertical>
          <a-tooltip placement="rightTop" title="prompt text" :arrow="mergedArrow">
            <a-button>RT</a-button>
          </a-tooltip>
          <a-tooltip placement="right" title="prompt text" :arrow="mergedArrow">
            <a-button>Right</a-button>
          </a-tooltip>
          <a-tooltip placement="rightBottom" title="prompt text" :arrow="mergedArrow">
            <a-button>RB</a-button>
          </a-tooltip>
        </a-flex>
      </a-flex>
      <a-flex justify="center" align="center" style="white-space: nowrap">
        <a-tooltip placement="bottomLeft" title="prompt text" :arrow="mergedArrow">
          <a-button>BL</a-button>
        </a-tooltip>
        <a-tooltip placement="bottom" title="prompt text" :arrow="mergedArrow">
          <a-button>Bottom</a-button>
        </a-tooltip>
        <a-tooltip placement="bottomRight" title="prompt text" :arrow="mergedArrow">
          <a-button>BR</a-button>
        </a-tooltip>
      </a-flex>
    </a-flex>
  </a-config-provider>
</template>
```
### Auto Shift
Auto adjust Popup and arrow position when Tooltip is close to the edge of the screen. Will be out of screen when exceed limitation.
```vue
<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const open = ref(false)

onMounted(() => {
  setTimeout(() => {
    document.documentElement.scrollTop = document.documentElement.clientHeight
    document.documentElement.scrollLeft = document.documentElement.clientWidth

    requestAnimationFrame(() => {
      open.value = true
    })
  }, 10)
})
</script>

<template>
  <div class="h-300vh w-300vw flex items-center justify-center">
    <a-tooltip title="Thanks for using antd. Have a nice day !" :open="open">
      <a-button type="primary">
        Scroll The Window
      </a-button>
    </a-tooltip>
  </div>
</template>
```
### Realign after layout changes
Call `forceAlign` through `ref` to realign after the layout changes.
```vue
<script setup lang="ts">
import type { TooltipRef } from 'antdv-next'
import { nextTick, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'

const loaded = shallowRef(false)
const tooltipRef = shallowRef<TooltipRef>()

let timer: ReturnType<typeof setTimeout> | undefined

onMounted(() => {
  timer = setTimeout(() => {
    loaded.value = true
  }, 2000)
})

onBeforeUnmount(() => {
  clearTimeout(timer)
})

watch(loaded, async (value) => {
  if (value) {
    await nextTick()
    tooltipRef.value?.forceAlign()
  }
})
</script>

<template>
  <div :style="{ minHeight: '160px', paddingTop: '16px' }">
    <div v-if="loaded" :style="{ height: '80px', marginBottom: '16px' }">
      Async content loaded.
    </div>
    <a-tooltip ref="tooltipRef" title="Tooltip stays aligned" open placement="top">
      <a-button>Trigger</a-button>
    </a-tooltip>
  </div>
</template>
```
### Colorful Tooltip
We preset a series of colorful Tooltip styles for use in different situations.
```vue
<script setup lang="ts">
const colors = [
  'pink',
  'red',
  'yellow',
  'orange',
  'cyan',
  'green',
  'blue',
  'purple',
  'geekblue',
  'magenta',
  'volcano',
  'gold',
  'lime',
]
const customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9']
</script>

<template>
  <a-divider title-placement="start">
    Presets
  </a-divider>
  <a-space wrap>
    <template v-for="color in colors" :key="color">
      <a-tooltip :color="color" title="prompt text">
        <a-button>{{ color }}</a-button>
      </a-tooltip>
    </template>
  </a-space>
  <a-divider title-placement="start">
    Custom
  </a-divider>
  <a-space wrap>
    <template v-for="color in customColors" :key="color">
      <a-tooltip :color="color" title="prompt text">
        <a-button>{{ color }}</a-button>
      </a-tooltip>
    </template>
  </a-space>
</template>
```
### Disabled
The Tooltip can be disabled by setting `:title="null"` or `title=""`.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const disabled = ref(true)

function toggleDisabled() {
  disabled.value = !disabled.value
}
</script>

<template>
  <a-tooltip :title="disabled ? null : 'prompt text'">
    <a-button @click="toggleDisabled">
      {{ disabled ? 'Enable' : 'Disable' }}
    </a-button>
  </a-tooltip>
</template>
```
### Disabled children
Disabled wrapper.
```vue
<script setup lang="ts">
const selectOptions = [
  { value: 'option', label: 'Option' },
]
</script>

<template>
  <a-space>
    <a-tooltip title="Thanks for using antd. Have a nice day !">
      <a-button disabled>
        Disabled
      </a-button>
    </a-tooltip>
    <a-tooltip title="Thanks for using antd. Have a nice day !">
      <a-input disabled placeholder="disabled" />
    </a-tooltip>
    <a-tooltip title="Thanks for using antd. Have a nice day !">
      <a-input-number disabled :value="1" />
    </a-tooltip>
    <a-tooltip title="Thanks for using antd. Have a nice day !">
      <a-checkbox disabled />
    </a-tooltip>
    <a-tooltip title="Thanks for using antd. Have a nice day !">
      <a-select disabled :options="selectOptions" :value="selectOptions[0].value" />
    </a-tooltip>
  </a-space>
</template>
```
### Wrap custom component
Use with a custom component.
```vue
<script setup lang="ts">
import { defineComponent, h } from 'vue'

const ComponentWithEvents = defineComponent({
  name: 'ComponentWithEvents',
  inheritAttrs: false,
  setup(_, { attrs }) {
    return () => h('span', { ...attrs }, 'This text is inside a component with the necessary events exposed.')
  },
})
</script>

<template>
  <a-tooltip title="prompt text">
    <ComponentWithEvents />
  </a-tooltip>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Tooltip by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { TooltipProps } from 'antdv-next'
import { theme } from 'antdv-next'

const { token } = theme.useToken()

const classes: TooltipProps['classes'] = {
  container: 'demo-tooltip-container',
}

const stylesObject: TooltipProps['styles'] = {
  container: {
    borderRadius: '12px',
    boxShadow: 'inset 0 0 8px #ccc',
  },
}

const stylesFn: TooltipProps['styles'] = (info) => {
  if (info?.props?.arrow === false) {
    return {
      container: {
        backgroundColor: 'rgba(53, 71, 125, 0.8)',
        padding: '12px',
        color: '#fff',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex gap="medium">
    <a-tooltip title="Object text" :classes="classes" :styles="stylesObject" :arrow="false">
      <a-button>Object Style</a-button>
    </a-tooltip>
    <a-tooltip title="Function text" :classes="classes" :styles="stylesFn" :arrow="false">
      <a-button type="primary">
        Function Style
      </a-button>
    </a-tooltip>
  </a-flex>
</template>

<style>
.demo-tooltip-container {
  padding: v-bind('`${token.paddingXS}px`');
  border: 1px dashed v-bind('token.colorBorder');
}
</style>
```

## API

### Props

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| align | Popup alignment config | AlignType | - | - | × |
| arrow | Show, hide or keep arrow in the center | boolean \| &#123; pointAtCenter?: boolean &#125; | - | - | ✓ |
| autoAdjustOverflow | Auto adjust placement when tooltip is invisible | boolean \| AdjustOverflow | - | - | × |
| color | The background color. After using this attribute, the internal text color will adapt automatically | LiteralUnion&lt;PresetColorType&gt; | - | - | × |
| open | Whether tooltip is visible | boolean | - | - | × |
| defaultOpen | Initial open state | boolean | false | - | × |
| getPopupContainer | Specify container for tooltip | (triggerNode: HTMLElement) =&gt; HTMLElement | - | - | × |
| destroyOnHidden | Destroy tooltip when hidden | boolean | - | - | × |
| zIndex | Set z-index of tooltip | number | - | - | × |
| placement | Tooltip placement | TooltipPlacement | top | - | × |
| trigger | Trigger action | ActionType \| ActionType[] | - | - | ✓ |
| fresh | Update content even when tooltip is hidden | boolean | - | - | × |
| mouseEnterDelay | Delay in seconds before showing tooltip | number | 0.1 | - | ✓ |
| mouseLeaveDelay | Delay in seconds before hiding tooltip | number | 0.1 | - | ✓ |
| classes | Semantic DOM class. Supports object or function | TooltipClassNamesType | - | - | ✓ |
| styles | Semantic DOM style. Supports object or function | TooltipStylesType | - | - | ✓ |
| getTooltipContainer | Legacy alias of `getPopupContainer` | (node: HTMLElement) =&gt; HTMLElement | - | - | × |
| motion | Popup motion config. Only `name` takes effect, the rest is managed internally | &#123; name?: string &#125; | - | - | × |
| afterOpenChange | Callback after visibility change | (open: boolean) =&gt; void | - | - | × |
| builtinPlacements | Built-in placement config | typeof Placements | - | - | × |
| title | The text shown in the tooltip | VueNode | - | - | × |
| overlay | Legacy alias of `title` | VueNode | - | - | × |
| openClass | Class added to child when tooltip is open | string | - | - | × |
| unique | Enable unique display inside `AUniqueProvider`/ConfigProvider | boolean | - | - | ✓ |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| openChange | Callback when tooltip visibility changes | (open: boolean) =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| title | The text shown in the tooltip | () =&gt; any | - |

### Methods

| Method | Description | Type | Version |
| --- | --- | --- | --- |
| forcePopupAlign | Deprecated | VoidFunction | - |
| forceAlign | Force popup realign | VoidFunction | - |
| nativeElement | Wrapped dom element. Not promise valid if child not support ref | HTMLElement | - |
| popupElement | Popup dom element | HTMLDivElement | - |

### ConfigProvider - tooltip.unique {#config-provider-tooltip-unique}

You can configure global unique display for Tooltip through ConfigProvider. When `unique` is set to `true`, only one Tooltip under the ConfigProvider will be displayed at the same time, providing better user experience and smooth transition effects.

Note: After configuration, properties like `getPopupContainer`, `arrow` etc. will be ignored.

```vue
<template>
  <a-config-provider :tooltip="{ unique: true }">
    <a-space>
      <a-tooltip title="First tooltip">
        <a-button>Button 1</a-button>
      </a-tooltip>
      <a-tooltip title="Second tooltip">
        <a-button>Button 2</a-button>
      </a-tooltip>
    </a-space>
  </a-config-provider>
</template>
```

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Tooltip"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### Why doesn't HOC work sometimes? {#faq-hoc-component}

Please ensure that the child elements of `Tooltip` can accept `mouseenter`, `mouseleave`, `pointerenter`, `pointerleave`, `focus`, `click` events.

Please refer to https://github.com/ant-design/ant-design/issues/15909

### Why Tooltip not update content when close? {#faq-content-not-update}

Tooltip will cache content when it is closed to avoid flicker when content is updated:

```vue
<a-tooltip :open="user" :title="user?.name" />
```

<div>
<img alt="no blink" height="50" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KVx7QLOYwVsAAAAAAAAAAAAADrJ8AQ/original" />
</div>

If need update content when close, you can set `fresh` property ([#44830](https://github.com/ant-design/ant-design/issues/44830)):

```vue
<a-tooltip :open="user" :title="user?.name" fresh />
```

<div>
<img alt="no blink" height="50" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rUbsR4xWpMsAAAAAAAAAAAAADrJ8AQ/original" />
</div>

### Why is Tooltip not realigned after the layout changes? {#faq-force-align}

Tooltip does not keep watching every external layout change, to avoid extra overhead for each open Tooltip. When loading data asynchronously, refreshing a list or expanding a collapsible area moves the trigger element, you can grab the `TooltipRef` through `ref` and call its `forceAlign` method once the layout has settled (see [#57809](https://github.com/ant-design/ant-design/issues/57809)). The "Realign after layout changes" demo above shows the pattern.

---
Title: Tour
URL: https://www.antdv-next.com/components/tour.md
---

## When To Use {#when-to-use}

Use when you want to guide users through a product.

## Examples {#examples}

### Basic
The most basic usage.
```vue
<script setup lang="ts">
import type { TourStepItem } from 'antdv-next'
import { EllipsisOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

const ref1 = shallowRef()
const ref2 = shallowRef()
const ref3 = shallowRef()
const open = shallowRef(false)
const steps: TourStepItem[] = [
  {
    title: 'Upload File',
    description: 'Put your files here.',

    target: ref1,
  },
  {
    title: 'Save',
    description: 'Save your changes.',
    target: ref2,
  },
  {
    title: 'Other Actions',
    description: 'Click to see other actions.',
    target: ref3,
  },
]
</script>

<template>
  <a-button type="primary" @click="open = true">
    Begin Tour
  </a-button>
  <a-divider />
  <a-space>
    <a-button ref="ref1">
      Upload
    </a-button>
    <a-button ref="ref2" type="primary">
      Save
    </a-button>
    <a-button ref="ref3">
      <template #icon>
        <EllipsisOutlined />
      </template>
    </a-button>
  </a-space>
  <a-tour v-model:open="open" :steps="steps">
    <template #coverRender="{ index }">
      <template v-if="index === 0">
        <img
          draggable="false"
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        >
      </template>
    </template>
  </a-tour>
</template>
```
### Non-modal
Use `mask={false}` to make Tour non-modal. At the meantime it is recommended to use with `type="primary"` to emphasize the guide itself.
```vue
<script setup lang="ts">
import type { TourStepItem } from 'antdv-next'
import { EllipsisOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

const ref1 = shallowRef()
const ref2 = shallowRef()
const ref3 = shallowRef()
const open = shallowRef(false)
const steps: TourStepItem[] = [
  {
    title: 'Upload File',
    description: 'Put your files here.',
    target: ref1,
  },
  {
    title: 'Save',
    description: 'Save your changes.',
    target: ref2,
  },
  {
    title: 'Other Actions',
    description: 'Click to see other actions.',
    target: ref3,
  },
]
</script>

<template>
  <a-button type="primary" @click="open = true">
    Begin non-modal Tour
  </a-button>
  <a-divider />
  <a-space>
    <a-button ref="ref1">
      Upload
    </a-button>
    <a-button ref="ref2" type="primary">
      Save
    </a-button>
    <a-button ref="ref3">
      <template #icon>
        <EllipsisOutlined />
      </template>
    </a-button>
  </a-space>
  <a-tour v-model:open="open" :steps="steps" type="primary" :mask="false">
    <template #coverRender="{ index }">
      <template v-if="index === 0">
        <img
          draggable="false"
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        >
      </template>
    </template>
  </a-tour>
</template>
```
### Placement
Change the placement of the guide relative to the target, there are 12 placements available. When `target={null}` the guide will show in the center.
```vue
<script setup lang="ts">
import type { TourStepItem } from 'antdv-next'
import { shallowRef } from 'vue'

const ref = shallowRef()
const open = shallowRef(false)
const steps: TourStepItem[] = [
  {
    title: 'Center',
    description: 'Displayed in the center of screen.',
    target: null,
  },
  {
    title: 'Right',
    description: 'On the right of target.',
    placement: 'right',
    target: ref,
  },
  {
    title: 'Top',
    description: 'On the top of target.',
    placement: 'top',
    target: ref,
  },
]
</script>

<template>
  <div class="mt-300px ml-300px">
    <a-button ref="ref" type="primary" @click="open = true">
      Begin Tour
    </a-button>
  </div>

  <a-tour v-model:open="open" :steps="steps" />
</template>
```
### Custom mask style
Custom mask style.
```vue
<script setup lang="ts">
import type { TourStepItem } from 'antdv-next'
import { EllipsisOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

const ref1 = shallowRef()
const ref2 = shallowRef()
const ref3 = shallowRef()
const open = shallowRef(false)

const mask = {
  style: {
    boxShadow: 'inset 0 0 15px #333',
  },
  color: 'rgba(80, 255, 255, .4)',
}

const steps: TourStepItem[] = [
  {
    title: 'Upload File',
    description: 'Put your files here.',
    target: ref1,
  },
  {
    title: 'Save',
    description: 'Save your changes.',
    target: ref2,
    mask: {
      style: {
        boxShadow: 'inset 0 0 15px #fff',
      },
      color: 'rgba(40, 0, 255, .4)',
    },
  },
  {
    title: 'Other Actions',
    description: 'Click to see other actions.',
    target: ref3,
    mask: false,
  },
]
</script>

<template>
  <a-button type="primary" @click="open = true">
    Begin Tour
  </a-button>
  <a-divider />
  <a-space>
    <a-button ref="ref1">
      Upload
    </a-button>
    <a-button ref="ref2" type="primary">
      Save
    </a-button>
    <a-button ref="ref3">
      <template #icon>
        <EllipsisOutlined />
      </template>
    </a-button>
  </a-space>
  <a-tour v-model:open="open" :steps="steps" :mask="mask">
    <template #coverRender="{ index }">
      <template v-if="index === 0">
        <img
          draggable="false"
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        >
      </template>
    </template>
  </a-tour>
</template>
```
### Custom indicator
Custom indicator.
```vue
<script setup lang="ts">
import type { TourStepItem } from 'antdv-next'
import { EllipsisOutlined } from '@antdv-next/icons'
import { shallowRef } from 'vue'

const ref1 = shallowRef()
const ref2 = shallowRef()
const ref3 = shallowRef()
const open = shallowRef(false)

const steps: TourStepItem[] = [
  {
    title: 'Upload File',
    description: 'Put your files here.',
    target: ref1,
  },
  {
    title: 'Save',
    description: 'Save your changes.',
    target: ref2,
  },
  {
    title: 'Other Actions',
    description: 'Click to see other actions.',
    target: ref3,
  },
]

function indicatorsRender(current: number, total: number) {
  return `${current + 1} / ${total}`
}
</script>

<template>
  <a-button type="primary" @click="open = true">
    Begin Tour
  </a-button>
  <a-divider />
  <a-space>
    <a-button ref="ref1">
      Upload
    </a-button>
    <a-button ref="ref2" type="primary">
      Save
    </a-button>
    <a-button ref="ref3">
      <template #icon>
        <EllipsisOutlined />
      </template>
    </a-button>
  </a-space>
  <a-tour
    v-model:open="open"
    :steps="steps"
    :indicators-render="indicatorsRender"
  />
</template>
```
### Custom action
Custom action.
```vue
<script setup lang="ts">
import type { TourStepItem } from 'antdv-next'
import { EllipsisOutlined } from '@antdv-next/icons'
import { Button } from 'antdv-next'
import { h, shallowRef } from 'vue'

const ref1 = shallowRef()
const ref2 = shallowRef()
const ref3 = shallowRef()
const open = shallowRef(false)

const steps: TourStepItem[] = [
  {
    title: 'Upload File',
    description: 'Put your files here.',
    target: ref1,
  },
  {
    title: 'Save',
    description: 'Save your changes.',
    target: ref2,
  },
  {
    title: 'Other Actions',
    description: 'Click to see other actions.',
    target: ref3,
  },
]

function actionsRender(originNode: any, info: { current: number, total: number }) {
  const nodes: any[] = []
  if (info.current !== info.total - 1) {
    nodes.push(
      h(
        Button,
        {
          size: 'small',
          onClick: () => {
            open.value = false
          },
        },
        {
          default: () => 'Skip',
        },
      ),
    )
  }
  if (Array.isArray(originNode)) {
    nodes.push(...originNode)
  }
  else {
    nodes.push(originNode)
  }
  return nodes
}
</script>

<template>
  <a-button type="primary" @click="open = true">
    Begin Tour
  </a-button>
  <a-divider />
  <a-space>
    <a-button ref="ref1">
      Upload
    </a-button>
    <a-button ref="ref2" type="primary">
      Save
    </a-button>
    <a-button ref="ref3">
      <template #icon>
        <EllipsisOutlined />
      </template>
    </a-button>
  </a-space>
  <a-tour
    v-model:open="open"
    :steps="steps"
    :actions-render="actionsRender"
  />
</template>
```
### Custom highlighted area style
Using `gap` to control the radius of highlight area and the offset between highlight area and the element.
```vue
<script setup lang="ts">
import type { TourStepItem } from 'antdv-next'
import { computed, ref, shallowRef } from 'vue'

const tourNodeRef = shallowRef()
const open = ref(false)

const radius = ref(8)
const offsetX = ref(2)
const offsetY = ref(2)
const offset = ref(2)
const offsetDirection = ref<'both' | 'individual'>('individual')

const steps: TourStepItem[] = [
  {
    title: 'Upload File',
    description: 'Put your files here.',
    target: tourNodeRef,
  },
]

const gap = computed(() => {
  const offsetValue = offsetDirection.value === 'both'
    ? offset.value
    : [offsetX.value, offsetY.value]
  return {
    offset: offsetValue,
    radius: radius.value,
  } as {
    offset: number | [number, number]
    radius: number
  }
})
</script>

<template>
  <div ref="tourNodeRef">
    <a-button type="primary" @click="open = true">
      Begin Tour
    </a-button>
    <a-space vertical style="display: flex; margin-top: 12px">
      <a-row>
        <a-col :span="6">
          <a-typography-text>Radius:</a-typography-text>
        </a-col>
        <a-col :span="12">
          <a-slider v-model:value="radius" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <a-typography-text>Offset:</a-typography-text>
        </a-col>
        <a-col :span="12">
          <a-slider
            v-model:value="offset"
            :max="50"
            @change="offsetDirection = 'both'"
          />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <a-typography-text>Horizontal offset:</a-typography-text>
        </a-col>
        <a-col :span="12">
          <a-slider
            v-model:value="offsetX"
            :max="50"
            @change="offsetDirection = 'individual'"
          />
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <a-typography-text>Vertical offset:</a-typography-text>
        </a-col>
        <a-col :span="12">
          <a-slider
            v-model:value="offsetY"
            :max="50"
            @change="offsetDirection = 'individual'"
          />
        </a-col>
      </a-row>
    </a-space>
    <a-tour v-model:open="open" :steps="steps" :gap="gap" />
  </div>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Tour by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { TourProps, TourStepItem } from 'antdv-next'
import { computed, h, shallowRef } from 'vue'

const ref1 = shallowRef()
const ref2 = shallowRef()
const ref3 = shallowRef()
const open = shallowRef(false)
const openFn = shallowRef(false)

const btnProps = {
  nextButtonProps: {
    style: {
      border: '1px solid #CDC1FF',
      color: '#CDC1FF',
    },
  },
  prevButtonProps: {
    style: {
      backgroundColor: '#CDC1FF',
      color: '#fff',
    },
  },
}

const coverNode = h('img', {
  alt: 'tour.png',
  src: 'https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png',
})

const steps: TourStepItem[] = [
  {
    title: 'Upload File',
    description: 'Put your files here.',
    cover: coverNode,
    target: ref1,
    prevButtonProps: {},
  },
  {
    title: 'Save',
    description: 'Save your changes.',
    target: ref2,
  },
  {
    title: 'Other Actions',
    description: 'Click to see other actions.',
    target: ref3,
  },
]

const stepsWithButtonProps = computed(() => steps.map(step => ({ ...step, ...btnProps })))

const classes: TourProps['classes'] = {
  root: 'custom-tour-root',
  section: 'custom-tour-section',
}

const stylesObject: TourProps['styles'] = {
  mask: {
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
  },
  section: {
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
    border: '2px solid #4096ff',
  },
  cover: {
    borderRadius: '12px 12px 0 0',
  },
}

const stylesFn: TourProps['styles'] = (info) => {
  if (info.props.type === 'primary') {
    return {
      mask: {
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
      },
      section: {
        backgroundColor: 'rgba(205, 193, 255, 0.8)',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
      },
      cover: {
        borderRadius: '12px 12px 0 0',
      },
    }
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-flex gap="medium">
      <a-button type="primary" @click="open = true">
        Begin Tour Object
      </a-button>
      <a-button type="primary" @click="openFn = true">
        Begin Tour Function
      </a-button>
    </a-flex>
    <a-divider />
    <a-tour
      v-model:open="open"
      :steps="steps"
      :classes="classes"
      :styles="stylesObject"
      :arrow="false"
    />
    <a-tour
      v-model:open="openFn"
      :steps="stepsWithButtonProps"
      :classes="classes"
      :styles="stylesFn"
      :arrow="false"
      type="primary"
    />
    <a-space>
      <a-button ref="ref1" type="primary">
        Upload
      </a-button>
      <a-button ref="ref2">
        Save
      </a-button>
      <a-button ref="ref3" type="dashed">
        Other Actions
      </a-button>
    </a-space>
  </a-flex>
</template>

<style>
.custom-tour-root {
  border-radius: 4px;
}

.custom-tour-section {
  border-radius: 8px;
}
</style>
```

## API

Common props ref：[Comon props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| steps | Tour steps | TourStepItem[\] | - | - | × |
| open | Open tour, support `v-model:open` | boolean | false | - | × |
| current | What is the current step | number | - | - | × |
| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | boolean \| &#123; pointAtCenter: boolean &#125; | true | - | × |
| closeIcon | Customize close icon | VueNode | true | - | ✓ |
| disabledInteraction | Disable interaction on highlighted area | boolean | false | - | × |
| gap | Control the radius of the highlighted area and the offset between highlighted area and the element | &#123; offset?: number \| [number, number]; radius?: number &#125; | &#123; offset: 6, radius: 2 &#125; | - | × |
| placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | - | × |
| mask | Whether to enable masking, change mask style and fill color by pass custom props | boolean \| &#123; style?: CSSProperties; color?: string &#125; | true | - | × |
| type | Type, affects the background color and text color | 'default' \| 'primary' | `default` | - | × |
| scrollIntoViewOptions | support pass custom scrollIntoView options | boolean \| ScrollIntoViewOptions | true | - | × |
| indicatorsRender | Custom indicator | (current: number, total: number) =&gt; VueNode | - | - | × |
| actionsRender | Custom action | (originNode: VueNode, info: &#123; current: number, total: number &#125;) =&gt; VueNode | - | - | × |
| zIndex | Tour zIndex | number | 1001 | - | × |
| getPopupContainer | Set the rendering node of Tour floating layer | (node: HTMLElement) =&gt; HTMLElement | () =&gt; document.body | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | TourClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | TourStylesType | - | - | ✓ |
| rootClass | Root container class | string | - | - | × |
| prefixCls | - | string | - | - | × |

### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Callback when the step changes. Current is the previous step | (current: number) =&gt; void | - |
| close | Callback function on shutdown | (current: number) =&gt; void | - |
| finish | Callback when tour is finished | () =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| actionsRender | Custom action | (originNode: any, info: &#123; current: number, total: number &#125;) =&gt; any | - |
| indicatorsRender | Custom indicator | (current: number, total: number) =&gt; any | - |
| nextButton | Customize next button | (params: &#123; current: number, isFirst: boolean, isLast: boolean &#125;) =&gt; any | - |
| prevButton | Customize previous button | (params: &#123; current: number, isFirst: boolean, isLast: boolean &#125;) =&gt; any | - |
| coverRender | Customize step cover | (params: &#123; step: TourStepItem, index: number &#125;) =&gt; any | - |
| titleRender | Customize step title | (params: &#123; step: TourStepItem, index: number &#125;) =&gt; any | - |
| descriptionRender | Customize step description | (params: &#123; step: TourStepItem, index: number &#125;) =&gt; any | - |

## Types

### TourStepItem

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| target | Get the element the guide card points to. Empty makes it show in center of screen | HTMLElement \| (() =&gt; HTMLElement) \| null | - | - |
| arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | boolean \| &#123; pointAtCenter: boolean &#125; | true | - |
| closeIcon | Customize close icon | VueNode | true | - |
| cover | Displayed pictures or videos | VueNode | - | - |
| title | Title | VueNode | - | - |
| description | Description | VueNode | - | - |
| placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | - |
| mask | Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour | boolean \| &#123; style?: CSSProperties; color?: string &#125; | true | - |
| type | Type, affects the background color and text color | 'default' \| 'primary' | `default` | - |
| nextButtonProps | Properties of the Next button | &#123; children?: VueNode; onClick?: () =&gt; void; class?: string; style?: CSSProperties &#125; | - | - |
| prevButtonProps | Properties of the previous button | &#123; children?: VueNode; onClick?: () =&gt; void; class?: string; style?: CSSProperties &#125; | - | - |
| scrollIntoViewOptions | support pass custom scrollIntoView options, the default follows the `scrollIntoViewOptions` property of Tour | boolean \| ScrollIntoViewOptions | true | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Tour"></ComponentTokenTable>

---
Title: Transfer
URL: https://www.antdv-next.com/components/transfer.md
---

## When To Use {#when-to-use}

- It is a select control essentially which can be use for selecting multiple items.
- Transfer can display more information for items and take up more space.

Transfer the elements between two columns in an intuitive and efficient way.

One or more elements can be selected from either column, one click on the proper `direction` button, and the transfer is done. The left column is considered the `source` and the right column is considered the `target`. As you can see in the API description, these names are reflected in.

> Notice: Transfer is a controlled component, uncontrolled mode is not supported.

## Examples {#examples}

### Basic
The most basic usage of `Transfer` involves providing the source data and target keys arrays, plus the rendering and some callback functions.
```vue
<script setup lang="ts">
import type { TransferEmits, TransferProps } from 'antdv-next'
import { ref } from 'vue'

interface RecordType {
  key: string
  title: string
  description: string
}

const mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({
  key: i.toString(),
  title: `content${i + 1}`,
  description: `description of content${i + 1}`,
}))

const initialTargetKeys = mockData.filter(item => Number(item.key) > 10).map(item => item.key)

const targetKeys = ref<TransferProps['targetKeys']>(initialTargetKeys)
const selectedKeys = ref<TransferProps['targetKeys']>([])

const handleChange: TransferEmits['change'] = (nextTargetKeys, direction, moveKeys) => {
  console.log('targetKeys:', nextTargetKeys)
  console.log('direction:', direction)
  console.log('moveKeys:', moveKeys)
  targetKeys.value = nextTargetKeys
}

const handleSelectChange: TransferEmits['selectChange'] = (sourceSelectedKeys, targetSelectedKeys) => {
  console.log('sourceSelectedKeys:', sourceSelectedKeys)
  console.log('targetSelectedKeys:', targetSelectedKeys)
  selectedKeys.value = [...sourceSelectedKeys, ...targetSelectedKeys]
}

const handleScroll: TransferEmits['scroll'] = (direction, e) => {
  console.log('direction:', direction)
  console.log('target:', (e.target as HTMLElement | null)?.className)
}
</script>

<template>
  <a-transfer
    v-model:target-keys="targetKeys"
    v-model:selected-keys="selectedKeys"
    :data-source="mockData"
    :titles="['Source', 'Target']"
    :render="(item: RecordType) => item.title"
    @change="handleChange"
    @select-change="handleSelectChange"
    @scroll="handleScroll"
  />
</template>
```
### One Way
Use `oneWay` to make Transfer the one way style.
```vue
<script setup lang="ts">
import type { TransferEmits } from 'antdv-next'
import { ref } from 'vue'

interface RecordType {
  key: string
  title: string
  description: string
  disabled: boolean
}

const mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({
  key: i.toString(),
  title: `content${i + 1}`,
  description: `description of content${i + 1}`,
  disabled: i % 3 < 1,
}))

const oriTargetKeys = mockData.filter(item => Number(item.key) % 3 > 1).map(item => item.key)

const targetKeys = ref(oriTargetKeys)
const selectedKeys = ref<string[]>([])
const disabled = ref(false)

const handleChange: TransferEmits['change'] = (newTargetKeys, direction, moveKeys) => {
  targetKeys.value = newTargetKeys
  console.log('targetKeys: ', newTargetKeys)
  console.log('direction: ', direction)
  console.log('moveKeys: ', moveKeys)
}

const handleSelectChange: TransferEmits['selectChange'] = (sourceSelectedKeys, targetSelectedKeys) => {
  selectedKeys.value = [...sourceSelectedKeys, ...targetSelectedKeys] as string[]
  console.log('sourceSelectedKeys: ', sourceSelectedKeys)
  console.log('targetSelectedKeys: ', targetSelectedKeys)
}

const handleScroll: TransferEmits['scroll'] = (direction, e) => {
  console.log('direction:', direction)
  console.log('target:', (e.target as HTMLElement | null)?.className)
}
</script>

<template>
  <div>
    <a-transfer
      v-model:target-keys="targetKeys"
      v-model:selected-keys="selectedKeys"
      :data-source="mockData"
      :titles="['Source', 'Target']"
      :render="(item: RecordType) => item.title"
      :disabled="disabled"
      one-way
      @change="handleChange"
      @select-change="handleSelectChange"
      @scroll="handleScroll"
    />
    <a-switch
      v-model:checked="disabled"
      checked-children="disabled"
      un-checked-children="disabled"
      style="margin-top: 16px"
    />
  </div>
</template>
```
### Search
Transfer with a search box.
```vue
<script setup lang="ts">
import type { TransferEmits, TransferProps } from 'antdv-next'
import { onMounted, ref } from 'vue'

interface RecordType {
  key: string
  title: string
  description: string
  chosen: boolean
}

const mockData = ref<RecordType[]>([])
const targetKeys = ref<TransferProps['targetKeys']>([])

function getMock() {
  const tempTargetKeys: string[] = []
  const tempMockData: RecordType[] = []
  for (let i = 0; i < 20; i++) {
    const data = {
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
      chosen: i % 2 === 0,
    }
    if (data.chosen) {
      tempTargetKeys.push(data.key)
    }
    tempMockData.push(data)
  }
  mockData.value = tempMockData
  targetKeys.value = tempTargetKeys
}

onMounted(() => {
  getMock()
})

function filterOption(inputValue: string, option: RecordType) {
  return option.description.includes(inputValue)
}

const handleChange: TransferEmits['change'] = (newTargetKeys) => {
  targetKeys.value = newTargetKeys
}

const handleSearch: TransferEmits['search'] = (direction, value) => {
  console.log('search:', direction, value)
}
</script>

<template>
  <a-transfer
    v-model:target-keys="targetKeys"
    :data-source="mockData"
    show-search
    :filter-option="filterOption"
    :render="(item: RecordType) => item.title"
    @change="handleChange"
    @search="handleSearch"
  />
</template>
```
### Advanced
Advanced Usage of Transfer.

You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.
```vue
<script setup lang="ts">
import type { TransferEmits, TransferProps } from 'antdv-next'
import { onMounted, ref } from 'vue'

interface RecordType {
  key: string
  title: string
  description: string
  chosen: boolean
}

const mockData = ref<RecordType[]>([])
const targetKeys = ref<TransferProps['targetKeys']>([])

function getMock() {
  const tempTargetKeys: string[] = []
  const tempMockData: RecordType[] = []
  for (let i = 0; i < 20; i++) {
    const data = {
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
      chosen: i % 2 === 0,
    }
    if (data.chosen) {
      tempTargetKeys.push(data.key)
    }
    tempMockData.push(data)
  }
  mockData.value = tempMockData
  targetKeys.value = tempTargetKeys
}

onMounted(() => {
  getMock()
})

const handleChange: TransferEmits['change'] = (newTargetKeys) => {
  targetKeys.value = newTargetKeys
}

const panelStyles: TransferProps['styles'] = {
  section: {
    width: 250,
    height: 300,
  },
}
</script>

<template>
  <a-transfer
    v-model:target-keys="targetKeys"
    :data-source="mockData"
    show-search
    :styles="panelStyles"
    :actions="['to right', 'to left']"
    :render="(item: RecordType) => `${item.title}-${item.description}`"
    @change="handleChange"
  >
    <template #footer="{ info }">
      <a-button
        v-if="info?.direction === 'left'"
        size="small"
        style="display: flex; margin: 8px; margin-inline-end: auto"
        @click="getMock"
      >
        Left button reload
      </a-button>
      <a-button
        v-else
        size="small"
        style="display: flex; margin: 8px; margin-inline-start: auto"
        @click="getMock"
      >
        Right button reload
      </a-button>
    </template>
  </a-transfer>
</template>
```
### Custom datasource
Customize each Transfer Item, allowing you to render a complex datasource.
```vue
<script setup lang="ts">
import type { TransferEmits, TransferProps } from 'antdv-next'
import { h, onMounted, ref } from 'vue'

interface RecordType {
  key: string
  title: string
  description: string
  chosen: boolean
}

const mockData = ref<RecordType[]>([])
const targetKeys = ref<TransferProps['targetKeys']>([])

function getMock() {
  const tempTargetKeys: string[] = []
  const tempMockData: RecordType[] = []
  for (let i = 0; i < 20; i++) {
    const data = {
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
      chosen: i % 2 === 0,
    }
    if (data.chosen) {
      tempTargetKeys.push(data.key)
    }
    tempMockData.push(data)
  }
  mockData.value = tempMockData
  targetKeys.value = tempTargetKeys
}

onMounted(() => {
  getMock()
})

const handleChange: TransferEmits['change'] = (newTargetKeys, direction, moveKeys) => {
  console.log(newTargetKeys, direction, moveKeys)
  targetKeys.value = newTargetKeys
}

function renderItem(item: RecordType) {
  const customLabel = h('span', { class: 'transfer-custom-item' }, `${item.title} - ${item.description}`)
  return {
    label: customLabel,
    value: item.title,
  }
}

const panelStyles: TransferProps['styles'] = {
  section: {
    width: '300px',
    height: '300px',
  },
}
</script>

<template>
  <a-transfer
    v-model:target-keys="targetKeys"
    :data-source="mockData"
    :styles="panelStyles"
    :render="renderItem"
    @change="handleChange"
  />
</template>

<style scoped>
.transfer-custom-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
</style>
```
### Custom Actions
You can customize operations with the `actions` prop. This example demonstrates how to customize actions, including handling disabled and loading states.

When `actions` is an array of strings, it will use the default Button component and set the strings as button text.

When `actions` is an array of Vue nodes, it will use these elements directly as action buttons, allowing you to use custom button components, such as buttons with loading state in this example.

Note:

1. When using custom buttons, the Transfer component will automatically handle the button's disabled state and click events.
2. You can add a `disabled` property to your custom button to control its disabled state.
3. You can add an `onClick` event handler to your custom button, which will be merged with the Transfer component's internal handler.
```vue
<script setup lang="ts">
import type { TransferEmits } from 'antdv-next'
import { DoubleLeftOutlined, DoubleRightOutlined } from '@antdv-next/icons'
import { Button, message } from 'antdv-next'
import { computed, h, ref } from 'vue'

interface RecordType {
  key: string
  title: string
  description: string
}

const mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({
  key: i.toString(),
  title: `Content ${i + 1}`,
  description: `Description ${i + 1}`,
}))

const initialTargetKeys = mockData.filter(item => Number(item.key) > 10).map(item => item.key)

const targetKeys = ref<string[]>(initialTargetKeys)
const selectedKeys = ref<string[]>([])
const loadingRight = ref(false)
const loadingLeft = ref(false)

const handleChange: TransferEmits['change'] = (newTargetKeys, direction, moveKeys) => {
  targetKeys.value = newTargetKeys as string[]

  if (direction === 'right') {
    loadingRight.value = true
    setTimeout(() => {
      loadingRight.value = false
      message.success(`Successfully added ${moveKeys.length} items to the right`)
    }, 1000)
  }
  else {
    loadingLeft.value = true
    setTimeout(() => {
      loadingLeft.value = false
      message.success(`Successfully added ${moveKeys.length} items to the left`)
    }, 1000)
  }
}

const handleSelectChange: TransferEmits['selectChange'] = (sourceSelectedKeys, targetSelectedKeys) => {
  selectedKeys.value = [...sourceSelectedKeys, ...targetSelectedKeys] as string[]
}

const rightButtonDisabled = computed(() =>
  selectedKeys.value.length === 0 || selectedKeys.value.every(key => targetKeys.value.includes(key)),
)

const leftButtonDisabled = computed(() =>
  selectedKeys.value.length === 0 || selectedKeys.value.every(key => !targetKeys.value.includes(key)),
)

function handleRightButtonClick(event: MouseEvent) {
  console.log('Right button clicked', event)
}

function handleLeftButtonClick(event: MouseEvent) {
  console.log('Left button clicked', event)
}

const actions = computed(() => [
  h(
    Button,
    {
      type: 'primary',
      icon: h(DoubleRightOutlined),
      loading: loadingRight.value,
      disabled: rightButtonDisabled.value,
      onClick: handleRightButtonClick,
    },
    { default: () => 'Move To Right' },
  ),
  h(
    Button,
    {
      type: 'primary',
      icon: h(DoubleLeftOutlined),
      loading: loadingLeft.value,
      disabled: leftButtonDisabled.value,
      onClick: handleLeftButtonClick,
    },
    { default: () => 'Move To Left' },
  ),
])
</script>

<template>
  <a-transfer
    v-model:target-keys="targetKeys"
    v-model:selected-keys="selectedKeys"
    :data-source="mockData"
    :actions="actions"
    :render="(item: RecordType) => item.title"
    @change="handleChange"
    @select-change="handleSelectChange"
  />
</template>
```
### Pagination
Store a large amount of items with pagination.
```vue
<script setup lang="ts">
import type { TransferEmits } from 'antdv-next'
import { onMounted, ref } from 'vue'

interface RecordType {
  key: string
  title: string
  description: string
  chosen: boolean
}

const oneWay = ref(false)
const mockData = ref<RecordType[]>([])
const targetKeys = ref<string[]>([])

onMounted(() => {
  const newTargetKeys: string[] = []
  const newMockData: RecordType[] = []
  for (let i = 0; i < 2000; i++) {
    const data = {
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
      chosen: i % 2 === 0,
    }
    if (data.chosen) {
      newTargetKeys.push(data.key)
    }
    newMockData.push(data)
  }
  targetKeys.value = newTargetKeys
  mockData.value = newMockData
})

const handleChange: TransferEmits['change'] = (newTargetKeys, direction, moveKeys) => {
  console.log(newTargetKeys, direction, moveKeys)
  targetKeys.value = newTargetKeys
}
</script>

<template>
  <div>
    <a-transfer
      v-model:target-keys="targetKeys"
      :data-source="mockData"
      :render="(item: RecordType) => item.title"
      :one-way="oneWay"
      pagination
      @change="handleChange"
    />
    <a-switch
      v-model:checked="oneWay"
      checked-children="one way"
      un-checked-children="one way"
      style="margin-top: 16px"
    />
  </div>
</template>
```
### Table Transfer
Use the Table component as the customize render list.
```vue
<script setup lang="ts">
import type { TableProps, TransferEmits, TransferProps } from 'antdv-next'
import { Table } from 'antdv-next'
import { ref } from 'vue'

interface DataType {
  key: string
  title: string
  description: string
  tag: string
  disabled?: boolean
}

const mockTags = ['cat', 'dog', 'bird'] as const

const mockData: DataType[] = Array.from({ length: 20 }, (_, i) => ({
  key: String(i),
  title: `content${i + 1}`,
  description: `description of content${i + 1}`,
  tag: mockTags[i % 3]!,
}))

const targetKeys = ref<string[]>([])

const interactionEnabled = ref(false)

const columns: TableProps['columns'] = [
  { title: 'Name', dataIndex: 'title', key: 'title' },
  { title: 'Tag', dataIndex: 'tag', key: 'tag' },
  { title: 'Description', dataIndex: 'description', key: 'description' },
]

const filterOption: NonNullable<TransferProps['filterOption']> = (input: string, item: DataType) => {
  const q = input.trim().toLowerCase()
  if (!q)
    return true
  return item.title!.toLowerCase().includes(q)
}

const handleChange: TransferEmits['change'] = (keys) => {
  targetKeys.value = keys as string[]
}

const panelStyles: TransferProps['styles'] = {
  section: {
    width: 420,
    minHeight: 520,
  },
}

const tablePagination: TableProps['pagination'] = {
  pageSize: 10,
  showSizeChanger: false,
  hideOnSinglePage: false,
}

interface ListSlotProps {
  direction: 'left' | 'right'
  disabled: boolean
  filteredItems: DataType[]
  selectedKeys: string[]
  onItemSelect: (key: string, selected: boolean) => void
  onItemSelectAll: (keys: string[], checkAll: boolean | 'replace') => void
}

function tableRowSelection(slot: ListSlotProps): TableProps['rowSelection'] {
  return {
    getCheckboxProps: record => ({
      disabled: slot.disabled || Boolean((record as DataType).disabled),
    }),
    onChange: (selectedRowKeys) => {
      slot.onItemSelectAll(selectedRowKeys as string[], 'replace')
    },
    selectedRowKeys: slot.selectedKeys,
    selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT, Table.SELECTION_NONE],
  }
}

function tableOnRow(slot: ListSlotProps): TableProps['onRow'] {
  return (record) => {
    const row = record as DataType
    return {
      onClick: (e: MouseEvent) => {
        if (slot.disabled || row.disabled)
          return
        const el = e.target as HTMLElement | null
        if (!el)
          return
        if (el.closest('.ant-table-selection-column'))
          return
        const key = row.key
        const selected = slot.selectedKeys.includes(key)
        slot.onItemSelect(key, !selected)
      },
      style: { cursor: slot.disabled || row.disabled ? undefined : 'pointer' },
    }
  }
}
</script>

<template>
  <div>
    <a-transfer
      v-model:target-keys="targetKeys"
      :data-source="mockData"
      :disabled="interactionEnabled"
      :show-select-all="false"
      show-search
      :filter-option="filterOption"
      :styles="panelStyles"
      :render="(item: DataType) => item.title"
      @change="handleChange"
    >
      <template #default="slotProps">
        <a-table
          size="small"
          :row-selection="tableRowSelection(slotProps as ListSlotProps)"
          :on-row="tableOnRow(slotProps as ListSlotProps)"
          :columns="columns"
          :data-source="slotProps.filteredItems"
          :pagination="tablePagination"
        >
          <template #bodyCell="{ column, text }">
            <template v-if="column.key === 'tag'">
              <a-tag color="cyan">
                {{ String(text).toUpperCase() }}
              </a-tag>
            </template>
          </template>
        </a-table>
      </template>
    </a-transfer>
    <a-space align="center" style="margin-top: 12px">
      <a-switch
        v-model:checked="interactionEnabled"
        checked-children="disabled"
        un-checked-children="disabled"
      />
    </a-space>
  </div>
</template>
```
### Tree Transfer
Customize the render list with a Tree component.
```vue
<script setup lang="ts">
import type { TransferEmits } from 'antdv-next'
import { ref } from 'vue'

interface TreeNode {
  key: string
  title: string
  children?: TreeNode[]
}

const treeData: TreeNode[] = [
  { key: '0-0', title: '0-0' },
  {
    key: '0-1',
    title: '0-1',
    children: [
      { key: '0-1-0', title: '0-1-0' },
      { key: '0-1-1', title: '0-1-1' },
    ],
  },
  { key: '0-2', title: '0-2' },
  { key: '0-3', title: '0-3' },
  { key: '0-4', title: '0-4' },
]

const targetKeys = ref<string[]>([])

function flattenData(list: TreeNode[] = [], result: TreeNode[] = []) {
  list.forEach((item) => {
    result.push(item)
    if (item.children) {
      flattenData(item.children, result)
    }
  })
  return result
}

const transferDataSource = flattenData(treeData, []).map(item => ({
  key: item.key,
  title: item.title,
}))

const isChecked = (selectedKeys: string[], eventKey: string) => selectedKeys.includes(eventKey)

function generateTree(treeNodes: TreeNode[] = [], checkedKeys: string[] = []): TreeNode[] {
  return treeNodes.map(({ children, ...props }) => ({
    ...props,
    disabled: checkedKeys.includes(props.key),
    children: children ? generateTree(children, checkedKeys) : undefined,
  }))
}

const handleChange: TransferEmits['change'] = (keys) => {
  targetKeys.value = keys as string[]
}
</script>

<template>
  <a-transfer
    v-model:target-keys="targetKeys"
    class="tree-transfer"
    :data-source="transferDataSource"
    :render="(item) => item.title"
    :show-select-all="false"
    @change="handleChange"
  >
    <template #default="{ direction, selectedKeys, onItemSelect }">
      <div v-if="direction === 'left'" style="padding: 8px">
        <a-tree
          block-node
          checkable
          check-strictly
          default-expand-all
          :checked-keys="[...selectedKeys, ...targetKeys]"
          :tree-data="generateTree(treeData, targetKeys)"
          @check="(_, info) => onItemSelect(info.node.key, !isChecked([...selectedKeys, ...targetKeys], info.node.key))"
          @select="(_, info) => onItemSelect(info.node.key, !isChecked([...selectedKeys, ...targetKeys], info.node.key))"
        />
      </div>
    </template>
  </a-transfer>
</template>

<style scoped>
:deep(.tree-transfer .ant-transfer-list:first-child) {
  flex: none;
  width: 50%;
}
</style>
```
### Status
Add status to Transfer with `status`, which could be `error` or `warning`.
```vue
<script setup lang="ts">
const emptyData: any[] = []
</script>

<template>
  <a-flex vertical gap="medium">
    <a-transfer :data-source="emptyData" status="error" />
    <a-transfer :data-source="emptyData" status="warning" show-search />
  </a-flex>
</template>
```
### Custom semantic dom styling
You can customize the semantic dom style of Transfers by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { TransferProps } from 'antdv-next'
import { ref } from 'vue'

const mockData = Array.from({ length: 20 }).map<any>((_, i) => ({
  key: i.toString(),
  title: `content${i + 1}`,
  description: `description of content${i + 1}`,
}))

const initialTargetKeys = mockData.filter(item => Number(item.key) > 10).map(item => item.key)

const targetKeysError = ref(initialTargetKeys)
const targetKeysWarning = ref(initialTargetKeys)

const classes: TransferProps['classes'] = {
  section: 'transfer-demo-section',
  header: 'transfer-demo-header',
  actions: 'transfer-demo-actions',
}

const stylesObject: TransferProps['styles'] = {
  header: { fontWeight: 'bold' },
}

const stylesFn: TransferProps['styles'] = (info) => {
  if (info.props.status === 'warning') {
    return {
      section: { backgroundColor: 'rgba(246,255,237, 0.6)', borderColor: '#b7eb8f' },
      header: { color: '#8DBCC7', fontWeight: 'normal' },
    } as TransferProps['styles']
  }
  return {}
}
</script>

<template>
  <a-flex vertical gap="large" style="width: 100%">
    <a-transfer
      v-model:target-keys="targetKeysError"
      :data-source="mockData"
      :render="(item) => item.title"
      status="error"
      :classes="classes"
      :styles="stylesObject"
    />
    <a-transfer
      v-model:target-keys="targetKeysWarning"
      :data-source="mockData"
      :render="(item) => item.title"
      status="warning"
      :classes="classes"
      :styles="stylesFn"
    />
  </a-flex>
</template>

<style scoped>
.transfer-demo-section {
  background-color: rgba(250, 250, 250, 0.5);
}

.transfer-demo-header {
  color: var(--ant-color-primary);
}

.transfer-demo-actions button {
  background-color: rgba(255, 242, 232, 0.6);
}
</style>
```
### Custom Select All Labels
Custom the labels for select all checkboxes.
```vue
<script setup lang="ts">
import type { TransferEmits, TransferProps } from 'antdv-next'
import { ref } from 'vue'

interface RecordType {
  key: string
  title: string
  description: string
}

const mockData = Array.from({ length: 10 }).map<RecordType>((_, i) => ({
  key: i.toString(),
  title: `content${i + 1}`,
  description: `description of content${i + 1}`,
}))

const oriTargetKeys = mockData.filter(item => Number(item.key) % 3 > 1).map(item => item.key)

const selectAllLabels: TransferProps['selectAllLabels'] = [
  'Select All',
  ({ selectedCount, totalCount }) => `${selectedCount}/${totalCount}`,
]

const targetKeys = ref(oriTargetKeys)

const handleChange: TransferEmits['change'] = (newTargetKeys) => {
  targetKeys.value = newTargetKeys
}
</script>

<template>
  <a-transfer
    v-model:target-keys="targetKeys"
    :data-source="mockData"
    :render="(item: RecordType) => item.title"
    :select-all-labels="selectAllLabels"
    @change="handleChange"
  />
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| actions | A set of operations that are sorted from top to bottom. When an array of strings is provided, default buttons will be used; when an array of VueNode is provided, custom elements will be used | VueNode[] | [`>`, `<`] | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function | TransferClassNamesType | - | - | ✓ |
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop | TransferItem[] | [] | - | × |
| disabled | Whether disabled transfer | boolean | false | - | × |
| filterOption | A function to determine whether an item should show in search result list, only works when searching | (inputValue: string, option: TransferItem, direction: `left` \| `right`) =&gt; boolean | - | - | × |
| footer | A function used for rendering the footer | (props: TransferListProps, direction: `left` \| `right`) =&gt; VueNode | - | - | × |
| locale | The i18n text including filter, empty text, item unit, etc | TransferLocale | &#123; itemUnit: `item`, itemsUnit: `items`, notFoundContent: `No data`, searchPlaceholder: `Search here` &#125; | - | × |
| oneWay | Display as single direction style | boolean | false | - | × |
| pagination | Use pagination. Not work in render props | boolean \| &#123; pageSize: number; simple: boolean; showSizeChanger?: boolean; showLessItems?: boolean &#125; | false | - | × |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a VueNode which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a VueNode and `value` is for title | (record: TransferItem) =&gt; VueNode | - | - | × |
| rowKey | Specify the key that will be used for uniquely identify each element | (record: TransferItem) =&gt; string | - | - | × |
| selectAllLabels | A set of customized labels for select all checkboxes on the header | (VueNode \| (info: &#123; selectedCount: number; totalCount: number &#125;) =&gt; VueNode)[] | - | - | × |
| selectedKeys | A set of keys of selected items, support `v-model:selected-keys` | string[] | [] | - | × |
| selectionsIcon | Custom dropdown icon | VueNode | - | - | ✓ |
| showSearch | If included, a search box is shown on each column | boolean \| &#123; placeholder?: string; defaultValue?: string &#125; | false | - | × |
| showSelectAll | Show select all checkbox on the header | boolean | true | - | × |
| status | Set validation status | `error` \| `warning` | - | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | TransferStylesType | - | - | ✓ |
| targetKeys | A set of keys of elements that are listed on the right column, support `v-model:target-keys` | string[] | [] | - | × |
| titles | A set of titles that are sorted from left to right | VueNode[] | - | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | A callback function that is executed when the transfer between columns is complete | (targetKeys: string[], direction: `left` \| `right`, moveKeys: string[]) =&gt; void | - |
| scroll | A callback function which is executed when scroll options list | (direction: `left` \| `right`, event: Event) =&gt; void | - |
| search | A callback function which is executed when search field are changed | (direction: `left` \| `right`, value: string) =&gt; void | - |
| selectChange | A callback function which is executed when selected items are changed | (sourceSelectedKeys: string[], targetSelectedKeys: string[]) =&gt; void | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| actions | Custom operation buttons | (direction: `left` \| `right`) =&gt; VueNode | - |
| footer | Custom footer | (props: TransferListProps, direction: `left` \| `right`) =&gt; VueNode | - |
| render | Custom item render | (item: TransferItem) =&gt; VueNode | - |
| notFoundContent | Custom empty content | (direction: `left` \| `right`) =&gt; VueNode | - |
| selectAllLabels | Custom select all label | (info: &#123; selectedCount: number; totalCount: number; direction: `left` \| `right` &#125;) =&gt; VueNode | - |

## Types

### Render Props

Transfer accept `children` to customize render list, using follow props:

| Property | Description | Type | Version |
| --- | --- | --- | --- |
| direction | List render direction | `left` \| `right` | - |
| disabled | Disable list or not | boolean | - |
| filteredItems | Filtered items | TransferItem[] | - |
| selectedKeys | Selected items | string[] | - |
| onItemSelect | Select item | (key: string, selected: boolean) =&gt; void | - |
| onItemSelectAll | Select a group of items | (keys: string[], selected: boolean) =&gt; void | - |

## Warning

According the standard of Vue, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier.

If there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element.

```vue
<!--  eg. your primary key is `uid` -->
<a-transfer :row-key="(record) => record.uid" />
```

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Transfer"></ComponentTokenTable>

## FAQ

### How to support fetch and present data from a remote server in Transfer column. {#faq-async-data-loading}

In order to keep the page number synchronized, you can disable columns you checked without removing the option.

---
Title: Tree
URL: https://www.antdv-next.com/components/tree.md
---

## When To Use

Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a `Tree`.

## Examples

### Basic
The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { ref } from 'vue'

const treeData: TreeDataNode[] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ title: 'sss', key: '0-0-1-0' }],
      },
    ],
  },
]
const expandedKeys = ref(['0-0-0', '0-0-1'])
const selectedKeys = ref(['0-0-1'])
const checkedKeys = ref(['0-0-0', '0-0-1'])
const onSelect: TreeEmits['select'] = (selectedKeys, info) => {
  console.log('selected', selectedKeys, info)
}

const onCheck: TreeEmits['check'] = (checkedKeys, info) => {
  console.log('onCheck', checkedKeys, info)
}
</script>

<template>
  <a-tree
    v-model:expanded-keys="expandedKeys"
    v-model:selected-keys="selectedKeys"
    v-model:checked-keys="checkedKeys"
    checkable
    :tree-data="treeData"
    @select="onSelect"
    @check="onCheck"
  >
    <template #titleRender="{ key, title }">
      <template v-if="key === '0-0-1-0'">
        <span style="color: #1677ff">{{ title }}</span>
      </template>
    </template>
  </a-tree>
</template>
```
### Controlled Tree
Controlled mode lets parent nodes reflect the status of child nodes more intelligently.
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { ref } from 'vue'

const treeData: TreeDataNode[] = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
      {
        title: '0-0-1',
        key: '0-0-1',
        children: [
          { title: '0-0-1-0', key: '0-0-1-0' },
          { title: '0-0-1-1', key: '0-0-1-1' },
          { title: '0-0-1-2', key: '0-0-1-2' },
        ],
      },
      {
        title: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: '0-1',
    key: '0-1',
    children: [
      { title: '0-1-0-0', key: '0-1-0-0' },
      { title: '0-1-0-1', key: '0-1-0-1' },
      { title: '0-1-0-2', key: '0-1-0-2' },
    ],
  },
  {
    title: '0-2',
    key: '0-2',
  },
]

const expandedKeys = ref<(string | number)[]>(['0-0-0', '0-0-1'])
const checkedKeys = ref<(string | number)[]>(['0-0-0'])
const selectedKeys = ref<(string | number)[]>([])
const autoExpandParent = ref(true)

const onExpand: TreeEmits['expand'] = (expandedKeysValue) => {
  console.log('onExpand', expandedKeysValue)
  // if not set autoExpandParent to false, if children expanded, parent can not collapse.
  // or, you can remove all expanded children keys.
  expandedKeys.value = expandedKeysValue
  autoExpandParent.value = false
}

const onCheck: TreeEmits['check'] = (checkedKeysValue) => {
  console.log('onCheck', checkedKeysValue)
  checkedKeys.value = checkedKeysValue as (string | number)[]
}

const onSelect: TreeEmits['select'] = (selectedKeysValue, info) => {
  console.log('onSelect', info)
  selectedKeys.value = selectedKeysValue
}
</script>

<template>
  <a-tree
    checkable
    :expanded-keys="expandedKeys"
    :auto-expand-parent="autoExpandParent"
    :checked-keys="checkedKeys"
    :selected-keys="selectedKeys"
    :tree-data="treeData"
    @expand="onExpand"
    @check="onCheck"
    @select="onSelect"
  />
</template>
```
### draggable
Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { ref } from 'vue'

type Key = string | number

const x = 3
const y = 2
const z = 1
const defaultData: TreeDataNode[] = []

function generateData(_level: number, _preKey?: Key, _tns?: TreeDataNode[]) {
  const preKey = _preKey || '0'
  const tns = _tns || defaultData

  const children: Key[] = []
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`
    tns.push({ title: key, key })
    if (i < y) {
      children.push(key)
    }
  }
  if (_level < 0) {
    return tns
  }
  const level = _level - 1
  children.forEach((key, index) => {
    tns[index!]!.children = []
    return generateData(level, key, tns[index!]!.children)
  })
}
generateData(z)

const gData = ref<TreeDataNode[]>(defaultData)
const expandedKeys = ref(['0-0', '0-0-0', '0-0-0-0'])

const onDragEnter: TreeEmits['dragEnter'] = (info) => {
  console.log(info)
  // expandedKeys, set it when controlled is needed
  // expandedKeys.value = info.expandedKeys
}

const onDrop: TreeEmits['drop'] = (info) => {
  console.log(info)
  const dropKey = info.node.key
  const dragKey = info.dragNode.key
  const dropPos = info.node.pos.split('-')
  const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]) // the drop position relative to the drop node, inside 0, top -1, bottom 1

  const loop = (
    data: TreeDataNode[],
    key: Key,
    callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void,
  ) => {
    for (let i = 0; i < data.length; i++) {
      if (data[i!]!.key === key) {
        return callback(data[i!]!, i, data)
      }
      if (data[i!]!.children) {
        loop(data[i!]!.children!, key, callback)
      }
    }
  }
  const data = [...gData.value]

  // Find dragObject
  let dragObj: TreeDataNode
  loop(data, dragKey, (item, index, arr) => {
    arr.splice(index, 1)
    dragObj = item
  })

  if (!info.dropToGap) {
    // Drop on the content
    loop(data, dropKey, (item) => {
      item.children = item.children || []
      // where to insert. New item was inserted to the start of the array in this example, but can be anywhere
      item.children.unshift(dragObj)
    })
  }
  else {
    let ar: TreeDataNode[] = []
    let i: number
    loop(data, dropKey, (_item, index, arr) => {
      ar = arr
      i = index
    })
    if (dropPosition === -1) {
      // Drop on the top of the drop node
      ar.splice(i!, 0, dragObj!)
    }
    else {
      // Drop on the bottom of the drop node
      ar.splice(i! + 1, 0, dragObj!)
    }
  }
  gData.value = data
}
</script>

<template>
  <a-tree
    v-model:expanded-keys="expandedKeys"
    class="draggable-tree"
    draggable
    block-node
    :tree-data="gData"
    @dragenter="onDragEnter"
    @drop="onDrop"
  />
</template>
```
### load data asynchronously
To load data asynchronously when click to expand a treeNode.
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeProps } from 'antdv-next'
import { ref } from 'vue'

type Key = string | number

const initTreeData: TreeDataNode[] = [
  { title: 'Expand to load', key: '0' },
  { title: 'Expand to load', key: '1' },
  { title: 'Tree Node', key: '2', isLeaf: true },
]

// It's just a simple demo. You can use tree map to optimize update perf.
function updateTreeData(list: TreeDataNode[], key: Key, children: TreeDataNode[]): TreeDataNode[] {
  return list.map((node) => {
    if (node.key === key) {
      return {
        ...node,
        children,
      }
    }
    if (node.children) {
      return {
        ...node,
        children: updateTreeData(node.children, key, children),
      }
    }
    return node
  })
}

const treeData = ref<TreeDataNode[]>(initTreeData)

const loadData: TreeProps['loadData'] = ({ key, children }) =>
  new Promise<void>((resolve) => {
    if (children) {
      resolve()
      return
    }
    setTimeout(() => {
      treeData.value = updateTreeData(treeData.value, key, [
        { title: 'Child Node', key: `${key}-0` },
        { title: 'Child Node', key: `${key}-1` },
      ])

      resolve()
    }, 1000)
  })
</script>

<template>
  <a-tree :load-data="loadData" :tree-data="treeData" />
</template>
```
### Searchable
Searchable Tree.
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { computed, h, ref, watch } from 'vue'

type Key = string | number

const x = 3
const y = 2
const z = 1
const defaultData: TreeDataNode[] = []

function generateData(_level: number, _preKey?: Key, _tns?: TreeDataNode[]) {
  const preKey = _preKey || '0'
  const tns = _tns || defaultData

  const children: Key[] = []
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`
    tns.push({ title: key, key })
    if (i < y) {
      children.push(key)
    }
  }
  if (_level < 0) {
    return tns
  }
  const level = _level - 1
  children.forEach((key, index) => {
    tns[index!]!.children = []
    return generateData(level, key, tns[index!]!.children)
  })
}
generateData(z)

const dataList: { key: Key, title: string }[] = []
function generateList(data: TreeDataNode[]) {
  for (let i = 0; i < data.length; i++) {
    const node = data[i!]!
    const { key } = node
    dataList.push({ key, title: key as string })
    if (node.children) {
      generateList(node.children)
    }
  }
}
generateList(defaultData)

function getParentKey(key: Key, tree: TreeDataNode[]): Key {
  let parentKey: Key
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i!]!
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key
      }
      else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey!
}

const expandedKeys = ref<Key[]>([])
const searchValue = ref('')
const autoExpandParent = ref(true)

const onExpand: TreeEmits['expand'] = (newExpandedKeys) => {
  expandedKeys.value = newExpandedKeys
  autoExpandParent.value = false
}

function onChange(value: string) {
  const newExpandedKeys = dataList
    .map((item) => {
      if (item.title.includes(value)) {
        return getParentKey(item.key, defaultData)
      }
      return null
    })
    .filter((item, i, self): item is Key => !!(item && self.indexOf(item) === i))
  expandedKeys.value = newExpandedKeys
  autoExpandParent.value = true
}

watch(searchValue, (value) => {
  onChange(value)
})
const treeData = computed(() => {
  const loop = (data: TreeDataNode[]): TreeDataNode[] =>
    data.map((item) => {
      const strTitle = item.title as string
      const index = strTitle.indexOf(searchValue.value)
      const beforeStr = strTitle.substring(0, index)
      const afterStr = strTitle.slice(index + searchValue.value.length)
      const title
        = index > -1
          ? h('span', { key: item.key }, [
              beforeStr,
              h('span', { class: 'site-tree-search-value' }, searchValue.value),
              afterStr,
            ])
          : h('span', { key: item.key }, strTitle)
      if (item.children) {
        return { title, key: item.key, children: loop(item.children) }
      }

      return {
        title,
        key: item.key,
      }
    })

  return loop(defaultData)
})
</script>

<template>
  <div>
    <a-input-search
      v-model:value="searchValue"
      class="mb-8px"
      placeholder="Search"
    />
    {{ expandedKeys }}
    <a-tree
      v-model:expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :tree-data="treeData"
      @expand="onExpand"
    />
  </div>
</template>

<style>
.site-tree-search-value {
  color: #f50;
}
</style>
```
### Tree with line
Tree with connected line between nodes, turn on by `showLine`, customize the preset icon by `switcherIcon`.
```vue
<script lang="ts" setup>
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { CarryOutOutlined, CheckOutlined, FormOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'

const treeData: TreeDataNode[] = [
  {
    title: 'parent 1',
    key: '0-0',
    icon: h(CarryOutOutlined),
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        icon: h(CarryOutOutlined),
        children: [
          { title: 'leaf', key: '0-0-0-0', icon: h(CarryOutOutlined) },
          {
            key: '0-0-0-1',
            icon: h(CarryOutOutlined),
          },
          { title: 'leaf', key: '0-0-0-2', icon: h(CarryOutOutlined) },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        icon: h(CarryOutOutlined),
        children: [{ title: 'leaf', key: '0-0-1-0', icon: h(CarryOutOutlined) }],
      },
      {
        title: 'parent 1-2',
        key: '0-0-2',
        icon: h(CarryOutOutlined),
        children: [
          { title: 'leaf', key: '0-0-2-0', icon: h(CarryOutOutlined) },
          {
            title: 'leaf',
            key: '0-0-2-1',
            icon: h(CarryOutOutlined),
            switcherIcon: h(FormOutlined),
          },
        ],
      },
    ],
  },
  {
    title: 'parent 2',
    key: '0-1',
    icon: h(CarryOutOutlined),
    children: [
      {
        title: 'parent 2-0',
        key: '0-1-0',
        icon: h(CarryOutOutlined),
        children: [
          { title: 'leaf', key: '0-1-0-0', icon: h(CarryOutOutlined) },
          { title: 'leaf', key: '0-1-0-1', icon: h(CarryOutOutlined) },
        ],
      },
    ],
  },
]

const showLine = ref(true)
const showIcon = ref(false)
const showLeafIcon = ref<boolean | ReturnType<typeof h>>(true)

const onSelect: TreeEmits['select'] = (selectedKeys, info) => {
  console.log('selected', selectedKeys, info)
}

function handleLeafIconChange(value: 'true' | 'false' | 'custom') {
  if (value === 'custom') {
    showLeafIcon.value = h(CheckOutlined)
    return
  }

  if (value === 'true') {
    showLeafIcon.value = true
    return
  }

  showLeafIcon.value = false
}

const expandedKeys = ref(['0-0-0'])
const leafSelectVal = ref('true')
</script>

<template>
  <div>
    <div class="mb-16px">
      showLine: <a-switch v-model:checked="showLine" />
      <br>
      <br>
      showIcon: <a-switch v-model:checked="showIcon" />
      <br>
      <br>
      showLeafIcon:
      <a-select
        v-model:value="leafSelectVal"
        :options="[
          { label: 'True', value: 'true' },
          { label: 'False', value: 'false' },
          { label: 'Custom icon', value: 'custom' },
        ]"
        @change="handleLeafIconChange"
      />
    </div>
    <a-tree
      v-model:expanded-keys="expandedKeys"
      :show-line="showLine ? { showLeafIcon } : false"
      :show-icon="showIcon"
      :tree-data="treeData"
      @select="onSelect"
    >
      <template #titleRender="{ key }">
        <template v-if="key === '0-0-0-1'">
          <div>multiple line title</div>
          <div>multiple line title</div>
        </template>
      </template>
    </a-tree>
  </div>
</template>
```
### Customize Icon
You can customize icons for different nodes.
```vue
<script lang="ts" setup>
import type { TreeDataNode } from 'antdv-next'
import { DownOutlined, FrownFilled, FrownOutlined, MehOutlined, SmileOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'

const treeData: TreeDataNode[] = [
  {
    title: 'parent 1',
    key: '0-0',
    icon: h(SmileOutlined),
    children: [
      {
        title: 'leaf',
        key: '0-0-0',
        icon: h(MehOutlined),
      },
      {
        title: 'leaf',
        key: '0-0-1',
        icon: ({ selected }: TreeDataNode) => (selected ? h(FrownFilled) : h(FrownOutlined)),
      },
    ],
  },
]
const selectedKeys = ref(['0-0-0'])
</script>

<template>
  <a-tree v-model:selected-keys="selectedKeys" show-icon default-expand-all :tree-data="treeData">
    <template #switcherIcon>
      <DownOutlined />
    </template>
  </a-tree>
</template>
```
### directory
Built-in directory tree. `multiple` support `ctrl(Windows)` / `command(Mac)` selection.
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'

const treeData: TreeDataNode[] = [
  {
    title: 'parent 0',
    key: '0-0',
    children: [
      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
    ],
  },
  {
    title: 'parent 1',
    key: '0-1',
    children: [
      { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
      { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
    ],
  },
]

const onSelect: TreeEmits['select'] = (keys, info) => {
  console.log('Trigger Select', keys, info)
}

const onExpand: TreeEmits['expand'] = (keys, info) => {
  console.log('Trigger Expand', keys, info)
}
</script>

<template>
  <a-directory-tree
    multiple
    draggable
    default-expand-all
    :tree-data="treeData"
    @select="onSelect"
    @expand="onExpand"
  />
</template>
```
### Customize collapse/expand icon
customize collapse/expand icon of tree node
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { DownOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const treeData: TreeDataNode[] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
          {
            title: 'leaf',
            key: '0-0-0-2',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [
          {
            title: 'leaf',
            key: '0-0-1-0',
          },
        ],
      },
      {
        title: 'parent 1-2',
        key: '0-0-2',
        children: [
          {
            title: 'leaf',
            key: '0-0-2-0',
          },
          {
            title: 'leaf',
            key: '0-0-2-1',
          },
        ],
      },
    ],
  },
]

const expandedKeys = ref(['0-0-0'])

const onSelect: TreeEmits['select'] = (selectedKeys, info) => {
  console.log('selected', selectedKeys, info)
}
</script>

<template>
  <a-tree
    v-model:expanded-keys="expandedKeys"
    show-line
    :tree-data="treeData"
    @select="onSelect"
  >
    <template #switcherIcon>
      <DownOutlined />
    </template>
  </a-tree>
</template>
```
### Virtual scroll
Use virtual list through `height` prop.
```vue
<script setup lang="ts">
import type { TreeDataNode } from 'antdv-next'

function dig(path = '0', level = 3) {
  const list: TreeDataNode[] = []
  for (let i = 0; i < 10; i += 1) {
    const key = `${path}-${i}`
    const treeNode: TreeDataNode = {
      title: key,
      key,
    }

    if (level > 0) {
      treeNode.children = dig(key, level - 1)
    }

    list.push(treeNode)
  }
  return list
}

const treeData = dig()
</script>

<template>
  <a-tree
    :tree-data="treeData"
    :height="233"
    default-expand-all
  >
    <template #titleRender="{ title }">
      <a-tooltip :title="title as any">
        {{ title }}
      </a-tooltip>
    </template>
  </a-tree>
</template>
```
### Scroll to nested node
In controlled mode, use `useTree` to get the node path and update `expandedKeys` before scrolling to the target node.
```vue
<script setup lang="ts">
import type { TreeDataNode } from 'antdv-next'
import { useTree } from 'antdv-next'
import { nextTick, ref, useTemplateRef } from 'vue'

const TARGET_KEY = '0-1-1-1-1'

function createTree(key = '0', level = 1): TreeDataNode {
  return {
    key,
    title: key,
    children: level < 5 ? [0, 1].map(index => createTree(`${key}-${index}`, level + 1)) : undefined,
  }
}

const treeData = [createTree()]

const treeRef = useTemplateRef<any>('treeRef')
const expandedKeys = ref<(string | number)[]>([])
const { getPath } = useTree(treeData)

async function scrollTo() {
  expandedKeys.value = getPath(TARGET_KEY).map(({ key }) => key as string)
  await nextTick()
  treeRef.value?.scrollTo({ key: TARGET_KEY, align: 'top' })
}
</script>

<template>
  <a-flex vertical gap="small">
    <a-button @click="scrollTo">
      scrollTo: {{ TARGET_KEY }}
    </a-button>
    <a-tree
      ref="treeRef"
      v-model:expanded-keys="expandedKeys"
      :height="200"
      :tree-data="treeData"
    />
  </a-flex>
</template>
```
### Block Node
Make tree nodes fill the remaining horizontal space.
```vue
<script setup lang="ts">
import type { TreeDataNode } from 'antdv-next'
import { ref } from 'vue'

const treeData: TreeDataNode[] = [
  {
    title: 'parent',
    key: '0',
    children: [
      {
        title: 'child 1',
        key: '0-0',
        disabled: true,
      },
      {
        title: 'child 2',
        key: '0-1',
        disableCheckbox: true,
      },
    ],
  },
]

const selectedKeys = ref(['0-1'])
</script>

<template>
  <a-tree
    v-model:selected-keys="selectedKeys"
    checkable
    default-expand-all
    :tree-data="treeData"
    block-node
  />
</template>
```
### Big data
Plenty of tree nodes.
```vue
<script setup lang="ts">
import type { TreeDataNode } from 'antdv-next'

const treeData: TreeDataNode[] = []

for (let i = 0; i < 100; i += 1) {
  const children: TreeDataNode[] = []

  for (let j = 0; j < 100; j += 1) {
    children.push({
      title: `child ${i}-${j}`,
      key: `l-${i}-${j}`,
    })
  }

  treeData.push({
    title: `parent ${i}`,
    key: `l-${i}`,
    children,
  })
}
</script>

<template>
  <a-tree default-expand-all :height="400" :tree-data="treeData" />
</template>
```
### Multiple lines
Multiple line tree node.
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeEmits } from 'antdv-next'
import { ref } from 'vue'

const treeData: TreeDataNode[] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'This is a very very very very long text',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'This is also a very very very very very long text',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'This is also a very very very very very long title',
        key: '0-0-1',
        children: [{ key: '0-0-1-0' }],
      },
    ],
  },
]

const expandedKeys = ref(['0-0-0', '0-0-1'])
const selectedKeys = ref(['0-0-1'])
const checkedKeys = ref(['0-0-0', '0-0-1'])

const onSelect: TreeEmits['select'] = (selectedKeys, info) => {
  console.log('selected', selectedKeys, info)
}

const onCheck: TreeEmits['check'] = (checkedKeys, info) => {
  console.log('onCheck', checkedKeys, info)
}
</script>

<template>
  <a-tree
    v-model:expanded-keys="expandedKeys"
    v-model:selected-keys="selectedKeys"
    v-model:checked-keys="checkedKeys"
    checkable
    :tree-data="treeData"
    :style="{ width: '200px' }"
    @select="onSelect"
    @check="onCheck"
  >
    <template #titleRender="{ key }">
      <template v-if="key === '0-0-1-0'">
        <span style="color: #1677ff">sss</span>
      </template>
    </template>
  </a-tree>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Tree by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { TreeDataNode, TreeProps } from 'antdv-next'
import { ref } from 'vue'

const treeData: TreeDataNode[] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [
          {
            title: 'leaf',
            key: '0-0-1-0',
          },
        ],
      },
    ],
  },
]

const styles: TreeProps['styles'] = {
  root: { border: '2px solid #d9d9d9' },
  item: { margin: '2px 0' },
}

const stylesFn: TreeProps['styles'] = (info) => {
  if (!info.props.checkable) {
    return {
      root: {
        border: `2px solid #E5D9F2`,
        borderRadius: '4px',
      },
    }
  }
  return {}
}

const expandedKeys = ref(['0-0-0', '0-0-1'])
const selectedKeys = ref(['0-0-1'])
const checkedKeys = ref(['0-0-0', '0-0-1'])
const classes = {
  root: 'root',
  item: 'item',
  itemTitle: 'itemTitle',
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-tree
      :tree-data="treeData"
      :classes="classes"
      auto-expand-parent
      checkable
      :styles="styles"
    />
    <a-tree
      v-model:expanded-keys="expandedKeys"
      v-model:selected-keys="selectedKeys"
      v-model:checked-keys="checkedKeys"
      :tree-data="treeData"
      :classes="classes"
      auto-expand-parent
      :checkable="false"
      :styles="stylesFn"
    />
  </a-flex>
</template>

<style>
.root {
  padding: 8px;
  border-radius: 4px;
}

.item {
  border-radius: 2px;
}

.itemTitle {
  font-size: 14px;
}
</style>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Tree

#### Props {#tree-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowDrop | Whether to allow dropping on the node | (&#123; dropNode, dropPosition &#125;) =&gt; boolean | - | - | × |
| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | false | - | × |
| blockNode | Whether treeNode fill remaining horizontal space | boolean | false | - | × |
| checkable | Add a Checkbox before the treeNodes | boolean | false | - | × |
| checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other, support `v-model:checked-keys` | string[] \| &#123;checked: string[], halfChecked: string[]&#125; | [] | - | × |
| checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | - | ✓ |
| defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string[] | [] | - | × |
| defaultExpandAll | Whether to expand all treeNodes by default | boolean | false | - | × |
| defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string[] | [] | - | × |
| defaultExpandParent | If auto expand parent treeNodes when init | boolean | true | - | × |
| defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string[] | [] | - | × |
| disabled | Whether the tree is disabled | boolean | false | - | × |
| draggable | Specifies whether this Tree or the node is draggable. Use `icon: false` to disable drag handler icon | boolean \| ((node: DataNode) =&gt; boolean) \| &#123; icon?: VueNode \| false, nodeDraggable?: (node: DataNode) =&gt; boolean &#125; | false | - | × |
| expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes, support `v-model:expanded-keys` | string[] | [] | - | × |
| fieldNames | Customize node title, key, children field name | object | &#123; title: `title`, key: `key`, children: `children` &#125; | - | × |
| filterAntTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - | - | × |
| height | Config virtual scroll height. Will not support horizontal scroll when enabled | number | - | - | × |
| icon | Insert a custom icon before the title. Need to set `showIcon` to true | VueNode \| (props) =&gt; VueNode | - | - | × |
| loadData | Load data asynchronously | function(node) | - | - | × |
| loadedKeys | (Controlled) Set loaded tree nodes. Need to work with `loadData` | string[] | [] | - | × |
| multiple | Allows selecting multiple treeNodes | boolean | false | - | × |
| ~~rootStyle~~ | Style on the root element, please use `styles.root` instead | CSSProperties | - | - | × |
| selectable | Whether it can be selected | boolean | true | - | × |
| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes, multiple selection needs to set `multiple` to true, support `v-model:selected-keys` | string[] | - | - | × |
| showIcon | Controls whether to display the `icon` node (no default style) | boolean | false | - | × |
| showLine | Shows a connecting line | boolean \| &#123;showLeafIcon: VueNode \| ((props: AntTreeNodeProps) =&gt; VueNode)&#125; | false | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - | ✓ |
| switcherIcon | Customize expand/collapse icons for tree nodes (With default rotate angular style) | VueNode \| ((props: AntTreeNodeProps) =&gt; VueNode) | - | - | × |
| switcherLoadingIcon | Customize loading icons for tree nodes | VueNode | - | - | × |
| titleRender | Customize tree node title render | (nodeData) =&gt; VueNode | - | - | × |
| treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;&#123; key, title, children, [disabled, selectable] &#125;&gt; | - | - | × |
| virtual | Disable virtual scroll when set to false | boolean | true | - | × |

#### Events {#tree-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| check | Callback function for when the onCheck event occurs | function(checkedKeys, e:&#123;checked: boolean, checkedNodes, node, event, halfCheckedKeys&#125;) | - |
| dragEnd | Callback function for when the onDragEnd event occurs | function(&#123;event, node&#125;) | - |
| dragEnter | Callback function for when the onDragEnter event occurs | function(&#123;event, node, expandedKeys&#125;) | - |
| dragLeave | Callback function for when the onDragLeave event occurs | function(&#123;event, node&#125;) | - |
| dragOver | Callback function for when the onDragOver event occurs | function(&#123;event, node&#125;) | - |
| dragStart | Callback function for when the onDragStart event occurs | function(&#123;event, node&#125;) | - |
| drop | Callback function for when the onDrop event occurs | function(&#123;event, node, dragNode, dragNodesKeys&#125;) | - |
| expand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, &#123;expanded: boolean, node&#125;) | - |
| load | Callback function for when a treeNode is loaded | function(loadedKeys, &#123;event, node&#125;) | - |
| rightClick | Callback function for when the user right clicks a treeNode | function(&#123;event, node&#125;) | - |
| select | Callback function for when the user clicks a treeNode | function(selectedKeys, e:&#123;selected: boolean, selectedNodes, node, event&#125;) | - |

#### Slots {#tree-slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| switcherLoadingIcon | Customize loading icons for tree nodes | () =&gt; any | - |
| switcherIcon | Customize expand/collapse icons for tree nodes | (props: AntTreeNodeProps) =&gt; any | - |
| draggableIcon | Custom draggable icon | () =&gt; any | - |
| icon | Insert a custom icon before the title | (props: AntdTreeNodeAttribute) =&gt; any | - |
| titleRender | Customize tree node title render | VcTreeProps['titleRender'] | - |

#### Methods {#tree-methods}

| Name | Description |
| --- | --- |
| scrollTo(&#123; key: Key, align?: 'top' \| 'bottom' \| 'auto', offset?: number, autoExpand?: boolean &#125;) | Scroll to key item in virtual scroll. `autoExpand` expands the target node in uncontrolled mode |

### TreeNode

#### Props {#treenode-props}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | - |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | - |
| disabled | Disables the treeNode | boolean | false | - |
| icon | Customize icon. When you pass component, whose render will receive full TreeNode props as component props | VueNode \| (props) =&gt; VueNode | - | - |
| isLeaf | Determines if this is a leaf node (effective when `loadData` is specified). `false` will force the TreeNode to be treated as a parent node | boolean | - | - |
| key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree | string | (internal calculated position of treeNode) | - |
| selectable | Set whether the treeNode can be selected | boolean | true | - |
| title | Title | VueNode | `---` | - |

### DirectoryTree

#### Props {#directorytree-props}

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| expandAction | Directory opening logic, options: false \| `click` \| `doubleClick` | string \| boolean | `click` |

### Tree Hooks

#### useTree {#use-tree}

`type useTree = (treeData: MaybeRefOrGetter<TreeDataNode[]>, config?: { fieldNames?: MaybeRefOrGetter<FieldNames> }) => TreeInstance`

Provides Tree data utilities. `getPath(key)` returns the node entities from the root to the target node, which can be used to update `expandedKeys` in controlled mode. Also available as `Tree.useTree`.

```ts
import { useTree } from 'antdv-next'

const { getPath } = useTree(treeData)
```

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token {#design-token}

<ComponentTokenTable component="Tree"></ComponentTokenTable>

## FAQ

### Why defaultExpandAll not working on ajax data? {#faq-default-expand-all}

`default` prefix props only work when initializing. So `defaultExpandAll` has already been executed when ajax loads data. You can control `expandedKeys` or render the Tree when data is loaded to realize expanding all nodes.

### Virtual scroll limitation {#faq-virtual-scroll-limitation}

Virtual scroll only render items in visible region. Thus not support auto width (like long `title` with horizontal scroll).

### What does `disabled` node work logic in the tree? {#faq-disabled-node}

Tree change its data by conduction. Includes checked or auto expanded, it will conduction state to parent / children node until current node is `disabled`. So if a controlled node is `disabled`, it will only modify self state and not affect other nodes. For example, a parent node contains 3 child nodes and one of them is `disabled`. When check the parent node, it will only check rest 2 child nodes. As the same, when check these 2 child node, parent will be checked whatever checked state the `disabled` one is.

This conduction logic prevents modifying `disabled` parent checked state by checking children nodes, and users cannot modify directly with click which avoids interactive conflicts. If you want to modify this conduction logic, you can customize it with the `checkStrictly` prop.

---
Title: TreeSelect
URL: https://www.antdv-next.com/components/tree-select.md
---

## When To Use {#when-to-use}

`TreeSelect` is similar to `Select`, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.

## Examples {#examples}

### Basic
The most basic usage.
```vue
<script setup lang="ts">
import type { TreeSelectEmits } from 'antdv-next'
import { ref } from 'vue'

const value = ref()
const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
          },
          {
            value: 'leaf2',
            title: 'leaf2',
          },
          {
            value: 'leaf3',
            title: 'leaf3',
          },
          {
            value: 'leaf4',
            title: 'leaf4',
          },
          {
            value: 'leaf5',
            title: 'leaf5',
          },
          {
            value: 'leaf6',
            title: 'leaf6',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'leaf11',
            title: 'leaf11',
          },
        ],
      },
    ],
  },
]

const onPopupScroll: TreeSelectEmits['popupScroll'] = (e) => {
  console.log('onPopupScroll', e)
}
</script>

<template>
  <a-tree-select
    v-model:value="value"
    :tree-data="treeData"
    style="width: 100%"
    :styles="{
      popup: {
        root: {
          maxHeight: '400px',
          overflow: 'auto',
        },
      },
    }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
    @popup-scroll="onPopupScroll"
  >
    <template #treeTitleRender="item">
      <template v-if="item.value === 'leaf11'">
        <b style="color: #08c">leaf11</b>
      </template>
    </template>
  </a-tree-select>
  {{ value }}
</template>
```
### Multiple Selection
Multiple selection usage.
```vue
<script setup lang="ts">
import type { TreeSelectEmits } from 'antdv-next'
import { ref } from 'vue'

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'my leaf',
          },
          {
            value: 'leaf2',
            title: 'your leaf',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'sss',
            title: 'sss',
          },
        ],
      },
    ],
  },
]

const value = ref<string[]>()

const onChange: TreeSelectEmits['change'] = (newValue) => {
  console.log(newValue)
}
</script>

<template>
  <a-tree-select
    v-model:value="value"
    show-search
    style="width: 100%"
    :styles="{
      popup: {
        root: {
          maxHeight: '400px',
          overflow: 'auto',
        },
      },
    }"
    placeholder="Please select"
    allow-clear
    multiple
    tree-default-expand-all
    :tree-data="treeData"
    @change="onChange"
  >
    <template #treeTitleRender="item">
      <template v-if="item.value === 'sss'">
        <b style="color: #08c">sss</b>
      </template>
    </template>
  </a-tree-select>
</template>
```
### Generate from tree data
The tree structure can be populated using `treeData` property. This is a quick and easy way to provide the tree content.
```vue
<script setup lang="ts">
import type { TreeSelectEmits } from 'antdv-next'
import { ref } from 'vue'

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
  },
]

const value = ref<string>()

const onChange: TreeSelectEmits['change'] = (newValue) => {
  console.log(newValue)
}
</script>

<template>
  <a-tree-select
    v-model:value="value"
    style="width: 100%"
    :styles="{
      popup: {
        root: {
          maxHeight: '400px',
          overflow: 'auto',
        },
      },
    }"
    :tree-data="treeData"
    placeholder="Please select"
    tree-default-expand-all
    @change="onChange"
  />
</template>
```
### Checkable
Multiple and checkable.
```vue
<script setup lang="ts">
import { TreeSelect } from 'antdv-next'
import { ref } from 'vue'

const SHOW_PARENT = TreeSelect.SHOW_PARENT

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: 'Child Node3',
        value: '0-1-0',
        key: '0-1-0',
      },
      {
        title: 'Child Node4',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: 'Child Node5',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
]

const value = ref<string[]>(['0-0-0'])

function onChange(newValue: string[]) {
  console.log('onChange', newValue)
}
</script>

<template>
  <a-tree-select
    v-model:value="value"
    :tree-data="treeData"
    tree-checkable
    :show-checked-strategy="SHOW_PARENT"
    placeholder="Please select"
    style="width: 100%"
    @change="onChange"
  />
</template>
```
### Asynchronous loading
Asynchronous loading tree node.
```vue
<script setup lang="ts">
import type { TreeSelectEmits, TreeSelectProps } from 'antdv-next'
import { ref } from 'vue'

type TreeDataItem = NonNullable<TreeSelectProps['treeData']>[number]

const value = ref<string>()
const treeData = ref<TreeDataItem[]>([
  { id: 1, pId: 0, value: '1', title: 'Expand to load' },
  { id: 2, pId: 0, value: '2', title: 'Expand to load' },
  { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
])

function genTreeNode(parentId: string | number, isLeaf = false): TreeDataItem {
  const random = Math.random().toString(36).substring(2, 6)
  return {
    id: random,
    pId: parentId,
    value: random,
    title: isLeaf ? 'Tree Node' : 'Expand to load',
    isLeaf,
  }
}

const onLoadData: TreeSelectProps['loadData'] = ({ id }) =>
  new Promise<void>((resolve) => {
    setTimeout(() => {
      const parentId = id ?? 0
      treeData.value = treeData.value.concat([
        genTreeNode(parentId, false),
        genTreeNode(parentId, true),
        genTreeNode(parentId, true),
      ])
      resolve()
    }, 300)
  })

const onChange: TreeSelectEmits['change'] = (newValue) => {
  console.log(newValue)
}
</script>

<template>
  <a-tree-select
    v-model:value="value"
    tree-data-simple-mode
    style="width: 100%"
    :styles="{
      popup: {
        root: {
          maxHeight: '400px',
          overflow: 'auto',
        },
      },
    }"
    placeholder="Please select"
    :load-data="onLoadData"
    :tree-data="treeData"
    @change="onChange"
  />
</template>
```
### Show Tree Line
Use `treeLine` to show the line style.
```vue
<script setup lang="ts">
import { CarryOutOutlined } from '@antdv-next/icons'
import { h, ref } from 'vue'

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    icon: h(CarryOutOutlined),
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        icon: h(CarryOutOutlined),
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
            icon: h(CarryOutOutlined),
          },
          {
            value: 'leaf2',
            title: 'leaf2',
            icon: h(CarryOutOutlined),
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        icon: h(CarryOutOutlined),
        children: [
          {
            value: 'sss',
            title: 'sss',
            icon: h(CarryOutOutlined),
          },
        ],
      },
    ],
  },
]

const treeLine = ref(true)
const showLeafIcon = ref(false)
const showIcon = ref(false)
</script>

<template>
  <a-space direction="vertical">
    <a-switch
      v-model:checked="showIcon"
      checked-children="showIcon"
      un-checked-children="showIcon"
    />
    <a-switch
      v-model:checked="treeLine"
      checked-children="treeLine"
      un-checked-children="treeLine"
    />
    <a-switch
      v-model:checked="showLeafIcon"
      :disabled="!treeLine"
      checked-children="showLeafIcon"
      un-checked-children="showLeafIcon"
    />
    <a-tree-select
      :tree-line="treeLine ? { showLeafIcon } : false"
      style="width: 300px"
      :tree-data="treeData"
      :tree-icon="showIcon"
    />
  </a-space>
</template>
```
### Placement
You can manually specify the position of the popup via `placement`.
```vue
<script setup lang="ts">
import type { TreeSelectProps } from 'antdv-next'
import { ref, shallowRef } from 'vue'

type Placement = NonNullable<TreeSelectProps['placement']>

const placement = shallowRef<Placement>('topLeft')
const value = ref<string>()

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
          },
          {
            value: 'leaf2',
            title: 'leaf2',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'leaf3',
            title: 'leaf3',
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <a-radio-group v-model:value="placement">
    <a-radio-button value="topLeft">
      topLeft
    </a-radio-button>
    <a-radio-button value="topRight">
      topRight
    </a-radio-button>
    <a-radio-button value="bottomLeft">
      bottomLeft
    </a-radio-button>
    <a-radio-button value="bottomRight">
      bottomRight
    </a-radio-button>
  </a-radio-group>
  <br>
  <br>
  <a-tree-select
    v-model:value="value"
    show-search
    :styles="{
      popup: {
        root: {
          maxHeight: '400px',
          overflow: 'auto',
          minWidth: '300px',
        },
      },
    }"
    placeholder="Please select"
    :popup-match-select-width="false"
    :placement="placement"
    allow-clear
    tree-default-expand-all
    :tree-data="treeData"
  />
</template>
```
### Variants
Variants of TreeSelect, there are four variants: `outlined` `filled` `borderless` and `underlined`.
```vue
<script setup lang="ts">
const style = {
  width: '100%',
  maxWidth: '100%',
}
</script>

<template>
  <a-flex vertical gap="medium">
    <a-tree-select :style="style" placeholder="Please select" variant="borderless" />
    <a-tree-select :style="style" placeholder="Please select" variant="filled" />
    <a-tree-select :style="style" placeholder="Please select" variant="outlined" />
    <a-tree-select :style="style" placeholder="Please select" variant="underlined" />
  </a-flex>
</template>
```
### Status
Add status to TreeSelect with `status`, which could be `error` or `warning`.
```vue
<template>
  <a-space direction="vertical" style="width: 100%">
    <a-tree-select status="error" style="width: 100%" placeholder="Error" />
    <a-tree-select status="warning" style="width: 100%" multiple placeholder="Warning multiple" />
  </a-space>
</template>
```
### Max Count
You can set the `maxCount` prop to control the max number of items can be selected. When the limit is exceeded, the options will become disabled.
```vue
<script setup lang="ts">
import { DownOutlined } from '@antdv-next/icons'
import { TreeSelect } from 'antdv-next'
import { ref } from 'vue'

const MAX_COUNT = 3
const SHOW_CHILD = TreeSelect.SHOW_CHILD

const treeData = [
  {
    title: 'Parent 1',
    value: 'parent1',
    children: [
      {
        title: 'Child 1-1',
        value: 'child1-1',
      },
      {
        title: 'Child 1-2',
        value: 'child1-2',
      },
    ],
  },
  {
    title: 'Parent 2',
    value: 'parent2',
    children: [
      {
        title: 'Child 2-1',
        value: 'child2-1',
      },
      {
        title: 'Child 2-2',
        value: 'child2-2',
      },
    ],
  },
]

const value = ref<string[]>(['child1-1'])
</script>

<template>
  <a-tree-select
    v-model:value="value"
    :tree-data="treeData"
    multiple
    tree-checkable
    :max-count="MAX_COUNT"
    style="width: 100%"
    :show-checked-strategy="SHOW_CHILD"
    placeholder="Please select"
  >
    <template #suffixIcon>
      <span>{{ value.length }} / {{ MAX_COUNT }}</span>
      <DownOutlined />
    </template>
  </a-tree-select>
</template>
```
### Max Count no effect
When `showCheckedStrategy=SHOW_PARENT` or `showCheckedStrategy=SHOW_ALL` and `treeCheckStrictly=false`, `maxCount` will not take effect.
```vue
<script setup lang="ts">
import { DownOutlined } from '@antdv-next/icons'
import { TreeSelect } from 'antdv-next'
import { ref } from 'vue'

const MAX_COUNT = 2
const SHOW_PARENT = TreeSelect.SHOW_PARENT

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-1',
        key: '0-0-1',
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: 'Child Node3',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: 'Child Node4',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
]

const value = ref<string[]>([])
</script>

<template>
  <a-tree-select
    v-model:value="value"
    tree-checkable
    :show-checked-strategy="SHOW_PARENT"
    :max-count="MAX_COUNT"
    placeholder="please select"
    style="width: 100%"
    :tree-data="treeData"
  >
    <template #suffixIcon>
      <span>{{ value.length }} / {{ MAX_COUNT }}</span>
      <DownOutlined />
    </template>
  </a-tree-select>
</template>
```
### Prefix and Suffix
Custom `prefix` and `suffixIcon`.
```vue
<script setup lang="ts">
import type { TreeSelectEmits } from 'antdv-next'
import { SmileOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'my leaf',
          },
          {
            value: 'leaf2',
            title: 'your leaf',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'sss',
            title: 'sss',
          },
        ],
      },
    ],
  },
]

const value = ref<string>()

const onChange: TreeSelectEmits['change'] = (newValue) => {
  console.log(newValue)
}
</script>

<template>
  <a-tree-select
    v-model:value="value"
    show-search
    style="width: 100%"
    :styles="{
      popup: {
        root: {
          maxHeight: '400px',
          overflow: 'auto',
        },
      },
    }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
    :tree-data="treeData"
    @change="onChange"
  >
    <template #suffixIcon>
      <SmileOutlined />
    </template>
  </a-tree-select>
  <br>
  <br>
  <a-tree-select
    v-model:value="value"
    show-search
    prefix="Prefix"
    style="width: 100%"
    :styles="{
      popup: {
        root: {
          maxHeight: '400px',
          overflow: 'auto',
        },
      },
    }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
    :tree-data="treeData"
    @change="onChange"
  />
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of TreeSelect by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { TreeSelectProps } from 'antdv-next'

const classes: TreeSelectProps['classes'] = {
  root: 'custom-tree-select',
}

const stylesObject: TreeSelectProps['styles'] = {
  input: {
    fontSize: 16,
  },
  suffix: {
    color: '#1890ff',
  },
  popup: {
    root: {
      border: '1px solid #1890ff',
    },
  },
}

const stylesFn: TreeSelectProps['styles'] = (info) => {
  if (info.props.size === 'medium') {
    return {
      suffix: {
        color: '#722ed1',
      },
      popup: {
        item: {
          color: '#722ed1',
        },
      },
    }
  }
  return {}
}

const treeData: TreeSelectProps['treeData'] = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
          },
          {
            value: 'leaf2',
            title: 'leaf2',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'leaf3',
            title: 'leaf3',
          },
        ],
      },
    ],
  },
]
</script>

<template>
  <a-flex vertical gap="large">
    <a-tree-select
      :tree-data="treeData"
      :classes="classes"
      :styles="stylesObject"
      placeholder="Object"
    />
    <a-tree-select
      :tree-data="treeData"
      :classes="classes"
      :styles="stylesFn"
      placeholder="Function"
      size="medium"
    />
  </a-flex>
</template>

<style>
.custom-tree-select {
  width: 300px;
  border-radius: 6px;
}
</style>
```

## API

### TreeSelect Props {#props}

Common props ref：[Common props](/docs/vue/common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| allowClear | Show clear button | boolean \| &#123; clearIcon?: VueNode &#125; | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - | ✓ |
| rootClass | Root container class | string | - | - | × |
| defaultOpen | Initial open state of dropdown | boolean | - | - | × |
| defaultValue | To set the initial selected treeNode(s) | string \| string[] | - | - | × |
| disabled | Disabled or not | boolean | false | - | × |
| popupMatchSelectWidth | Determine whether the popup menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | - | × |
| popupRender | Customize dropdown content | (menu: VNode) =&gt; VueNode | - | - | × |
| fieldNames | Customize node label, value, children field name | object | &#123; label: `label`, value: `value`, children: `children` &#125; | - | × |
| getPopupContainer | To set the container of the dropdown menu | (triggerNode: HTMLElement) =&gt; HTMLElement | () =&gt; document.body | - | × |
| labelInValue | Whether to embed label in value, turn the format of value from `string` to &#123; value: string, label: VueNode, halfChecked: boolean &#125; | boolean | false | - | × |
| listHeight | Config popup height | number | 256 | - | × |
| loadData | Load data asynchronously | (node: DataNode) =&gt; Promise&lt;void&gt; | - | - | × |
| maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| 'responsive' | - | - | × |
| maxCount | The maximum number of items that can be selected. Only takes effect when `multiple=true`. If (`showCheckedStrategy = 'SHOW_ALL'` and `treeCheckStrictly` is disabled) or `showCheckedStrategy = 'SHOW_PARENT'` is used, `maxCount` will not take effect. | number | - | - | × |
| maxTagPlaceholder | Placeholder for not showing tags | VueNode \| ((omittedValues: LabeledValue[]) =&gt; VueNode) | - | - | × |
| maxTagTextLength | Max tag text length to show | number | - | - | × |
| multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false | - | × |
| notFoundContent | Specify content to show when no result matches | VueNode | `No data` | - | × |
| open | Controlled open state of dropdown | boolean | - | - | × |
| placeholder | Placeholder of the select input | string | - | - | × |
| placement | The position where the selection box pops up | `bottomLeft` \| `bottomRight` \| `topLeft` \| `topRight` | `bottomLeft` | - | × |
| prefix | The custom prefix | VueNode | - | - | × |
| showCheckedStrategy | The way show selected item in box when `treeCheckable` set. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode) | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` | - | × |
| showSearch | Support search or not | boolean \| [Object](#showsearch) | single: false \| multiple: true | - | × |
| size | To set the size of the select input | `large` \| `medium` \| `small` | - | - | × |
| status | Set validation status | `error` \| `warning` | - | - | × |
| variant | Variants of selector | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
| suffixIcon | The custom suffix icon | VueNode | `&lt;DownOutlined /&gt;` | - | × |
| switcherIcon | Customize collapse/expand icon of tree node | VueNode \| ((props: AntTreeNodeProps) =&gt; VueNode) | - | - | ✓ |
| tagRender | Customize tag render when `multiple` | (props: any) =&gt; VueNode | - | - | × |
| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | - | × |
| treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false | - | × |
| treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array&lt;&#123; value, title, children, [disabled, disableCheckbox, selectable, checkable] &#125;&gt; | [] | - | × |
| treeDataSimpleMode | Enable simple mode of treeData. Changes the `treeData` schema to: [&#123;id:1, pId:0, value:'1', title:"test1",...&#125;,...] where pId is parent node's id). It is possible to replace the default `id` and `pId` keys by providing object to `treeDataSimpleMode` | boolean \| object&lt;&#123; id: string, pId: string, rootPId: string &#125;&gt; | false | - | × |
| treeTitleRender | Customize tree node title render | (nodeData: DataNode) =&gt; VueNode | - | - | × |
| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | - | × |
| treeDefaultExpandedKeys | Default expanded treeNodes | string[] | - | - | × |
| treeExpandAction | Tree title open logic when click, optional: false \| `click` \| `doubleClick` | string \| boolean | false | - | × |
| treeExpandedKeys | Set expanded keys | string[] | - | - | × |
| treeIcon | Shows the icon before a TreeNode's title | boolean | false | - | × |
| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#tree-demo-line) | boolean \| object | false | - | × |
| treeLoadedKeys | (Controlled) Set loaded tree nodes, work with `loadData` only | string[] | [] | - | × |
| treeNodeLabelProp | Will render as content of select | string | `title` | - | × |
| value | To set the current selected treeNode(s), support `v-model:value` | string \| string[] | - | - | × |
| virtual | Disable virtual scroll when set to false | boolean | true | - | × |
| bordered | Deprecated. Use `variant` instead | boolean | - | - | × |
| showArrow | Deprecated. Set `suffixIcon` to null to hide | boolean | - | - | × |

### Events {#events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - |
| openChange | Callback when dropdown open state changes | (open: boolean) =&gt; void | - |
| select | A callback function, can be executed when you select a treeNode | function(value, node, extra) | - |
| treeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - |
| popupScroll | Called when dropdown scrolls | (event: UIEvent) =&gt; void | - |

### Slots {#slots}

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| suffixIcon | The custom suffix icon | () =&gt; any | - |
| tagRender | Customize tag render when `multiple` | (props: any) =&gt; any | - |
| notFoundContent | Specify content to show when no result matches | () =&gt; any | - |
| switcherIcon | Customize collapse/expand icon of tree node | () =&gt; any | - |
| treeTitleRender | Customize tree node title render | (nodeData: DataNode) =&gt; any | - |

### Methods {#methods}

| Name | Description | Version |
| --- | --- | --- |
| blur() | Remove focus | - |
| focus() | Get focus | - |

## Types {#types}

### showSearch {#showsearch}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoClearSearchValue | If auto clear search input value when multiple select is selected/deselected | boolean | true | - |
| filterTreeNode | Whether to filter treeNodes by input value | boolean \| (inputValue: string, treeNode: DataNode) =&gt; boolean | function | - |
| searchValue | Work with `onSearch` to make search value controlled | string | - | - |
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` | - |
| onSearch | A callback function, can be executed when the search input changes | (value: string) =&gt; void | - | - |

### TreeNode Props {#treenode-props}

> We recommend you to use `treeData` rather than `TreeNode`, to avoid the trouble of manual construction.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | - |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | - |
| disabled | Disabled or not | boolean | false | - |
| isLeaf | Leaf node or not | boolean | false | - |
| key | Required property (unless using `treeDataSimpleMode`), should be unique in the tree | Key | - | - |
| selectable | Whether can be selected | boolean | true | - |
| title | Content showed on the treeNodes | VueNode | `---` | - |
| value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | Key | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="TreeSelect"></ComponentTokenTable>

## FAQ

### How to get parent node in onChange? {#faq-parent-node-info}

We don't provide this since performance consideration. You can get by this way: <https://codesandbox.io/s/get-parent-node-in-onchange-eb1608>

### Why sometimes customize Option cause scroll break? {#faq-custom-option-scroll}

You can ref Select [FAQ](/components/select).

### Why `loadData` not trigger when searching? {#faq-load-data-expand}

`loadData` is not triggered when searching, to avoid blocking the network while typing. You can still handle async logic by `filterTreeNode`:

```html
<a-tree-select
  :filterTreeNode="(input, treeNode) => {
    const match = YOUR_LOGIC_HERE;

    if (match && !treeNode.isLeaf && !treeNode.children) {
      // Do some loading logic
    }

    return match;
  }"
/>
```

### Why can't popup scroll horizontally? {#faq-popup-not-scroll}

Just turn off virtual scrolling, because the `scrollWidth` of the complete list cannot be accurately measured when virtual scrolling is turned on.

---
Title: Typography
URL: https://www.antdv-next.com/components/typography.md
---

## When To Use {#when-to-use}

- When you need to display a title or paragraph contents in Articles/Blogs/Notes.
- When you need copyable/editable/ellipsis texts.

## Examples {#examples}

### Basic
Display the document sample.
```vue
<script setup lang="ts">
const blockContent = `AntV 是蚂蚁集团全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。
我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。`
</script>

<template>
  <a-typography>
    <a-typography-title>Introduction</a-typography-title>

    <a-typography-paragraph>
      In the process of internal desktop applications development, many different design specs and
      implementations would be involved, which might cause designers and developers difficulties and
      duplication and reduce the efficiency of development.
    </a-typography-paragraph>

    <a-typography-paragraph>
      After massive project practice and summaries, Antdv Next, a design language for background
      applications, is refined by Ant UED Team, which aims to
      <a-typography-text strong>
        uniform the user interface specs for internal background projects, lower the unnecessary
        cost of design differences and implementation and liberate the resources of design and
        front-end development
      </a-typography-text>
      .
    </a-typography-paragraph>

    <a-typography-title :level="2">
      Guidelines and Resources
    </a-typography-title>

    <a-typography-paragraph>
      We supply a series of design principles, practical patterns and high quality design resources
      (<a-typography-text code>
        Sketch
      </a-typography-text> and <a-typography-text code>
        Axure
      </a-typography-text>), to help people create their product
      prototypes beautifully and efficiently.
    </a-typography-paragraph>

    <a-typography-paragraph>
      <ul>
        <li>
          <a-typography-link href="/docs/spec/proximity">
            Principles
          </a-typography-link>
        </li>
        <li>
          <a-typography-link href="/docs/spec/overview">
            Patterns
          </a-typography-link>
        </li>
        <li>
          <a-typography-link href="/docs/resources">
            Resource Download
          </a-typography-link>
        </li>
      </ul>
    </a-typography-paragraph>

    <a-typography-paragraph>
      Press <a-typography-text keyboard>
        Esc
      </a-typography-text> to exit...
    </a-typography-paragraph>

    <a-divider />

    <a-typography-title>介绍</a-typography-title>

    <a-typography-paragraph>
      蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂,而且变动和并发频繁,常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容。
    </a-typography-paragraph>

    <a-typography-paragraph>
      随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标,我们(蚂蚁集团体验技术部)经过大量的项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系
      Antdv Next。基于<a-typography-text mark>
        『确定』和『自然』
      </a-typography-text>
      的设计价值观,通过模块化的解决方案,降低冗余的生产成本,让设计者专注于
      <a-typography-text strong>
        更好的用户体验
      </a-typography-text>。
    </a-typography-paragraph>

    <a-typography-title :level="2">
      设计资源
    </a-typography-title>

    <a-typography-paragraph>
      我们提供完善的设计原则、最佳实践和设计资源文件(<a-typography-text code>
        Sketch
      </a-typography-text> 和
      <a-typography-text code>
        Axure
      </a-typography-text>),来帮助业务快速设计出高质量的产品原型。
    </a-typography-paragraph>

    <a-typography-paragraph>
      <ul>
        <li>
          <a-typography-link href="/docs/spec/proximity-cn">
            设计原则
          </a-typography-link>
        </li>
        <li>
          <a-typography-link href="/docs/spec/overview-cn">
            设计模式
          </a-typography-link>
        </li>
        <li>
          <a-typography-link href="/docs/resources-cn">
            设计资源
          </a-typography-link>
        </li>
      </ul>
    </a-typography-paragraph>

    <a-typography-paragraph>
      <blockquote>{{ blockContent }}</blockquote>
      <pre>{{ blockContent }}</pre>
    </a-typography-paragraph>

    <a-typography-paragraph>
      按<a-typography-text keyboard>
        Esc
      </a-typography-text>键退出阅读……
    </a-typography-paragraph>
  </a-typography>
</template>
```
### Title Component
Display title in different levels.
```vue
<template>
  <div>
    <a-typography-title>h1. Antdv Next</a-typography-title>
    <a-typography-title :level="2">
      h2. Antdv Next
    </a-typography-title>
    <a-typography-title :level="3">
      h3. Antdv Next
    </a-typography-title>
    <a-typography-title :level="4">
      h4. Antdv Next
    </a-typography-title>
    <a-typography-title :level="5">
      h5. Antdv Next
    </a-typography-title>
  </div>
</template>
```
### Text and Link Component
Provides multiple types of text and a link.
```vue
<template>
  <a-space vertical>
    <a-typography-text>Antdv Next (default)</a-typography-text>
    <a-typography-text type="secondary">
      Antdv Next (secondary)
    </a-typography-text>
    <a-typography-text type="success">
      Antdv Next (success)
    </a-typography-text>
    <a-typography-text type="warning">
      Antdv Next (warning)
    </a-typography-text>
    <a-typography-text type="danger">
      Antdv Next (danger)
    </a-typography-text>
    <a-typography-text disabled>
      Antdv Next (disabled)
    </a-typography-text>
    <a-typography-text mark>
      Antdv Next (mark)
    </a-typography-text>
    <a-typography-text code>
      Antdv Next (code)
    </a-typography-text>
    <a-typography-text keyboard>
      Antdv Next (keyboard)
    </a-typography-text>
    <a-typography-text underline>
      Antdv Next (underline)
    </a-typography-text>
    <a-typography-text delete>
      Antdv Next (delete)
    </a-typography-text>
    <a-typography-text strong>
      Antdv Next (strong)
    </a-typography-text>
    <a-typography-text italic>
      Antdv Next (italic)
    </a-typography-text>
    <a-typography-link href="https://ant.design" target="_blank">
      Antdv Next (Link)
    </a-typography-link>
  </a-space>
</template>
```
### Editable
Makes Typography editable.
```vue
<script setup lang="ts">
import { CheckOutlined, HighlightOutlined } from '@antdv-next/icons'
import { computed, h, ref } from 'vue'

const editableStr = ref('This is an editable text.')
const editableStrWithSuffix = ref(
  'This is a loooooooooooooooooooooooooooooooong editable text with suffix.',
)
const editableStrWithSuffixStartPart = computed(() => editableStrWithSuffix.value.slice(0, -12))
const editableStrWithSuffixSuffixPart = computed(() => editableStrWithSuffix.value.slice(-12))

const customIconStr = ref('Custom Edit icon and replace tooltip text.')
const clickTriggerStr = ref('Text or icon as trigger - click to start editing.')
const chooseTrigger = ref<('icon' | 'text')[]>(['icon'])
const customEnterIconStr = ref('Editable text with a custom enter icon in edit field.')
const noEnterIconStr = ref('Editable text with no enter icon in edit field.')
const hideTooltipStr = ref('Hide Edit tooltip.')
const lengthLimitedStr = ref('This is an editable text with limited length.')

function radioToState(input: string): ('icon' | 'text')[] {
  switch (input) {
    case 'text':
      return ['text']
    case 'both':
      return ['icon', 'text']
    case 'icon':
      return ['icon']
    default:
      return ['icon']
  }
}

const stateToRadio = computed<string>(() => {
  if (chooseTrigger.value.includes('text')) {
    return chooseTrigger.value.includes('icon') ? 'both' : 'text'
  }
  return 'icon'
})

function onRadioChange(e: any) {
  chooseTrigger.value = radioToState(e.target.value)
}
</script>

<template>
  <a-typography-paragraph :editable="{ onChange: (val: string) => editableStr = val }">
    {{ editableStr }}
  </a-typography-paragraph>
  <a-typography-paragraph
    :editable="{
      onChange: (val: string) => editableStrWithSuffix = val,
      text: editableStrWithSuffix,
    }"
    :ellipsis="{
      suffix: editableStrWithSuffixSuffixPart,
    }"
  >
    {{ editableStrWithSuffixStartPart }}
  </a-typography-paragraph>
  <a-typography-paragraph
    :editable="{
      icon: h(HighlightOutlined),
      tooltip: 'click to edit text',
      onChange: (val: string) => customIconStr = val,
    }"
  >
    {{ customIconStr }}
  </a-typography-paragraph>
  Trigger edit with:
  <a-radio-group :value="stateToRadio" @change="onRadioChange">
    <a-radio value="icon">
      icon
    </a-radio>
    <a-radio value="text">
      text
    </a-radio>
    <a-radio value="both">
      both
    </a-radio>
  </a-radio-group>
  <a-typography-paragraph
    :editable="{
      tooltip: 'click to edit text',
      onChange: (val: string) => clickTriggerStr = val,
      triggerType: chooseTrigger,
    }"
  >
    {{ clickTriggerStr }}
  </a-typography-paragraph>
  <a-typography-paragraph
    :editable="{
      icon: h(HighlightOutlined),
      tooltip: 'click to edit text',
      onChange: (val: string) => customEnterIconStr = val,
      enterIcon: h(CheckOutlined),
    }"
  >
    {{ customEnterIconStr }}
  </a-typography-paragraph>
  <a-typography-paragraph
    :editable="{
      icon: h(HighlightOutlined),
      tooltip: 'click to edit text',
      onChange: (val: string) => noEnterIconStr = val,
      enterIcon: null,
    }"
  >
    {{ noEnterIconStr }}
  </a-typography-paragraph>
  <a-typography-paragraph :editable="{ tooltip: false, onChange: (val: string) => hideTooltipStr = val }">
    {{ hideTooltipStr }}
  </a-typography-paragraph>
  <a-typography-paragraph
    :editable="{
      onChange: (val: string) => lengthLimitedStr = val,
      maxLength: 50,
      autoSize: { maxRows: 5, minRows: 3 },
    }"
  >
    {{ lengthLimitedStr }}
  </a-typography-paragraph>
  <a-typography-title editable :level="1" :style="{ margin: 0 }">
    h1. Antdv Next
  </a-typography-title>
  <a-typography-title editable :level="2" :style="{ margin: 0 }">
    h2. Antdv Next
  </a-typography-title>
  <a-typography-title editable :level="3" :style="{ margin: 0 }">
    h3. Antdv Next
  </a-typography-title>
  <a-typography-title editable :level="4" :style="{ margin: 0 }">
    h4. Antdv Next
  </a-typography-title>
  <a-typography-title editable :level="5" :style="{ margin: 0 }">
    h5. Antdv Next
  </a-typography-title>
</template>
```
### Copyable
Makes Typography copyable with the click of a button.
```vue
<script setup lang="ts">
import { SmileFilled, SmileOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const customCopyConfig = {
  icon: [h(SmileOutlined), h(SmileFilled)],
  tooltips: ['click here', 'you clicked!!'],
}

const asyncCopyConfig = {
  text: async (): Promise<string> =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve('Request text')
      }, 500)
    }),
}
</script>

<template>
  <a-typography-paragraph copyable>
    This is a copyable text.
  </a-typography-paragraph>
  <a-typography-paragraph :copyable="{ text: 'Hello, Antdv Next!' }">
    Replace copy text.
  </a-typography-paragraph>
  <a-typography-paragraph :copyable="customCopyConfig">
    Custom Copy icon and replace tooltips text.
  </a-typography-paragraph>
  <a-typography-paragraph :copyable="{ tooltips: false }">
    Hide Copy tooltips.
  </a-typography-paragraph>
  <a-typography-paragraph :copyable="asyncCopyConfig">
    Request copy text.
  </a-typography-paragraph>
  <a-typography-text :copyable="{ text: 'text to be copied' }" />
</template>
```
### Ellipsis
Multiple line ellipsis support. You can use `tooltip` to configure ellipsis tooltip. The `expandable` property is recommended when you have lots of content.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const ellipsis = ref(true)
</script>

<template>
  <a-switch v-model:checked="ellipsis" />

  <a-typography-paragraph :ellipsis="ellipsis">
    Antdv Next, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team.
  </a-typography-paragraph>

  <a-typography-paragraph :ellipsis="ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false">
    Antdv Next, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team. Ant
    Design, a design language for background applications, is refined by Ant UED Team.
  </a-typography-paragraph>

  <a-typography-text
    :style="ellipsis ? { width: '200px' } : undefined"
    :ellipsis="ellipsis ? { tooltip: 'I am ellipsis now!' } : false"
  >
    Antdv Next, a design language for background applications, is refined by Ant UED Team.
  </a-typography-text>

  <a-typography-text
    code
    :style="ellipsis ? { width: '200px' } : undefined"
    :ellipsis="ellipsis ? { tooltip: 'I am ellipsis now!' } : false"
  >
    Antdv Next, a design language for background applications, is refined by Ant UED Team.
  </a-typography-text>
</template>
```
### Controlled ellipsis expand/collapse
Controlled multi line text omission.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const rows = ref(2)
const expanded = ref(false)

const text = 'Antdv Next, a design language for background applications, is refined by Ant UED Team.'.repeat(20)

function handleExpand(_: MouseEvent, info: { expanded: boolean }) {
  expanded.value = info.expanded
}
</script>

<template>
  <a-flex :gap="16" vertical>
    <a-flex :gap="16" align="center">
      <a-switch v-model:checked="expanded" style="flex: none;" />
      <a-slider v-model:value="rows" :min="1" :max="20" style="flex: auto;" />
    </a-flex>

    <a-typography-paragraph
      :ellipsis="{
        rows,
        expandable: 'collapsible',
        expanded,
        onExpand: handleExpand,
      }"
      copyable
    >
      {{ text }}
    </a-typography-paragraph>
  </a-flex>
</template>
```
### Ellipsis from middle
You can ellipsis content from middle by customize `ellipsis={{ suffix: ... }}`.
```vue
<script setup lang="ts">
import { computed } from 'vue'

const suffixCount = 12
const children = 'In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.'

const start = computed(() => children.slice(0, children.length - suffixCount))
const suffix = computed(() => children.slice(-suffixCount).trim())
</script>

<template>
  <a-typography-text style="max-width: 100%;" :ellipsis="{ suffix }">
    {{ start }}
  </a-typography-text>
</template>
```
### suffix
Add suffix ellipsis support.
```vue
<script setup lang="ts">
import { ref } from 'vue'

const rows = ref(1)

const article = `To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life`

function onEllipsis(ellipsis: boolean) {
  console.log('Ellipsis changed:', ellipsis)
}
</script>

<template>
  <div>
    <a-slider v-model:value="rows" :min="1" :max="10" />
    <a-typography-paragraph
      :ellipsis="{
        rows,
        expandable: true,
        suffix: '--William Shakespeare',
        onEllipsis,
      }"
      :title="`${article}--William Shakespeare`"
    >
      {{ article }}
    </a-typography-paragraph>
  </div>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Typography {#typography}

#### Props {#typography-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| direction | Direction control | 'ltr' \| 'rtl' | - | - | × |

### TypographyText {#typography-text}

#### Props {#typography-text-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| code | Code style | boolean | false | - | × |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | - | × |
| delete | Deleted line style | boolean | false | - | × |
| disabled | Disabled content | boolean | false | - | × |
| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | - | × |
| ellipsis | Display ellipsis when text overflows, can't configure expandable, rows and onExpand by using object. Diff with Typography.Paragraph, Text do not have 100% width style which means it will fix width on the first ellipsis. If you want to have responsive ellipsis, please set width manually | boolean \| [Omit&lt;ellipsis, 'expandable' \| 'rows' \| 'onExpand'&gt;](#ellipsis) | false | - | × |
| keyboard | Keyboard style | boolean | false | - | × |
| mark | Marked style | boolean | false | - | × |
| strong | Bold style | boolean | false | - | × |
| italic | Italic style | boolean | false | - | × |
| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | - | × |
| underline | Underlined style | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | TypographyClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | TypographyStylesType | - | - | ✓ |

#### Events {#typography-text-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | Set the handler to handle click event | (event: MouseEvent) =&gt; void | - |

### TypographyTitle {#typography-title}

#### Props {#typography-title-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| code | Code style | boolean | false | - | × |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | - | × |
| delete | Deleted line style | boolean | false | - | × |
| disabled | Disabled content | boolean | false | - | × |
| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | - | × |
| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | - | × |
| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5` | number: 1, 2, 3, 4, 5 | 1 | - | × |
| mark | Marked style | boolean | false | - | × |
| italic | Italic style | boolean | false | - | × |
| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | - | × |
| underline | Underlined style | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | TypographyClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | TypographyStylesType | - | - | ✓ |

#### Events {#typography-title-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | Set the handler to handle click event | (event: MouseEvent) =&gt; void | - |

### TypographyParagraph {#typography-paragraph}

#### Props {#typography-paragraph-props}

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| code | Code style | boolean | false | - | × |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | - | × |
| delete | Deleted line style | boolean | false | - | × |
| disabled | Disabled content | boolean | false | - | × |
| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | - | × |
| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | - | × |
| mark | Marked style | boolean | false | - | × |
| strong | Bold style | boolean | false | - | × |
| italic | Italic style | boolean | false | - | × |
| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | - | × |
| underline | Underlined style | boolean | false | - | × |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | TypographyClassNamesType | - | - | ✓ |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | TypographyStylesType | - | - | ✓ |

#### Events {#typography-paragraph-events}

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| click | Set the handler to handle click event | (event: MouseEvent) =&gt; void | - |
| copy | Called when copied text | (event: MouseEvent) =&gt; void | - |

## Types {#types}

### copyable {#copyable}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| format | The Mime Type of the text | 'text/plain' \| 'text/html' | - | - |
| icon | Custom copy icon: \[copyIcon, copiedIcon] | \[VueNode, VueNode] | - | - |
| text | The text to copy | string | - | - |
| tooltips | Custom tooltip text, hide when it is false | \[VueNode, VueNode] | \[`Copy`, `Copied`] | - |
| tabIndex | Set tabIndex of the copy button | number | 0 | - |

#### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| copy | Called when copied text | (event: MouseEvent) =&gt; void | - |

### editable {#editable}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoSize | `autoSize` attribute of textarea | boolean \| &#123; minRows: number, maxRows: number &#125; | - | - |
| editing | Whether to be editable | boolean | false | - |
| icon | Custom editable icon | VueNode | &lt;EditOutlined /&gt; | - |
| maxlength | `maxLength` attribute of textarea | number | - | - |
| tooltip | Custom tooltip text, hide when it is false | VueNode | `Edit` | - |
| text | Edit text, specify the editing content instead of using the children implicitly | string | - | - |
| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`&gt; | \[`icon`] | - |
| enterIcon | Custom "enter" icon in the edit field (passing `null` removes the icon) | VueNode | &lt;EnterOutlined /&gt; | - |
| tabIndex | Set tabIndex of the edit button | number | 0 | - |

#### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | Called when editing is completed | (value: string) =&gt; void | - |
| cancel | Called when type ESC to exit editable state | () =&gt; void | - |
| start | Called when enter editable state | () =&gt; void | - |
| end | Called when type ENTER to exit editable state | () =&gt; void | - |

### ellipsis {#ellipsis}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| expandable | Whether to be expandable | boolean \| 'collapsible' | - | - |
| rows | Max rows of content | number | - | - |
| suffix | Suffix of ellipsis content | string | - | - |
| symbol | Custom description of ellipsis | VueNode \| ((expanded: boolean) =&gt; VueNode) | `Expand` `Collapse` | - |
| tooltip | Show tooltip when ellipsis | VueNode \| [TooltipProps](/components/tooltip#api) | - | - |
| defaultExpanded | Default expand or collapse | boolean | - | - |
| expanded | Expand or Collapse | boolean | - | - |

#### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| ellipsis | Called when enter or leave ellipsis state | (ellipsis: boolean) =&gt; void | - |
| expand | Called when expand content | (event: MouseEvent, info: &#123; expanded: boolean &#125;) =&gt; void | - |

## Semantic DOM {#semantic-dom}

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token {#design-token}

<ComponentTokenTable component="Typography" />

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

---
Title: Upload
URL: https://www.antdv-next.com/components/upload.md
---

## When To Use {#when-to-use}

Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.

- When you need to upload one or more files.
- When you need to show the process of uploading.
- When you need to upload files by dragging and dropping.

## Examples {#examples}

### Upload by clicking
Classic mode. File selection dialog pops up when upload button is clicked.
```vue
<script setup lang="ts">
import type { UploadEmits } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'
import { ref } from 'vue'

const fileList = ref([])
const onChange: UploadEmits['change'] = (info) => {
  if (info.file?.status !== 'uploading') {
    console.log(info.file, info.fileList)
  }
  if (info.file?.status === 'done') {
    message.success(`${info.file.name} file uploaded successfully`)
  }
  else if (info.file?.status === 'error') {
    message.error(`${info.file.name} file upload failed.`)
  }
}
</script>

<template>
  <a-upload
    v-model:file-list="fileList"
    name="file"
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    :headers="{
      authorization: 'authorization-text',
    }"
    @change="onChange"
  >
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Click to Upload
    </a-button>
  </a-upload>
</template>
```
### Avatar
Click to upload user's avatar, and validate size and format of picture with `beforeUpload`.

> The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](https://upload-react-component.vercel.app/demo/before-upload#beforeupload)
```vue
<script setup lang="ts">
import type { UploadEmits, UploadProps } from 'antdv-next'
import { LoadingOutlined, PlusOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'
import { ref } from 'vue'

type FileType = Parameters<NonNullable<UploadProps['beforeUpload']>>[0]

const loading = ref(false)
const imageUrl = ref('')

function getBase64(img: FileType) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(img)
    reader.onload = () => resolve(reader.result as string)
    reader.onerror = error => reject(error)
  })
}

const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!')
  }
  return isJpgOrPng && isLt2M
}

const handleChange: UploadEmits['change'] = async (info) => {
  if (info.file?.status === 'uploading') {
    loading.value = true
    return
  }
  if (info.file?.status === 'done') {
    try {
      if (info.file.originFileObj) {
        imageUrl.value = await getBase64(info.file.originFileObj as FileType)
      }
    }
    finally {
      loading.value = false
    }
  }
  else {
    loading.value = false
  }
}
</script>

<template>
  <a-flex gap="medium" wrap>
    <a-upload
      name="avatar"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <img
        v-if="imageUrl"
        :src="imageUrl"
        alt="avatar"
        :draggable="false"
        style="width: 100%"
      >
      <button v-else style="border: 0; background: none" type="button">
        <LoadingOutlined v-if="loading" />
        <PlusOutlined v-else />
        <div style="margin-top: 8px">
          Upload
        </div>
      </button>
    </a-upload>

    <a-upload
      name="avatar"
      list-type="picture-circle"
      class="avatar-uploader"
      :show-upload-list="false"
      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <img
        v-if="imageUrl"
        :src="imageUrl"
        alt="avatar"
        :draggable="false"
        style="width: 100%"
      >
      <button v-else style="border: 0; background: none" type="button">
        <LoadingOutlined v-if="loading" />
        <PlusOutlined v-else />
        <div style="margin-top: 8px">
          Upload
        </div>
      </button>
    </a-upload>
  </a-flex>
</template>
```
### Default Files
Use `defaultFileList` for uploaded files when page init.
```vue
<script setup lang="ts">
import type { UploadEmits, UploadFile } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'

const defaultFileList: UploadFile[] = [
  {
    uid: '1',
    name: 'xxx.png',
    status: 'uploading',
    url: 'http://www.baidu.com/xxx.png',
    percent: 33,
  },
  {
    uid: '2',
    name: 'yyy.png',
    status: 'done',
    url: 'http://www.baidu.com/yyy.png',
  },
  {
    uid: '3',
    name: 'zzz.png',
    status: 'error',
    response: 'Server Error 500',
    url: 'http://www.baidu.com/zzz.png',
  },
]

const handleChange: UploadEmits['change'] = ({ file, fileList }) => {
  if (file?.status !== 'uploading') {
    console.log(file, fileList)
  }
}
</script>

<template>
  <a-upload
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    :default-file-list="defaultFileList"
    @change="handleChange"
  >
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Upload
    </a-button>
  </a-upload>
</template>
```
### Pictures Wall
After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
```vue
<script setup lang="ts">
import type { UploadEmits, UploadFile, UploadProps } from 'antdv-next'
import { PlusOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

type FileType = Parameters<NonNullable<UploadProps['beforeUpload']>>[0]

const previewOpen = ref(false)
const previewImage = ref('')
const fileList = ref<UploadFile[]>([
  {
    uid: '-1',
    name: 'image.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-2',
    name: 'image.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-3',
    name: 'image.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-4',
    name: 'image.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-xxx',
    percent: 50,
    name: 'image.png',
    status: 'uploading',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-5',
    name: 'image.png',
    status: 'error',
  },
])

function getBase64(file: FileType) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result as string)
    reader.onerror = error => reject(error)
  })
}

async function handlePreview(file: UploadFile) {
  if (!file.url && !file.preview && file.originFileObj) {
    file.preview = await getBase64(file.originFileObj as FileType)
  }
  previewImage.value = (file.url || (file.preview as string)) ?? ''
  previewOpen.value = true
}

const handleChange: UploadEmits['change'] = ({ fileList: newFileList }) => {
  fileList.value = newFileList
}

function handlePreviewOpenChange(open: boolean) {
  previewOpen.value = open
}

function handleAfterOpenChange(open: boolean) {
  if (!open) {
    previewImage.value = ''
  }
}
</script>

<template>
  <a-upload
    v-model:file-list="fileList"
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    list-type="picture-card"
    @preview="handlePreview"
    @change="handleChange"
  >
    <template v-if="fileList.length < 8">
      <button style="border: 0; background: none" type="button">
        <PlusOutlined />
        <div style="margin-top: 8px">
          Upload
        </div>
      </button>
    </template>
  </a-upload>
  <a-image
    v-if="previewImage"
    :styles="{ root: { display: 'none' } }"
    :preview="{
      open: previewOpen,
      onOpenChange: handlePreviewOpenChange,
      afterOpenChange: handleAfterOpenChange,
    }"
    :src="previewImage"
  />
</template>
```
### Pictures with picture-circle type
Alternative display for picture-card.
```vue
<script setup lang="ts">
import type { UploadEmits, UploadFile, UploadProps } from 'antdv-next'
import { PlusOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

type FileType = Parameters<NonNullable<UploadProps['beforeUpload']>>[0]

const previewOpen = ref(false)
const previewImage = ref('')
const fileList = ref<UploadFile[]>([
  {
    uid: '-1',
    name: 'image.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-xxx',
    percent: 50,
    name: 'image.png',
    status: 'uploading',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-5',
    name: 'image.png',
    status: 'error',
  },
])

function getBase64(file: FileType) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result as string)
    reader.onerror = error => reject(error)
  })
}

async function handlePreview(file: UploadFile) {
  console.log('file', file)
  if (!file.url && !file.preview && file.originFileObj) {
    file.preview = await getBase64(file.originFileObj as FileType)
  }
  previewImage.value = (file.url || (file.preview as string)) ?? ''
  previewOpen.value = true
}

const handleChange: UploadEmits['change'] = ({ fileList: newFileList }) => {
  fileList.value = newFileList
}

function handlePreviewOpenChange(open: boolean) {
  previewOpen.value = open
}

function handleAfterOpenChange(open: boolean) {
  if (!open) {
    previewImage.value = ''
  }
}
</script>

<template>
  <a-upload
    v-model:file-list="fileList"
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    list-type="picture-circle"
    @preview="handlePreview"
    @change="handleChange"
  >
    <template v-if="fileList.length < 8">
      <button style="border: 0; background: none" type="button">
        <PlusOutlined />
        <div style="margin-top: 8px">
          Upload
        </div>
      </button>
    </template>
  </a-upload>
  <a-image
    v-if="previewImage"
    :styles="{ root: { display: 'none' } }"
    :preview="{
      open: previewOpen,
      onOpenChange: handlePreviewOpenChange,
      afterOpenChange: handleAfterOpenChange,
    }"
    :src="previewImage"
  />
</template>
```
### Complete control over file list
You can gain full control over filelist by configuring `fileList`. You can accomplish all kinds of customized functions. The following shows two circumstances:

1. limit the number of uploaded files.

2. read from response and show file link.
```vue
<script setup lang="ts">
import type { UploadEmits, UploadFile } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'
import { ref } from 'vue'

const fileList = ref<UploadFile[]>([
  {
    uid: '-1',
    name: 'xxx.png',
    status: 'done',
    url: 'http://www.baidu.com/xxx.png',
  },
])

const handleChange: UploadEmits['change'] = (info) => {
  let newFileList = [...info.fileList]

  newFileList = newFileList.slice(-2)

  newFileList = newFileList.map((file) => {
    if (file.response && typeof file.response === 'object' && 'url' in file.response) {
      file.url = (file.response as { url?: string }).url
    }
    return file
  })

  fileList.value = newFileList
}
</script>

<template>
  <a-upload
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    multiple
    :file-list="fileList"
    @change="handleChange"
  >
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Upload
    </a-button>
  </a-upload>
</template>
```
### Drag and Drop
You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.

We can upload several files at once in modern browsers by giving the input the `multiple` attribute.
```vue
<script setup lang="ts">
import type { UploadEmits } from 'antdv-next'
import { InboxOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'

const handleChange: UploadEmits['change'] = (info) => {
  const { status } = info.file
  if (status !== 'uploading') {
    console.log(info.file, info.fileList)
  }
  if (status === 'done') {
    message.success(`${info.file.name} file uploaded successfully.`)
  }
  else if (status === 'error') {
    message.error(`${info.file.name} file upload failed.`)
  }
}

const handleDrop: UploadEmits['drop'] = (event) => {
  console.log('Dropped files', event.dataTransfer?.files)
}
</script>

<template>
  <a-upload-dragger
    name="file"
    multiple
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    @change="handleChange"
    @drop="handleDrop"
  >
    <p class="ant-upload-drag-icon">
      <InboxOutlined />
    </p>
    <p class="ant-upload-text">
      Click or drag file to this area to upload
    </p>
    <p class="ant-upload-hint">
      Support for a single or bulk upload. Strictly prohibited from uploading company data or other
      banned files.
    </p>
  </a-upload-dragger>
</template>
```
### Paste
Copy the file and paste it anywhere on the page to upload.
```vue
<script setup lang="ts">
import type { UploadEmits } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'

const handleChange: UploadEmits['change'] = (info) => {
  if (info.file?.status !== 'uploading') {
    console.log(info.file, info.fileList)
  }
  if (info.file?.status === 'done') {
    message.success(`${info.file.name} file uploaded successfully`)
  }
  else if (info.file?.status === 'error') {
    message.error(`${info.file.name} file upload failed.`)
  }
}
</script>

<template>
  <a-upload
    name="file"
    pastable
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    :headers="{
      authorization: 'authorization-text',
    }"
    @change="handleChange"
  >
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Paste or click to upload
    </a-button>
  </a-upload>
</template>
```
### Upload directory
You can select and upload a whole directory. [Can still select files when uploading a folder in Safari?](#can-still-select-files-when-uploading-a-folder-in-safari)
```vue
<script setup lang="ts">
import { UploadOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-upload action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload" directory>
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Upload Directory
    </a-button>
  </a-upload>
</template>
```
### Upload manually
Upload files manually after `beforeUpload` returns `false`.
```vue
<script setup lang="ts">
import type { UploadFile, UploadProps } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'
import { ref } from 'vue'

const fileList = ref<UploadFile[]>([])
const uploading = ref(false)

function handleUpload() {
  const formData = new FormData()
  fileList.value.forEach((file) => {
    formData.append('files[]', file as File)
  })
  uploading.value = true
  fetch('https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload', {
    method: 'POST',
    body: formData,
  })
    .then(res => res.json())
    .then(() => {
      fileList.value = []
      message.success('upload successfully.')
    })
    .catch(() => {
      message.error('upload failed.')
    })
    .finally(() => {
      uploading.value = false
    })
}

const handleRemove: UploadProps['onRemove'] = (file) => {
  fileList.value = fileList.value.filter(item => item.uid !== file.uid)
}

const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  fileList.value = [...fileList.value, file]
  return false
}
</script>

<template>
  <a-upload
    :before-upload="beforeUpload"
    :on-remove="handleRemove"
    :file-list="fileList"
  >
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Select File
    </a-button>
  </a-upload>
  <a-button
    type="primary"
    :disabled="fileList.length === 0"
    :loading="uploading"
    style="margin-top: 16px"
    @click="handleUpload"
  >
    {{ uploading ? 'Uploading' : 'Start Upload' }}
  </a-button>
</template>
```
### Upload png file only
`beforeUpload` only prevent upload behavior when return false or reject promise, the prevented file would still show in file list. Here is the example you can keep prevented files out of list by return `UPLOAD.LIST_IGNORE`.
```vue
<script setup lang="ts">
import type { UploadEmits, UploadProps } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'
import { message, Upload } from 'antdv-next'

const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  const isPng = file.type === 'image/png'
  if (!isPng) {
    message.error(`${file.name} is not a png file`)
  }
  return isPng || Upload.LIST_IGNORE
}

const handleChange: UploadEmits['change'] = (info) => {
  console.log(info.fileList)
}
</script>

<template>
  <a-upload :before-upload="beforeUpload" @change="handleChange">
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Upload png only
    </a-button>
  </a-upload>
</template>
```
### Pictures with list style
If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not support local thumbnail show. Please use `thumbUrl` instead.
```vue
<script setup lang="ts">
import type { UploadFile } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'

const defaultFileList: UploadFile[] = [
  {
    uid: '0',
    name: 'xxx.png',
    status: 'uploading',
    percent: 33,
  },
  {
    uid: '-1',
    name: 'yyy.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-2',
    name: 'zzz.png',
    status: 'error',
  },
]
</script>

<template>
  <a-upload
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    list-type="picture"
    :default-file-list="defaultFileList"
  >
    <a-button type="primary">
      <template #icon>
        <UploadOutlined />
      </template>
      Upload
    </a-button>
  </a-upload>
</template>
```
### Customize preview file
Customize local preview. Can handle with non-image format files such as video.
```vue
<script setup lang="ts">
import type { UploadProps } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'

const previewFile: UploadProps['previewFile'] = (file) => {
  console.log('Your upload file:', file)
  return fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {
    method: 'POST',
    body: file as BodyInit,
  })
    .then(res => res.json())
    .then(({ thumbnail }) => thumbnail)
}
</script>

<template>
  <a-upload
    action="//jsonplaceholder.typicode.com/posts/"
    list-type="picture"
    :preview-file="previewFile"
  >
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Upload
    </a-button>
  </a-upload>
</template>
```
### Max Count
Limit files with `maxCount`. Will replace current one when `maxCount` is `1`.
```vue
<script setup lang="ts">
import { UploadOutlined } from '@antdv-next/icons'
</script>

<template>
  <a-space direction="vertical" style="width: 100%" size="large">
    <a-upload
      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
      list-type="picture"
      :max-count="1"
    >
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        Upload (Max: 1)
      </a-button>
    </a-upload>
    <a-upload
      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
      list-type="picture"
      :max-count="3"
      multiple
    >
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        Upload (Max: 3)
      </a-button>
    </a-upload>
  </a-space>
</template>
```
### Transform file before request
Use `beforeUpload` for transform file before request such as add a watermark.
```vue
<script setup lang="ts">
import type { UploadProps } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'

const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      const img = document.createElement('img')
      img.src = reader.result as string
      img.onload = () => {
        const canvas = document.createElement('canvas')
        canvas.width = img.naturalWidth
        canvas.height = img.naturalHeight
        const ctx = canvas.getContext('2d')
        if (!ctx) {
          resolve(file)
          return
        }
        ctx.drawImage(img, 0, 0)
        ctx.fillStyle = 'red'
        ctx.textBaseline = 'middle'
        ctx.font = '33px Arial'
        ctx.fillText('Antdv Next', 20, 20)
        canvas.toBlob((result) => {
          if (result) {
            resolve(result)
          }
          else {
            resolve(file)
          }
        })
      }
    }
  })
}
</script>

<template>
  <a-upload
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    list-type="picture"
    :before-upload="beforeUpload"
  >
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Upload
    </a-button>
  </a-upload>
</template>
```
### Aliyun OSS
Use Aliyun OSS upload example.
```vue
<script setup lang="ts">
import type { UploadEmits, UploadFile, UploadProps } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'
import { onMounted, ref } from 'vue'

interface OSSDataType {
  dir: string
  expire: string
  host: string
  accessId: string
  policy: string
  signature: string
}

const fileList = ref<UploadFile[]>([])
const ossData = ref<OSSDataType | null>(null)

function mockOSSData() {
  return Promise.resolve({
    dir: 'user-dir/',
    expire: '1577811661',
    host: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
    accessId: 'c2hhb2RhaG9uZw==',
    policy: 'eGl4aWhhaGFrdWt1ZGFkYQ==',
    signature: 'ZGFob25nc2hhbw==',
  })
}

async function init() {
  try {
    ossData.value = await mockOSSData()
  }
  catch (err) {
    if (err instanceof Error) {
      message.error(err.message)
    }
  }
}

onMounted(() => {
  init()
})

const handleChange: UploadEmits['change'] = ({ fileList: newFileList }) => {
  console.log('Aliyun OSS:', newFileList)
  fileList.value = [...newFileList]
}

const handleRemove: UploadProps['onRemove'] = (file) => {
  fileList.value = fileList.value.filter(item => item.url !== file.url)
}

const getExtraData: UploadProps['data'] = file => ({
  key: file.url,
  OSSAccessKeyId: ossData.value?.accessId,
  policy: ossData.value?.policy,
  Signature: ossData.value?.signature,
})

const beforeUpload: UploadProps['beforeUpload'] = async (file) => {
  if (!ossData.value) {
    return false
  }

  const expire = Number(ossData.value.expire) * 1000
  if (expire < Date.now()) {
    await init()
  }

  const suffix = file.name.slice(file.name.lastIndexOf('.'))
  const filename = Date.now() + suffix
  ;(file as UploadFile).url = ossData.value.dir + filename

  return file
}
</script>

<template>
  <a-form :label-col="{ span: 4 }">
    <a-form-item label="Photos" name="photos">
      <a-upload
        v-model:file-list="fileList"
        name="file"
        :action="ossData?.host"
        :data="getExtraData"
        :before-upload="beforeUpload"
        :on-remove="handleRemove"
        @change="handleChange"
      >
        <a-button>
          <template #icon>
            <UploadOutlined />
          </template>
          Click to Upload
        </a-button>
      </a-upload>
    </a-form-item>
  </a-form>
</template>
```
### Custom show icon
Displays the corresponding by default by type icon
```vue
<script setup lang="ts">
import type { UploadEmits, UploadFile, UploadProps } from 'antdv-next'
import {
  FileExcelTwoTone,
  FilePdfTwoTone,
  FileWordTwoTone,
  LoadingOutlined,
  PaperClipOutlined,
  PictureTwoTone,
  PlusOutlined,
} from '@antdv-next/icons'
import { h, ref } from 'vue'

type FileType = Parameters<NonNullable<UploadProps['beforeUpload']>>[0]

const previewOpen = ref(false)
const previewImage = ref('')
const fileList = ref<UploadFile[]>([
  {
    uid: '-2',
    name: 'pdf.pdf',
    status: 'done',
    url: 'http://cdn07.foxitsoftware.cn/pub/foxit/cpdf/FoxitCompanyProfile.pdf',
  },
  {
    uid: '-3',
    name: 'doc.doc',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.doc',
  },
  {
    uid: '-4',
    name: 'image.png',
    status: 'error',
  },
  {
    uid: '-5',
    name: 'pdf.pdf',
    status: 'error',
  },
  {
    uid: '-6',
    name: 'doc.doc',
    status: 'error',
  },
])

function getBase64(file: FileType) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result as string)
    reader.onerror = error => reject(error)
  })
}

async function handlePreview(file: UploadFile) {
  if (!file.url && !file.preview && file.originFileObj) {
    file.preview = await getBase64(file.originFileObj as FileType)
  }
  previewOpen.value = true
  previewImage.value = (file.url || (file.preview as string)) ?? ''
}

const handleChange: UploadEmits['change'] = ({ fileList: newFileList }) => {
  fileList.value = newFileList
}

function handlePreviewOpenChange(open: boolean) {
  previewOpen.value = open
}

function handleAfterOpenChange(open: boolean) {
  if (!open) {
    previewImage.value = ''
  }
}

const fileSufIconList = [
  { icon: FilePdfTwoTone, suf: ['.pdf'] },
  { icon: FileExcelTwoTone, suf: ['.xlsx', '.xls', '.csv'] },
  { icon: FileWordTwoTone, suf: ['.doc', '.docx'] },
  {
    icon: PictureTwoTone,
    suf: ['.webp', '.svg', '.png', '.gif', '.jpg', '.jpeg', '.jfif', '.bmp', '.dpg'],
  },
]

const iconRender: UploadProps['iconRender'] = (file, listType) => {
  let icon = file.status === 'uploading' ? h(LoadingOutlined) : h(PaperClipOutlined)
  if (listType === 'picture' || listType === 'picture-card' || listType === 'picture-circle') {
    if (listType === 'picture-card' && file.status === 'uploading') {
      icon = h(LoadingOutlined)
    }
    else {
      const suffix = file.name.slice(file.name.lastIndexOf('.'))
      fileSufIconList.forEach((item) => {
        if (item.suf.includes(suffix)) {
          icon = h(item.icon)
        }
      })
    }
  }
  return icon
}
</script>

<template>
  <a-upload
    v-model:file-list="fileList"
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    list-type="picture-card"
    :on-preview="handlePreview"
    :icon-render="iconRender"
    @change="handleChange"
  >
    <template v-if="fileList.length < 8">
      <button style="border: 0; background: none" type="button">
        <PlusOutlined />
        <div style="margin-top: 8px">
          Upload
        </div>
      </button>
    </template>
  </a-upload>
  <a-image
    v-if="previewImage"
    :styles="{ root: { display: 'none' } }"
    :preview="{
      open: previewOpen,
      onOpenChange: handlePreviewOpenChange,
      afterOpenChange: handleAfterOpenChange,
    }"
    :src="previewImage"
  />
</template>
```
### Custom action icon and extra info
Use `showUploadList` for custom action icons and extra information of files.
```vue
<script setup lang="ts">
import type { UploadEmits, UploadFile, UploadProps } from 'antdv-next'
import { StarOutlined, UploadOutlined } from '@antdv-next/icons'
import { h } from 'vue'

const defaultFileList: UploadFile[] = [
  {
    uid: '1',
    name: 'xxx.png',
    size: 1234567,
    status: 'done',
    response: 'Server Error 500',
    url: 'http://www.baidu.com/xxx.png',
  },
  {
    uid: '2',
    name: 'yyy.png',
    size: 1234567,
    status: 'done',
    url: 'http://www.baidu.com/yyy.png',
  },
  {
    uid: '3',
    name: 'zzz.png',
    size: 1234567,
    status: 'error',
    response: 'Server Error 500',
    url: 'http://www.baidu.com/zzz.png',
  },
]

const handleChange: UploadEmits['change'] = ({ file, fileList }) => {
  if (file?.status !== 'uploading') {
    console.log(file, fileList)
  }
}

const showUploadList: UploadProps['showUploadList'] = {
  extra: ({ size = 0 }) => {
    return h('span', { style: { color: '#cccccc' } }, `(${(size / 1024 / 1024).toFixed(2)}MB)`)
  },
  showDownloadIcon: true,
  downloadIcon: 'Download',
  showRemoveIcon: true,
  removeIcon: h(StarOutlined, {
    onClick: (event: MouseEvent) => console.log(event, 'custom removeIcon event'),
  }),
}
</script>

<template>
  <a-upload
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    :default-file-list="defaultFileList"
    :show-upload-list="showUploadList"
    @change="handleChange"
  >
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Upload
    </a-button>
  </a-upload>
</template>
```
### Drag sorting of uploadList
Drag sorting of uploadList by using `@dnd-kit/vue`.
```vue
<script setup lang="ts">
import type { DragEndEvent } from '@dnd-kit/vue'
import type { UploadEmits, UploadFile } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'
import { PointerActivationConstraints } from '@dnd-kit/dom'
import { DragDropProvider, PointerSensor } from '@dnd-kit/vue'
import { isSortable, useSortable } from '@dnd-kit/vue/sortable'
import { defineComponent, h, ref } from 'vue'

const fileList = ref<UploadFile[]>([
  {
    uid: '-1',
    name: 'image1.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-2',
    name: 'image2.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-3',
    name: 'image3.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-4',
    name: 'image4.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-5',
    name: 'image.png',
    status: 'error',
  },
])

const SortableWrapper = defineComponent({
  props: {
    id: { type: String, required: true },
    index: { type: Number, required: true },
  },
  setup(props, { slots }) {
    const handle = ref<HTMLElement>()
    const { isDragging } = useSortable({
      id: () => props.id,
      index: () => props.index,
      element: () => handle.value?.parentElement,
      handle,
    })
    return () => h('div', {
      ref: handle,
      class: ['upload-sort-item', { 'is-dragging': isDragging.value }],
    }, slots.default?.())
  },
})

const sensors = [
  PointerSensor.configure({
    activationConstraints: [
      new PointerActivationConstraints.Distance({ value: 10 }),
    ],
  }),
]

const handleChange: UploadEmits['change'] = ({ fileList: newFileList }) => {
  fileList.value = newFileList
}

function handleDragEnd(event: DragEndEvent) {
  if (event.canceled)
    return

  const { source } = event.operation

  if (isSortable(source)) {
    const { initialIndex, index } = source

    if (initialIndex !== index) {
      const newList = [...fileList.value]
      const [moved] = newList.splice(initialIndex, 1) as [UploadFile]
      newList.splice(index, 0, moved)
      fileList.value = newList
    }
  }
}
</script>

<template>
  <DragDropProvider :sensors="sensors" @drag-end="handleDragEnd">
    <a-upload
      v-model:file-list="fileList"
      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
      @change="handleChange"
    >
      <template #itemRender="{ originNode, file, fileList }">
        <SortableWrapper :id="file.uid" :index="fileList.indexOf(file)">
          <component :is="originNode" />
        </SortableWrapper>
      </template>
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        Click to Upload
      </a-button>
    </a-upload>
  </DragDropProvider>
</template>

<style scoped>
.upload-sort-item {
  cursor: move;
  user-select: none;
}
.upload-sort-item :deep(a) {
  -webkit-user-drag: none;
}
.is-dragging :deep(a) {
  pointer-events: none;
}
</style>
```
### Crop image before uploading
Use [@antdv-next/img-crop](https://github.com/antdv-next/img-crop) to crop image before uploading.
```vue
<script setup lang="ts">
import type { UploadFile, UploadProps } from 'antdv-next'
import { ImgCrop } from '@antdv-next/img-crop'
import { ref } from 'vue'
import { useComponentLocale } from '@/composables/use-locale'
import { locales } from '../locales'

type FileType = Parameters<NonNullable<UploadProps['beforeUpload']>>[0]

const { t } = useComponentLocale(locales)

const fileList = ref<UploadFile[]>([
  {
    uid: '-1',
    name: 'image.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
])

function getBase64(file: FileType) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result as string)
    reader.onerror = error => reject(error)
  })
}

async function handlePreview(file: UploadFile) {
  let src = file.url as string
  if (!src && file.originFileObj) {
    src = await getBase64(file.originFileObj as FileType)
  }
  const image = new Image()
  image.src = src
  const imgWindow = window.open(src)
  imgWindow?.document.write(image.outerHTML)
}
</script>

<template>
  <ImgCrop :modal-title="t('cropModalTitle')" :reset-text="t('cropResetText')" rotation-slider>
    <a-upload
      v-model:file-list="fileList"
      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
      list-type="picture-card"
      @preview="handlePreview"
    >
      <template v-if="fileList.length < 5">
        + Upload
      </template>
    </a-upload>
  </ImgCrop>
</template>
```
### Customize Progress Bar
Use `progress` for customize progress bar.
```vue
<script setup lang="ts">
import type { UploadEmits } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'
import { message } from 'antdv-next'

const handleChange: UploadEmits['change'] = (info) => {
  if (info.file?.status !== 'uploading') {
    console.log(info.file, info.fileList)
  }
  if (info.file?.status === 'done') {
    message.success(`${info.file.name} file uploaded successfully`)
  }
  else if (info.file?.status === 'error') {
    message.error(`${info.file.name} file upload failed.`)
  }
}

function formatPercent(percent?: number) {
  return percent && `${Number.parseFloat(percent.toFixed(2))}%`
}
</script>

<template>
  <a-upload
    name="file"
    action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
    :headers="{
      authorization: 'authorization-text',
    }"
    :progress="{
      strokeColor: {
        '0%': '#108ee9',
        '100%': '#87d068',
      },
      size: 3,
      format: formatPercent,
    }"
    @change="handleChange"
  >
    <a-button>
      <template #icon>
        <UploadOutlined />
      </template>
      Click to Upload
    </a-button>
  </a-upload>
</template>
```
### Custom semantic dom styling
You can customize the [semantic dom](#semantic-dom) style of Upload components by passing objects/functions through `classes` and `styles`.
```vue
<script setup lang="ts">
import type { UploadEmits, UploadFile, UploadProps } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'

const classes: UploadProps['classes'] = {
  root: 'upload-demo-root',
}

const stylesObject: UploadProps['styles'] = {
  item: {
    borderRadius: 2,
    backgroundColor: 'rgba(5, 5, 5, 0.06)',
    height: '30px',
  },
}

const stylesFn: UploadProps['styles'] = (info) => {
  if (info.props.multiple) {
    return {
      root: { border: '1px solid #5459AC' },
      item: {
        borderRadius: 2,
        backgroundColor: 'rgba(5, 5, 5, 0.06)',
        height: '30px',
      },
    }
  }
  return {}
}

const defaultFileList: UploadFile[] = [
  {
    uid: '1',
    name: 'xxx.png',
    status: 'uploading',
    url: 'http://www.baidu.com/xxx.png',
    percent: 33,
  },
  {
    uid: '2',
    name: 'yyy.png',
    status: 'done',
    url: 'http://www.baidu.com/yyy.png',
  },
  {
    uid: '3',
    name: 'zzz.png',
    status: 'error',
    response: 'Server Error 500',
    url: 'http://www.baidu.com/zzz.png',
  },
]

const handleChange: UploadEmits['change'] = ({ file, fileList }) => {
  if (file?.status !== 'uploading') {
    console.log(file, fileList)
  }
}
</script>

<template>
  <a-flex gap="large" vertical>
    <a-upload
      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
      :classes="classes"
      :default-file-list="defaultFileList"
      :styles="stylesObject"
      @change="handleChange"
    >
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        Upload
      </a-button>
    </a-upload>
    <a-upload
      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
      :classes="classes"
      :default-file-list="defaultFileList"
      :styles="stylesFn"
      multiple
      @change="handleChange"
    >
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        Upload
      </a-button>
    </a-upload>
  </a-flex>
</template>

<style>
.upload-demo-root {
  border-radius: 6px;
  padding: 12px;
}
</style>
```
### Component Token
Component Token Debug.
```vue
<script setup lang="ts">
import type { UploadEmits, UploadFile } from 'antdv-next'
import { UploadOutlined } from '@antdv-next/icons'

const defaultFileList: UploadFile[] = [
  {
    uid: '1',
    name: 'xxx.png',
    status: 'uploading',
    url: 'http://www.baidu.com/xxx.png',
    percent: 33,
  },
  {
    uid: '2',
    name: 'yyy.png',
    status: 'done',
    url: 'http://www.baidu.com/yyy.png',
  },
  {
    uid: '3',
    name: 'zzz.png',
    status: 'error',
    response: 'Server Error 500',
    url: 'http://www.baidu.com/zzz.png',
  },
]

const handleChange: UploadEmits['change'] = ({ file, fileList }) => {
  if (file.status !== 'uploading') {
    console.log(file, fileList)
  }
}
</script>

<template>
  <a-config-provider
    :theme="{
      components: {
        Upload: {
          actionsColor: 'yellow',
        },
      },
    }"
  >
    <a-upload
      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
      :default-file-list="defaultFileList"
      @change="handleChange"
    >
      <a-button>
        <template #icon>
          <UploadOutlined />
        </template>
        Upload
      </a-button>
    </a-upload>
  </a-config-provider>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string \| [AcceptConfig](#acceptconfig) | - | - | ✓ |
| action | Uploading URL | string \| (file) => Promise&lt;string> | - | - | × |
| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. When returned value is `Upload.LIST_IGNORE`, the list of files that have been uploaded will ignore it. **Warning：this function is not supported in IE9** | (file: [VcFile](#vcfile), fileList: [VcFile[]](#vcfile)) => boolean \| Promise&lt;File> \| `Upload.LIST_IGNORE` | - | - | × |
| customRequest | Override for the default xhr behavior allowing for additional customization and the ability to implement your own XMLHttpRequest | ( options: [RequestOptions](#request-options), info: \{ defaultRequest: (option: [RequestOptions](#request-options)) => void \| \{ abort: () => void \}; \} ) => void \| \{ abort: () => void \} | - | - | ✓ |
| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: \{ props \})=> Record<[SemanticDOM](#semantic-dom), string> | - | - | ✓ |
| data | Uploading extra params or function which can return uploading extra params | object \| (file) => object \| Promise&lt;object> | - | - | × |
| directory | Support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | - | × |
| disabled | Disable upload button. When customizing Upload children, please pass the `disabled` attribute to the child node at the same time to ensure the disabled rendering effect is consistent. | boolean | false | - | × |
| fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it, support `v-model:file-list` | [UploadFile](#uploadfile)\[] | - | - | × |
| headers | Set request headers, valid above IE10 | object | - | - | × |
| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => VueNode | - | - | × |
| isImageUrl | Customize if render &lt;img /> in thumbnail | (file: UploadFile) => boolean | [(inside implementation)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) | - | × |
| itemRender | Custom item of uploadList | (originNode: VueNode, file: UploadFile, fileList: object\[], actions: \{ download: function, preview: function, remove: function \}) => VueNode | - | - | × |
| listType | Built-in stylesheets, support for four types: `text`, `picture`, `picture-card` or `picture-circle` | string | `text` | - | × |
| maxCount | Limit the number of uploaded files. Will replace current one when `maxCount` is `1` | number | - | - | × |
| method | The http method of upload request | string | `post` | - | × |
| multiple | Whether to support selected multiple files. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false | - | × |
| name | The name of uploading file | string | `file` | - | × |
| openFileDialogOnClick | Click open file dialog | boolean | true | - | × |
| pastable | Support paste file | boolean | false | - | × |
| previewFile | Customize preview file logic | (file: File \| Blob) => Promise&lt;dataURL: string> | - | - | × |
| progress | Custom progress bar | [ProgressProps](/components/progress#api) (support `type="line"` only) | \{ strokeWidth: 2, showInfo: false \} | - | ✓ |
| showUploadList | Whether to show default upload list, could be an object to specify `extra`, `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| \{ extra?: VueNode \| (file: UploadFile) => VueNode, showPreviewIcon?: boolean \| (file: UploadFile) => boolean, showDownloadIcon?: boolean \| (file: UploadFile) => boolean, showRemoveIcon?: boolean \| (file: UploadFile) => boolean, previewIcon?: VueNode \| (file: UploadFile) => VueNode, removeIcon?: VueNode \| (file: UploadFile) => VueNode, downloadIcon?: VueNode \| (file: UploadFile) => VueNode \} | true | - | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: \{ props \})=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | - | ✓ |
| withCredentials | The ajax upload with cookie sent | boolean | false | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| change | A callback function, can be executed when uploading state is changing. It will trigger by every uploading phase. see [onChange](#onchange) | function | - |
| drop | A callback function executed when files are dragged and dropped into the upload area | (event: DragEvent) => void | - |
| download | Click the method to download the file, pass the method to perform the method logic, and do not pass the default jump to the new TAB | function(file): void | - |
| preview | A callback function, will be executed when the file link or preview icon is clicked | function(file) | - |
| remove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when the return value is false or a Promise which resolve(false) or reject | function(file): boolean \| Promise | - |

### Slots

| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| itemRender | Custom item of uploadList | ( ctx:\{ originNode: VNode, file: UploadFile, fileList: object\[], actions: \{ download: function, preview: function, remove: function \}\}) => VueNode | - |
| iconRender | Custom show icon | (ctx:\{ file: UploadFile, listType?: UploadListType\}) => VueNode | - |

## Types

### VcFile {#vcfile}

Extends [File](https://developer.mozilla.org/en-US/docs/Web/API/File).

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| uid | unique id. Will auto-generate when not provided | string | - | - |
| lastModifiedDate | A Date object indicating the date and time at which the file was last modified | date | - | - |

### UploadFile {#uploadfile}

Extends [File](https://developer.mozilla.org/en-US/docs/Web/API/File) with additional props.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | - |
| name | File name | string | - | - |
| percent | Upload progress percent | number | - | - |
| status | Upload status. Show different style when configured | `error` \| `done` \| `uploading` \| `removed` | - | - |
| thumbUrl | Thumb image url | string | - | - |
| uid | unique id. Will auto-generate when not provided | string | - | - |
| url | Download url | string | - | - |

### RequestOptions {#request-options}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| action | Uploading URL | string | - | - |
| data | Uploading extra params or function which can return uploading extra params | Record<string, unknown> | - | - |
| filename | file name | string | - | - |
| file | File object containing upload information | [UploadFile](#uploadfile) | - | - |
| withCredentials | The ajax upload with cookie sent | boolean | - | - |
| headers | Set request headers, valid above IE10 | Record<string, string> | - | - |
| method | The http method of upload request | string | - | - |
| onProgress | Progress event callback | (event: object, file: UploadFile) => void | - | - |
| onError | Error callback when upload fails | (event: object, body?: object) => void | - | - |
| onSuccess | Success callback when upload completes | (body: object, fileOrXhr?: UploadFile \| XMLHttpRequest) => void | - | - |

### onChange {#onchange}

> 💡 The function will be called when uploading is in progress, completed, or failed.

When uploading state change, it returns:

```ts
{
  file: { /* ... */ },
  fileList: [ /* ... */ ],
  event: { /* ... */ },
}
```

1. `file` File object for the current operation.

   ```ts
   {
      uid: 'uid',      // unique identifier, negative is recommended, // to prevent interference with internally generated id
      name: 'xx.png',   // file name
      status: 'done' | 'uploading' | 'error' | 'removed', // Intercepted file by beforeUpload doesn't have a status field.
      response: '{"status": "success"}', // response from server
      linkProps: '{"download": "image"}', // additional HTML props of file link
      xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
   }
   ```

2. `fileList` current list of files

3. `event` response from the server, including uploading progress, supported by advanced browsers.

### AcceptConfig {#acceptconfig}

```ts
{
  format: string;
  filter?: 'native' | ((file: VcFile) => boolean);
}
```

Configuration object for file type acceptance rules.

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| format | Accepted file types, same as native input accept attribute. Supports MIME types, file extensions, etc. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | - |
| filter | File filtering rule. When set to `'native'`, uses browser native filtering behavior; when set to a function, allows custom filtering logic. Function returns `true` to accept the file, `false` to reject | `'native'` \| `(file: VcFile) => boolean` | - | - |

## Semantic DOM

<demo src="./demo/_semantic.vue" simplify></demo>

## Design Token

<ComponentTokenTable component="Upload"></ComponentTokenTable>

See [Customize Theme](/docs/vue/customize-theme) to learn how to use Design Token.

## FAQ

### How do I implement upload server side? {#faq-server-implement}

- You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki#server-side) about how to implement server side upload interface.
- There is a mock example of [express](https://github.com/react-component/upload/blob/211979fdaa2c7896b6496df7061a0cfc0fc5434e/server.js) in rc-upload.

### I want to display download links. {#faq-show-download-link}

Please set property `url` of each item in `fileList` to control the content of the link.

### How to use `customRequest`? {#faq-custom-request}

See <https://github.com/react-component/upload#customrequest>.

### Why will the `fileList` that's in control not trigger `onChange` `status` update when the file is not in the list? {#faq-filelist-controlled-status}

`onChange` will only trigger when the file is in the list, it will ignore any events removed from the list.

### Why does `onChange` sometimes return File object and other times return `{ originFileObj: File }`? {#faq-on-change-return-type}

For compatible case, we return File object when `beforeUpload` return `false`. It will merge to `{ originFileObj: File }` in the next major version. Current version is compatible to get origin file by `info.file.originFileObj`. You can change this before a major release.

### Why sometimes Chrome can not upload? {#faq-chrome-file-picker}

Chrome update will also break native upload. Please restart Chrome to finish the upload job.

<img alt="click restart button on Chrome" src="https://github.com/ant-design/ant-design/assets/507615/1509b25f-4cd3-41b2-9415-90394ad08273" width="800" />

Ref:

- [#48007](https://github.com/ant-design/ant-design/issues/48007)
- [#32672](https://github.com/ant-design/ant-design/issues/32672)
- [#32913](https://github.com/ant-design/ant-design/issues/32913)
- [#33988](https://github.com/ant-design/ant-design/issues/33988)

### Can still select files when uploading a folder in Safari? {#faq-safari-folder-upload}

Inside the upload component, we use the `directory` and `webkitdirectory` properties to control the input to implement folder selection, but it seems that in Safari's implementation, [it doesn't prevent users from selecting files](https://stackoverflow.com/q/55649945/3040605). You can solve this issue through `accept` configuration, for example:

```ts
accept = {
  // Do not allow selecting any files
  format: `.${'n'.repeat(100)}`,
  // Accept all files within the folder after folder selection
  filter: () => true,
}
```

---
Title: Watermark
URL: https://www.antdv-next.com/components/watermark.md
---

## When To Use {#when-to-use}

- Use when the page needs to be watermarked to identify the copyright.
- Suitable for preventing information theft.

## Examples {#examples}

### Basic
The most basic usage.
```vue
<template>
  <a-watermark content="Antdv Next">
    <div class="h-500px" />
  </a-watermark>
</template>
```
### Multi-line watermark
Use `content` to set a string array to specify multi-line text watermark content.
```vue
<template>
  <a-watermark :content="['Antdv Next', 'Happy Working']">
    <div class="h-500px" />
  </a-watermark>
</template>
```
### Image watermark
Specify the image address via `image`. To ensure that the image is high definition and not stretched, set the width and height, and upload at least twice the width and height of the logo image address.
```vue
<template>
  <a-watermark :height="30" :width="130" image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original">
    <div class="h-500px" />
  </a-watermark>
</template>
```
### Custom configuration
Preview the watermark effect by configuring custom parameters.
```vue
<script setup lang="ts">
import type { ColorValueType, WatermarkProps } from 'antdv-next'
import { computed, reactive } from 'vue'

const formState = reactive({
  content: 'Antdv Next',
  color: 'rgba(0, 0, 0, 0.15)' as ColorValueType,
  fontSize: 16,
  zIndex: 11,
  rotate: -22,
  gapX: 100,
  gapY: 100,
  offsetX: null as number | null,
  offsetY: null as number | null,
})

const resolvedColor = computed(() => {
  const color = formState.color
  if (!color)
    return 'rgba(0, 0, 0, 0.15)'
  if (typeof color === 'string')
    return color
  if (!Array.isArray(color)) {
    return color.toRgbString()
  }
  return ''
})

const watermarkProps = computed<WatermarkProps>(() => ({
  content: formState.content,
  zIndex: formState.zIndex,
  rotate: formState.rotate,
  gap: [formState.gapX, formState.gapY],
  offset: formState.offsetX != null && formState.offsetY != null
    ? [formState.offsetX, formState.offsetY]
    : undefined,
  font: {
    color: resolvedColor.value,
    fontSize: formState.fontSize,
  },
}))
</script>

<template>
  <a-flex gap="medium">
    <a-watermark v-bind="watermarkProps">
      <a-typography>
        <a-typography-paragraph>
          The light-speed iteration of the digital world makes products more complex. However,
          human consciousness and attention resources are limited. Facing this design
          contradiction, the pursuit of natural interaction will be the consistent direction of
          Ant Design.
        </a-typography-paragraph>
        <a-typography-paragraph>
          Natural user cognition: According to cognitive psychology, about 80% of external
          information is obtained through visual channels. The most important visual elements in
          the interface design, including layout, colors, illustrations, icons, etc., should fully
          absorb the laws of nature, thereby reducing the user&apos;s cognitive cost and bringing
          authentic and smooth feelings. In some scenarios, opportunely adding other sensory
          channels such as hearing, touch can create a richer and more natural product experience.
        </a-typography-paragraph>
        <a-typography-paragraph>
          Natural user behavior: In the interaction with the system, the designer should fully
          understand the relationship between users, system roles, and task objectives, and also
          contextually organize system functions and services. At the same time, a series of
          methods such as behavior analysis, artificial intelligence and sensors could be applied
          to assist users to make effective decisions and reduce extra operations of users, to
          save users&apos; mental and physical resources and make human-computer interaction more
          natural.
        </a-typography-paragraph>
      </a-typography>
      <img
        draggable="false"
        style="z-index: 10; width: 100%; max-width: 800px; position: relative;"
        src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"
        alt="img"
      >
    </a-watermark>
    <a-form :model="formState" layout="vertical" style="width: 200px; flex-shrink: 0; border-inline-start: 1px solid #eee; padding-inline-start: 16px;">
      <a-form-item label="Content">
        <a-input v-model:value="formState.content" placeholder="Please enter" />
      </a-form-item>
      <a-form-item label="Color">
        <a-color-picker v-model:value="formState.color as any" />
      </a-form-item>
      <a-form-item label="FontSize">
        <a-slider v-model:value="formState.fontSize" :step="1" :min="1" :max="100" />
      </a-form-item>
      <a-form-item label="zIndex">
        <a-slider v-model:value="formState.zIndex" :step="1" :min="0" :max="100" />
      </a-form-item>
      <a-form-item label="Rotate">
        <a-slider v-model:value="formState.rotate" :step="1" :min="-180" :max="180" />
      </a-form-item>
      <a-form-item label="Gap" :style="{ marginBottom: 0 }">
        <a-flex gap="small">
          <a-form-item style="flex: 1">
            <a-input-number v-model:value="formState.gapX" placeholder="gapX" style="width: 100%" />
          </a-form-item>
          <a-form-item style="flex: 1">
            <a-input-number v-model:value="formState.gapY" placeholder="gapY" style="width: 100%" />
          </a-form-item>
        </a-flex>
      </a-form-item>
      <a-form-item label="Offset" :style="{ marginBottom: 0 }">
        <a-flex gap="small">
          <a-form-item style="flex: 1">
            <a-input-number v-model:value="formState.offsetX" placeholder="offsetLeft" style="width: 100%" />
          </a-form-item>
          <a-form-item style="flex: 1">
            <a-input-number v-model:value="formState.offsetY" placeholder="offsetTop" style="width: 100%" />
          </a-form-item>
        </a-flex>
      </a-form-item>
    </a-form>
  </a-flex>
</template>
```
### Modal or Drawer
Use in Modal and Drawer.
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'

const showModal = shallowRef(false)
const showDrawer = shallowRef(false)
const showDrawer2 = shallowRef(false)

const placeholderStyle = {
  height: '300px',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: 'rgba(150, 150, 150, 0.2)',
}
</script>

<template>
  <a-flex gap="medium">
    <a-button type="primary" @click="showModal = true">
      Show in Modal
    </a-button>
    <a-button type="primary" @click="showDrawer = true">
      Show in Drawer
    </a-button>
    <a-button type="primary" @click="showDrawer2 = true">
      Not Show in Drawer
    </a-button>
  </a-flex>
  <a-watermark content="Antdv Next">
    <a-modal
      v-model:open="showModal"
      destroy-on-hidden
      title="Modal"
      @ok="showModal = false"
      @cancel="showModal = false"
    >
      <div :style="placeholderStyle">
        A mock height
      </div>
    </a-modal>
    <a-drawer
      v-model:open="showDrawer"
      destroy-on-hidden
      title="Drawer"
      @close="showDrawer = false"
    >
      <div :style="placeholderStyle">
        A mock height
      </div>
    </a-drawer>
  </a-watermark>
  <a-watermark content="Antdv Next" :inherit="false">
    <a-drawer
      v-model:open="showDrawer2"
      destroy-on-hidden
      title="Drawer"
      @close="showDrawer2 = false"
    >
      <div :style="placeholderStyle">
        A mock height
      </div>
    </a-drawer>
  </a-watermark>
</template>
```

## API

Common props ref：[Common props](/docs/vue/common-props)

### Props

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| width | The width of the watermark, the default value of `content` is its own width | number | 120 | - | × |
| height | The height of the watermark, the default value of `content` is its own height | number | 64 | - | × |
| inherit | Pass the watermark to the pop-up component such as Modal, Drawer | boolean | true | - | × |
| rotate | When the watermark is drawn, the rotation angle, unit `°` | number | -22 | - | × |
| zIndex | The z-index of the appended watermark element | number | 9 | - | × |
| image | Image source, it is recommended to export 2x or 3x image, high priority (support base64 format) | string | - | - | × |
| content | Watermark text content. Pass a `WatermarkText` object to set per-line font styles | string \| [WatermarkText](#watermarktext) \| (string \| [WatermarkText](#watermarktext))[] | - | object usage: 1.4.0 | × |
| font | Text style | [Font](#font) | [Font](#font) | - | × |
| gap | The spacing between watermarks | \[number, number\] | \[100, 100\] | - | × |
| offset | The offset of the watermark from the upper left corner of the container. The default is `gap/2` | \[number, number\] | \[gap\[0\]/2, gap\[1\]/2\] | - | × |

### Events

| Event | Description | Type | Version |
| --- | --- | --- | --- |
| remove | Callback when the watermark is removed by DOM mutation | () => void | - |

## Types {#types}

### Font {#font}

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| color | Font color | [CanvasFillStrokeStyles.fillStyle](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle) | rgba(0,0,0,.15) | - |
| fontSize | Font size | number \| string | 16 | - |
| fontWeight | Font weight | `normal` \| `light` \| `weight` \| number | normal | - |
| fontFamily | Font family | string | sans-serif | - |
| fontStyle | Font style | `none` \| `normal` \| `italic` \| `oblique` | normal | - |
| textAlign | Specify the text alignment direction | [CanvasTextAlign](https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textAlign) | `center` | - |

### WatermarkText {#watermarktext}

Configure the font style for a single line of a multi-line watermark (`1.4.0`).

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| text | Text content of the line | string | - | 1.4.0 |
| font | Font style of the line, merged over the component-level `font` | [Font](#font) | - | 1.4.0 |

## Design Token {#design-token}

<ComponentTokenTable component="Watermark"></ComponentTokenTable>

## FAQ

### Handle abnormal image watermarks {#faq-invalid-image}

When using an image watermark and the image loads abnormally, you can add `content` at the same time to prevent the watermark from becoming invalid.

```vue
<template>
  <a-watermark
    :height="30"
    :width="130"
    content="Antdv Next"
    image="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original"
  >
    <div style="height: 500px" />
  </a-watermark>
</template>
```

### Why `overflow: hidden` style is added? {#faq-overflow-hidden}

To prevent users from hiding the watermark by setting the container height to 0 through the developer tool, the container adds `overflow: hidden`. When the container height changes, the content is also hidden. You can override the style to modify this behavior:

```vue
<template>
  <a-watermark :style="{ overflow: 'visible' }" />
</template>
```