├── .all-contributorsrc ├── .browserlistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ └── feature_request.yml ├── release-drafter.yml ├── renovate.json └── workflows │ ├── codeql-analysis.yml │ ├── deploy-site.yml │ ├── issue-close-require.yml │ ├── issue-labeled.yml │ ├── preview-build.yml │ ├── preview-deploy.yml │ ├── release-drafter.yml │ ├── release-tag.yml │ └── sync-gitee.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .prettierignore ├── .prettierrc.js ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── commitlint.config.js ├── package.json ├── packages ├── react-vant-icons │ ├── .svgrrc.js │ ├── README.md │ ├── gulpfile.js │ ├── package.json │ ├── scripts │ │ └── export.js │ └── src │ │ ├── assets │ │ └── icons.sketch │ │ └── icons │ │ ├── Add.tsx │ │ ├── AddO.tsx │ │ ├── AddSquare.tsx │ │ ├── AfterSale.tsx │ │ ├── Aim.tsx │ │ ├── Alipay.tsx │ │ ├── AppsO.tsx │ │ ├── Arrow.tsx │ │ ├── ArrowDown.tsx │ │ ├── ArrowLeft.tsx │ │ ├── ArrowUp.tsx │ │ ├── Ascending.tsx │ │ ├── Audio.tsx │ │ ├── Award.tsx │ │ ├── AwardO.tsx │ │ ├── BackTop.tsx │ │ ├── Bag.tsx │ │ ├── BagO.tsx │ │ ├── BalanceList.tsx │ │ ├── BalanceListO.tsx │ │ ├── BalanceO.tsx │ │ ├── BalancePay.tsx │ │ ├── BarChartO.tsx │ │ ├── Bars.tsx │ │ ├── Bell.tsx │ │ ├── Bill.tsx │ │ ├── BillO.tsx │ │ ├── BirthdayCakeO.tsx │ │ ├── Bookmark.tsx │ │ ├── BookmarkO.tsx │ │ ├── BrowsingHistory.tsx │ │ ├── BrowsingHistoryO.tsx │ │ ├── BrushO.tsx │ │ ├── BulbO.tsx │ │ ├── BullhornO.tsx │ │ ├── CalendarO.tsx │ │ ├── Card.tsx │ │ ├── Cart.tsx │ │ ├── CartCircle.tsx │ │ ├── CartCircleO.tsx │ │ ├── CartO.tsx │ │ ├── CashBackRecord.tsx │ │ ├── CashOnDeliver.tsx │ │ ├── CashierO.tsx │ │ ├── Certificate.tsx │ │ ├── ChartTrendingO.tsx │ │ ├── Chat.tsx │ │ ├── ChatO.tsx │ │ ├── Checked.tsx │ │ ├── Circle.tsx │ │ ├── Clear.tsx │ │ ├── Clock.tsx │ │ ├── ClockO.tsx │ │ ├── Close.tsx │ │ ├── ClosedEye.tsx │ │ ├── Cluster.tsx │ │ ├── ClusterO.tsx │ │ ├── Column.tsx │ │ ├── Comment.tsx │ │ ├── CommentCircle.tsx │ │ ├── CommentCircleO.tsx │ │ ├── CommentO.tsx │ │ ├── Completed.tsx │ │ ├── Contact.tsx │ │ ├── Coupon.tsx │ │ ├── CouponO.tsx │ │ ├── CreditPay.tsx │ │ ├── Cross.tsx │ │ ├── DebitPay.tsx │ │ ├── Delete.tsx │ │ ├── DeleteO.tsx │ │ ├── Descending.tsx │ │ ├── Description.tsx │ │ ├── DesktopO.tsx │ │ ├── Diamond.tsx │ │ ├── DiamondO.tsx │ │ ├── Discount.tsx │ │ ├── Down.tsx │ │ ├── EcardPay.tsx │ │ ├── Edit.tsx │ │ ├── Ellipsis.tsx │ │ ├── Empty.tsx │ │ ├── Enlarge.tsx │ │ ├── EnvelopO.tsx │ │ ├── Exchange.tsx │ │ ├── Expand.tsx │ │ ├── ExpandO.tsx │ │ ├── Eye.tsx │ │ ├── EyeO.tsx │ │ ├── Fail.tsx │ │ ├── Failure.tsx │ │ ├── FilterO.tsx │ │ ├── Fire.tsx │ │ ├── FireO.tsx │ │ ├── FlagO.tsx │ │ ├── FlowerO.tsx │ │ ├── Font.tsx │ │ ├── FontO.tsx │ │ ├── FreePostage.tsx │ │ ├── Friends.tsx │ │ ├── FriendsO.tsx │ │ ├── Gem.tsx │ │ ├── GemO.tsx │ │ ├── Gift.tsx │ │ ├── GiftCard.tsx │ │ ├── GiftCardO.tsx │ │ ├── GiftO.tsx │ │ ├── GoldCoin.tsx │ │ ├── GoldCoinO.tsx │ │ ├── GoodJob.tsx │ │ ├── GoodJobO.tsx │ │ ├── GoodsCollect.tsx │ │ ├── GoodsCollectO.tsx │ │ ├── Graphic.tsx │ │ ├── GuideO.tsx │ │ ├── HomeO.tsx │ │ ├── Hot.tsx │ │ ├── HotO.tsx │ │ ├── HotSale.tsx │ │ ├── HotSaleO.tsx │ │ ├── HotelO.tsx │ │ ├── IconBase.tsx │ │ ├── Idcard.tsx │ │ ├── Info.tsx │ │ ├── InfoO.tsx │ │ ├── Invitation.tsx │ │ ├── Label.tsx │ │ ├── LabelO.tsx │ │ ├── Like.tsx │ │ ├── LikeO.tsx │ │ ├── Live.tsx │ │ ├── Location.tsx │ │ ├── LocationO.tsx │ │ ├── Lock.tsx │ │ ├── Logistics.tsx │ │ ├── Manager.tsx │ │ ├── ManagerO.tsx │ │ ├── MapMarked.tsx │ │ ├── Medal.tsx │ │ ├── MedalO.tsx │ │ ├── Minus.tsx │ │ ├── More.tsx │ │ ├── MoreO.tsx │ │ ├── Music.tsx │ │ ├── MusicO.tsx │ │ ├── New.tsx │ │ ├── NewArrival.tsx │ │ ├── NewArrivalO.tsx │ │ ├── NewO.tsx │ │ ├── NewspaperO.tsx │ │ ├── NotesO.tsx │ │ ├── OrdersO.tsx │ │ ├── OtherPay.tsx │ │ ├── Paid.tsx │ │ ├── Passed.tsx │ │ ├── Pause.tsx │ │ ├── PauseCircle.tsx │ │ ├── PauseCircleO.tsx │ │ ├── PeerPay.tsx │ │ ├── PendingPayment.tsx │ │ ├── Phone.tsx │ │ ├── PhoneCircle.tsx │ │ ├── PhoneCircleO.tsx │ │ ├── PhoneO.tsx │ │ ├── Photo.tsx │ │ ├── PhotoFail.tsx │ │ ├── PhotoO.tsx │ │ ├── Photograph.tsx │ │ ├── Play.tsx │ │ ├── PlayCircle.tsx │ │ ├── PlayCircleO.tsx │ │ ├── Plus.tsx │ │ ├── PointGift.tsx │ │ ├── PointGiftO.tsx │ │ ├── Points.tsx │ │ ├── Printer.tsx │ │ ├── Qr.tsx │ │ ├── QrInvalid.tsx │ │ ├── Question.tsx │ │ ├── QuestionO.tsx │ │ ├── Records.tsx │ │ ├── RefundO.tsx │ │ ├── Replay.tsx │ │ ├── Revoke.tsx │ │ ├── Scan.tsx │ │ ├── Search.tsx │ │ ├── SendGift.tsx │ │ ├── SendGiftO.tsx │ │ ├── Service.tsx │ │ ├── ServiceO.tsx │ │ ├── Setting.tsx │ │ ├── SettingO.tsx │ │ ├── Share.tsx │ │ ├── ShareO.tsx │ │ ├── ShieldO.tsx │ │ ├── Shop.tsx │ │ ├── ShopCollect.tsx │ │ ├── ShopCollectO.tsx │ │ ├── ShopO.tsx │ │ ├── ShoppingCart.tsx │ │ ├── ShoppingCartO.tsx │ │ ├── Shrink.tsx │ │ ├── Sign.tsx │ │ ├── Smile.tsx │ │ ├── SmileComment.tsx │ │ ├── SmileCommentO.tsx │ │ ├── SmileO.tsx │ │ ├── Sort.tsx │ │ ├── Star.tsx │ │ ├── StarO.tsx │ │ ├── Stop.tsx │ │ ├── StopCircle.tsx │ │ ├── StopCircleO.tsx │ │ ├── Success.tsx │ │ ├── ThumbCircle.tsx │ │ ├── ThumbCircleO.tsx │ │ ├── TodoList.tsx │ │ ├── TodoListO.tsx │ │ ├── Tosend.tsx │ │ ├── TvO.tsx │ │ ├── UmbrellaCircle.tsx │ │ ├── Underway.tsx │ │ ├── UnderwayO.tsx │ │ ├── Upgrade.tsx │ │ ├── UserCircleO.tsx │ │ ├── UserO.tsx │ │ ├── Video.tsx │ │ ├── VideoO.tsx │ │ ├── VipCard.tsx │ │ ├── VipCardO.tsx │ │ ├── Volume.tsx │ │ ├── VolumeO.tsx │ │ ├── WapHome.tsx │ │ ├── WapHomeO.tsx │ │ ├── WapNav.tsx │ │ ├── WarnO.tsx │ │ ├── Warning.tsx │ │ ├── WarningO.tsx │ │ ├── WeappNav.tsx │ │ ├── Wechat.tsx │ │ ├── WechatPay.tsx │ │ ├── YouzanShield.tsx │ │ ├── createFromIconfontCN.tsx │ │ └── index.tsx └── react-vant │ ├── .eslintignore │ ├── .eslintrc.js │ ├── README.md │ ├── README.zh-CN.md │ ├── _rcdoc_ │ ├── Footer.less │ ├── Footer.tsx │ ├── HeaderExtra.tsx │ └── mobile │ │ └── Header.tsx │ ├── docs │ ├── README.md │ ├── component │ │ ├── home.less │ │ ├── home.tsx │ │ └── useCN.ts │ ├── guide │ │ ├── about.md │ │ ├── advanced-usage.md │ │ ├── changelog.md │ │ ├── contribution.md │ │ ├── hd.md │ │ ├── i18n.md │ │ ├── migrate.md │ │ ├── quickstart.md │ │ └── theme.md │ └── hooks │ │ ├── intro.md │ │ ├── use-click-away.md │ │ ├── use-count-down.md │ │ ├── use-event-listener.md │ │ ├── use-form-smart.md │ │ ├── use-in-viewport.md │ │ ├── use-mount.md │ │ ├── use-page-visibility.md │ │ ├── use-scroll-parent.md │ │ ├── use-set-state.md │ │ ├── use-touch.md │ │ ├── use-update-effect.md │ │ └── use-window-size.md │ ├── gulpfile.js │ ├── package.json │ ├── public │ ├── demo_1.jpg │ ├── demo_2.jpg │ ├── demo_avatar_1.jpg │ ├── demo_view_1.png │ ├── favicon.png │ ├── logo.svg │ └── rv-watermark.svg │ ├── rcdoc.config.ts │ ├── src │ ├── components │ │ ├── action-bar │ │ │ ├── ActionBar.tsx │ │ │ ├── ActionBarButton.tsx │ │ │ ├── ActionBarContext.ts │ │ │ ├── ActionBarIcon.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── badge.tsx │ │ │ │ ├── base.tsx │ │ │ │ ├── btnColor.tsx │ │ │ │ ├── iconColor.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── action-sheet │ │ │ ├── ActionSheet.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── custom.tsx │ │ │ │ └── status.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── area │ │ │ ├── Area.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── column.tsx │ │ │ │ └── popup.tsx │ │ │ └── index.ts │ │ ├── badge │ │ │ ├── Badge.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ └── custom.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── button │ │ │ ├── Button.tsx │ │ │ ├── ButtonContext.ts │ │ │ ├── ButtonGroup.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── block.tsx │ │ │ │ ├── color.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── group.tsx │ │ │ │ ├── hairline.tsx │ │ │ │ ├── icon.tsx │ │ │ │ ├── loading.tsx │ │ │ │ ├── plain.tsx │ │ │ │ ├── shadow.tsx │ │ │ │ ├── shape.tsx │ │ │ │ ├── size.tsx │ │ │ │ ├── style.less │ │ │ │ └── type.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── calendar │ │ │ ├── Calendar.tsx │ │ │ ├── CalendarDay.tsx │ │ │ ├── CalendarHeader.tsx │ │ │ ├── CalendarMonth.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── custom.tsx │ │ │ │ ├── poppable.tsx │ │ │ │ └── quick.tsx │ │ │ ├── index.ts │ │ │ ├── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ │ └── utils.ts │ │ ├── card │ │ │ ├── Card.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ └── cover.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── cascader │ │ │ ├── Cascader.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── async.tsx │ │ │ │ ├── base.tsx │ │ │ │ ├── fieldNames.tsx │ │ │ │ ├── form.tsx │ │ │ │ ├── options.ts │ │ │ │ ├── style.less │ │ │ │ └── value.tsx │ │ │ ├── index.ts │ │ │ ├── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ │ └── useCascaderExtend.ts │ │ ├── cell │ │ │ ├── Cell.tsx │ │ │ ├── CellGroup.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── arrow.tsx │ │ │ │ ├── base.tsx │ │ │ │ ├── card.tsx │ │ │ │ ├── children.tsx │ │ │ │ ├── group.tsx │ │ │ │ ├── icon.tsx │ │ │ │ ├── list.tsx │ │ │ │ ├── size.tsx │ │ │ │ ├── value.tsx │ │ │ │ └── vertical.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── checkbox │ │ │ ├── Checkbox.tsx │ │ │ ├── CheckboxContext.ts │ │ │ ├── CheckboxGroup.tsx │ │ │ ├── Checker.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── async.tsx │ │ │ │ ├── base.tsx │ │ │ │ ├── cell.tsx │ │ │ │ ├── custom.less │ │ │ │ ├── custom.tsx │ │ │ │ ├── direction.tsx │ │ │ │ ├── group.tsx │ │ │ │ ├── max.tsx │ │ │ │ ├── ref.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── circle │ │ │ ├── Circle.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ └── custom.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── collapse │ │ │ ├── Collapse.tsx │ │ │ ├── CollapseContext.ts │ │ │ ├── CollapseItem.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── config-provider │ │ │ ├── ConfigProvider.tsx │ │ │ ├── ConfigProviderContext.ts │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── enUs.ts │ │ │ │ ├── locale.tsx │ │ │ │ └── style.less │ │ │ └── index.ts │ │ ├── count-down │ │ │ ├── CountDown.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── ref.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ ├── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ │ └── utils.ts │ │ ├── coupon-cell │ │ │ ├── CouponCell.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── coupon-list │ │ │ ├── Coupon.tsx │ │ │ ├── CouponList.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── demo.ts │ │ │ │ └── index.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── datetime-picker │ │ │ ├── DatePicker.tsx │ │ │ ├── DatetimePicker.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── TimePicker.tsx │ │ │ ├── demo │ │ │ │ ├── columnsOrder.tsx │ │ │ │ ├── date.tsx │ │ │ │ ├── datehour.tsx │ │ │ │ ├── datetime.tsx │ │ │ │ ├── filter.tsx │ │ │ │ ├── monthDay.tsx │ │ │ │ ├── popup.tsx │ │ │ │ ├── time.tsx │ │ │ │ └── yearMonth.tsx │ │ │ ├── index.ts │ │ │ └── utils.ts │ │ ├── dialog │ │ │ ├── Dialog.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── close.tsx │ │ │ │ ├── closeIcon.tsx │ │ │ │ ├── component.tsx │ │ │ │ ├── custom.tsx │ │ │ │ ├── promise.tsx │ │ │ │ ├── style.less │ │ │ │ └── theme.tsx │ │ │ ├── index.ts │ │ │ ├── method.tsx │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── divider │ │ │ ├── Divider.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── dropdown-menu │ │ │ ├── DropdownMenu.tsx │ │ │ ├── DropdownMenuContext.ts │ │ │ ├── DropdownMenuItem.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── color.tsx │ │ │ │ ├── custom.tsx │ │ │ │ ├── direction.tsx │ │ │ │ ├── disabled.tsx │ │ │ │ ├── options.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── empty │ │ │ ├── Empty.tsx │ │ │ ├── Network.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── field │ │ │ ├── Field.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── button.tsx │ │ │ │ ├── error.tsx │ │ │ │ ├── formatter.tsx │ │ │ │ ├── icon.tsx │ │ │ │ ├── ref.tsx │ │ │ │ └── type.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── flex │ │ │ ├── Flex.tsx │ │ │ ├── FlexContext.ts │ │ │ ├── FlexItem.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── direction.tsx │ │ │ │ ├── gutter.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── mixins.less │ │ ├── floating-ball │ │ │ ├── FloatingBall.tsx │ │ │ ├── FloatingBallContext.ts │ │ │ ├── FloatingBallItem.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── bubble.tsx │ │ │ │ ├── menu.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ ├── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ │ └── useFloatingTouch.ts │ │ ├── floating-panel │ │ │ ├── FloatingPanel.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ └── base.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── form │ │ │ ├── Form.tsx │ │ │ ├── FormContext.tsx │ │ │ ├── FormItem.tsx │ │ │ ├── FormSubscribe.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── custom.tsx │ │ │ │ ├── list.tsx │ │ │ │ ├── popup.tsx │ │ │ │ ├── rules.tsx │ │ │ │ ├── shouldUpdate.tsx │ │ │ │ ├── style.less │ │ │ │ ├── subscribe.tsx │ │ │ │ ├── type.tsx │ │ │ │ └── watch.tsx │ │ │ ├── index.ts │ │ │ ├── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ │ └── utils.ts │ │ ├── grid │ │ │ ├── Grid.tsx │ │ │ ├── GridItem.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── badge.tsx │ │ │ │ ├── base.tsx │ │ │ │ ├── children.tsx │ │ │ │ ├── column.tsx │ │ │ │ ├── direction.tsx │ │ │ │ ├── gutter.tsx │ │ │ │ └── square.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── hooks │ │ │ ├── create-update-effect.ts │ │ │ ├── index.ts │ │ │ ├── use-click-away.ts │ │ │ ├── use-count-down.ts │ │ │ ├── use-debunce-effect.ts │ │ │ ├── use-debunce-fn.ts │ │ │ ├── use-drag-and-pinch.ts │ │ │ ├── use-effect-with-target.ts │ │ │ ├── use-event-listener.ts │ │ │ ├── use-form-smart.ts │ │ │ ├── use-height.ts │ │ │ ├── use-in-viewport.ts │ │ │ ├── use-isomorphic-layout-effect.ts │ │ │ ├── use-latest.ts │ │ │ ├── use-lazy-effect.ts │ │ │ ├── use-lazy-render.ts │ │ │ ├── use-lock-fn.ts │ │ │ ├── use-lock-scroll.ts │ │ │ ├── use-memoized-fn.ts │ │ │ ├── use-merged-state.ts │ │ │ ├── use-mount.ts │ │ │ ├── use-next-tick.ts │ │ │ ├── use-page-visibility.ts │ │ │ ├── use-props-value.ts │ │ │ ├── use-rect.ts │ │ │ ├── use-ref-state.ts │ │ │ ├── use-refs.ts │ │ │ ├── use-resize-effect.tsx │ │ │ ├── use-scroll-parent.ts │ │ │ ├── use-set-state.ts │ │ │ ├── use-throttle-fn.ts │ │ │ ├── use-touch.ts │ │ │ ├── use-unmount.ts │ │ │ ├── use-unmounted-ref.ts │ │ │ ├── use-update-effect.ts │ │ │ ├── use-update.ts │ │ │ ├── use-visibility-change.ts │ │ │ └── use-window-size.ts │ │ ├── icon │ │ │ ├── README.md │ │ │ └── demo │ │ │ │ ├── badge.tsx │ │ │ │ ├── base.tsx │ │ │ │ ├── color.tsx │ │ │ │ ├── config.ts │ │ │ │ ├── custom.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── rotate.tsx │ │ │ │ └── style.less │ │ ├── image-preview │ │ │ ├── ImagePreview.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── index.ts │ │ │ ├── method.tsx │ │ │ ├── slide.tsx │ │ │ ├── slides.tsx │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── image │ │ │ ├── Image.tsx │ │ │ ├── LazyImage.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── error.tsx │ │ │ │ ├── fit.tsx │ │ │ │ ├── loading.tsx │ │ │ │ ├── round.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── index-bar │ │ │ ├── IndexAnchor.tsx │ │ │ ├── IndexBar.tsx │ │ │ ├── IndexBarContext.ts │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ └── index.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── index.ts │ │ ├── input │ │ │ ├── Input.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ └── base.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── lazyload │ │ │ ├── Lazyload.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── list │ │ │ ├── List.tsx │ │ │ ├── LoadMore.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── loading │ │ │ ├── Loading.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── locale │ │ │ ├── index.ts │ │ │ └── lang │ │ │ │ ├── base.ts │ │ │ │ ├── en-US.ts │ │ │ │ ├── fr-FR.ts │ │ │ │ ├── ja-JP.ts │ │ │ │ ├── types.ts │ │ │ │ ├── zh-CN.ts │ │ │ │ ├── zh-HK.ts │ │ │ │ └── zh-TW.ts │ │ ├── nav-bar │ │ │ ├── Navbar.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ └── custom.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── notice-bar │ │ │ ├── NoticeBar.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── style.less │ │ │ │ └── vertical.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── notify │ │ │ ├── Notify.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ └── component.tsx │ │ │ ├── index.ts │ │ │ ├── method.tsx │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── number-keyboard │ │ │ ├── NumberKeyboard.tsx │ │ │ ├── NumberKeyboardKey.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ └── control.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── overlay │ │ │ ├── Overlay.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── pagination │ │ │ ├── Pagination.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ └── custom.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── password-input │ │ │ ├── PasswordInput.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.en-US.md │ │ │ ├── README.md │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── picker │ │ │ ├── Picker.tsx │ │ │ ├── PickerColumn.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── columnsExtend.tsx │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── cascader.tsx │ │ │ │ ├── columns.tsx │ │ │ │ ├── columnsFieldNames.tsx │ │ │ │ ├── data.ts │ │ │ │ ├── dynic.tsx │ │ │ │ ├── loading.tsx │ │ │ │ └── popup.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── popover │ │ │ ├── Popover.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── config.tsx │ │ │ │ └── custom.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── popup │ │ │ ├── Popup.tsx │ │ │ ├── PopupContext.ts │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── close.tsx │ │ │ │ ├── position.tsx │ │ │ │ ├── round.tsx │ │ │ │ ├── teleport.tsx │ │ │ │ └── title.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── product-card │ │ │ ├── ProductCard.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── progress │ │ │ ├── Progress.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── pull-refresh │ │ │ ├── PropsType.ts │ │ │ ├── PullRefresh.tsx │ │ │ ├── README.md │ │ │ ├── demo │ │ │ │ ├── index.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── radio │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Radio.tsx │ │ │ ├── RadioContext.ts │ │ │ ├── RadioGroup.tsx │ │ │ ├── demo │ │ │ │ ├── async.tsx │ │ │ │ └── cell.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── rate │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Rate.tsx │ │ │ ├── demo │ │ │ │ └── icon.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── search │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Search.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── selector │ │ │ ├── CheckMark.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Selector.tsx │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ └── options.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── share-sheet │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── ShareSheet.tsx │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── custom.tsx │ │ │ │ ├── description.tsx │ │ │ │ └── mulit.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── sidebar │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Sidebar.tsx │ │ │ ├── SidebarItem.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── skeleton │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Skeleton.tsx │ │ │ ├── demo │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── sku │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Sku.tsx │ │ │ ├── components │ │ │ │ ├── SkuRow.tsx │ │ │ │ ├── SkuRowItem.tsx │ │ │ │ ├── SkuRowPropItem.tsx │ │ │ │ └── SkuStepper.tsx │ │ │ ├── constants.ts │ │ │ ├── demo │ │ │ │ └── data.ts │ │ │ ├── index.ts │ │ │ ├── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ │ └── utils.ts │ │ ├── slider │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Slider.tsx │ │ │ ├── demo │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── space │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Space.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── stepper │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Stepper.tsx │ │ │ ├── demo │ │ │ │ └── base.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── steps │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Steps.tsx │ │ │ ├── StepsItem.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── sticky │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Sticky.tsx │ │ │ ├── demo │ │ │ │ ├── index.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── styles │ │ │ ├── README.md │ │ │ ├── animation.less │ │ │ ├── base.less │ │ │ ├── css-variables.less │ │ │ ├── demo │ │ │ │ ├── ellipsis.less │ │ │ │ ├── hairline.less │ │ │ │ ├── transition.less │ │ │ │ └── transition.tsx │ │ │ ├── index.ts │ │ │ ├── mixins │ │ │ │ ├── ellipsis.less │ │ │ │ └── hairline.less │ │ │ ├── normalize.less │ │ │ └── var.less │ │ ├── submit-bar │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── SubmitBar.tsx │ │ │ ├── demo │ │ │ │ ├── disabled.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── swipe-cell │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── SwipeCell.tsx │ │ │ ├── demo │ │ │ │ ├── ref.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ └── index.less │ │ ├── swiper │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Swiper.tsx │ │ │ ├── SwiperItem.tsx │ │ │ ├── SwiperPagIndicator.tsx │ │ │ ├── demo │ │ │ │ ├── base.less │ │ │ │ ├── images.less │ │ │ │ ├── images.ts │ │ │ │ ├── indicator.less │ │ │ │ └── items.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── switch │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Switch.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── tabbar │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Tabbar.tsx │ │ │ ├── TabbarContext.ts │ │ │ ├── TabbarItem.tsx │ │ │ ├── demo │ │ │ │ ├── badge.tsx │ │ │ │ ├── base.tsx │ │ │ │ ├── control.tsx │ │ │ │ ├── custom.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── tabs │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── TabPane.tsx │ │ │ ├── Tabs.tsx │ │ │ ├── TabsContent.tsx │ │ │ ├── TabsContext.ts │ │ │ ├── TabsTitle.tsx │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ ├── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ │ └── utils.ts │ │ ├── tag │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Tag.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── text-area │ │ │ ├── PropsType.ts │ │ │ ├── TextArea.tsx │ │ │ ├── index.ts │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── toast │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Toast.tsx │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── dynic.tsx │ │ │ │ ├── icon.tsx │ │ │ │ ├── multiple.tsx │ │ │ │ └── position.tsx │ │ │ ├── index.ts │ │ │ ├── lock-click.ts │ │ │ ├── method.tsx │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── typography │ │ │ ├── Ellipsis.tsx │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Typography.tsx │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ └── style.less │ │ │ ├── index.tsx │ │ │ └── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ ├── uploader │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── Uploader.tsx │ │ │ ├── UploaderPreviewItem.tsx │ │ │ ├── demo │ │ │ │ ├── base.tsx │ │ │ │ ├── close.tsx │ │ │ │ ├── form.tsx │ │ │ │ ├── limit.tsx │ │ │ │ ├── preview.tsx │ │ │ │ ├── style.less │ │ │ │ ├── upload.tsx │ │ │ │ └── utils.ts │ │ │ ├── index.ts │ │ │ ├── style │ │ │ │ ├── index.less │ │ │ │ └── var.less │ │ │ └── utils.ts │ │ ├── utils │ │ │ ├── base.ts │ │ │ ├── bound.ts │ │ │ ├── constant.ts │ │ │ ├── create │ │ │ │ ├── bem.ts │ │ │ │ └── index.ts │ │ │ ├── debounce.ts │ │ │ ├── deep-assign.ts │ │ │ ├── deep-clone.ts │ │ │ ├── dev-log.ts │ │ │ ├── dom │ │ │ │ ├── canUseDom.ts │ │ │ │ ├── event.ts │ │ │ │ ├── getContainer.ts │ │ │ │ ├── getTargetElement.ts │ │ │ │ ├── render.ts │ │ │ │ ├── renderToContainer.ts │ │ │ │ ├── scroll.ts │ │ │ │ ├── style.ts │ │ │ │ └── version.ts │ │ │ ├── format │ │ │ │ ├── number.ts │ │ │ │ ├── react.ts │ │ │ │ ├── string.ts │ │ │ │ └── unit.ts │ │ │ ├── get-default-props.ts │ │ │ ├── index.ts │ │ │ ├── interceptor.ts │ │ │ ├── interface.ts │ │ │ ├── is-dev.ts │ │ │ ├── raf.ts │ │ │ ├── rubberband.ts │ │ │ ├── supports-passive.ts │ │ │ ├── throttle.ts │ │ │ └── validate │ │ │ │ ├── date.ts │ │ │ │ ├── number.ts │ │ │ │ └── system.ts │ │ └── water-mark │ │ │ ├── PropsType.ts │ │ │ ├── README.md │ │ │ ├── WaterMark.tsx │ │ │ ├── demo │ │ │ ├── custom.tsx │ │ │ └── style.less │ │ │ ├── index.ts │ │ │ └── style │ │ │ └── index.less │ ├── index.ts │ └── typings │ │ └── index.d.ts │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── public ├── home-music-card-1.jpg ├── home-music-card.jpg ├── logo.png ├── logo.svg └── preview_qrcode.png ├── screenshots ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png ├── 9.png └── github.svg └── tea.yaml /.browserlistrc: -------------------------------------------------------------------------------- 1 | Chrome >= 51 2 | iOS >= 10 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab 17 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | typings 4 | commitlint.config.js 5 | packages/*/tests/*.ts 6 | 7 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "node": true, 4 | "browser": true, 5 | "es6": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:@typescript-eslint/eslint-recommended", 10 | "plugin:@typescript-eslint/recommended", 11 | "plugin:@typescript-eslint/recommended-requiring-type-checking", 12 | "prettier" 13 | ], 14 | "parser": "@typescript-eslint/parser", 15 | "parserOptions": { 16 | "ecmaVersion": 12 17 | }, 18 | "plugins": [ 19 | "@typescript-eslint" 20 | ], 21 | "rules": { 22 | "no-undef": "error", 23 | "prefer-const": "error", 24 | "@typescript-eslint/no-unsafe-member-access": "off", 25 | "@typescript-eslint/no-unsafe-call": "off", 26 | "@typescript-eslint/no-unsafe-assignment": "off" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | 15 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: Questions or need help 4 | url: https://user-images.githubusercontent.com/33956589/144778828-97660d67-69a1-4eee-8ef1-3c7f91ab48b9.png 5 | about: Add this WeChat(HIJNTIYou), we will invite you to the WeChat discussion group later. 6 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:base"] 3 | } 4 | -------------------------------------------------------------------------------- /.github/workflows/issue-close-require.yml: -------------------------------------------------------------------------------- 1 | name: Issue Close Require 2 | 3 | on: 4 | schedule: 5 | - cron: '0 0 * * *' 6 | 7 | jobs: 8 | close-issues: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: need reproduction 12 | uses: actions-cool/issues-helper@v3 13 | with: 14 | actions: 'close-issues' 15 | token: ${{ secrets.GITHUB_TOKEN }} 16 | labels: 'need reproduction' 17 | inactive-day: 3 18 | -------------------------------------------------------------------------------- /.github/workflows/release-tag.yml: -------------------------------------------------------------------------------- 1 | name: Create Release Tag 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'react-vant@*' # Push events to matching v*, i.e. v1.0, v20.15.10 7 | 8 | jobs: 9 | build: 10 | name: Create Release 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: Checkout code 14 | uses: actions/checkout@master 15 | - name: Create Release for Tag 16 | id: release_tag 17 | uses: yyx990803/release-tag@master 18 | env: 19 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 20 | with: 21 | tag_name: ${{ github.ref }} 22 | body: | 23 | 更新内容参见 [CHANGELOG](https://3lang3.github.io/react-vant/#/zh-CN/changelog)。 24 | -------------------------------------------------------------------------------- /.github/workflows/sync-gitee.yml: -------------------------------------------------------------------------------- 1 | name: Sync to Gitee 2 | 3 | on: 4 | push: 5 | branches: [main, gh-pages] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - name: Sync to Gitee 12 | uses: wearerequired/git-mirror-action@master 13 | env: 14 | # 在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY 15 | SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }} 16 | with: 17 | # GitHub 源仓库地址 18 | source-repo: git@github.com:3lang3/react-vant.git 19 | # Gitee 目标仓库地址 20 | destination-repo: git@gitee.com:lang3/react-vant.git 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log* 2 | .cache 3 | .DS_Store 4 | .idea 5 | .eslintcache 6 | .now 7 | .env 8 | .env.* 9 | .vscode 10 | 11 | # npm 12 | node_modules 13 | package-error.json 14 | yarn-error.json 15 | yarn.lock 16 | pnpm-global 17 | 18 | # dist file 19 | es 20 | lib 21 | 2x 22 | docs-dist 23 | .rcdoc 24 | dist 25 | changelog.generated.md 26 | 27 | # log file 28 | .changelog 29 | 30 | # tests 31 | tests/coverage 32 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | # commitlint config example 5 | # https://github.com/conventional-changelog/commitlint/blob/master/@commitlint/config-conventional/index.js 6 | npx commitlint --edit $1 7 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *hbs 2 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: false, 3 | trailingComma: 'es5', 4 | tabWidth: 2, 5 | singleQuote: true, 6 | bracketSameLine: false, 7 | jsxSingleQuote: true, 8 | quoteProps: 'preserve', 9 | arrowParens: 'avoid', 10 | proseWrap: 'preserve', 11 | overrides: [ 12 | { 13 | 'files': ['*.md'], 14 | 'options': { 15 | embeddedLanguageFormatting: 'off', 16 | proseWrap: 'never' 17 | }, 18 | }, 19 | ], 20 | } 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ./packages/react-vant/README.md -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | zhanghuang11211@gmail.com 20 | 21 | Tell them where to go, how often they can expect to get an update on a 22 | reported vulnerability, what to expect if the vulnerability is accepted or 23 | declined, etc. 24 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] }; 2 | -------------------------------------------------------------------------------- /packages/react-vant-icons/README.md: -------------------------------------------------------------------------------- 1 | # @react-vant/icons 2 | 3 | react vant svg icons lib 4 | -------------------------------------------------------------------------------- /packages/react-vant-icons/src/assets/icons.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/packages/react-vant-icons/src/assets/icons.sketch -------------------------------------------------------------------------------- /packages/react-vant-icons/src/icons/Empty.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import IconBase, { IconBaseProps } from './IconBase'; 3 | 4 | const SvgIcon = (props: React.SVGProps) => ( 5 | 13 | ); 14 | 15 | const SvgEmpty = React.forwardRef>((props, ref) => { 16 | return ( 17 | 18 | 19 | 20 | ); 21 | }); 22 | 23 | export default SvgEmpty; 24 | -------------------------------------------------------------------------------- /packages/react-vant/.eslintignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/packages/react-vant/.eslintignore -------------------------------------------------------------------------------- /packages/react-vant/_rcdoc_/HeaderExtra.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Footer.less' 3 | 4 | const Footer = () => { 5 | return ( 6 |
7 |
8 | 🔥 当前为 v3 文档，从低版本 9 | 升级 🚀 10 |
11 |
12 | ) 13 | } 14 | 15 | export default Footer 16 | -------------------------------------------------------------------------------- /packages/react-vant/_rcdoc_/mobile/Header.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default ({ renderDefaultHeader }) => ( 4 | <> 5 | {renderDefaultHeader()} 6 |

14 | 如果你想查阅完整的组件文档，请在桌面浏览器中访问： 15 | 16 | https://react-vant.3lang.dev 17 | 18 |

19 | 20 | ); 21 | -------------------------------------------------------------------------------- /packages/react-vant/docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | className: '_home-full-page' 3 | blank: true 4 | --- 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/react-vant/docs/component/useCN.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MdocSiteContext } from '@rcdoc/theme' 3 | 4 | export const useCN = () => { 5 | const { locale } = React.useContext(MdocSiteContext); 6 | if (!locale) return true 7 | return locale.current[0] === 'zh'; 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-vant/docs/guide/changelog.md: -------------------------------------------------------------------------------- 1 | # 更新日志 2 | 3 | ### 介绍 4 | 5 | React Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 6 | 7 | **发布节奏** 8 | 9 | - 修订号：每周发布，包含新特性和问题修复。 10 | - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。 11 | - 主版本号：无固定的发布时间，包含不兼容更新和重大功能更新。 12 | 13 | ## 更新内容 14 | 15 | 完整内容，请参见 [releases](https://github.com/3lang3/react-vant/releases) 16 | -------------------------------------------------------------------------------- /packages/react-vant/public/demo_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/packages/react-vant/public/demo_1.jpg -------------------------------------------------------------------------------- /packages/react-vant/public/demo_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/packages/react-vant/public/demo_2.jpg -------------------------------------------------------------------------------- /packages/react-vant/public/demo_avatar_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/packages/react-vant/public/demo_avatar_1.jpg -------------------------------------------------------------------------------- /packages/react-vant/public/demo_view_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/packages/react-vant/public/demo_view_1.png -------------------------------------------------------------------------------- /packages/react-vant/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/packages/react-vant/public/favicon.png -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-bar/ActionBarContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Context } from 'react' 2 | 3 | export interface ActionBarState { 4 | parent?: Record 5 | } 6 | 7 | const ActionButtonContext: Context = createContext({}) 8 | 9 | export default ActionButtonContext 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-bar/demo/badge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CartO, ChatO, ShopO } from '@react-vant/icons' 3 | import { ActionBar } from 'react-vant' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | } badge={{ dot: true }} text='客服' /> 10 | } badge={{ content: 5 }} text='购物车' /> 11 | } badge={{ content: 12 }} text='店铺' /> 12 | 13 | 14 | 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-bar/demo/btnColor.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CartO, ChatO } from '@react-vant/icons' 3 | import { ActionBar } from 'react-vant' 4 | import './style.less' 5 | 6 | export default () => { 7 | return ( 8 |
9 | 10 | } text='客服' /> 11 | } text='购物车' /> 12 | 13 | 14 | 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-bar/demo/iconColor.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { CartO, ChatO, Star } from '@react-vant/icons' 3 | import { ActionBar } from 'react-vant' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | } text='客服' /> 10 | } text='购物车' /> 11 | } text='店铺' /> 12 | 13 | 14 | 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-bar/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-action-bar { 2 | .rv-action-bar { 3 | position: relative; 4 | padding-bottom: 0; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-bar/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _ActionBar from './ActionBar' 3 | import ActionBarIcon from './ActionBarIcon' 4 | import ActionBarButton from './ActionBarButton' 5 | 6 | const ActionBar = Object.assign(_ActionBar, { 7 | Icon: ActionBarIcon, 8 | Button: ActionBarButton, 9 | }) 10 | 11 | export default ActionBar 12 | export { ActionBar } 13 | export type { 14 | ActionBarProps, 15 | ActionBarIconProps, 16 | ActionBarButtonProps, 17 | } from './PropsType' 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-bar/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @action-bar-background-color: var(--rv-white); 4 | @action-bar-height: 50 * @hd; 5 | 6 | @action-bar-button-height: 40 * @hd; 7 | @action-bar-button-warning-color: var(--rv-gradient-orange); 8 | @action-bar-button-danger-color: var(--rv-gradient-red); 9 | 10 | @action-bar-icon-width: 48 * @hd; 11 | @action-bar-icon-height: 100%; 12 | @action-bar-icon-color: var(--rv-text-color); 13 | @action-bar-icon-size: 18 * @hd; 14 | @action-bar-icon-font-size: var(--rv-font-size-xs); 15 | @action-bar-icon-active-color: var(--rv-active-color); 16 | @action-bar-icon-text-color: var(--rv-gray-7); 17 | @action-bar-icon-background-color: var(--rv-white); 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-sheet/demo/custom.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { ActionSheet, Cell } from 'react-vant' 3 | 4 | export default () => { 5 | const [visible, setVisible] = useState(false) 6 | const onCancel = () => setVisible(false) 7 | return ( 8 | <> 9 | setVisible(true)} /> 10 | 11 |
内容
12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-sheet/demo/status.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { ActionSheet, Cell } from 'react-vant' 3 | 4 | const actions2 = [ 5 | { name: '选项一', color: '#ee0a24' }, 6 | { name: '选项二', disabled: true }, 7 | { loading: true }, 8 | ] 9 | 10 | export default () => { 11 | const [visible, setVisible] = useState(false) 12 | const onCancel = () => setVisible(false) 13 | return ( 14 | <> 15 | setVisible(true)} /> 16 | 22 | 23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/action-sheet/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import ActionSheet from './ActionSheet' 3 | 4 | export default ActionSheet 5 | export { ActionSheet } 6 | export type { ActionSheetProps } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/area/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Area } from 'react-vant' 3 | import { areaList } from '@vant/area-data' 4 | 5 | export default () => { 6 | return ( 7 | console.log(v)} /> 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/area/demo/column.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Area } from 'react-vant' 3 | import { areaList } from '@vant/area-data' 4 | 5 | export default () => { 6 | return ( 7 | { 12 | console.log('selected value: ', val) 13 | console.log('selected option: ', options) 14 | }} 15 | onConfirm={v => console.log(v)} 16 | /> 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/area/demo/popup.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Area, Field } from 'react-vant' 3 | import { areaList } from '@vant/area-data' 4 | 5 | export default () => { 6 | const [value, setValue] = React.useState(['220000', '220300', '220303']) 7 | return ( 8 | 17 | {(_, selectRows, actions) => { 18 | return ( 19 | row?.text).join(',')} 22 | onClick={() => actions.open()} 23 | /> 24 | ) 25 | }} 26 | 27 | ) 28 | } 29 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/area/index.ts: -------------------------------------------------------------------------------- 1 | import Area from './Area' 2 | 3 | export default Area 4 | export { Area } 5 | export type { AreaProps, AreaInstance, AreaList } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/badge/demo/custom.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Badge, Space } from 'react-vant' 3 | import { Success, Cross, Down } from '@react-vant/icons' 4 | 5 | const Child = () => ( 6 |
9 | ) 10 | 11 | export default () => { 12 | return ( 13 | 14 | }> 15 | 16 | 17 | }> 18 | 19 | 20 | }> 21 | 22 | 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/badge/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Badge from './Badge' 3 | 4 | export default Badge 5 | export { Badge } 6 | export type { BadgeProps } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/badge/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @badge-size: 16 * @hd; 4 | @badge-color: var(--rv-white); 5 | @badge-padding: 0 3 * @hd; 6 | @badge-font-size: var(--rv-font-size-sm); 7 | @badge-font-weight: var(--rv-font-weight-bold); 8 | @badge-border-width: var(--rv-border-width-base); 9 | @badge-background-color: var(--rv-danger-color); 10 | @badge-dot-color: var(--rv-danger-color); 11 | @badge-dot-size: 8 * @hd; 12 | @badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif; 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/ButtonContext.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ButtonGroupProps } from './PropsType' 3 | 4 | type ButtonContextType = { 5 | parent?: ButtonGroupProps 6 | } 7 | 8 | const ButtonContext = React.createContext({}) 9 | 10 | export default ButtonContext 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/block.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/color.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | 12 | 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 11 | 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/group.tsx: -------------------------------------------------------------------------------- 1 | import { Arrow, ArrowLeft, Replay } from '@react-vant/icons' 2 | import React from 'react' 3 | import { Button } from 'react-vant' 4 | import './style.less' 5 | 6 | export default () => { 7 | return ( 8 |
9 | 10 | 11 | 12 | 15 | 16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/hairline.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 11 | 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/icon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import { Plus } from '@react-vant/icons' 4 | 5 | import './style.less' 6 | 7 | export default () => { 8 | return ( 9 |
10 | 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/loading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/plain.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 11 | 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/shadow.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/shape.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 11 | 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/size.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 11 | 14 | 17 | 20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-button { 2 | .rv-button { 3 | margin: 0 8px 12px 0; 4 | } 5 | 6 | .rv-button-group { 7 | .rv-button { 8 | margin: 0; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/demo/type.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Button } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | 10 | 11 | 12 | 13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/button/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _Button from './Button' 3 | import Group from './ButtonGroup' 4 | 5 | const Button = Object.assign(_Button, { Group }) 6 | 7 | export default Button 8 | export { Button } 9 | export type { 10 | ButtonProps, 11 | ButtonType, 12 | ButtonSize, 13 | ButtonIconPosition, 14 | } from './PropsType' 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/calendar/demo/poppable.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Toast, Calendar } from 'react-vant' 3 | 4 | const formatDate = date => `${date.getMonth() + 1}/${date.getDate()}` 5 | 6 | export default () => { 7 | return ( 8 | { 13 | Toast.info(formatDate(v)) 14 | }} 15 | /> 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Calendar from './Calendar' 3 | 4 | export default Calendar 5 | export { Calendar } 6 | export type { 7 | CalendarProps, 8 | CalendarType, 9 | CalendarDayItem, 10 | CalendarDayType, 11 | CalendarInstance, 12 | } from './PropsType' 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/card/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _Card, { CardHeader, CardBody, CardFooter, CardCover } from './Card' 3 | 4 | const Card = Object.assign(_Card, { 5 | Header: CardHeader, 6 | Body: CardBody, 7 | Footer: CardFooter, 8 | Cover: CardCover, 9 | }) 10 | 11 | export default Card 12 | export { Card } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/card/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @card-padding: 0 var(--rv-padding-md); 4 | @card-size: var(--rv-font-size-md); 5 | @card-color: var(--rv-text-color); 6 | @card-background-color: var(--rv-white); 7 | @card-radius: var(--rv-border-radius-lg); 8 | 9 | @card-header-padding: var(--rv-padding-sm) var(--rv-padding-md); 10 | @card-header-size: var(--rv-font-size-lg); 11 | @card-header-color: var(--rv-black); 12 | 13 | @card-footer-padding: var(--rv-padding-sm) var(--rv-padding-md); 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cascader/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cascader, Field } from 'react-vant' 3 | import options from './options' 4 | 5 | export default () => { 6 | return ( 7 | 8 | {(_, selectedRows, actions) => ( 9 | el.text).join(',')} 12 | readOnly 13 | label='地区' 14 | placeholder='请选择所在地区' 15 | onClick={() => actions.open()} 16 | /> 17 | )} 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cascader/demo/style.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | .demo-badge { 4 | .vant-doc-demo-block { 5 | padding: 0; 6 | } 7 | 8 | .vant-doc-demo-block__title { 9 | padding-left: @padding-md; 10 | } 11 | 12 | &-row { 13 | margin-bottom: @padding-sm; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cascader/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Cascader from './Cascader' 3 | 4 | export default Cascader 5 | export { Cascader } 6 | export type { 7 | CascaderProps, 8 | CascaderOption, 9 | CascaderFieldNames, 10 | } from './PropsType' 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cascader/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @cascader-header-height: 48 * @hd; 4 | @cascader-header-padding: 0 var(--rv-padding-md); 5 | @cascader-title-font-size: var(--rv-font-size-lg); 6 | @cascader-title-line-height: 20 * @hd; 7 | @cascader-close-icon-size: 22 * @hd; 8 | @cascader-close-icon-color: var(--rv-gray-5); 9 | @cascader-close-icon-active-color: var(--rv-gray-6); 10 | @cascader-selected-icon-size: 18 * @hd; 11 | @cascader-tabs-height: 48 * @hd; 12 | @cascader-active-color: var(--rv-primary-color); 13 | @cascader-options-height: 384 * @hd; 14 | @cascader-option-disabled-color: var(--rv-gray-5); 15 | @cascader-tab-color: var(--rv-text-color); 16 | @cascader-unselected-tab-color: var(--rv-gray-6); 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/arrow.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/card.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/children.tsx: -------------------------------------------------------------------------------- 1 | import { ShopO } from '@react-vant/icons' 2 | import React from 'react' 3 | import { Cell } from 'react-vant' 4 | 5 | export default () => { 6 | return ( 7 | }> 8 |
自定义内容
9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/group.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/icon.tsx: -------------------------------------------------------------------------------- 1 | import { FireO, LocationO } from '@react-vant/icons' 2 | import React from 'react' 3 | import { Cell } from 'react-vant' 4 | 5 | export default () => { 6 | return ( 7 | <> 8 | } /> 9 | } /> 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/list.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell, Image } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | <> 7 | {Array.from({ length: 4 }).map((_, idx) => ( 8 | } 14 | isLink 15 | /> 16 | ))} 17 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/size.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/value.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell } from 'react-vant' 3 | 4 | export default () => { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/demo/vertical.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell } from 'react-vant' 3 | 4 | export default () => { 5 | return 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/cell/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import CellGroup from './CellGroup' 3 | import _Cell from './Cell' 4 | 5 | const Cell = Object.assign(_Cell, { Group: CellGroup }) 6 | export default Cell 7 | export { Cell, CellGroup } 8 | export type { CellProps, CellGroupProps, CellArrowDirection } from './PropsType' 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/CheckboxContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Context } from 'react' 2 | import { CheckboxGroupProps } from './PropsType' 3 | 4 | export interface CheckboxContextState { 5 | parent?: { props: CheckboxGroupProps } 6 | toggle?: (names: Array) => void 7 | checked?: (string | number)[] 8 | } 9 | 10 | const CheckboxContext: Context = createContext({}) 11 | 12 | export default CheckboxContext 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/demo/async.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Checkbox, Toast } from 'react-vant' 3 | 4 | export default () => { 5 | const [value, setValue] = useState(false) 6 | 7 | return ( 8 |
9 | { 12 | Toast.loading({ forbidClick: true, duration: 0 }) 13 | 14 | setTimeout(() => { 15 | Toast.clear() 16 | setValue(val) 17 | }, 500) 18 | }} 19 | > 20 | 复选框 21 | 22 |
23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/demo/base.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | import React from 'react' 3 | import { Checkbox } from 'react-vant' 4 | import './style.less' 5 | 6 | export default () => { 7 | const [checked, setChecked] = React.useState(false) 8 | return ( 9 |
10 | 11 | 复选框 12 | 13 | console.log(val)}> 14 | 默认勾选 15 | 16 |
17 | 禁用复选框 18 |
19 | 20 | 禁止文本点击 21 | 22 |
23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/demo/custom.less: -------------------------------------------------------------------------------- 1 | .demo-checkbox { 2 | .rv-checkbox { 3 | margin: 0 0 8px 20px; 4 | } 5 | 6 | img { 7 | height: 20px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/demo/direction.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Checkbox } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 |
7 | 8 | 复选框a 9 | 复选框b 10 | 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/demo/group.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | import React from 'react' 3 | import { Checkbox } from 'react-vant' 4 | 5 | export default () => { 6 | return ( 7 |
8 | console.log(v)} defaultValue={['a', 'b']}> 9 | 复选框组a 10 | 复选框组b 11 | 复选框组c 12 | 13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/demo/max.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Checkbox } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 |
7 | 8 | 复选框a 9 | 复选框b 10 | 复选框c 11 | 12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-checkbox { 2 | background: #fff; 3 | 4 | .rv-checkbox { 5 | margin: 0 0 8px 20px; 6 | } 7 | 8 | .rv-cell { 9 | .rv-checkbox { 10 | margin: 0; 11 | } 12 | } 13 | 14 | &-buttons { 15 | margin-top: 16px; 16 | 17 | .rv-button { 18 | margin-left: 16px; 19 | } 20 | } 21 | 22 | .rv-doc-demo-block__title { 23 | margin-top: -8px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import CheckboxGroup from './CheckboxGroup' 3 | import _Checkbox from './Checkbox' 4 | 5 | const Checkbox = Object.assign(_Checkbox, { Group: CheckboxGroup }) 6 | 7 | export default Checkbox 8 | export { Checkbox, CheckboxGroup } 9 | export type { 10 | CheckboxGroupInstance, 11 | CheckboxInstance, 12 | CheckboxGroupProps, 13 | CheckboxProps, 14 | CheckboxGroupToggleAllOptions, 15 | } from './PropsType' 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/checkbox/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @checkbox-size: 20 * @hd; 4 | @checkbox-border-color: var(--rv-gray-5); 5 | @checkbox-transition-duration: var(--rv-animation-duration-fast); 6 | @checkbox-label-margin: var(--rv-padding-xs); 7 | @checkbox-label-color: var(--rv-text-color); 8 | @checkbox-checked-icon-color: var(--rv-primary-color); 9 | @checkbox-disabled-icon-color: var(--rv-gray-5); 10 | @checkbox-disabled-label-color: var(--rv-gray-5); 11 | @checkbox-disabled-background-color: var(--rv-border-color); 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/circle/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Circle from './Circle' 3 | 4 | export default Circle 5 | export { Circle } 6 | export type { CircleProps, CircleStartPosition } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/circle/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @circle-size: 100 * @hd; 4 | @circle-color: var(--rv-primary-color); 5 | @circle-layer-color: var(--rv-white); 6 | @circle-text-color: var(--rv-text-color); 7 | @circle-text-font-weight: var(--rv-font-weight-bold); 8 | @circle-text-font-size: var(--rv-font-size-md); 9 | @circle-text-line-height: var(--rv-line-height-md); 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/collapse/CollapseContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Context } from 'react' 2 | 3 | export interface CollapseContextState { 4 | isExpanded?: (name: string | number) => boolean 5 | toggle?: (name: string | number, expanded: boolean) => void 6 | } 7 | 8 | const CollapseContext: Context = createContext({}) 9 | 10 | export default CollapseContext 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _Collapse from './Collapse' 3 | import CollapseItem from './CollapseItem' 4 | 5 | const Collapse = Object.assign(_Collapse, { Item: CollapseItem }) 6 | export default Collapse 7 | export { Collapse, CollapseItem } 8 | export type { CollapseProps, CollapseItemProps } from './PropsType' 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/collapse/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @collapse-item-transition-duration: var(--rv-animation-duration-base); 4 | @collapse-item-content-padding: var(--rv-padding-sm) var(--rv-padding-md); 5 | @collapse-item-content-font-size: var(--rv-font-size-md); 6 | @collapse-item-content-line-height: 1.5; 7 | @collapse-item-content-text-color: var(--rv-gray-6); 8 | @collapse-item-content-background-color: var(--rv-white); 9 | @collapse-item-title-disabled-color: var(--rv-gray-5); 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/config-provider/ConfigProviderContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Context } from 'react' 2 | import { zhCN as locale } from '../locale' 3 | import { ConfigProviderProps } from './PropsType' 4 | 5 | export const defaultPrefixCls = 'rv' 6 | export const defaultIconPrefixCls = 'van-icon' 7 | 8 | export type ConfigProviderContextState = Pick 9 | 10 | export const INITIAL_STATE = { 11 | locale, 12 | } as ConfigProviderContextState 13 | 14 | const ConfigProvider: Context = 15 | createContext(INITIAL_STATE) 16 | 17 | export default ConfigProvider 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/config-provider/PropsType.ts: -------------------------------------------------------------------------------- 1 | import type { Locale } from '../locale/lang/base' 2 | import { BaseTypeProps } from '../utils' 3 | 4 | export interface Theme { 5 | primaryColor?: string 6 | dangerColor?: string 7 | successColor?: string 8 | errorColor?: string 9 | warningColor?: string 10 | } 11 | 12 | export interface ConfigProviderProps extends BaseTypeProps { 13 | themeVars?: Record 14 | locale?: Locale 15 | tag?: keyof HTMLElementTagNameMap 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/config-provider/demo/locale.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ConfigProvider, Calendar } from 'react-vant' 3 | import locale from './enUs' 4 | import './style.less' 5 | 6 | export default () => { 7 | return ( 8 |
9 | 10 | 11 | 12 |
13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/config-provider/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-config-provider { 2 | background: #fff; 3 | 4 | .iconfont { 5 | font-size: 24px; 6 | } 7 | 8 | .vant-doc-demo-block { 9 | padding: 0 16px; 10 | } 11 | 12 | .vant-doc-demo-block__title { 13 | padding-left: 0; 14 | } 15 | 16 | &-row { 17 | margin-bottom: 8px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/config-provider/index.ts: -------------------------------------------------------------------------------- 1 | import ConfigProvider from './ConfigProvider' 2 | 3 | export { ConfigProvider } 4 | export type { ConfigProviderProps } from './PropsType' 5 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/count-down/demo/style.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | .demo-count-down { 4 | .colon { 5 | display: inline-block; 6 | margin: 0 4px; 7 | color: @blue; 8 | } 9 | .block { 10 | display: inline-block; 11 | width: 22px; 12 | color: #fff; 13 | font-size: 12px; 14 | text-align: center; 15 | background-color: @blue; 16 | border-radius: 4px; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/count-down/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import CountDown from './CountDown' 3 | 4 | export default CountDown 5 | export { CountDown } 6 | export type { 7 | CountDownProps, 8 | CountDownInstance, 9 | CountDownCurrentTime, 10 | } from './PropsType' 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/count-down/style/index.less: -------------------------------------------------------------------------------- 1 | @import './var.less'; 2 | 3 | :root { 4 | --rv-count-down-text-color: @count-down-text-color; 5 | --rv-count-down-font-size: @count-down-font-size; 6 | --rv-count-down-line-height: @count-down-line-height; 7 | } 8 | 9 | .@{rv-prefix}-count-down { 10 | color: var(--rv-count-down-text-color); 11 | font-size: var(--rv-count-down-font-size); 12 | line-height: var(--rv-count-down-line-height); 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/count-down/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @count-down-text-color: var(--rv-text-color); 4 | @count-down-font-size: var(--rv-font-size-md); 5 | @count-down-line-height: var(--rv-line-height-md); 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/coupon-cell/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import CouponCell from './CouponCell' 3 | 4 | export default CouponCell 5 | export { CouponCell } 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/coupon-cell/style/index.less: -------------------------------------------------------------------------------- 1 | @import './var.less'; 2 | 3 | :root { 4 | --rv-coupon-cell-selected-text-color: @coupon-cell-selected-text-color; 5 | } 6 | 7 | .@{rv-prefix}-coupon-cell { 8 | &__value--selected { 9 | color: var(--rv-coupon-cell-selected-text-color); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/coupon-cell/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @coupon-cell-selected-text-color: var(--rv-text-color); 4 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/coupon-list/demo/demo.ts: -------------------------------------------------------------------------------- 1 | export const data = { 2 | id: 1, 3 | condition: '无使用门槛\n最多优惠12元', 4 | reason: '', 5 | value: 150, 6 | name: '优惠券名称', 7 | description: '描述信息', 8 | startAt: 1489104000, 9 | endAt: 1514592000, 10 | valueDesc: '1.5', 11 | unitDesc: '元', 12 | } 13 | 14 | export const discountCoupon = { 15 | ...data, 16 | id: 2, 17 | value: 12, 18 | valueDesc: '8.8', 19 | unitDesc: '折', 20 | } 21 | 22 | export const disabledCoupon = { 23 | ...data, 24 | id: 3, 25 | reason: '优惠券不可用原因', 26 | } 27 | 28 | export const disabledDiscountCoupon = { 29 | ...discountCoupon, 30 | valueDesc: '1', 31 | unitDesc: '折', 32 | id: 4, 33 | reason: '优惠券不可用原因', 34 | } 35 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/coupon-list/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import CouponList from './CouponList' 3 | 4 | export { CouponList } 5 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/datetime-picker/demo/columnsOrder.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DatetimePicker } from 'react-vant' 3 | 4 | export default () => { 5 | const [value, setValue] = React.useState(new Date()) 6 | return ( 7 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/datetime-picker/demo/date.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DatetimePicker } from 'react-vant' 3 | 4 | export default () => { 5 | const [value, setValue] = React.useState(new Date()) 6 | 7 | return ( 8 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/datetime-picker/demo/datehour.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DatetimePicker } from 'react-vant' 3 | 4 | export default () => { 5 | const [value, setValue] = React.useState(new Date()) 6 | return ( 7 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/datetime-picker/demo/datetime.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DatetimePicker } from 'react-vant' 3 | 4 | export default () => { 5 | const [value, setValue] = React.useState(new Date()) 6 | return ( 7 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/datetime-picker/demo/filter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DatetimePicker } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | { 12 | if (type === 'minute') { 13 | return options.filter(option => +option % 5 === 0) 14 | } 15 | return options 16 | }} 17 | /> 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/datetime-picker/demo/monthDay.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DatetimePicker } from 'react-vant' 3 | 4 | export default () => { 5 | const [value, setValue] = React.useState(new Date()) 6 | return ( 7 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/datetime-picker/demo/time.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DatetimePicker } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/datetime-picker/demo/yearMonth.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { DatetimePicker } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | { 12 | if (type === 'year') { 13 | return `${val}年` 14 | } 15 | if (type === 'month') { 16 | return `${val}月` 17 | } 18 | return val 19 | }} 20 | /> 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/datetime-picker/index.ts: -------------------------------------------------------------------------------- 1 | import DatetimePicker from './DatetimePicker' 2 | 3 | export { DatetimePicker } 4 | export type { 5 | DateTimePickerProps, 6 | DatetimePickerType, 7 | DateTimePickerInstance, 8 | } from './PropsType' 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dialog/demo/component.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Cell, Dialog, Toast } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | const [visible, setVisible] = useState(false) 7 | 8 | return ( 9 | <> 10 | setVisible(true)} /> 11 | { 16 | Toast.info('点击确认按钮') 17 | setVisible(false) 18 | }} 19 | onCancel={() => setVisible(false)} 20 | > 21 | 2131 26 | 27 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dialog/demo/custom.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell, Dialog } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | 10 | Dialog.alert({ 11 | title: '标题', 12 | closeable: true, 13 | theme: 'round-button', 14 | message: ( 15 |
16 | 自定义内容：代码是写出来给人看的，附带能在机器上运行 17 |
18 | ), 19 | }) 20 | } 21 | /> 22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dialog/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-dialog-img { 2 | box-sizing: border-box; 3 | width: 100%; 4 | padding: 25px 20px 0; 5 | } 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dialog/demo/theme.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cell, Dialog } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | <> 7 | 11 | Dialog.alert({ 12 | title: '标题', 13 | theme: 'round-button', 14 | showCancelButton: true, 15 | message: '代码是写出来给人看的，附带能在机器上运行', 16 | }) 17 | } 18 | /> 19 | 23 | Dialog.alert({ 24 | message: '代码是写出来给人看的，附带能在机器上运行', 25 | theme: 'round-button', 26 | }) 27 | } 28 | /> 29 | 30 | ) 31 | } 32 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dialog/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Dialog from './method' 3 | 4 | export default Dialog 5 | export { Dialog } 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/divider/PropsType.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BaseTypeProps } from '../utils' 3 | 4 | export type DividerContentPosition = 'left' | 'center' | 'right' 5 | export interface DividerProps 6 | extends BaseTypeProps, 7 | Omit, 'style'> { 8 | /** 是否使用虚线 */ 9 | dashed?: boolean 10 | /** 11 | * 是否使用 0.5px 线 12 | * @default true 13 | */ 14 | hairline?: boolean 15 | /** 16 | * 水平还是垂直类型 17 | * @default 'horizontal' 18 | */ 19 | type?: 'horizontal' | 'vertical' 20 | /** 21 | * 内容位置 22 | * @default 'center' 23 | */ 24 | contentPosition?: DividerContentPosition 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/divider/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Divider from './Divider' 3 | 4 | export { Divider } 5 | export type { DividerProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/divider/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @divider-margin: var(--rv-padding-md) 0; 4 | @divider-text-color: var(--rv-gray-6); 5 | @divider-font-size: var(--rv-font-size-md); 6 | @divider-line-height: 24 * @hd; 7 | @divider-border-color: var(--rv-border-color); 8 | @divider-content-padding: var(--rv-padding-md); 9 | @divider-content-left-width: 10%; 10 | @divider-content-right-width: 10%; 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/DropdownMenuContext.ts: -------------------------------------------------------------------------------- 1 | import React, { createContext, Context } from 'react' 2 | import { DropdownMenuProps } from './PropsType' 3 | 4 | export interface DropdownMenuState { 5 | props?: React.PropsWithChildren 6 | value?: Record 7 | openedMap?: Record 8 | onChange?: (v) => void 9 | close?: () => void 10 | } 11 | 12 | const DropdownMenu: Context = createContext({}) 13 | 14 | export default DropdownMenu 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { DropdownMenu } from 'react-vant' 3 | import { option1, option2 } from './options' 4 | 5 | export default () => { 6 | const [value, setValue] = useState>({}) 7 | 8 | return ( 9 | setValue(v)}> 10 | 11 | 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/demo/color.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { DropdownMenu } from 'react-vant' 3 | import { option1, option2 } from './options' 4 | 5 | export default () => { 6 | const [value, setValue] = useState>({}) 7 | 8 | return ( 9 | setValue(v)} 13 | > 14 | 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/demo/custom.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { DropdownMenu, Cell, Switch } from 'react-vant' 3 | import { option1 } from './options' 4 | 5 | export default () => { 6 | const [value, setValue] = useState>({}) 7 | 8 | return ( 9 | setValue(v)}> 10 | 11 | 12 | } /> 13 | } /> 14 | 15 | 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/demo/direction.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { DropdownMenu } from 'react-vant' 3 | import { option1, option2 } from './options' 4 | 5 | export default () => { 6 | const [value, setValue] = useState>({}) 7 | return ( 8 | setValue(v)}> 9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { DropdownMenu } from 'react-vant' 3 | import { option1, option2 } from './options' 4 | 5 | export default () => { 6 | const [value, setValue] = useState>({}) 7 | return ( 8 | setValue(v)}> 9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/demo/options.tsx: -------------------------------------------------------------------------------- 1 | export const option1 = [ 2 | { text: '全部商品', value: 0 }, 3 | { text: '新款商品', value: 1 }, 4 | { text: '活动商品', value: 2 }, 5 | ] 6 | export const option2 = [ 7 | { text: '默认排序', value: 'a' }, 8 | { text: '好评排序', value: 'b' }, 9 | { text: '销量排序', value: 'c' }, 10 | ] 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/demo/style.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | .badge-icon { 4 | display: block; 5 | font-size: 10px; 6 | line-height: 16px; 7 | } 8 | 9 | .demo-badge { 10 | background: #fff; 11 | .child { 12 | width: 40px; 13 | height: 40px; 14 | background: #f2f3f5; 15 | border-radius: 4px; 16 | } 17 | .rv-badge { 18 | &__wrapper:not(:last-child) { 19 | margin-right: @padding-md; 20 | } 21 | } 22 | 23 | .vant-doc-demo-block { 24 | padding: 0 @padding-md; 25 | } 26 | 27 | .vant-doc-demo-block__title { 28 | padding-left: 0; 29 | } 30 | 31 | &-row { 32 | margin-bottom: @padding-sm; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _DropdownMenu from './DropdownMenu' 3 | import DropdownMenuItem from './DropdownMenuItem' 4 | 5 | const DropdownMenu = Object.assign(_DropdownMenu, { Item: DropdownMenuItem }) 6 | export { DropdownMenu } 7 | export default DropdownMenu 8 | export type { 9 | DropdownMenuInstance, 10 | DropdownItemOption, 11 | DropdownMenuDirection, 12 | } from './PropsType' 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/dropdown-menu/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @dropdown-menu-height: 48 * @hd; 4 | @dropdown-menu-background-color: var(--rv-white); 5 | @dropdown-menu-box-shadow: 0 2 * @hd 12 * @hd rgba(100, 101, 102, 0.12); 6 | @dropdown-menu-title-font-size: 15 * @hd; 7 | @dropdown-menu-title-text-color: var(--rv-text-color); 8 | @dropdown-menu-title-active-text-color: var(--rv-danger-color); 9 | @dropdown-menu-title-disabled-text-color: var(--rv-gray-6); 10 | @dropdown-menu-title-padding: 0 var(--rv-padding-xs); 11 | @dropdown-menu-title-line-height: var(--rv-line-height-lg); 12 | @dropdown-menu-option-active-color: var(--rv-danger-color); 13 | @dropdown-menu-content-max-height: 80%; 14 | 15 | @dropdown-item-z-index: 10; 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/empty/PropsType.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BaseTypeProps } from '../utils' 3 | 4 | export interface EmptyProps extends BaseTypeProps { 5 | /** 图片类型，可选值为 error network search，支持传入图片 URL */ 6 | image?: 'default' | 'error' | 'network' | 'search' | string | React.ReactNode 7 | imageSize?: number | string 8 | /** 图片下方的描述文字 */ 9 | description?: React.ReactNode 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/empty/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Empty from './Empty' 3 | 4 | export { Empty } 5 | export type { EmptyProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/empty/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @empty-padding: var(--rv-padding-xl) 0; 4 | @empty-image-size: 160 * @hd; 5 | @empty-description-margin-top: var(--rv-padding-md); 6 | @empty-description-padding: 0 60 * @hd; 7 | @empty-description-color: var(--rv-gray-6); 8 | @empty-description-font-size: var(--rv-font-size-md); 9 | @empty-description-line-height: var(--rv-line-height-md); 10 | @empty-bottom-margin-top: 24 * @hd; 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/field/demo/error.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Cell, Field } from 'react-vant' 3 | 4 | export default () => { 5 | const [username, setUsername] = useState('') 6 | const [phone, setPhone] = useState('') 7 | return ( 8 | <> 9 | 10 | 18 | 26 | 27 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/field/demo/formatter.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Field } from 'react-vant' 3 | 4 | export default () => { 5 | const [value1, setValue1] = useState('') 6 | const [value2, setValue2] = useState('') 7 | 8 | const formatter = val => val.replace(/\d/g, '') 9 | 10 | return ( 11 | <> 12 | 19 | 27 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/field/demo/ref.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | import { Field, Button } from 'react-vant' 3 | import type { FieldInstance } from 'react-vant' 4 | 5 | export default () => { 6 | const fieldRef = useRef(null) 7 | 8 | return ( 9 | { 18 | fieldRef?.current?.focus() 19 | }} 20 | > 21 | 聚焦 22 | 23 | } 24 | /> 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/field/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Field from './Field' 3 | 4 | export default Field 5 | export { Field } 6 | export type { 7 | FieldProps, 8 | FieldInstance, 9 | FieldType, 10 | FieldClearTrigger, 11 | FieldFormatTrigger, 12 | FieldAutosizeConfig, 13 | } from './PropsType' 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/flex/FlexContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Context } from 'react' 2 | 3 | export interface FlexContextState { 4 | gutter?: [number, number] 5 | } 6 | 7 | const FlexContext: Context = createContext({}) 8 | 9 | export default FlexContext 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/flex/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Flex } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | span: 12 10 | span: 12 11 | 12 | 13 | 14 | span: 8 15 | span: 8 16 | span: 8 17 | 18 |
19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/flex/demo/direction.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Flex } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | span: 8-1 10 | span: 8-2 11 | span: 8-3 12 | 13 | 14 | span: 8-1 15 | span: 8-2 16 | span: 8-3 17 | 18 |
19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/flex/demo/gutter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Flex } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | span: 8 10 | span: 8 11 | span: 8 12 | span: 8 13 | span: 8 14 | span: 8 15 | 16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/flex/demo/style.less: -------------------------------------------------------------------------------- 1 | @blue: #3f45ff; 2 | 3 | .demo-flex { 4 | .rv-flexbox { 5 | margin-bottom: 10px; 6 | color: #fff; 7 | font-size: 13px; 8 | line-height: 30px; 9 | text-align: center; 10 | background-clip: content-box; 11 | 12 | .rv-flexitem { 13 | background-clip: content-box; 14 | 15 | &:nth-child(odd) { 16 | background-color: @blue; 17 | } 18 | &:nth-child(even) { 19 | background-color: lighten(@blue, 8%); 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/flex/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _Flex from './Flex' 3 | import FlexItem from './FlexItem' 4 | 5 | const Flex = Object.assign(_Flex, { Item: FlexItem }) 6 | export { Flex } 7 | export default Flex 8 | export type { FlexProps, FlexItemProps } from './PropsType' 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/flex/style/mixins.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | .loop-grid-columns(@index, @class) when (@index > 0) { 4 | .@{rv-prefix}-flexitem@{class}--@{index} { 5 | display: block; 6 | flex: 0 0 percentage((@index / @grid-columns)); 7 | max-width: percentage((@index / @grid-columns)); 8 | } 9 | .loop-grid-columns((@index - 1), @class); 10 | } 11 | 12 | .loop-grid-columns(@index, @class) when (@index = 0) { 13 | .@{rv-prefix}-flexitem@{class}--@{index} { 14 | display: none; 15 | } 16 | } 17 | 18 | .make-grid(@class: ~'') { 19 | .loop-grid-columns(@grid-columns, @class); 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/floating-ball/FloatingBallContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Context } from 'react' 2 | 3 | export interface FloatingBallItemState { 4 | close?: () => void 5 | } 6 | 7 | const FloatingBallItem: Context = createContext({}) 8 | 9 | export default FloatingBallItem 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/floating-ball/FloatingBallItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import clsx from 'clsx' 3 | import FloatingBallContext from './FloatingBallContext' 4 | import { FloatingBallItemProps } from './PropsType' 5 | 6 | export default (props: FloatingBallItemProps) => { 7 | const parent = React.useContext(FloatingBallContext) 8 | const handleItemClick = () => { 9 | parent?.close() 10 | } 11 | 12 | return ( 13 |
17 | {props.children} 18 |
19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/floating-ball/demo/bubble.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Flex, FloatingBall } from 'react-vant' 3 | import { Chat } from '@react-vant/icons' 4 | 5 | export default props => { 6 | return ( 7 | 24 | 25 | 26 | 27 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/floating-ball/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import FloatingBall from './FloatingBall' 3 | 4 | export { FloatingBall } 5 | export type { FloatingBallInstance, FloatingBallProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/floating-ball/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | :root { 4 | --rv-floating-ball-size: calc(48 * @hd); 5 | --rv-floating-ball-z-index: 8; 6 | } 7 | 8 | @floating-ball-size: var(--rv-floating-ball-size); 9 | @floating-ball-transition: all 0.4s ease; 10 | @floating-ball-z-index: var(--rv-floating-ball-z-index); 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/floating-panel/PropsType.ts: -------------------------------------------------------------------------------- 1 | import { BaseTypeProps } from '../utils' 2 | 3 | export interface FloatingPanelProps extends BaseTypeProps { 4 | anchors?: number[] 5 | onHeightChange?: (height: number) => void 6 | } 7 | 8 | export type FloatingPanelInstance = { 9 | moveTo: (height: number) => void 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/floating-panel/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import FloatingPanel from './FloatingPanel' 3 | import type { FloatingPanelInstance, FloatingPanelProps } from './PropsType' 4 | 5 | export { FloatingPanel } 6 | export type { FloatingPanelInstance, FloatingPanelProps } 7 | export default FloatingPanel 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/floating-panel/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @floating-panel-z-index: 1001; 4 | @floating-panel-background-color: @white; 5 | @floating-panel-header-background-color: @white; 6 | @floating-panel-header-padding: 8 * @hd; 7 | @floating-panel-thumb-background-color: @gray-5; 8 | @floating-panel-thumb-width: 20 * @hd; 9 | @floating-panel-thumb-height: 4 * @hd; 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/form/FormContext.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FormLayout, FormItemProps } from './PropsType' 3 | 4 | export type FormContextType = { 5 | layout?: FormLayout 6 | colon?: boolean 7 | border?: boolean 8 | required?: boolean 9 | showValidateMessage?: boolean 10 | } & Pick 11 | 12 | export const DEFAULT_FORM_CONTEXT: FormContextType = { 13 | colon: false, 14 | showValidateMessage: true, 15 | border: true, 16 | labelAlign: 'left', 17 | controlAlign: 'left', 18 | } 19 | 20 | export const FormContext = 21 | React.createContext(DEFAULT_FORM_CONTEXT) 22 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/form/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-form { 2 | .form-list-item { 3 | padding: 10px 10px 0; 4 | h6 { 5 | margin: 0 0 5px; 6 | font-size: 14px; 7 | } 8 | 9 | &__control { 10 | overflow: hidden; 11 | border: 1px solid #f2f2f2; 12 | border-radius: 6px; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/form/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import { useWatch, useForm, List } from 'rc-field-form' 3 | import { FormSubscribe as Subscribe } from './FormSubscribe' 4 | import _Form from './Form' 5 | import Item from './FormItem' 6 | 7 | const Form = Object.assign(_Form, { Item, useForm, List, Subscribe, useWatch }) 8 | 9 | export { Form } 10 | export type { FormProps, FormItemProps, FormInstance } from './PropsType' 11 | export type { FormSubscribeProps } from './FormSubscribe' 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/form/style/index.less: -------------------------------------------------------------------------------- 1 | @import './var.less'; 2 | 3 | .@{rv-prefix}-form { 4 | &-item { 5 | &--vertical { 6 | flex-wrap: wrap; 7 | .@{rv-prefix}-field__label { 8 | margin-bottom: 8 * @hd; 9 | width: 100%; 10 | flex: none; 11 | } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/form/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/grid/demo/badge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid } from 'react-vant' 3 | import { HomeO, Search } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | } text='文字' badge={{ dot: true }} /> 9 | } text='文字' badge={{ content: '99+' }} /> 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/grid/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid } from 'react-vant' 3 | import { ShopO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | } text='文字' /> 9 | } text='文字' /> 10 | } text='文字' /> 11 | } text='文字' /> 12 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/grid/demo/children.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid, Image } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/grid/demo/column.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid } from 'react-vant' 3 | import { ShopO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | {Array.from({ length: 6 }, (_, i) => ( 9 | } text='文字' /> 10 | ))} 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/grid/demo/direction.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid } from 'react-vant' 3 | import { ShopO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | } text='文字' /> 9 | } text='文字' /> 10 | } text='文字' /> 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/grid/demo/gutter.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid } from 'react-vant' 3 | import { ShopO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | {Array.from({ length: 8 }, (_, i) => ( 9 | } text='文字' /> 10 | ))} 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/grid/demo/square.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Grid } from 'react-vant' 3 | import { ShopO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | {Array.from({ length: 8 }, (_, i) => ( 9 | } text='文字' /> 10 | ))} 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/grid/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Grid from './Grid' 3 | import GridItem from './GridItem' 4 | 5 | const GridNamespace = Object.assign(Grid, { Item: GridItem }) 6 | export { GridNamespace as Grid, GridItem } 7 | export type { GridProps, GridItemProps, GridDirection } from './PropsType' 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/grid/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @grid-item-content-padding: var(--rv-padding-md) var(--rv-padding-xs); 4 | @grid-item-content-background-color: var(--rv-white); 5 | @grid-item-content-active-color: var(--rv-active-color); 6 | @grid-item-icon-size: 28 * @hd; 7 | @grid-item-text-color: var(--rv-gray-7); 8 | @grid-item-text-font-size: var(--rv-font-size-sm); 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/create-update-effect.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react' 2 | import type { useEffect, useLayoutEffect } from 'react' 3 | 4 | type EffectHookType = typeof useEffect | typeof useLayoutEffect 5 | 6 | export const createUpdateEffect: (hook: EffectHookType) => EffectHookType = 7 | hook => (effect, deps) => { 8 | const isMounted = useRef(false) 9 | 10 | // for react-refresh 11 | hook(() => { 12 | return () => { 13 | isMounted.current = false 14 | } 15 | }, []) 16 | 17 | hook(() => { 18 | if (!isMounted.current) { 19 | isMounted.current = true 20 | } else { 21 | return effect() 22 | } 23 | }, deps) 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-debunce-effect.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | import type { DependencyList, EffectCallback } from 'react' 3 | import type { DebounceOptions } from './use-debunce-fn' 4 | import useDebounceFn from './use-debunce-fn' 5 | import useUpdateEffect from './use-update-effect' 6 | 7 | function useDebounceEffect( 8 | effect: EffectCallback, 9 | deps?: DependencyList, 10 | options?: DebounceOptions 11 | ) { 12 | const [flag, setFlag] = useState({}) 13 | 14 | const { run } = useDebounceFn(() => { 15 | setFlag({}) 16 | }, options) 17 | 18 | useEffect(() => { 19 | return run() 20 | }, deps) 21 | 22 | useUpdateEffect(effect, [flag]) 23 | } 24 | 25 | export default useDebounceEffect 26 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-drag-and-pinch.ts: -------------------------------------------------------------------------------- 1 | import { createUseGesture, dragAction, pinchAction } from '@use-gesture/react' 2 | 3 | export const useDragAndPinch = createUseGesture([dragAction, pinchAction]) 4 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-height.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | import { getRect } from './use-rect' 3 | 4 | export const useHeight = (element: { 5 | current: Element | undefined 6 | }): number => { 7 | const [height, setHeight] = useState(0) 8 | 9 | useEffect(() => { 10 | if (element.current) { 11 | setHeight(getRect(element.current).height) 12 | } 13 | }, [element.current]) 14 | 15 | return height 16 | } 17 | 18 | export default useHeight 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-isomorphic-layout-effect.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { inBrowser } from '../utils' 3 | import { createUpdateEffect } from './create-update-effect' 4 | 5 | export const useIsomorphicLayoutEffect = inBrowser 6 | ? React.useLayoutEffect 7 | : React.useEffect 8 | 9 | export const useIsomorphicUpdateLayoutEffect = createUpdateEffect( 10 | useIsomorphicLayoutEffect 11 | ) 12 | 13 | export default useIsomorphicLayoutEffect 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-latest.ts: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react' 2 | 3 | function useLatest(value: T) { 4 | const ref = useRef(value) 5 | ref.current = value 6 | 7 | return ref 8 | } 9 | 10 | export default useLatest 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-lazy-effect.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from 'react' 2 | 3 | const useLazyEffect: typeof useEffect = (effect, deps) => { 4 | const [c, setC] = useState(0) 5 | 6 | useEffect(() => { 7 | setC(v => v + 1) 8 | }, deps) 9 | 10 | useEffect(() => { 11 | return effect() 12 | }, [c]) 13 | } 14 | 15 | export default useLazyEffect 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-lazy-render.ts: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, ReactNode } from 'react' 2 | 3 | function useLazyRender( 4 | show: boolean 5 | ): (render: () => React.ReactNode) => () => ReactNode { 6 | const [inited, setInited] = useState(false) 7 | 8 | useEffect(() => { 9 | if (show) { 10 | setInited(show) 11 | } 12 | }, [show]) 13 | 14 | return render => () => inited ? render() : null 15 | } 16 | 17 | export default useLazyRender 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-lock-fn.ts: -------------------------------------------------------------------------------- 1 | import { useRef, useCallback } from 'react' 2 | 3 | function useLockFn

( 4 | fn: (...args: P) => Promise 5 | ) { 6 | const lockRef = useRef(false) 7 | 8 | return useCallback( 9 | async (...args: P) => { 10 | if (lockRef.current) return 11 | lockRef.current = true 12 | try { 13 | const ret = await fn(...args) 14 | lockRef.current = false 15 | return ret 16 | } catch (e) { 17 | lockRef.current = false 18 | throw e 19 | } 20 | }, 21 | [fn] 22 | ) 23 | } 24 | 25 | export default useLockFn 26 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-mount.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react' 2 | 3 | // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types 4 | const useMount = (fn: () => void) => { 5 | useEffect(() => { 6 | fn() 7 | }, []) 8 | } 9 | 10 | export default useMount 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-next-tick.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useCallback } from 'react' 2 | 3 | // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types 4 | const useNextTick = (fn?: () => void) => { 5 | const nextTick = useCallback((handler?: () => void) => { 6 | if (handler) { 7 | Promise.resolve().then(() => handler()) 8 | } 9 | }, []) 10 | 11 | useEffect(() => { 12 | if (fn) { 13 | nextTick(fn) 14 | } 15 | return () => {} 16 | }, [fn, nextTick]) 17 | 18 | return fn ?? nextTick 19 | } 20 | 21 | export default useNextTick 22 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-page-visibility.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/naming-convention */ 2 | import { useEffect, useState } from 'react' 3 | import { inBrowser } from '../utils' 4 | import useEventListener from './use-event-listener' 5 | 6 | type VisibilityState = 'hidden' | 'visible' 7 | 8 | function usePageVisibility(): VisibilityState { 9 | const [visibility, _setVisibility] = useState('visible') 10 | 11 | const setVisibility = () => { 12 | if (inBrowser) { 13 | _setVisibility(document.hidden ? 'hidden' : 'visible') 14 | } 15 | } 16 | 17 | useEffect(() => { 18 | setVisibility() 19 | }, []) 20 | 21 | useEventListener('visibilitychange', setVisibility, { depends: [visibility] }) 22 | 23 | return visibility 24 | } 25 | 26 | export default usePageVisibility 27 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-ref-state.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useRef, useState } from 'react' 2 | import type { Dispatch, SetStateAction, MutableRefObject } from 'react' 3 | import { isFunction } from '../utils' 4 | 5 | type StateType = T | (() => T) 6 | 7 | export default function useRefState( 8 | initialState: StateType 9 | ): [T, Dispatch>, MutableRefObject] { 10 | const [state, setState] = useState(initialState) 11 | const ref = useRef(state) 12 | const setRafState = useCallback( 13 | patch => { 14 | setState(prevState => { 15 | // eslint-disable-next-line no-return-assign 16 | return (ref.current = isFunction(patch) ? patch(prevState) : patch) 17 | }) 18 | }, 19 | [state] 20 | ) 21 | return [state, setRafState, ref] 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-refs.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/explicit-module-boundary-types */ 2 | import React from 'react' 3 | 4 | export default function useRefs() { 5 | const refs = React.useRef([]) 6 | 7 | const setRefs = React.useCallback( 8 | (index: number) => (el: HTMLDivElement) => { 9 | if (el) refs.current[index] = el 10 | }, 11 | [] 12 | ) 13 | 14 | const reset = React.useCallback(() => { 15 | refs.current = [] 16 | }, []) 17 | 18 | return [refs.current, setRefs as any, reset] 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-resize-effect.tsx: -------------------------------------------------------------------------------- 1 | import { RefObject } from 'react' 2 | import useIsomorphicLayoutEffect from './use-isomorphic-layout-effect' 3 | import useMemoizedFn from './use-memoized-fn' 4 | 5 | export function useResizeEffect( 6 | effect: (target: T) => void, 7 | targetRef: RefObject 8 | ) { 9 | const fn = useMemoizedFn(effect) 10 | useIsomorphicLayoutEffect(() => { 11 | const target = targetRef.current 12 | if (!target) return 13 | if (window.ResizeObserver) { 14 | const observer = new ResizeObserver(() => { 15 | fn(target) 16 | }) 17 | observer.observe(target) 18 | return () => { 19 | observer.disconnect() 20 | } 21 | } else { 22 | fn(target) 23 | } 24 | }, [targetRef]) 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-unmount.ts: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react' 2 | import useLatest from './use-latest' 3 | import { isFunction } from '../utils' 4 | import { devWarning } from '../utils/dev-log' 5 | 6 | const useUnmount = (fn: () => void) => { 7 | if (process.env.NODE_ENV === 'development') { 8 | if (!isFunction(fn)) { 9 | devWarning( 10 | 'useUnmount', 11 | `expected parameter is a function, got ${typeof fn}` 12 | ) 13 | } 14 | } 15 | 16 | const fnRef = useLatest(fn) 17 | 18 | useEffect( 19 | () => () => { 20 | fnRef.current() 21 | }, 22 | [] 23 | ) 24 | } 25 | 26 | export default useUnmount 27 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-unmounted-ref.ts: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react' 2 | 3 | // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types 4 | const useUnmountedRef = () => { 5 | const unmountedRef = useRef(false) 6 | useEffect(() => { 7 | unmountedRef.current = false 8 | 9 | return () => { 10 | unmountedRef.current = true 11 | } 12 | }, []) 13 | return unmountedRef 14 | } 15 | 16 | export default useUnmountedRef 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-update-effect.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react' 2 | 3 | const useUpdateEffect: typeof useEffect = (effect, deps) => { 4 | const isMounted = useRef(false) 5 | 6 | useEffect(() => { 7 | if (!isMounted.current) { 8 | isMounted.current = true 9 | } else { 10 | return effect() 11 | } 12 | return undefined 13 | }, deps) 14 | } 15 | 16 | export default useUpdateEffect 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-update.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useState } from 'react' 2 | 3 | const useUpdate = () => { 4 | const [, setState] = useState({}) 5 | 6 | return useCallback(() => setState({}), []) 7 | } 8 | 9 | export default useUpdate 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/hooks/use-window-size.ts: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import { inBrowser } from '../utils' 3 | import useEventListener from './use-event-listener' 4 | 5 | function useWindowSize(): { width: number; height: number } { 6 | const [width, setWidth] = useState(inBrowser ? window.innerWidth : 0) 7 | const [height, setHeight] = useState(inBrowser ? window.innerHeight : 0) 8 | 9 | const onResize = () => { 10 | setWidth(window.innerWidth) 11 | setHeight(window.innerHeight) 12 | } 13 | 14 | useEventListener('resize', onResize) 15 | useEventListener('orientationchange', onResize) 16 | 17 | return { width, height } 18 | } 19 | 20 | export default useWindowSize 21 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/icon/demo/badge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Space, Badge } from 'react-vant' 3 | import { ChatO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/icon/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Space } from 'react-vant' 3 | import { LocationO, LikeO, StarO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/icon/demo/color.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Space } from 'react-vant' 3 | import { ChatO, FireO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/icon/demo/custom.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Space } from 'react-vant' 3 | import { createFromIconfontCN } from '@react-vant/icons' 4 | 5 | const IconFont = createFromIconfontCN( 6 | '//at.alicdn.com/t/font_1619071_dqiwns2g0d.js' 7 | ) 8 | 9 | export default () => { 10 | return ( 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/icon/demo/rotate.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Space } from 'react-vant' 3 | import { ChatO, FireO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | 8 | 9 | 10 | 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image-preview/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import ImagePreview from './method' 3 | 4 | export { ImagePreview } 5 | export default ImagePreview 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image-preview/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @image-preview-index-text-color: var(--rv-white); 4 | @image-preview-index-font-size: var(--rv-font-size-md); 5 | @image-preview-index-line-height: var(--rv-line-height-md); 6 | @image-preview-index-text-shadow: 0 1 * @hd 1 * @hd var(--rv-gray-8); 7 | @image-preview-overlay-background-color: rgba(0, 0, 0, 0.9); 8 | @image-preview-close-icon-size: 22 * @hd; 9 | @image-preview-close-icon-color: var(--rv-gray-5); 10 | @image-preview-close-icon-active-color: var(--rv-gray-6); 11 | @image-preview-close-icon-margin: var(--rv-padding-md); 12 | @image-preview-close-icon-z-index: 2; 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Image } from 'react-vant' 3 | import './style.less' 4 | 5 | const src = 'https://img.yzcdn.cn/vant/cat.jpeg' 6 | 7 | export default () => { 8 | return ( 9 |

10 | 11 |
12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image/demo/error.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Flex, Image } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | 10 | 11 |
默认提示
12 | 13 | 14 | 加载失败
} 19 | /> 20 |
自定义提示
21 | 22 | 23 |
24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image/demo/fit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Flex, Image } from 'react-vant' 3 | import './style.less' 4 | 5 | const src = 'https://img.yzcdn.cn/vant/cat.jpeg' 6 | const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] as const 7 | 8 | export default () => { 9 | return ( 10 |
11 | 12 | {fits.map(el => ( 13 | 14 | {' '} 15 |
{el}
16 | 17 | ))} 18 | 19 |
20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image/demo/loading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Flex, Image, Loading } from 'react-vant' 3 | import './style.less' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | 10 | 11 |
默认提示
12 | 13 | 14 | } 16 | width='100%' 17 | height='24vw' 18 | /> 19 |
自定义提示
20 | 21 | 22 |
23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image/demo/round.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Flex, Image } from 'react-vant' 3 | import './style.less' 4 | 5 | const src = 'https://img.yzcdn.cn/vant/cat.jpeg' 6 | 7 | const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] as const 8 | 9 | export default () => { 10 | return ( 11 |
12 | 13 | {fits.map(el => ( 14 | 15 | {' '} 16 |
{el}
17 | 18 | ))} 19 | 20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-image { 2 | .text { 3 | margin-top: 5px; 4 | color: #646566; 5 | font-size: 14px; 6 | text-align: center; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Image from './LazyImage' 3 | 4 | export default Image 5 | export { Image } 6 | export type { ImageProps, ImageFit } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/image/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @image-placeholder-text-color: var(--rv-gray-6); 4 | @image-placeholder-font-size: var(--rv-font-size-md); 5 | @image-placeholder-background-color: var(--rv-background-color); 6 | @image-loading-icon-size: 32 * @hd; 7 | @image-loading-icon-color: var(--rv-gray-4); 8 | @image-error-icon-size: 32 * @hd; 9 | @image-error-icon-color: var(--rv-gray-4); 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/index-bar/IndexBarContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Context } from 'react' 2 | 3 | export interface IndexBarContextState { 4 | zIndex?: number | string 5 | highlightColor?: string 6 | sticky?: boolean 7 | } 8 | 9 | const IndexBarContext: Context = createContext({}) 10 | 11 | export default IndexBarContext 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/index-bar/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _IndexBar from './IndexBar' 3 | import IndexAnchor from './IndexAnchor' 4 | 5 | const IndexBar = Object.assign(_IndexBar, { Anchor: IndexAnchor }) 6 | export { IndexBar, IndexAnchor } 7 | export type { 8 | IndexBarProps, 9 | IndexAnchorProps, 10 | IndexBarInstance, 11 | } from './PropsType' 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/index-bar/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @index-bar-sidebar-z-index: 2; 4 | @index-bar-index-font-size: var(--rv-font-size-xs); 5 | @index-bar-index-line-height: var(--rv-line-height-xs); 6 | @index-bar-index-active-color: var(--rv-primary-color); 7 | @index-anchor-z-index: 1; 8 | @index-anchor-padding: 0 var(--rv-padding-md); 9 | @index-anchor-text-color: var(--rv-text-color); 10 | @index-anchor-font-weight: var(--rv-font-weight-bold); 11 | @index-anchor-font-size: var(--rv-font-size-md); 12 | @index-anchor-line-height: 32 * @hd; 13 | @index-anchor-background-color: transparent; 14 | @index-anchor-sticky-text-color: var(--rv-primary-color); 15 | @index-anchor-sticky-background-color: var(--rv-white); 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/input/index.ts: -------------------------------------------------------------------------------- 1 | import _Input from './Input' 2 | import TextArea from '../text-area' 3 | import './style/index.less' 4 | 5 | const Input = Object.assign(_Input, { TextArea }) 6 | 7 | export default Input 8 | export { Input } 9 | export type { InputProps, InputInstance } from './PropsType' 10 | 11 | export type { TextAreaProps, TextAreaInstance } from '../text-area/PropsType' 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/input/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @input-text-color: var(--rv-text-color); 4 | @input-background-color: transparent; 5 | @input-error-text-color: var(--rv-danger-color); 6 | @input-disabled-text-color: var(--rv-gray-5); 7 | @input-placeholder-text-color: var(--rv-gray-5); 8 | @input-placeholder-text-font-size: var(--rv-font-size-md); 9 | @input-text-area-min-height: 60 * @hd; 10 | @input-disabled-text-color: var(--rv-gray-5); 11 | @input-clear-icon-size: 16 * @hd; 12 | @input-clear-icon-color: var(--rv-gray-5); 13 | 14 | @textarea-min-height: 60 * @hd; 15 | @textarea-word-limit-color: var(--rv-gray-7); 16 | @textarea-word-limit-font-size: var(--rv-font-size-sm); 17 | @textarea-word-limit-line-height: 16 * @hd; 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/lazyload/PropsType.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BaseTypeProps } from '../utils' 3 | 4 | export interface LazyloadProps extends BaseTypeProps { 5 | /** 占位容器高度 */ 6 | height?: number | string 7 | /** 自定义占位符 */ 8 | placeholder?: React.ReactNode 9 | children?: React.ReactNode 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/lazyload/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-lazyload { 2 | .rv-image { 3 | box-sizing: border-box; 4 | width: 100%; 5 | height: 250px; 6 | margin-bottom: 16px; 7 | padding: 16px; 8 | background-color: white; 9 | background-repeat: no-repeat; 10 | background-size: 100% 100%; 11 | border-radius: 12px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/lazyload/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Lazyload from './Lazyload' 3 | 4 | export default Lazyload 5 | export { Lazyload } 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/lazyload/style/index.less: -------------------------------------------------------------------------------- 1 | @import './var.less'; 2 | 3 | .@{rv-prefix}-lazyload { 4 | position: relative; 5 | display: block; 6 | width: 100%; 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/lazyload/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/list/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-list { 2 | .rv-cell { 3 | text-align: center; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/list/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import List from './List' 3 | 4 | export { List } 5 | export default List 6 | export type { ListProps, ListInstance } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/list/style/index.less: -------------------------------------------------------------------------------- 1 | @import './var.less'; 2 | 3 | :root { 4 | --rv-list-text-color: @list-text-color; 5 | --rv-list-text-font-size: @list-text-font-size; 6 | --rv-list-text-line-height: @list-text-line-height; 7 | --rv-list-loading-icon-size: @list-loading-icon-size; 8 | } 9 | 10 | .@{rv-prefix}-list { 11 | &__loading, 12 | &__finished, 13 | &__error { 14 | color: var(--rv-list-text-color); 15 | font-size: var(--rv-list-text-font-size); 16 | line-height: var(--rv-list-text-line-height); 17 | text-align: center; 18 | } 19 | 20 | &__loading { 21 | .@{rv-prefix}-loading__spinner { 22 | width: var(--rv-list-loading-icon-size); 23 | height: var(--rv-list-loading-icon-size); 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/list/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @list-text-color: var(--rv-gray-6); 4 | @list-text-font-size: var(--rv-font-size-md); 5 | @list-text-line-height: 50 * @hd; 6 | @list-loading-icon-size: 16 * @hd; 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/loading/PropsType.ts: -------------------------------------------------------------------------------- 1 | import { BaseTypeProps } from '../utils' 2 | 3 | export type LoadingType = 'circular' | 'spinner' | 'ball' 4 | 5 | export interface LoadingProps extends BaseTypeProps { 6 | /** 7 | * 加载图标大小，默认单位为 px 8 | * @default '30px' 9 | */ 10 | size?: string | number 11 | /** 12 | * 颜色 13 | * @default '#c9c9c9' 14 | */ 15 | color?: string 16 | /** 是否垂直排列图标和文字内容 */ 17 | vertical?: boolean 18 | /** 文字大小，默认单位为 px */ 19 | textSize?: string | number 20 | /** 21 | * 文字颜色 22 | * @default '#c9c9c9' 23 | */ 24 | textColor?: string 25 | /** 类型 */ 26 | type?: LoadingType 27 | } 28 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/loading/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Loading from './Loading' 3 | 4 | export default Loading 5 | export { Loading } 6 | export type { LoadingProps, LoadingType } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/loading/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @loading-text-color: var(--rv-gray-6); 4 | @loading-text-font-size: var(--rv-font-size-md); 5 | @loading-spinner-color: var(--rv-gray-5); 6 | @loading-spinner-size: 30 * @hd; 7 | @loading-spinner-animation-duration: 0.8s; 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/locale/index.ts: -------------------------------------------------------------------------------- 1 | export { default as zhCN, mergeLocale } from './lang/zh-CN' 2 | export type { PartialLocale } from './lang/zh-CN' 3 | export { default as zhHK } from './lang/zh-HK' 4 | export { default as zhTW } from './lang/zh-TW' 5 | export { default as enUS } from './lang/en-US' 6 | export { default as jaJP } from './lang/ja-JP' 7 | export { default as frFR } from './lang/fr-FR' 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/locale/lang/zh-CN.ts: -------------------------------------------------------------------------------- 1 | import { deepAssign } from '../../utils/deep-assign' 2 | import { base } from './base' 3 | import type { Locale } from './types' 4 | 5 | type DeepPartial = { 6 | [P in keyof T]?: DeepPartial 7 | } 8 | 9 | export type PartialLocale = DeepPartial 10 | 11 | const zhCN = deepAssign(base, {}) 12 | 13 | const mergeLocale = (baseLocal: Locale, mergeLocal: PartialLocale): Locale => { 14 | return deepAssign(baseLocal, mergeLocal) as Locale 15 | } 16 | 17 | export { mergeLocale } 18 | 19 | export default zhCN 20 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/nav-bar/PropsType.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BaseTypeProps } from '../utils' 3 | 4 | export type LoadingType = 'circular' | 'spinner' 5 | 6 | export interface NavBarProps extends BaseTypeProps { 7 | /** 标题 */ 8 | title?: React.ReactNode 9 | /** 是否固定在顶部 */ 10 | fixed?: boolean 11 | /** 导航栏 z-index */ 12 | zIndex?: number | string 13 | /** 左侧文案 */ 14 | leftText?: React.ReactNode 15 | /** 右侧文案 */ 16 | rightText?: React.ReactNode 17 | /** 自定义左侧箭头 */ 18 | leftArrow?: boolean | React.ReactNode 19 | /** 是否开启顶部安全区适配 */ 20 | safeAreaInsetTop?: boolean 21 | /** 是否显示下边框 */ 22 | border?: boolean 23 | /** 固定在顶部时，是否在标签位置生成一个等高的占位元素 */ 24 | placeholder?: boolean 25 | onClickLeft?: (e: React.MouseEvent) => void 26 | onClickRight?: (e: React.MouseEvent) => void 27 | } 28 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/nav-bar/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Toast, NavBar } from 'react-vant' 3 | import { Search } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | <> 8 | Toast('返回')} 13 | onClickRight={() => Toast('按钮')} 14 | /> 15 | Toast('返回')} 19 | rightText={} 20 | onClickRight={() => Toast('按钮')} 21 | /> 22 | 23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/nav-bar/demo/custom.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Toast, NavBar } from 'react-vant' 3 | import { Search } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 | Toast('返回')} 11 | rightText={} 12 | onClickRight={() => Toast('按钮')} 13 | /> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/nav-bar/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import NavBar from './Navbar' 3 | 4 | export { NavBar } 5 | export type { NavBarProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/nav-bar/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @nav-bar-height: 46 * @hd; 4 | @nav-bar-background-color: var(--rv-white); 5 | @nav-bar-arrow-size: 16 * @hd; 6 | @nav-bar-icon-color: var(--rv-primary-color); 7 | @nav-bar-text-color: var(--rv-primary-color); 8 | @nav-bar-title-font-size: var(--rv-font-size-lg); 9 | @nav-bar-title-text-color: var(--rv-text-color); 10 | @nav-bar-z-index: 1; 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/notice-bar/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { VolumeO } from '@react-vant/icons' 3 | import { NoticeBar } from 'react-vant' 4 | 5 | export default () => { 6 | return ( 7 | } 9 | text='在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。' 10 | /> 11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/notice-bar/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-notice-bar { 2 | .notice-swipe { 3 | height: 40px; 4 | line-height: 40px; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/notice-bar/demo/vertical.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { VolumeO } from '@react-vant/icons' 3 | import { NoticeBar, Swiper } from 'react-vant' 4 | import './style.less' 5 | 6 | export default () => { 7 | return ( 8 |
9 | }> 10 | 16 | 内容 1 17 | 内容 2 18 | 内容 3 19 | 20 | 21 |
22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/notice-bar/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import NoticeBar from './NoticeBar' 3 | 4 | export { NoticeBar } 5 | export type { NoticeBarProps, NoticeBarInstance } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/notice-bar/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @notice-bar-height: 40 * @hd; 4 | @notice-bar-padding: 0 var(--rv-padding-md); 5 | @notice-bar-wrapable-padding: var(--rv-padding-xs) var(--rv-padding-md); 6 | @notice-bar-text-color: var(--rv-orange-dark); 7 | @notice-bar-font-size: var(--rv-font-size-md); 8 | @notice-bar-line-height: 24 * @hd; 9 | @notice-bar-background-color: var(--rv-orange-light); 10 | @notice-bar-icon-size: 16 * @hd; 11 | @notice-bar-icon-min-width: 24 * @hd; 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/notify/demo/component.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Notify, Cell, Flex } from 'react-vant' 3 | import { Bell, Close } from '@react-vant/icons' 4 | 5 | export default () => { 6 | const [visible, setVisible] = useState(false) 7 | return ( 8 | <> 9 | setVisible(true)} /> 10 | 11 | 12 |
13 |
14 | 15 | 通知内容 16 |
17 | setVisible(false)} /> 18 | 19 | 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/notify/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Notify from './method' 3 | export default Notify 4 | export { Notify } 5 | export type { NotifyProps, NotifyType, NotifyStatic } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/notify/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @notify-text-color: var(--rv-white); 4 | @notify-padding: var(--rv-padding-xs) var(--rv-padding-md); 5 | @notify-font-size: var(--rv-font-size-md); 6 | @notify-line-height: var(--rv-line-height-md); 7 | @notify-primary-background-color: var(--rv-primary-color); 8 | @notify-success-background-color: var(--rv-success-color); 9 | @notify-danger-background-color: var(--rv-danger-color); 10 | @notify-warning-background-color: var(--rv-warning-color); 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/number-keyboard/demo/control.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Field, NumberKeyboard, hooks } from 'react-vant' 3 | 4 | export default () => { 5 | const [state, set] = hooks.useSetState({ 6 | visible: false, 7 | value: '', 8 | }) 9 | return ( 10 | <> 11 | set({ visible: true })} 16 | /> 17 | set({ value: v })} 22 | onBlur={() => set({ visible: false })} 23 | /> 24 | 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/number-keyboard/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import NumberKeyboard from './NumberKeyboard' 3 | 4 | export default NumberKeyboard 5 | export { NumberKeyboard } 6 | export type { 7 | NumberKeyboardProps, 8 | NumberKeyboardTheme, 9 | KeyType, 10 | KeyConfig, 11 | } from './PropsType' 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/overlay/PropsType.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BaseTypeProps } from '../utils' 3 | 4 | export interface OverlayProps extends BaseTypeProps { 5 | /** 是否可见 */ 6 | visible?: boolean 7 | /** 设置`z-index` */ 8 | zIndex?: number 9 | /** 自定义样式 */ 10 | customStyle?: React.CSSProperties 11 | /** 动画时长，单位`ms`，设置为 0 可以禁用动画 ， */ 12 | duration?: number 13 | /** 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 */ 14 | lockScroll?: boolean 15 | /** 点击时触发 */ 16 | onClick?: (e: React.MouseEvent) => void 17 | stopPropagation?: string[] 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/overlay/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Overlay from './Overlay' 3 | 4 | export default Overlay 5 | export { Overlay } 6 | export type { OverlayProps } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/overlay/style/index.less: -------------------------------------------------------------------------------- 1 | @import './var.less'; 2 | 3 | :root { 4 | --rv-overlay-z-index: @overlay-z-index; 5 | --rv-overlay-background-color: @overlay-background-color; 6 | } 7 | 8 | .@{rv-prefix}-overlay { 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | z-index: var(--rv-overlay-z-index); 13 | width: 100%; 14 | height: 100%; 15 | background-color: var(--rv-overlay-background-color); 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/overlay/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @overlay-z-index: 1; 4 | @overlay-background-color: rgba(0, 0, 0, 0.7); 5 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/pagination/demo/custom.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Arrow, ArrowLeft } from '@react-vant/icons' 3 | import { Pagination } from 'react-vant' 4 | 5 | export default () => { 6 | const [page, setPage] = useState(1) 7 | return ( 8 | } 14 | nextText={} 15 | pageRender={({ text }) => `${text} 😀`} 16 | /> 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/pagination/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Pagination from './Pagination' 3 | 4 | export { Pagination } 5 | export type { PaginationProps, PaginationMode } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/pagination/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @pagination-height: 40 * @hd; 4 | @pagination-font-size: var(--rv-font-size-md); 5 | @pagination-item-width: 36 * @hd; 6 | @pagination-item-default-color: var(--rv-primary-color); 7 | @pagination-item-disabled-color: var(--rv-gray-7); 8 | @pagination-item-disabled-background-color: var(--rv-background-color); 9 | @pagination-background-color: var(--rv-white); 10 | @pagination-desc-color: var(--rv-gray-7); 11 | @pagination-disabled-opacity: var(--rv-disabled-opacity); 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/password-input/README.en-US.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/packages/react-vant/src/components/password-input/README.en-US.md -------------------------------------------------------------------------------- /packages/react-vant/src/components/password-input/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import PasswordInput from './PasswordInput' 3 | 4 | export { PasswordInput } 5 | export type { PasswordInputProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/picker/demo/cascader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Picker } from 'react-vant' 3 | import { cascaderData } from './data' 4 | 5 | export default () => { 6 | const [value, setValue] = React.useState(['2', '2-2', '2-2-2']) 7 | return 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/picker/demo/columns.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Picker, Toast } from 'react-vant' 3 | 4 | export default () => { 5 | const [value, setValue] = React.useState(['周二', '晚上']) 6 | return ( 7 | { 10 | Toast(`当前值：${val}, 当前索引：${index}`) 11 | setValue(val) 12 | }} 13 | columns={[ 14 | ['周一', '周二', '周三', '周四', '周五'], 15 | ['上午', '下午', '晚上'], 16 | ]} 17 | /> 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/picker/demo/columnsFieldNames.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Picker } from 'react-vant' 3 | import { fieldNamesData } from './data' 4 | 5 | export default () => { 6 | const [value, setValue] = React.useState(['福建', '福州', '台江区']) 7 | return ( 8 | 18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/picker/demo/loading.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Picker } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/picker/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Picker from './Picker' 3 | 4 | export default Picker 5 | export { Picker } 6 | export type { 7 | PickerProps, 8 | PickerColumn, 9 | PickerColumnOption, 10 | PickerFieldNames, 11 | PickerPopupActions, 12 | PickerToolbarPosition, 13 | } from './PropsType' 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/picker/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @picker-background-color: var(--rv-white); 4 | @picker-toolbar-height: 44 * @hd; 5 | @picker-title-font-size: var(--rv-font-size-lg); 6 | @picker-title-line-height: var(--rv-line-height-md); 7 | @picker-action-padding: 0 var(--rv-padding-md); 8 | @picker-action-font-size: var(--rv-font-size-md); 9 | @picker-confirm-action-color: var(--rv-text-link-color); 10 | @picker-cancel-action-color: var(--rv-gray-6); 11 | @picker-option-padding: 0 var(--rv-padding-base); 12 | @picker-option-font-size: var(--rv-font-size-lg); 13 | @picker-option-text-color: var(--rv-black); 14 | @picker-option-disabled-opacity: 0.3; 15 | @picker-loading-icon-color: var(--rv-primary-color); 16 | @picker-loading-mask-color: rgba(255, 255, 255, 0.9); 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/popover/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Popover from './Popover' 3 | 4 | export default Popover 5 | export { Popover } 6 | export type { 7 | PopoverProps, 8 | PopoverPlacement, 9 | PopoverTheme, 10 | PopoverInstance, 11 | } from './PropsType' 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/popover/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @popover-arrow-size: 6 * @hd; 4 | @popover-border-radius: var(--rv-border-radius-lg); 5 | @popover-action-width: 128 * @hd; 6 | @popover-action-height: 44 * @hd; 7 | @popover-action-font-size: var(--rv-font-size-md); 8 | @popover-action-line-height: var(--rv-line-height-md); 9 | @popover-action-icon-size: 20 * @hd; 10 | @popover-light-text-color: var(--rv-text-color); 11 | @popover-light-background-color: var(--rv-white); 12 | @popover-light-action-disabled-text-color: var(--rv-gray-5); 13 | @popover-dark-text-color: var(--rv-white); 14 | @popover-dark-background-color: #4a4a4a; 15 | @popover-dark-action-disabled-text-color: var(--rv-gray-6); 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/popup/PopupContext.ts: -------------------------------------------------------------------------------- 1 | import { Context, createContext } from 'react' 2 | 3 | type PopupContextProps = { 4 | visible?: boolean 5 | } 6 | 7 | const PopupContext: Context = createContext({}) 8 | 9 | export default PopupContext 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/popup/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Popup, Cell } from 'react-vant' 3 | 4 | export default () => { 5 | const [visible, setVisible] = useState(false) 6 | 7 | return ( 8 | <> 9 | setVisible(true)} /> 10 | setVisible(false)}> 11 |
内容
12 | 13 | 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/popup/demo/round.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Popup, Cell } from 'react-vant' 3 | 4 | export default () => { 5 | const [visible, setVisible] = useState(false) 6 | 7 | return ( 8 | <> 9 | setVisible(true)} /> 10 | setVisible(false)} 17 | /> 18 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/popup/demo/title.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Popup, Cell } from 'react-vant' 3 | 4 | export default () => { 5 | const [visible, setVisible] = useState(false) 6 | 7 | return ( 8 | <> 9 | setVisible(true)} /> 10 | setVisible(false)} 19 | /> 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/popup/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Popup from './Popup' 3 | 4 | export default Popup 5 | export { Popup } 6 | export type { 7 | PopupProps, 8 | PopupPosition, 9 | PopupCloseIconPosition, 10 | } from './PropsType' 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/popup/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @popup-background-color: var(--rv-white); 4 | @popup-transition: transform var(--rv-animation-duration-base); 5 | @popup-round-border-radius: 16 * @hd; 6 | @popup-close-icon-size: 22 * @hd; 7 | @popup-close-icon-color: var(--rv-gray-5); 8 | @popup-close-icon-active-color: var(--rv-gray-6); 9 | @popup-close-icon-margin: 16 * @hd; 10 | @popup-close-icon-z-index: 1; 11 | @popup-title-font-size: @font-size-lg; 12 | @popup-description-font-size: @font-size-md; 13 | @popup-description-color: @gray-6; 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/product-card/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import ProductCard from './ProductCard' 3 | 4 | export { ProductCard } 5 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/progress/PropsType.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BaseTypeProps } from '../utils' 3 | 4 | export interface ProgressProps extends BaseTypeProps { 5 | color?: string 6 | inactive?: boolean 7 | pivotText?: React.ReactNode 8 | textColor?: string 9 | showPivot?: boolean 10 | pivotColor?: string 11 | trackColor?: string 12 | strokeWidth?: number | string 13 | percentage?: string | number 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/progress/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Progress from './Progress' 3 | 4 | export { Progress } 5 | export type { ProgressProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/progress/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @progress-height: 4 * @hd; 4 | @progress-color: var(--rv-primary-color); 5 | @progress-background-color: var(--rv-gray-3); 6 | @progress-pivot-padding: 0 5 * @hd; 7 | @progress-pivot-text-color: var(--rv-white); 8 | @progress-pivot-font-size: var(--rv-font-size-xs); 9 | @progress-pivot-line-height: 1.6; 10 | @progress-pivot-background-color: var(--rv-primary-color); 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/pull-refresh/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-pull-refresh { 2 | background-color: #fff; 3 | .rv-pull-refresh { 4 | height: calc(100vh - 50px); 5 | } 6 | 7 | .doge { 8 | width: 140px; 9 | height: 72px; 10 | margin-top: 8px; 11 | border-radius: 4px; 12 | } 13 | 14 | p { 15 | margin: 0; 16 | padding: 16px 0 0 16px; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/pull-refresh/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import PullRefresh from './PullRefresh' 3 | 4 | export { PullRefresh } 5 | export type { PullRefreshProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/pull-refresh/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @pull-refresh-head-height: 50 * @hd; 4 | @pull-refresh-head-font-size: var(--rv-font-size-md); 5 | @pull-refresh-head-text-color: var(--rv-gray-6); 6 | @pull-refresh-loading-icon-size: 16 * @hd; 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/radio/PropsType.ts: -------------------------------------------------------------------------------- 1 | import { BaseTypeProps } from '../utils' 2 | import { CheckerProps } from '../checkbox/PropsType' 3 | import React from 'react' 4 | 5 | export type RadioValueType = number | string 6 | 7 | export interface RadioGroupProps extends BaseTypeProps { 8 | /** 是否为禁用状态 */ 9 | disabled?: boolean 10 | /** 图标大小，默认单位为px */ 11 | iconSize?: number | string 12 | /** 排列方向，可选值为horizontal */ 13 | direction?: string 14 | /** 选中状态颜色 */ 15 | checkedColor?: string 16 | /** 当前值 */ 17 | value?: T 18 | /** 默认值 */ 19 | defaultValue?: T 20 | /** 当绑定值变化时触发的事件 */ 21 | onChange?: (name: T) => void 22 | children?: React.ReactNode 23 | } 24 | 25 | export interface RadioProps 26 | extends CheckerProps> { 27 | value?: T 28 | } 29 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/radio/RadioContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Context } from 'react' 2 | import { RadioGroupProps, RadioValueType } from './PropsType' 3 | 4 | export interface RadioContextState { 5 | parent?: { props: RadioGroupProps } 6 | toggle?: (name: T) => void 7 | checked?: T 8 | } 9 | 10 | const RadioContext: Context = createContext({}) 11 | 12 | export default RadioContext 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/radio/demo/async.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Radio, Toast } from 'react-vant' 3 | 4 | let timer 5 | 6 | export default () => { 7 | const [value, setValue] = useState('1') 8 | 9 | return ( 10 | { 13 | Toast.loading({ forbidClick: true }) 14 | clearTimeout(timer) 15 | timer = setTimeout(() => { 16 | Toast.clear() 17 | setValue(val as string) 18 | }, 500) 19 | }} 20 | > 21 | 单选框 1 22 | 单选框 2 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/radio/demo/cell.tsx: -------------------------------------------------------------------------------- 1 | import { ShopO } from '@react-vant/icons' 2 | import React, { useState } from 'react' 3 | import { Radio, Cell } from 'react-vant' 4 | 5 | export default () => { 6 | const [cellValue, setCellValue] = useState('') 7 | return ( 8 | 9 | 10 | } 14 | onClick={() => setCellValue('1')} 15 | rightIcon={} 16 | /> 17 | } 21 | onClick={() => setCellValue('2')} 22 | rightIcon={} 23 | /> 24 | 25 | 26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/radio/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import RadioGroup from './RadioGroup' 3 | import _Radio from './Radio' 4 | 5 | const Radio = Object.assign(_Radio, { Group: RadioGroup }) 6 | export { Radio, RadioGroup } 7 | export type { RadioGroupProps, RadioProps } from './PropsType' 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/radio/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @radio-size: 20 * @hd; 4 | @radio-border-color: var(--rv-gray-5); 5 | @radio-transition-duration: var(--rv-animation-duration-fast); 6 | @radio-label-margin: var(--rv-padding-xs); 7 | @radio-label-color: var(--rv-text-color); 8 | @radio-checked-icon-color: var(--rv-primary-color); 9 | @radio-disabled-icon-color: var(--rv-gray-5); 10 | @radio-disabled-label-color: var(--rv-gray-5); 11 | @radio-disabled-background-color: var(--rv-border-color); 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/rate/demo/icon.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { Rate } from 'react-vant' 3 | import { Fire, FireO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | const [value, setValue] = useState(3) 7 | return ( 8 | } 10 | voidIcon={} 11 | value={value} 12 | onChange={setValue} 13 | /> 14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/rate/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Rate from './Rate' 3 | 4 | export { Rate } 5 | export type { RateProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/rate/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @rate-icon-size: 20 * @hd; 4 | @rate-icon-gutter: var(--rv-padding-base); 5 | @rate-icon-void-color: var(--rv-gray-5); 6 | @rate-icon-full-color: var(--rv-danger-color); 7 | @rate-icon-disabled-color: var(--rv-gray-5); 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/search/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Search from './Search' 3 | 4 | export { Search } 5 | export type { SearchProps, SearchInstance } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/search/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @search-padding: 10 * @hd var(--rv-padding-sm); 4 | @search-background-color: var(--rv-white); 5 | @search-content-background-color: var(--rv-gray-1); 6 | @search-input-height: 34 * @hd; 7 | @search-label-padding: 0 5 * @hd; 8 | @search-label-color: var(--rv-text-color); 9 | @search-label-font-size: var(--rv-font-size-md); 10 | @search-left-icon-color: var(--rv-gray-6); 11 | @search-action-padding: 0 var(--rv-padding-xs); 12 | @search-action-text-color: var(--rv-text-color); 13 | @search-action-font-size: var(--rv-font-size-md); 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/selector/demo/options.tsx: -------------------------------------------------------------------------------- 1 | export const options = [ 2 | { 3 | label: '选项一', 4 | value: '1', 5 | }, 6 | { 7 | label: '选项二', 8 | value: '2', 9 | }, 10 | { 11 | label: '选项三', 12 | value: '3', 13 | }, 14 | ] 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/selector/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import { Selector } from './Selector' 3 | 4 | export type { SelectorProps, SelectorOption } from './PropsType' 5 | 6 | export { Selector } 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/selector/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/share-sheet/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import ShareSheet from './ShareSheet' 3 | 4 | export default ShareSheet 5 | export { ShareSheet } 6 | export type { ShareSheetProps } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sidebar/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _Sidebar from './Sidebar' 3 | import SidebarItem from './SidebarItem' 4 | 5 | const Sidebar = Object.assign(_Sidebar, { Item: SidebarItem }) 6 | export { Sidebar, SidebarItem } 7 | export type { SidebarProps, SidebarItemProps } from './PropsType' 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sidebar/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @sidebar-width: 80 * @hd; 4 | @sidebar-font-size: var(--rv-font-size-md); 5 | @sidebar-line-height: var(--rv-line-height-md); 6 | @sidebar-text-color: var(--rv-text-color); 7 | @sidebar-disabled-text-color: var(--rv-gray-5); 8 | @sidebar-padding: 20 * @hd var(--rv-padding-sm); 9 | @sidebar-active-color: var(--rv-active-color); 10 | @sidebar-background-color: var(--rv-background-color); 11 | @sidebar-selected-font-weight: var(--rv-font-weight-bold); 12 | @sidebar-selected-text-color: var(--rv-text-color); 13 | @sidebar-selected-border-width: 4 * @hd; 14 | @sidebar-selected-border-height: 16 * @hd; 15 | @sidebar-selected-border-color: var(--rv-danger-color); 16 | @sidebar-selected-background-color: var(--rv-white); 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/skeleton/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-skeleton { 2 | .rv-switch { 3 | margin: 0 16px 12px; 4 | } 5 | .demo-preview { 6 | padding: 0 16px; 7 | img { 8 | width: 32px; 9 | height: 32px; 10 | margin-right: 16px; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Skeleton from './Skeleton' 3 | 4 | export default Skeleton 5 | export { Skeleton } 6 | export type { SkeletonProps } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/skeleton/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @skeleton-row-height: 16 * @hd; 4 | @skeleton-row-background-color: var(--rv-active-color); 5 | @skeleton-row-margin-top: var(--rv-padding-sm); 6 | @skeleton-title-width: 40%; 7 | @skeleton-avatar-size: 32 * @hd; 8 | @skeleton-avatar-background-color: var(--rv-active-color); 9 | @skeleton-animation-duration: 1.2s; 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sku/constants.ts: -------------------------------------------------------------------------------- 1 | export const LIMIT_TYPE = { 2 | QUOTA_LIMIT: 0, 3 | STOCK_LIMIT: 1, 4 | } 5 | 6 | export const UNSELECTED_SKU_VALUE_ID = '' 7 | 8 | export default { 9 | LIMIT_TYPE, 10 | UNSELECTED_SKU_VALUE_ID, 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sku/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Sku from './Sku' 3 | 4 | export default Sku 5 | export { Sku } 6 | export type { SkuInstance, SkuProps } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sku/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @sku-item-background-color: var(--rv-background-color); 4 | @sku-icon-gray-color: var(--rv-gray-4); 5 | @sku-upload-mask-color: rgba(50, 50, 50, 0.8); 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/slider/demo/style.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | .custom-slider-button { 4 | width: 26px; 5 | color: #fff; 6 | font-size: 10px; 7 | line-height: 18px; 8 | text-align: center; 9 | background-color: #ee0a24; 10 | border-radius: 100px; 11 | user-select: none; 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/slider/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Slider from './Slider' 3 | 4 | export { Slider } 5 | export type { SliderProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/slider/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @slider-active-background-color: var(--rv-primary-color); 4 | @slider-inactive-background-color: var(--rv-gray-3); 5 | @slider-disabled-opacity: var(--rv-disabled-opacity); 6 | @slider-bar-height: 2 * @hd; 7 | @slider-button-width: 24 * @hd; 8 | @slider-button-height: 24 * @hd; 9 | @slider-button-border-radius: 50%; 10 | @slider-button-background-color: var(--rv-white); 11 | @slider-button-box-shadow: 0 1 * @hd 2 * @hd rgba(0, 0, 0, 0.5); 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/space/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Space from './Space' 3 | 4 | export { Space } 5 | export type { SpaceProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/space/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @space-gap: 8px; 4 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/stepper/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Stepper from './Stepper' 3 | 4 | export { Stepper } 5 | export default Stepper 6 | export type { StepperProps, StepperInstance, StepperTheme } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/stepper/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @stepper-active-color: #e8e8e8; 4 | @stepper-background-color: var(--rv-active-color); 5 | @stepper-button-icon-color: var(--rv-text-color); 6 | @stepper-button-disabled-color: var(--rv-background-color); 7 | @stepper-button-disabled-icon-color: var(--rv-gray-5); 8 | @stepper-button-round-theme-color: var(--rv-primary-color); 9 | @stepper-input-width: 32 * @hd; 10 | @stepper-input-height: 28 * @hd; 11 | @stepper-input-font-size: var(--rv-font-size-md); 12 | @stepper-input-line-height: normal; 13 | @stepper-input-text-color: var(--rv-text-color); 14 | @stepper-input-disabled-text-color: var(--rv-gray-5); 15 | @stepper-input-disabled-background-color: var(--rv-active-color); 16 | @stepper-border-radius: var(--rv-border-radius-md); 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/steps/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _Steps from './Steps' 3 | import StepsItem from './StepsItem' 4 | 5 | const Steps = Object.assign(_Steps, { Item: StepsItem }) 6 | export { Steps, StepsItem } 7 | export type { StepsProps } from './PropsType' 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/steps/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @steps-background-color: var(--rv-white); 4 | @step-text-color: var(--rv-gray-6); 5 | @step-active-color: var(--rv-success-color); 6 | @step-process-text-color: var(--rv-text-color); 7 | @step-font-size: var(--rv-font-size-md); 8 | @step-line-color: var(--rv-border-color); 9 | @step-finish-line-color: var(--rv-success-color); 10 | @step-finish-text-color: var(--rv-text-color); 11 | @step-icon-size: 14px; 12 | @step-circle-size: 6px; 13 | @step-circle-color: var(--rv-gray-6); 14 | @step-horizontal-title-font-size: var(--rv-font-size-sm); 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sticky/PropsType.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export type ScrollEventParams = { 4 | scrollTop: number 5 | isFixed: boolean 6 | } 7 | 8 | export type StickyPosition = 'top' | 'bottom' 9 | 10 | export interface StickyProps { 11 | /** 吸顶时的 z-index */ 12 | zIndex?: number | string 13 | /** 14 | * 吸附位置，可选值为 bottom 15 | * @default 'top' 16 | */ 17 | position?: StickyPosition 18 | container?: React.MutableRefObject 19 | /** 吸顶时与顶部的距离，支持 px vw vh rem 单位，默认 px */ 20 | offsetTop?: number | string 21 | /** 吸底时与底部的距离，支持 px vw vh rem 单位，默认 px */ 22 | offsetBottom?: number | string 23 | /** 滚动时触发 */ 24 | onScroll?: (e: ScrollEventParams) => void 25 | /** 当吸顶状态改变时触发 */ 26 | onChange?: (isFixed: boolean) => void 27 | children?: React.ReactNode 28 | } 29 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sticky/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-sticky--wrapper { 2 | height: 200vh; 3 | } 4 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sticky/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Sticky from './Sticky' 3 | 4 | export default Sticky 5 | export { Sticky } 6 | export type { StickyProps, StickyPosition } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sticky/style/index.less: -------------------------------------------------------------------------------- 1 | @import './var.less'; 2 | 3 | :root { 4 | --rv-sticky-z-index: @sticky-z-index; 5 | } 6 | 7 | .@{rv-prefix}-sticky { 8 | &--fixed { 9 | position: fixed; 10 | z-index: var(--rv-sticky-z-index); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/sticky/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @sticky-z-index: 99; 4 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/styles/demo/ellipsis.less: -------------------------------------------------------------------------------- 1 | .demo-styles { 2 | .rv-ellipsis, 3 | .rv-multi-ellipsis--l2, 4 | .rv-multi-ellipsis--l3 { 5 | max-width: 300px; 6 | margin-left: 16px; 7 | font-size: 14px; 8 | line-height: 18px; 9 | } 10 | 11 | .rv-ellipsis, 12 | .rv-multi-ellipsis--l2, 13 | .rv-multi-ellipsis--l3 { 14 | margin-bottom: 16px; 15 | } 16 | 17 | .demo-animate-block { 18 | position: fixed; 19 | top: 50%; 20 | left: 50%; 21 | width: 100px; 22 | height: 100px; 23 | margin: -50px 0 0 -50px; 24 | background-color: #3f45ff; 25 | border-radius: 8px; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/styles/demo/hairline.less: -------------------------------------------------------------------------------- 1 | .demo-styles { 2 | .rv-hairline--top { 3 | height: 30px; 4 | background-color: #fff; 5 | 6 | &::after { 7 | top: 5px; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/styles/demo/transition.less: -------------------------------------------------------------------------------- 1 | .demo-styles { 2 | .demo-animate-block { 3 | position: fixed; 4 | top: 50%; 5 | left: 50%; 6 | width: 100px; 7 | height: 100px; 8 | margin: -50px 0 0 -50px; 9 | background-color: #3f45ff; 10 | border-radius: 8px; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/styles/index.ts: -------------------------------------------------------------------------------- 1 | import './base.less' 2 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/styles/mixins/ellipsis.less: -------------------------------------------------------------------------------- 1 | .multi-ellipsis(@lines) { 2 | display: -webkit-box !important; 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | -webkit-line-clamp: @lines; 6 | 7 | /* autoprefixer: ignore next */ 8 | -webkit-box-orient: vertical; 9 | } 10 | 11 | .ellipsis() { 12 | overflow: hidden; 13 | white-space: nowrap; 14 | text-overflow: ellipsis; 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/styles/normalize.less: -------------------------------------------------------------------------------- 1 | @import './var.less'; 2 | 3 | html { 4 | -webkit-tap-highlight-color: transparent; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | font-family: @base-font-family; 10 | } 11 | 12 | a { 13 | text-decoration: none; 14 | } 15 | 16 | input, 17 | button, 18 | textarea { 19 | color: inherit; 20 | font: inherit; 21 | } 22 | 23 | a, 24 | input, 25 | button, 26 | textarea, 27 | [class*='rv-'] { 28 | &:focus { 29 | outline: none; 30 | } 31 | } 32 | 33 | ol, 34 | ul { 35 | margin: 0; 36 | padding: 0; 37 | list-style: none; 38 | } 39 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/submit-bar/demo/disabled.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { InfoO } from '@react-vant/icons' 3 | import { SubmitBar } from 'react-vant' 4 | 5 | export default () => { 6 | return ( 7 |
8 | } 13 | buttonText='提交订单' 14 | /> 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/submit-bar/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-submit-bar { 2 | .rv-submit-bar { 3 | position: relative; 4 | padding-bottom: 0; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/submit-bar/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import SubmitBar from './SubmitBar' 3 | 4 | export { SubmitBar } 5 | export default SubmitBar 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/swipe-cell/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-swipe-cell { 2 | user-select: none; 3 | } 4 | 5 | .demo-product-card { 6 | padding: 10px 16px; 7 | background-color: #fff; 8 | 9 | &__img { 10 | width: 88px; 11 | height: 88px; 12 | margin-right: 10px; 13 | } 14 | 15 | &__content { 16 | flex: 1; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/swipe-cell/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import SwipeCell from './SwipeCell' 3 | 4 | export { SwipeCell } 5 | export type { SwipeCellInstance, SwipeCellProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/swipe-cell/style/index.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | .@{rv-prefix}-swipe-cell { 4 | position: relative; 5 | overflow: hidden; 6 | cursor: grab; 7 | 8 | &__wrapper { 9 | transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); 10 | transition-property: transform; 11 | } 12 | 13 | &__left, 14 | &__right { 15 | position: absolute; 16 | top: 0; 17 | height: 100%; 18 | } 19 | 20 | &__left { 21 | left: 0; 22 | transform: translate3d(-100%, 0, 0); 23 | } 24 | 25 | &__right { 26 | right: 0; 27 | transform: translate3d(100%, 0, 0); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/swiper/demo/images.less: -------------------------------------------------------------------------------- 1 | .demo-swiper { 2 | .rv-swiper { 3 | img { 4 | display: block; 5 | box-sizing: border-box; 6 | width: 100%; 7 | height: 240px; 8 | padding: 30px 60px; 9 | background-color: #fff; 10 | pointer-events: none; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/swiper/demo/images.ts: -------------------------------------------------------------------------------- 1 | export const images = [ 2 | 'https://img.yzcdn.cn/vant/apple-1.jpg', 3 | 'https://img.yzcdn.cn/vant/apple-2.jpg', 4 | 'https://img.yzcdn.cn/vant/apple-3.jpg', 5 | 'https://img.yzcdn.cn/vant/apple-4.jpg', 6 | 'https://img.yzcdn.cn/vant/apple-5.jpg', 7 | 'https://img.yzcdn.cn/vant/apple-6.jpg', 8 | 'https://img.yzcdn.cn/vant/apple-7.jpg', 9 | 'https://img.yzcdn.cn/vant/apple-8.jpg', 10 | ] 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/swiper/demo/indicator.less: -------------------------------------------------------------------------------- 1 | .demo-swiper { 2 | .custom-indicator { 3 | position: absolute; 4 | right: 15px; 5 | bottom: 10px; 6 | padding: 2px 5px; 7 | color: #fff; 8 | font-size: 12px; 9 | background-color: rgba(0, 0, 0, 0.8); 10 | border-radius: 2px; 11 | } 12 | 13 | .rv-swiper { 14 | &__slide { 15 | .rv-swiper-item { 16 | color: #fff; 17 | font-size: 20px; 18 | line-height: 150px; 19 | text-align: center; 20 | } 21 | 22 | &:nth-child(odd) { 23 | .rv-swiper-item { 24 | background-color: #3f45ff; 25 | } 26 | } 27 | 28 | &:nth-child(even) { 29 | .rv-swiper-item { 30 | background-color: lighten(#3f45ff, 8%); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/swiper/demo/items.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Swiper, Toast } from 'react-vant' 3 | 4 | const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'] 5 | 6 | export const items = colors.map((color, index) => ( 7 | 8 |
{ 10 | Toast.info(`你点击了卡片 ${index + 1}`) 11 | }} 12 | > 13 | {index + 1} 14 |
15 | 16 | )) 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/swiper/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _Swiper from './Swiper' 3 | import SwiperItem from './SwiperItem' 4 | 5 | const Swiper = Object.assign(_Swiper, { Item: SwiperItem }) 6 | 7 | export default Swiper 8 | export { Swiper } 9 | export type { SwiperInstance, SwiperProps } from './PropsType' 10 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/swiper/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @swipe-slide-size: 100%; 4 | @swipe-track-offset: 0%; 5 | @swipe-border-radius: 0; 6 | 7 | @swipe-indicator-size: 6 * @hd; 8 | @swipe-indicator-margin: var(--rv-padding-sm); 9 | @swipe-indicator-active-opacity: 1; 10 | @swipe-indicator-inactive-opacity: 0.3; 11 | @swipe-indicator-active-background-color: var(--rv-white); 12 | @swipe-indicator-inactive-background-color: var(--rv-border-color); 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/switch/PropsType.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BaseTypeProps } from '../utils' 3 | 4 | export interface SwitchProps extends BaseTypeProps { 5 | /** 开关尺寸，默认单位为px */ 6 | size?: number | string 7 | /** 是否为加载状态 */ 8 | loading?: boolean 9 | /** 是否为禁用状态 */ 10 | disabled?: boolean 11 | /** 开关选中状态 */ 12 | checked?: boolean 13 | /** 开关默认选中状态 */ 14 | defaultChecked?: boolean 15 | /** 打开时的背景色 */ 16 | activeColor?: string 17 | /** 关闭时的背景色 */ 18 | inactiveColor?: string 19 | /** 打开时对应的值 */ 20 | activeValue?: any 21 | /** 关闭时对应的值 */ 22 | inactiveValue?: any 23 | /** 开关状态切换时触发 */ 24 | onChange?: (val: any) => void 25 | onClick?: (e: React.MouseEvent) => void 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/switch/index.ts: -------------------------------------------------------------------------------- 1 | import Switch from './Switch' 2 | 3 | export { Switch } 4 | export default Switch 5 | export type { SwitchProps } from './PropsType' 6 | import './style/index.less' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/switch/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @switch-size: 30 * @hd; 4 | @switch-width: 2em; 5 | @switch-height: 1em; 6 | @switch-node-size: 1em; 7 | @switch-node-background-color: var(--rv-white); 8 | @switch-node-box-shadow: 0 3 * @hd 1 * @hd 0 rgba(0, 0, 0, 0.05), 9 | 0 2 * @hd 2 * @hd 0 rgba(0, 0, 0, 0.1), 10 | 0 3 * @hd 3 * @hd 0 rgba(0, 0, 0, 0.05); 11 | @switch-background-color: var(--rv-white); 12 | @switch-on-background-color: var(--rv-primary-color); 13 | @switch-transition-duration: var(--rv-animation-duration-base); 14 | @switch-disabled-opacity: var(--rv-disabled-opacity); 15 | @switch-border: var(--rv-border-width-base) solid rgba(0, 0, 0, 0.1); 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabbar/TabbarContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, Context } from 'react' 2 | import { TabbarProps } from './PropsType' 3 | 4 | export interface TabbarState { 5 | parent?: TabbarProps 6 | } 7 | 8 | const TabbarContext: Context = createContext({}) 9 | 10 | export default TabbarContext 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabbar/demo/badge.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Tabbar } from 'react-vant' 3 | import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | }>标签 10 | }> 11 | 标签 12 | 13 | }> 14 | 标签 15 | 16 | }> 17 | 标签 18 | 19 | 20 |
21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabbar/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Tabbar } from 'react-vant' 3 | import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | return ( 7 |
8 | 9 | }>标签 10 | }>标签 11 | }>标签 12 | }>标签 13 | 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabbar/demo/control.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Tabbar } from 'react-vant' 3 | import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons' 4 | 5 | export default () => { 6 | const [name, setName] = React.useState('setting') 7 | return ( 8 |
9 | setName(v as string)}> 10 | }> 11 | 标签 12 | 13 | }> 14 | 标签 15 | 16 | }> 17 | 标签 18 | 19 | }> 20 | 标签 21 | 22 | 23 |
24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabbar/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-tabbar { 2 | .rv-tabbar { 3 | position: relative; 4 | padding-bottom: 0; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabbar/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _Tabbar from './Tabbar' 3 | import TabbarItem from './TabbarItem' 4 | 5 | const Tabbar = Object.assign(_Tabbar, { Item: TabbarItem }) 6 | export { Tabbar, TabbarItem } 7 | export type { TabbarProps, TabbarItemProps } from './PropsType' 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabbar/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @tabbar-height: 50 * @hd; 4 | @tabbar-z-index: 1; 5 | @tabbar-background-color: var(--rv-white); 6 | 7 | @tabbar-item-font-size: var(--rv-font-size-sm); 8 | @tabbar-item-text-color: var(--rv-gray-7); 9 | @tabbar-item-active-color: var(--rv-primary-color); 10 | @tabbar-item-active-background-color: var(--rv-white); 11 | @tabbar-item-line-height: 1; 12 | @tabbar-item-icon-size: 22 * @hd; 13 | @tabbar-item-icon-margin-bottom: var(--rv-padding-base); 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabs/TabsContext.ts: -------------------------------------------------------------------------------- 1 | import React, { createContext, Context } from 'react' 2 | import { TabsProps } from './PropsType' 3 | 4 | export interface TabsContextState { 5 | props?: React.PropsWithChildren 6 | currentName?: React.ReactText 7 | scrollIntoView?: (immediate?: boolean) => void 8 | } 9 | 10 | const TabsContext: Context = createContext({}) 11 | 12 | export default TabsContext 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabs/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-tabs { 2 | .rv-tabs { 3 | margin-bottom: 20px; 4 | } 5 | 6 | .rv-tab__pane { 7 | padding: 24px 20px; 8 | background-color: #fff; 9 | font-size: 14px; 10 | } 11 | 12 | .rv-tabs--card .rv-tab__pane { 13 | background-color: transparent; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import _Tabs from './Tabs' 3 | import TabPane from './TabPane' 4 | 5 | const Tabs = Object.assign(_Tabs, { TabPane }) 6 | export default Tabs 7 | export { Tabs } 8 | export type { TabsInstance } from './PropsType' 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tabs/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @tab-text-color: var(--rv-gray-7); 4 | @tab-active-text-color: var(--rv-primary-color); 5 | @tab-disabled-text-color: var(--rv-gray-5); 6 | @tab-font-size: var(--rv-font-size-md); 7 | @tab-line-height: var(--rv-line-height-md); 8 | @tabs-default-color: var(--rv-primary-color); 9 | @tabs-line-height: 44px; 10 | @tabs-jumbo-height: 64px; 11 | @tabs-card-height: 30px; 12 | @tabs-nav-background-color: var(--rv-white); 13 | @tabs-bottom-bar-width: 40px; 14 | @tabs-bottom-bar-height: 3px; 15 | @tabs-bottom-bar-color: @tabs-default-color; 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tag/PropsType.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BaseTypeProps } from '../utils' 3 | 4 | export type TagSize = '' | 'mini' | 'medium' | 'large' 5 | export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger' 6 | export interface TagProps extends BaseTypeProps { 7 | /** 大小, 可选值为 large medium */ 8 | size?: TagSize 9 | /** 是否为标记样式 */ 10 | mark?: boolean 11 | /** 标签颜色 */ 12 | color?: string 13 | /** 是否为空心样式 */ 14 | plain?: boolean 15 | /** 是否为圆角样式 */ 16 | round?: boolean 17 | /** 文本颜色，优先级高于 color 属性 */ 18 | textColor?: string 19 | /** 是否为可关闭标签 */ 20 | closeable?: boolean 21 | /** 类型 */ 22 | type?: TagType 23 | /** 是否展示标签 */ 24 | show?: boolean 25 | onClose?: (e: React.MouseEvent) => void 26 | onClick?: (e: React.MouseEvent) => void 27 | } 28 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tag/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Tag from './Tag' 3 | 4 | export default Tag 5 | export { Tag } 6 | export type { TagProps } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/tag/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @tag-padding: 0 var(--rv-padding-base); 4 | @tag-text-color: var(--rv-white); 5 | @tag-font-size: var(--rv-font-size-sm); 6 | @tag-border-radius: 2 * @hd; 7 | @tag-line-height: 16 * @hd; 8 | @tag-medium-padding: 2 * @hd 6 * @hd; 9 | @tag-large-padding: var(--rv-padding-base) var(--rv-padding-xs); 10 | @tag-large-border-radius: var(--rv-border-radius-md); 11 | @tag-large-font-size: var(--rv-font-size-md); 12 | @tag-round-border-radius: var(--rv-border-radius-max); 13 | @tag-danger-color: var(--rv-danger-color); 14 | @tag-primary-color: var(--rv-primary-color); 15 | @tag-success-color: var(--rv-success-color); 16 | @tag-warning-color: var(--rv-warning-color); 17 | @tag-default-color: var(--rv-gray-6); 18 | @tag-plain-background-color: var(--rv-white); 19 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/text-area/index.ts: -------------------------------------------------------------------------------- 1 | import TextArea from './TextArea' 2 | import './style/index.less' 3 | 4 | export default TextArea 5 | export { TextArea } 6 | export type { TextAreaProps, TextAreaInstance } from './PropsType' 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/text-area/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @textarea-min-height: 60 * @hd; 4 | @textarea-word-limit-color: var(--rv-gray-7); 5 | @textarea-word-limit-font-size: var(--rv-font-size-sm); 6 | @textarea-word-limit-line-height: 16 * @hd; 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/toast/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Toast, Cell } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | <> 7 | Toast.info('提示内容')} /> 8 | { 12 | Toast.loading({ 13 | message: '加载中...', 14 | forbidClick: true, 15 | }) 16 | }} 17 | /> 18 | Toast.success('成功文案')} /> 19 | Toast.fail('失败文案')} /> 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/toast/demo/dynic.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Toast, Cell } from 'react-vant' 3 | 4 | export default () => { 5 | const onDynicUpdate = () => { 6 | let remain = 4 7 | let timer = undefined 8 | const update = Toast.info({ 9 | message: `还剩 ${remain + 1} 秒`, 10 | duration: 5000, 11 | onClose: () => { 12 | clearInterval(timer) 13 | }, 14 | }) 15 | timer = setInterval(() => { 16 | // eslint-disable-next-line no-plusplus 17 | update.config({ message: `还剩 ${remain--} 秒` }) 18 | }, 1000) 19 | } 20 | 21 | return ( 22 | <> 23 | 24 | 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/toast/demo/position.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Toast, Cell } from 'react-vant' 3 | 4 | export default () => { 5 | return ( 6 | <> 7 | 11 | Toast({ 12 | message: '顶部展示', 13 | position: 'top', 14 | }) 15 | } 16 | /> 17 | 21 | Toast({ 22 | message: '底部展示', 23 | position: 'bottom', 24 | }) 25 | } 26 | /> 27 | 28 | ) 29 | } 30 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/toast/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Toast from './method' 3 | 4 | export default Toast 5 | export { Toast } 6 | export type { 7 | ToastType, 8 | ToastPosition, 9 | ToastOptions, 10 | ToastReturnType, 11 | } from './PropsType' 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/toast/lock-click.ts: -------------------------------------------------------------------------------- 1 | let lockCount = 0 2 | 3 | export function lockClick(lock: boolean): void { 4 | if (lock) { 5 | if (!lockCount) { 6 | document.body.classList.add('rv-toast--unclickable') 7 | } 8 | 9 | lockCount += 1 10 | } else if (lockCount) { 11 | lockCount -= 1 12 | 13 | if (!lockCount) { 14 | document.body.classList.remove('rv-toast--unclickable') 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/toast/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @toast-max-width: 70%; 4 | @toast-font-size: var(--rv-font-size-md); 5 | @toast-text-color: var(--rv-white); 6 | @toast-loading-icon-color: var(--rv-white); 7 | @toast-line-height: var(--rv-line-height-md); 8 | @toast-border-radius: var(--rv-border-radius-lg); 9 | @toast-background-color: rgba(0, 0, 0, 0.7); 10 | @toast-icon-size: 36 * @hd; 11 | @toast-text-min-width: 96 * @hd; 12 | @toast-text-padding: var(--rv-padding-xs) var(--rv-padding-sm); 13 | @toast-default-padding: var(--rv-padding-md); 14 | @toast-default-width: 88 * @hd; 15 | @toast-default-min-height: 88 * @hd; 16 | @toast-position-top-distance: 20%; 17 | @toast-position-bottom-distance: 20%; 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/typography/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-typography { 2 | a { 3 | color: #3f45ff; 4 | cursor: pointer; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/typography/style/var.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | @typography-color: var(--rv-text-color); 4 | @typography-link-color: var(--rv-primary-color); 5 | @typography-font-size: var(--rv-font-size-md); 6 | @typography-line-height: var(--rv-line-height-md); 7 | @typography-primary-color: var(--rv-primary-color); 8 | @typography-danger-color: var(--rv-danger-color); 9 | @typography-success-color: var(--rv-success-color); 10 | @typography-warning-color: var(--rv-warning-color); 11 | @typography-secondary-color: var(--rv-gray-6); 12 | @typography-disabled-color: var(--rv-gray-5); 13 | @typography-light-color: var(--rv-white); 14 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/uploader/demo/base.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Uploader } from 'react-vant' 3 | import './style.less' 4 | 5 | const defaultValue = [ 6 | { 7 | url: 'https://img.yzcdn.cn/vant/sand.jpg', // 图片文件 8 | }, 9 | { 10 | url: 'https://img.yzcdn.cn/vant/sand.text', // 其他文件 11 | }, 12 | ] 13 | 14 | export default () => { 15 | return ( 16 | console.log(v)} 20 | /> 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/uploader/demo/close.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Uploader, Dialog } from 'react-vant' 3 | import { upload, demoData } from './utils' 4 | import './style.less' 5 | 6 | export default () => { 7 | return ( 8 | Dialog.confirm({ title: '提示', message: '确认删除?🤔' })} 12 | /> 13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/uploader/demo/limit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Toast, Uploader } from 'react-vant' 3 | import { demoData, upload } from './utils' 4 | import './style.less' 5 | 6 | export default () => { 7 | return ( 8 | Toast.info('文件大小不能超过15kb')} 15 | /> 16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/uploader/demo/style.less: -------------------------------------------------------------------------------- 1 | .demo-uploader { 2 | background-color: #fff; 3 | 4 | .avatar { 5 | background-color: #85ffbd; 6 | background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%); 7 | height: 200px; 8 | border-radius: 20px; 9 | width: 100%; 10 | .rv-uploader__preview { 11 | margin: 0; 12 | border-radius: 50%; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/uploader/demo/upload.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Uploader } from 'react-vant' 3 | import { upload, demoData } from './utils' 4 | import './style.less' 5 | 6 | export default () => { 7 | return 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/uploader/demo/utils.ts: -------------------------------------------------------------------------------- 1 | const DEMO_UPLOAD_API = 'https://nextjs-upload-service.vercel.app/api/upload' 2 | 3 | // 实际业务中需要自己实现对应上传逻辑 4 | export const upload = async (file: File) => { 5 | try { 6 | const body = new FormData() 7 | body.append('source', file) 8 | const resp = await fetch(DEMO_UPLOAD_API, { 9 | method: 'POST', 10 | body, 11 | }) 12 | const json = await resp.json() 13 | // return包含 url 的一个对象 例如: {url:'https://img.yzcdn.cn/vant/sand.jpg'} 14 | return json.image 15 | } catch (error) { 16 | return { url: `demo_path/${file.name}` } 17 | } 18 | } 19 | 20 | export const demoData = [ 21 | { 22 | url: 'https://img.yzcdn.cn/vant/sand.jpg', 23 | filename: '图片名称', 24 | }, 25 | { 26 | url: 'https://img.yzcdn.cn/vant/tree.jpg', 27 | filename: '图片名称', 28 | }, 29 | ] 30 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/uploader/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import Uploader from './Uploader' 3 | 4 | export { Uploader } 5 | export type { 6 | UploaderProps, 7 | UploaderResultType, 8 | UploaderInstance, 9 | UploaderValueItem, 10 | } from './PropsType' 11 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/bound.ts: -------------------------------------------------------------------------------- 1 | export function bound( 2 | position: number, 3 | min: number | undefined, 4 | max: number | undefined 5 | ) { 6 | let ret = position 7 | if (min !== undefined) { 8 | ret = Math.max(position, min) 9 | } 10 | if (max !== undefined) { 11 | ret = Math.min(ret, max) 12 | } 13 | return ret 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/constant.ts: -------------------------------------------------------------------------------- 1 | // color 2 | export const RED = '#ff603f' 3 | export const BLUE = '#2879ff' 4 | export const GREEN = '#00c853' 5 | export const WHITE = '#fff' 6 | export const GRAY = '#c9c9c9' 7 | export const GRAY_DARK = '#969799' 8 | 9 | // border 10 | export const BORDER = 'rv-hairline' 11 | export const BORDER_TOP = `${BORDER}--top` 12 | export const BORDER_LEFT = `${BORDER}--left` 13 | export const BORDER_RIGHT = `${BORDER}--right` 14 | export const BORDER_BOTTOM = `${BORDER}--bottom` 15 | export const BORDER_SURROUND = `${BORDER}--surround` 16 | export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom` 17 | export const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom` 18 | 19 | // shadow 20 | export const SHADOW = 'rv-shadow' 21 | 22 | // component type key 23 | export const COMPONENT_TYPE_KEY = '__REACT_VANT_COMPONENT' 24 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/create/index.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-param-reassign */ 2 | import { BEM, createBEM } from './bem' 3 | 4 | export type CreateNamespaceReturn = [BEM, string] 5 | 6 | export function createNamespace( 7 | name: string, 8 | prefix?: string 9 | ): CreateNamespaceReturn { 10 | name = `${prefix || 'rv'}-${name}` 11 | return [createBEM(name), name] 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/deep-assign.ts: -------------------------------------------------------------------------------- 1 | import { isDef, isObject } from './base' 2 | 3 | type ObjectIndex = Record 4 | 5 | function assignKey(to: ObjectIndex, from: ObjectIndex, key: string) { 6 | const val = from[key] 7 | 8 | if (!isDef(val)) { 9 | return 10 | } 11 | 12 | if (!Object.prototype.hasOwnProperty.call(to, key) || !isObject(val)) { 13 | to[key] = val 14 | } else { 15 | // eslint-disable-next-line no-use-before-define 16 | to[key] = deepAssign(Object(to[key]), from[key]) 17 | } 18 | } 19 | 20 | export function deepAssign(to: ObjectIndex, from: ObjectIndex): ObjectIndex { 21 | Object.keys(from).forEach(key => { 22 | assignKey(to, from, key) 23 | }) 24 | 25 | return to 26 | } 27 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/dev-log.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | import { isDev } from './is-dev' 3 | 4 | export function devWarning(component: string, message: string): void { 5 | if (isDev) { 6 | console.warn(`[react-vant: ${component}] ${message}`) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/dom/canUseDom.ts: -------------------------------------------------------------------------------- 1 | export default function canUseDom(): boolean { 2 | return !!( 3 | typeof window !== 'undefined' && 4 | window.document && 5 | window.document.createElement 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/dom/getContainer.ts: -------------------------------------------------------------------------------- 1 | export function resolveContainer( 2 | getContainer: HTMLElement | (() => HTMLElement) | undefined 3 | ): HTMLElement { 4 | const container = 5 | typeof getContainer === 'function' ? getContainer() : getContainer 6 | return container || document.body 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/dom/renderToContainer.ts: -------------------------------------------------------------------------------- 1 | import { createPortal } from 'react-dom' 2 | import { ReactElement } from 'react' 3 | import { resolveContainer } from './getContainer' 4 | import canUseDom from './canUseDom' 5 | 6 | export type GetContainer = HTMLElement | (() => HTMLElement) | null 7 | 8 | export function renderToContainer( 9 | getContainer: GetContainer, 10 | node: ReactElement 11 | ): ReactElement { 12 | if (canUseDom() && getContainer) { 13 | const container = resolveContainer(getContainer) 14 | return createPortal(node, container) 15 | } 16 | return node 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/dom/style.ts: -------------------------------------------------------------------------------- 1 | export function isHidden(elementRef: HTMLElement): boolean { 2 | const el = elementRef 3 | if (!el) { 4 | return false 5 | } 6 | 7 | const style = window.getComputedStyle(el) 8 | const hidden = style.display === 'none' 9 | 10 | // offsetParent returns null in the following situations: 11 | // 1. The element or its parent element has the display property set to none. 12 | // 2. The element has the position property set to fixed 13 | const parentHidden = el.offsetParent === null && style.position !== 'fixed' 14 | return hidden || parentHidden 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/dom/version.ts: -------------------------------------------------------------------------------- 1 | import { version as _reactVersion } from 'react' 2 | import { version as _reactDomVersion } from 'react-dom' 3 | 4 | export const reactVersion = Number((_reactVersion || '').split('.')[0]) 5 | export const reactDomVersion = Number((_reactDomVersion || '').split('.')[0]) 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/format/react.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export function parseChildList(children: React.ReactNode): T[] { 4 | return React.Children.toArray(children) 5 | .map((node: React.ReactElement) => { 6 | if (React.isValidElement(node)) { 7 | const key = node.key !== undefined ? String(node.key) : undefined 8 | return { 9 | key, 10 | ...node.props, 11 | node, 12 | } 13 | } 14 | return null 15 | }) 16 | .filter(child => child) 17 | } 18 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/format/string.ts: -------------------------------------------------------------------------------- 1 | const camelizeRE = /-(\w)/g 2 | 3 | export function camelize(str: string): string { 4 | return str.replace(camelizeRE, (_, c) => c.toUpperCase()) 5 | } 6 | 7 | export function padZero(num: number | string, targetLength = 2): string { 8 | let str = `${num}` 9 | 10 | while (str.length < targetLength) { 11 | str = `0${str}` 12 | } 13 | 14 | return str 15 | } 16 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/get-default-props.ts: -------------------------------------------------------------------------------- 1 | export function mergeProps(a: A, b: B): B & A 2 | export function mergeProps(a: A, b: B, c: C): C & B & A 3 | // 实现react的defaultProps和props合并 4 | export function mergeProps(...items: any[]) { 5 | const result = { ...items[0] } 6 | items.forEach(item => { 7 | for (const key in item) { 8 | const val = item[key] 9 | // eslint-disable-next-line no-prototype-builtins 10 | result[key] = result.hasOwnProperty(key) ? result[key] : val 11 | } 12 | }) 13 | return result 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './base' 2 | export * from './create' 3 | export * from './interface' 4 | 5 | export * from './dom/event' 6 | export * from './dom/scroll' 7 | export * from './dom/style' 8 | 9 | export * from './format/react' 10 | export * from './format/unit' 11 | export * from './format/number' 12 | export * from './format/string' 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/interface.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export interface BaseTypeProps { 4 | style?: React.CSSProperties | any 5 | className?: string 6 | children?: React.ReactNode 7 | } 8 | 9 | /** 指定挂载的节点 */ 10 | export type TeleportType = HTMLElement | (() => HTMLElement) | null 11 | 12 | export type WithDisplayNameReactElement = React.ReactElement & { 13 | type: { displayName: string } 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/is-dev.ts: -------------------------------------------------------------------------------- 1 | export const isDev = process.env.NODE_ENV === 'development' 2 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/rubberband.ts: -------------------------------------------------------------------------------- 1 | import { bound } from './bound' 2 | 3 | export function rubberband( 4 | distance: number, 5 | dimension: number, 6 | constant: number 7 | ) { 8 | return (distance * dimension * constant) / (dimension + constant * distance) 9 | } 10 | 11 | export function rubberbandIfOutOfBounds( 12 | position: number, 13 | min: number, 14 | max: number, 15 | dimension: number, 16 | constant = 0.15 17 | ) { 18 | if (constant === 0) return bound(position, min, max) 19 | if (position < min) 20 | return -rubberband(min - position, dimension, constant) + min 21 | if (position > max) 22 | return +rubberband(position - max, dimension, constant) + max 23 | return position 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/supports-passive.ts: -------------------------------------------------------------------------------- 1 | import canUseDom from './dom/canUseDom' 2 | 3 | export let supportsPassive = false 4 | 5 | if (canUseDom()) { 6 | try { 7 | const opts = {} 8 | Object.defineProperty(opts, 'passive', { 9 | get() { 10 | supportsPassive = true 11 | }, 12 | }) 13 | window.addEventListener('test-passive', null as any, opts) 14 | // eslint-disable-next-line no-empty 15 | } catch (e) {} 16 | } 17 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/throttle.ts: -------------------------------------------------------------------------------- 1 | import { isObject } from './base' 2 | import { debounce } from './debounce' 3 | 4 | // https://github.com/lodash/lodash/blob/master/throttle.js 5 | function throttle(func, wait, options?) { 6 | let leading = true 7 | let trailing = true 8 | 9 | if (typeof func !== 'function') { 10 | throw new TypeError('Expected a function') 11 | } 12 | if (isObject(options)) { 13 | leading = 'leading' in options ? !!options.leading : leading 14 | trailing = 'trailing' in options ? !!options.trailing : trailing 15 | } 16 | return debounce(func, wait, { 17 | leading, 18 | trailing, 19 | 'maxWait': wait, 20 | }) 21 | } 22 | 23 | export default throttle 24 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/validate/date.ts: -------------------------------------------------------------------------------- 1 | import { isNaN } from './number' 2 | 3 | export function isDate(val: Date): val is Date { 4 | return ( 5 | Object.prototype.toString.call(val) === '[object Date]' && 6 | !isNaN(val.getTime()) 7 | ) 8 | } 9 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/validate/number.ts: -------------------------------------------------------------------------------- 1 | export function isNumeric(val: string): boolean { 2 | return /^\d+(\.\d+)?$/.test(val) 3 | } 4 | 5 | export function isNaN(val: number): val is typeof NaN { 6 | if (Number.isNaN) { 7 | return Number.isNaN(val) 8 | } 9 | 10 | // eslint-disable-next-line no-self-compare 11 | return val !== val 12 | } 13 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/utils/validate/system.ts: -------------------------------------------------------------------------------- 1 | import { inBrowser } from '../base' 2 | 3 | export function isAndroid(): boolean { 4 | return inBrowser ? /android/.test(navigator.userAgent.toLowerCase()) : false 5 | } 6 | 7 | export function isIOS(): boolean { 8 | return inBrowser 9 | ? /ios|iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase()) 10 | : false 11 | } 12 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/water-mark/demo/style.less: -------------------------------------------------------------------------------- 1 | .water-mark-overlay { 2 | padding: 12px; 3 | position: relative; 4 | button { 5 | margin-bottom: 12px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/water-mark/index.ts: -------------------------------------------------------------------------------- 1 | import './style/index.less' 2 | import WaterMark from './WaterMark' 3 | 4 | export { WaterMark } 5 | export type { WaterMarkProps } from './PropsType' 6 | -------------------------------------------------------------------------------- /packages/react-vant/src/components/water-mark/style/index.less: -------------------------------------------------------------------------------- 1 | @import '../../styles/var.less'; 2 | 3 | :root { 4 | --rv-water-mark-z-index: 2000; 5 | } 6 | 7 | .@{rv-prefix}-water-mark { 8 | position: absolute; 9 | z-index: var(--rv-water-mark-z-index); 10 | left: 0; 11 | right: 0; 12 | top: 0; 13 | bottom: 0; 14 | pointer-events: none; 15 | background-repeat: repeat; 16 | &--full { 17 | position: fixed; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/react-vant/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "rootDir": ".", 4 | "target": "es6", 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "importHelpers": true, 8 | "jsx": "react-jsx", 9 | "esModuleInterop": true, 10 | "declaration": true, 11 | "pretty": true, 12 | "baseUrl": ".", 13 | "resolveJsonModule": true, 14 | "skipLibCheck": true, 15 | "allowSyntheticDefaultImports": true, 16 | "lib": ["DOM", "ES2015"], 17 | "typeRoots": ["src/typings", "node_modules/@types"], 18 | "paths": { 19 | "react-vant": ["src/components/index.ts"] 20 | } 21 | }, 22 | "exclude": ["node_modules", "dist", ".rcdoc"], 23 | "include": ["src", "docs", "_rcdoc_", "rcdoc.config.ts"] 24 | } 25 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'packages/*' 3 | -------------------------------------------------------------------------------- /public/home-music-card-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/public/home-music-card-1.jpg -------------------------------------------------------------------------------- /public/home-music-card.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/public/home-music-card.jpg -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/public/logo.png -------------------------------------------------------------------------------- /public/preview_qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/public/preview_qrcode.png -------------------------------------------------------------------------------- /screenshots/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/screenshots/1.png -------------------------------------------------------------------------------- /screenshots/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/screenshots/2.png -------------------------------------------------------------------------------- /screenshots/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/screenshots/3.png -------------------------------------------------------------------------------- /screenshots/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/screenshots/4.png -------------------------------------------------------------------------------- /screenshots/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/screenshots/5.png -------------------------------------------------------------------------------- /screenshots/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/screenshots/6.png -------------------------------------------------------------------------------- /screenshots/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/screenshots/7.png -------------------------------------------------------------------------------- /screenshots/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/screenshots/8.png -------------------------------------------------------------------------------- /screenshots/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/3lang3/react-vant/88c15e718db67ea6e7c64ddc1662eafe9ae40407/screenshots/9.png -------------------------------------------------------------------------------- /tea.yaml: -------------------------------------------------------------------------------- 1 | # https://tea.xyz/what-is-this-file 2 | --- 3 | version: 1.0.0 4 | codeOwners: 5 | - '0x29C7b9A314b9A7C4590cFF916431DfBD07DAA7B9' 6 | quorum: 1 7 | --------------------------------------------------------------------------------