为什么造轮子?
react移动端ui库可太少了,可选的antd-mobile,在手机上表现整体不太能接受,material-design整体和国内产品设计需求偏差大。
做了什么
- 搬迁vant组件(98%)
- 实现react-vant/cli
结果
可用于生产
Roadmap
Roadmap概览
特性
- 40+ 高质量组件,覆盖移动端基本场景
- 支持按需引入
- 支持主题定制
- 支持 TypeScript
Install
Quickstart
import ReactDOM from 'react-dom';
import { Button } from 'react-vant';
import 'react-vant/lib/index.css';
function App() {
return <Button>Default Button</Button>;
}
ReactDOM.render(<App />, mountNode);
请参阅Quickstart中的更多内容。
Contributor group
欢迎加入我们的微信讨论组
Components completion status
Layout Components
- Flex 布局
Basic Components
- Button 按钮
- Typography 文本
- Icon 图标
- Image 图片
- Popup 弹出框
- Cell 单元格
- Toast 轻提示
- 内置样式(IPhoneX 适配,细边框等)
Form Components
- Field 输入框
- CheckBox 复选框
- Radio 单选框
- Rate 评分
- Picker 选择器
- Stepper 步进器
- Search 搜索
- DatetimePicker 时间选择
- PasswordInput 密码输入框
Display Components
- Badge 徽标
- Collapse 折叠面板
- CountDown 倒计时
- Empty 空状态
- ImagePreview 图片预览
- List 列表
- NoticeBar 通知栏
- Sticky 粘性布局
- Swipe 轮播
- Tag 标签
Action Components
- ActionSheet 动作面板
- Loading 加载
- Overlay 遮罩层
- Dialog 弹出层
- PullRefresh 下拉刷新
Navigation Components
- IndexBar 索引栏
- NavBar 导航栏
- Tabs 标签页