English | 简体中文

🧑‍💻 项目状态

这是原始 react-vant 项目的一个分支，原项目已进入维护模式。这个分支施在继续开发并添加新功能，同时保持与原项目的兼容性。

✨ 特性

• 🚀 组件平均体积小于 1KB（min+gzip）.
• 💎 70+ 个高质量组件，覆盖移动端主流场景.
• 💪 使用 TypeScript 编写，提供完整的类型定义.
• 📝 提供完善的文档和组件示例.
• 🎨 支持主题定制，内置 700+ 个主题变量.
• 😎 支持按需引入和 Tree Shaking.
• ⚡️ 支持 Vite和 Parcel@2.
• 🌵 现代浏览器
• 🌝 支持 SSR(nextjs, remix).

🖥 环境支持

| Edge | Firefox | Chrome | Safari | | --- | --- | --- | --- |

支持现代浏览器和 Chrome >= 51，iOS >= 10.0。

📱 预览

手机扫描上的二维码访问演示：

📦 安装

推荐 锁定 版本:

# npm
npm i @react-vant-next/ui -S -E

# pnpm
pnpm i @react-vant-next/ui -S -E

🚀 快速开始

以下是 react-vant 的一些代码示例：

代码片段:

import { Button } from "@react-vant-next/ui";
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";

function App() {
  return <Button>Default Button</Button>;
}

createRoot(mountNode).render(<App />);

更多信息请参考仓库中的文档。

注意

触摸事件模拟

这是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 touch 事件，没有监听桌面端的 mouse 事件。

如果你需要在桌面端使用，可以引入我们提供的 @vant/touch-emulator，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。

# 安装模块
npm i @vant/touch-emulator -S

// 引入模块后自动生效
import '@vant/touch-emulator';

底部安全区适配

iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行安全区适配。部分组件提供了 safeAreaInsetTop 或 safeAreaInsetBottom 属性，设置该属性后，即可在对应的机型上开启适配，如下示例：

// 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

// 开启顶部安全区适配
<Navbar safeAreaInsetTop />

// 开启底部安全区适配
<NumberKeyboard safeAreaInsetBottom />

🤝 贡献

阅读我们的贡献指南，让我们一起构建更好的 react-vant。

我们欢迎所有贡献。 请先阅读我们的 CONTRIBUTING.md 文件。 您可以将任何想法作为拉取请求或作为 GitHub 问题提交 😃。

🙏 鸣谢

Vant - Thanks to the Vant team for years of continuous maintenance, allowing me to stand on the shoulders of giants.

Zan Design - Thanks for the careful production of YouZan Design Experience Center.

📜 许可证

MIT ⓒ silentlee