<div class="card center"> <div class="van-doc-intro" style="text-align:center;"> <img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://img.yzcdn.cn/vant/logo.png"> <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Ngx-Vant</h2> <p>轻量、可靠的移动端 Angular 组件库</p> </div> </div>
<h3 id="介绍">介绍</h3>
<p>Ngx-Vant 是<strong>Zan Design System</strong>视觉规范实现的<strong>Angular UI</strong> 组件库，全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。 &lt;br&gt;&lt;br&gt;</p>
<p>目前 Vant 官方提供了 <a href="https://vant-contrib.gitee.io/vant">Vue 2 版本</a>、<a href="https://vant-contrib.gitee.io/vant/next">Vue 3 版本</a>和<a href="http://vant-contrib.gitee.io/vant-weapp">微信小程序版本</a>，并由社区团队维护 <a href="https://github.com/mxdi9i7/vant-react">React 版本</a>。</p>
<h3 id="特性">特性</h3>
<ul>
<li>提供 60 多个高质量组件，覆盖移动端各类场景</li>
<li>完善的中英文文档和示例</li>
<li>支持 Angular14</li>
<li>支持按需引入</li>
<li>支持主题定制</li>
<li>支持国际化</li>
<li>支持 TypeScript</li>
</ul>
<h3 id="快速上手">快速上手</h3>
<p>请参考<a href="#/zh-CN/quickstart">快速上手</a>章节。</p>
<h3 id="贡献代码">贡献代码</h3>
<p>修改代码请阅读我们的<a href="#/zh-CN/contribution">开发指南</a>。</p>
<p>使用过程中发现任何问题都可以提 <a href="https://github.com/yutao331763646/ngx-vant/issues">Issue</a> 给我们，当然，我们也非常欢迎你给我们发 <a href="https://github.com/yutao331763646/ngx-vant/pulls">PR</a>。</p>
<h3 id="浏览器支持">浏览器支持</h3>
<p>现代浏览器以及 Android 4.0+, iOS 8.0+。</p>
<h3 id="生态">生态</h3>
<table>
<thead>
<tr>
<th>项目</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><a href="https://github.com/youzan/vant-demo">vant-demo</a></td>
<td>Vant 官方示例合集</td>
</tr>
<tr>
<td><a href="https://github.com/youzan/vant-weapp">vant-weapp</a></td>
<td>微信小程序组件库</td>
</tr>
<tr>
<td><a href="https://github.com/mxdi9i7/vant-react">vant-react</a></td>
<td>Vant React 版（由社区维护）</td>
</tr>
<tr>
<td><a href="https://github.com/youzan/vant/tree/dev/packages/vant-cli">vant-cli</a></td>
<td>开箱即用的组件库搭建工具</td>
</tr>
<tr>
<td><a href="https://github.com/youzan/vant/tree/dev/packages/vant-icons">vant-icons</a></td>
<td>Vant 图标库</td>
</tr>
<tr>
<td><a href="https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator">vant-touch-emulator</a></td>
<td>在桌面端使用 Vant 的辅助库</td>
</tr>
</tbody></table>
<h3 id="链接">链接</h3>
<ul>
<li><a href="https://github.com/yutao331763646/ngx-vant/issues">意见反馈</a></li>
</ul>
<h3 id="开源协议">开源协议</h3>
<p>本项目基于 <a href="https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89">MIT</a> 协议，请自由地享受和参与开源</p>


Lightweight Mobile UI Components built on Vant and Angular

Ngx-Vant 轻量、可靠的移动端 Angular 组件库

<p><code>ng-zorro-antd</code> 是 Ant Design 的 Angular 实现，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。</p>
<p><a href="https://dev.azure.com/ng-zorro/NG-ZORRO/_build"><img src="https://img.shields.io/azure-devops/build/ng-zorro/0d271b73-3774-4dbc-a081-088df0b28bf8/2/master?style=flat-square" alt="Azure branch"></a>
<a href="https://codecov.io/gh/NG-ZORRO/ng-zorro-antd"><img src="https://img.shields.io/codecov/c/github/NG-ZORRO/ng-zorro-antd.svg?style=flat-square" alt="Codecov"></a>
<a href="https://github.com/NG-ZORRO/ng-zorro-antd/releases"><img src="https://img.shields.io/github/release-date/NG-ZORRO/ng-zorro-antd.svg?style=flat-square" alt="GitHub Release Date"></a>
<a href="https://www.npmjs.org/package/ng-zorro-atnd"><img src="https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square" alt="npm package"></a>
<a href="https://npmjs.org/package/ng-zorro-antd"><img src="http://img.shields.io/npm/dm/ng-zorro-antd.svg?style=flat-square" alt="NPM downloads"></a>
<a href="https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square" alt="GitHub license"></a>
<a href="https://discord.com/channels/748677963142135818/764322550712893451"><img src="https://img.shields.io/discord/748677963142135818?label=Discord&style=flat-square" alt="Discord"></a>
<a href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode"><img src="https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square" alt="extension-for-VSCode"></a>
<a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="code style: prettier"></a>
<a href="https://twitter.com/ng_zorro"><img src="https://img.shields.io/badge/Twitter-NG--ZORRO-blue.svg?style=flat-square&logo=twitter" alt="Twitter"></a></p>
<p>&lt;/div&gt;

</p>
<p><a href="http://ng.ant.design"><img src="https://img.alicdn.com/tfs/TB1t6QPylr0gK0jSZFnXXbRRXXa-4000-1378.png" alt=""></a></p>
<p><a href="README.md">English</a> | 简体中文</p>
<h2 id="✨-特性">✨ 特性</h2>
<ul>
<li>提炼自企业级中后台产品的交互语言和视觉风格。</li>
<li>开箱即用的高质量 Angular 组件，与 Angular 保持同步升级。</li>
<li>使用 TypeScript 构建，提供完整的类型定义文件。</li>
<li>支持 OnPush 模式，性能卓越。</li>
<li>数十个国际化语言支持。</li>
<li>深入每个细节的主题定制能力。</li>
</ul>
<h2 id="☀️-授权协议">☀️ 授权协议</h2>
<p><a href="https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE">MIT</a></p>
<p><a href="https://app.fossa.com/projects/git%2Bgithub.com%2FNG-ZORRO%2Fng-zorro-antd?ref=badge_shield"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2FNG-ZORRO%2Fng-zorro-antd.svg?type=shield" alt="FOSSA Status"></a></p>
<h2 id="🖥-支持环境">🖥 支持环境</h2>
<ul>
<li>Angular <code>^15.0.0</code> <a href="https://www.npmjs.org/package/ng-zorro-antd"><img src="https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square" alt="npm package"></a></li>
<li>支持服务端渲染</li>
<li>现代浏览器，<a href="https://angular.io/guide/browser-support">浏览器支持</a></li>
<li><a href="http://electron.atom.io/">Electron</a></li>
</ul>
<table>
<thead>
<tr>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png&quot; alt=&quot;IE / Edge&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;IE / Edge</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png&quot; alt=&quot;Firefox&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Firefox</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png&quot; alt=&quot;Chrome&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Chrome</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png&quot; alt=&quot;Safari&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Safari</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png&quot; alt=&quot;Opera&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Opera</th>
<th><a href="http://godban.github.io/browsers-support-badges/">&lt;img src=&quot;https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png&quot; alt=&quot;Electron&quot; width=&quot;24px&quot; height=&quot;24px&quot; /&gt;</a>&lt;/br&gt;Electron</th>
</tr>
</thead>
<tbody><tr>
<td>Edge</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
<td>last 2 versions</td>
</tr>
</tbody></table>
<h2 id="🎨-设计规范">🎨 设计规范</h2>
<p><code>ng-zorro-antd</code> 与 Ant Design 设计规范定期同步，你可以在线查看<a href="https://nz-styles-syncer.now.sh/">同步日志</a>。</p>
<h2 id="📦-安装">📦 安装</h2>
<p>我们强烈推荐官方的 <code>@angular/cli</code> 工具链辅助进行开发，在实际项目开发中，它可以很好的满足对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。</p>
<pre><code class="language-bash">$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd
</code></pre>
<blockquote>
<p>如果你想了解更多CLI工具链的功能和命令，建议访问 <a href="https://github.com/angular/angular-cli">Angular CLI</a> 了解更多</p>
</blockquote>
<h2 id="🔨-使用">🔨 使用</h2>
<p>将想要使用的组件模块引入到你的 <code>app.module.ts</code> 文件和其它的<a href="https://angular.cn/guide/feature-modules">特性模块</a>中。</p>
<pre><code class="language-ts">import { NzButtonModule } from &#39;ng-zorro-antd/button&#39;;
@NgModule({
  imports: [ NzButtonModule ]
})
export class AppModule {
}
</code></pre>
<blockquote>
<p><code>@angular/cli</code> 的用户不需要担心下面这项设置，但知道也挺有好处。
然后在 <code>angular.json</code> 文件中引入样式和 SVG icon 资源。</p>
</blockquote>
<pre><code class="language-diff">{
  &quot;assets&quot;: [
+   {
+     &quot;glob&quot;: &quot;**/*&quot;,
+     &quot;input&quot;: &quot;./node_modules/@ant-design/icons-angular/src/inline-svg/&quot;,
+     &quot;output&quot;: &quot;/assets/&quot;
+   }
  ],
  &quot;styles&quot;: [
+   &quot;node_modules/ng-zorro-antd/ng-zorro-antd.min.css&quot;
  ]
}
</code></pre>
<p>参考<a href="https://ng.ant.design/docs/getting-started/zh">快速上手</a>以了解更多。</p>
<h2 id="🔗-链接">🔗 链接</h2>
<ul>
<li><a href="https://github.com/NG-ZORRO/ng-zorro-antd-mobile">ng-zorro-antd-mobile</a></li>
<li><a href="https://github.com/ng-alain/ng-alain">ng-alain</a></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=cipchk.ng-zorro-vscode">VSCode 的 snippet 扩展</a></li>
</ul>
<h2 id="⌨️-开发">⌨️ 开发</h2>
<pre><code class="language-bash">$ git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run start
</code></pre>
<p>浏览器会自动打开。</p>
<h2 id="🤝-如何贡献">🤝 如何贡献</h2>
<p><a href="https://github.com/NG-ZORRO/ng-zorro-antd/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"></a></p>
<p>在任何形式的参与前，请先阅读 <a href="https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md">贡献者文档</a>。如果你希望参与贡献，欢迎 <a href="https://github.com/NG-ZORRO/ng-zorro-antd/pulls">Pull Request</a>，或给我们 <a href="http://ng.ant.design/issue-helper/#/new-issue">报告 Bug</a>。</p>
<blockquote>
<p>强烈推荐阅读 <a href="https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way">《提问的智慧》</a>(<strong>本指南不提供此项目的实际支持服务！</strong>)、<a href="https://github.com/seajs/seajs/issues/545">《如何向开源社区提问题》</a> 和 <a href="http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html">《如何有效地报告 Bug》</a>、<a href="https://zhuanlan.zhihu.com/p/25795393">《如何向开源项目提交无法解答的问题》</a>，更好的问题更容易获得帮助。
感谢 <a href="https://www.jetbrains.com/?from=ng-zorro-antd">JetBrains</a> 提供的免费开源 License 赞助</p>
</blockquote>
<p><a href="https://www.jetbrains.com/?from=ng-zorro-antd"><img src="https://img.alicdn.com/tfs/TB1sSomo.z1gK0jSZLeXXb9kVXa-120-130.svg" alt="JetBrains"></a></p>
<h2 id="❓-社区互助">❓ 社区互助</h2>
<p>如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。</p>
<p>通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 <code>ng-zorro-antd</code> 标签。</p>
<ol>
<li><a href="https://stackoverflow.com/questions/tagged/ng-zorro-antd">Stack Overflow</a>（English）</li>
<li><a href="https://segmentfault.com/t/ng-zorro">Segment Fault</a>（中文）</li>
<li><a href="https://discord.com/channels/748677963142135818/764322550712893451"><img src="https://img.shields.io/discord/748677963142135818?label=Discord&style=flat-square" alt="Discord"></a></li>
<li>加入钉钉 NG-ZORRO 自助服务群（中文）</li>
</ol>
<p>&lt;img src=&quot;<a href="https://img.alicdn.com/tfs/TB1aRk.clCw3KVjSZFlXXcJkFXa-750-990.jpg">https://img.alicdn.com/tfs/TB1aRk.clCw3KVjSZFlXXcJkFXa-750-990.jpg</a>&quot; width=&quot;300&quot;&gt;

</p>
<h2 id="🎉-谁在使用">🎉 谁在使用</h2>
<ul>
<li><a href="https://www.alibaba.com/">阿里巴巴</a></li>
<li><a href="https://www.aliyun.com/">阿里云</a></li>
<li><a href="https://www.thoughtworks.com/">思特沃克</a></li>
<li><a href="http://www.cmbchina.com/">招商银行</a></li>
<li><a href="https://www.gongdao.com/">共道科技</a></li>
<li><a href="http://www.uce.cn/">优速快递</a></li>
<li><a href="https://qingflow.com/">轻流</a></li>
<li><a href="http://www.aisino.com/">航天信息股份有限公司</a></li>
<li><a href="http://datagrand.com/">达观数据</a></li>
<li><a href="https://www.ververica.com/">Ververica</a></li>
<li><a href="https://flink.apache.org/">Apache Flink</a></li>
<li><a href="https://zeppelin.apache.org/">Apache Zeppelin</a></li>
<li><a href="https://submarine.apache.org/">Apache Submarine</a></li>
<li><a href="https://metron.apache.org/">Apache Metron</a></li>
<li><a href="http://pag.company/">Process Automation Group</a></li>
<li><a href="https://www.scentbird.com/">ScentBird</a></li>
<li><a href="https://www.sit.ac.nz/">Southern Institute of Technology</a></li>
<li><a href="https://hub.hapify.io/">Hapify (Dynamic boilerplates tool)</a></li>
</ul>
<blockquote>
<p>我们在这里列出了部分使用者，如果你的公司和产品使用了 NG-ZORRO，欢迎到 <a href="https://github.com/NG-ZORRO/ng-zorro-antd/issues/1142">这里</a> 留言。</p>
</blockquote>


ng-zorro-antd 是 Ant Design 的 Angular 实现，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用

Ngx-Vant 轻量、可靠的移动端 Angular 组件库

Angular UI Component Library based on Ant Design