tdesign-mobile-react

(★ 105)

A React Mobile UI components lib for TDesign.

File Explorer

Download Latest Version (.zip)

- - bug-report.zh-CN.yml
  - config.yml
  - feature-report.zh-CN.yml
- - auto-changelog.yml
  - auto-release.yml
  - issue-help-wanted.yml
  - issue-mark-duplicate.yml
  - issue-need-reproduce.yml
  - issue-shoot.yml
  - issue-welcome.yml
  - pkg-pr-new.yml
  - pr-comment-ci.yml
  - pr-compressed-size.yml
  - pr-spelling.template.yml
  - preview-publish.yml
  - project-issue-trigger.yml
  - project-label-trigger.yml
  - project-pr-trigger.yml
  - pull-request.yml
  - tag-push.yml
  - typos-config.toml
- CODEOWNERS
- dependabot.yml
- issue-shoot.md
- PULL_REQUEST_TEMPLATE.md
- commit-msg
- pre-commit
- prepare-commit-msg
- component.code-snippets
- settings.json
- - setup.js
- generate-coverage.mjs
- generate-icon-demo.js
- rollup.config.js
- - getting-started.en-US.md
  - getting-started.md
  - overview.en-US.md
  - overview.md
- - App.jsx
  - main.jsx
  - mobile.config.js
  - utils.js
- - apple-touch-icon.png
  - favicon.ico
  - logo.svg
  - pwa-192x192.png
  - pwa-512x512.png
  - sw.js
- - vars.less
- - App.jsx
  - Demo.jsx
  - main.jsx
  - site.config.js
  - utils.js
- .env.intranet
- .env.preview
- index.html
- mobile.html
- pwaConfig.js
- test-coverage.js
- vite.config.mjs
- - attachMethodsToComponent.ts
  - convertUnit.ts
  - copy-to-clipboard.ts
  - delay.ts
  - dom.ts
  - formatNumber.ts
  - forwardRefWithStatics.ts
  - getContainer.ts
  - getScrollParent.ts
  - helper.ts
  - linearGradient.ts
  - listener.ts
  - nearest.ts
  - noop.ts
  - parseTNode.ts
  - react-render.ts
  - renderToBody.ts
  - renderToContainer.ts
  - supportsPassive.ts
  - useClassName.ts
  - useColor.ts
  - useDefault.ts
  - useInitialized.ts
  - useShouldRender.ts
  - useSwipe.ts
  - useTouch.ts
  - withNativeProps.ts
  - withStopPropagation.ts
- - action-sheet.en-US.md
  - action-sheet.md
  - ActionSheet.tsx
  - ActionSheetGrid.tsx
  - ActionSheetList.tsx
  - ActionSheetMethod.tsx
  - defaultProps.ts
  - index.tsx
  - type.ts
- - avatar-group.en-US.md
  - avatar-group.md
  - avatar.en-US.md
  - avatar.md
  - Avatar.tsx
  - AvatarGroup.tsx
  - AvatarGroupContext.tsx
  - defaultProps.ts
  - index.ts
  - type.ts
- - back-top.en-US.md
  - back-top.md
  - Backtop.tsx
  - defaultProps.ts
  - index.ts
  - type.ts
- - badge.en-US.md
  - badge.md
  - Badge.tsx
  - defaultProps.ts
  - index.ts
  - type.ts
- - button.en-US.md
  - button.md
  - Button.tsx
  - defaultProps.ts
  - index.ts
  - type.ts
- - calendar.en-US.md
  - calendar.md
  - Calendar.tsx
  - CalendarTemplate.tsx
  - defaultProps.ts
  - index.ts
  - type.ts
  - utils.ts
- - cascader.en-US.md
  - cascader.md
  - Cascader.tsx
  - defaultProps.ts
  - index.tsx
  - type.ts
- - cell.en-US.md
  - cell.md
  - Cell.tsx
  - CellGroup.tsx
  - defaultProps.ts
  - index.tsx
  - type.ts
- - checkbox-group.en-US.md
  - checkbox-group.md
  - checkbox.en-US.md
  - checkbox.md
  - Checkbox.tsx
  - CheckboxGroup.tsx
  - defaultProps.ts
  - index.ts
  - type.ts
- - collapse.en-US.md
  - collapse.md
  - Collapse.tsx
  - CollapseContext.tsx
  - CollapsePanel.tsx
  - defaultProps.ts
  - index.ts
  - type.ts
- - color-picker.en-US.md
  - color-picker.md
  - ColorPicker.tsx
  - constants.ts
  - defaultProps.ts
  - index.ts
  - type.ts
  - types.ts
- - Portal.tsx
- - config-provider.en-US.md
  - config-provider.md
  - ConfigContext.tsx
  - ConfigProvider.tsx
  - index.ts
  - type.ts
- - count-down.en-US.md
  - count-down.md
  - CountDown.tsx
  - defaultProps.ts
  - index.ts
  - type.ts
- - date-time-picker.en-US.md
  - date-time-picker.md
  - DateTimePicker.tsx
  - defaultProps.ts
  - index.ts
  - shared.ts
  - type.ts
- - alert.ts
  - confirm.ts
  - defaultProps.ts
  - dialog.en-US.md
  - dialog.md
  - Dialog.tsx
  - index.ts
  - show.tsx
  - type.ts
- - defaultProps.ts
  - divider.en-US.md
  - divider.md
  - Divider.tsx
  - index.ts
  - type.ts
- - defaultProps.ts
  - drawer.en-US.md
  - drawer.md
  - Drawer.tsx
  - index.ts
  - plugin.tsx
  - type.ts
- - defaultProps.ts
  - dropdown-menu.en-US.md
  - dropdown-menu.md
  - DropdownItem.tsx
  - DropdownMenu.tsx
  - DropdownMenuContext.ts
  - index.ts
  - type.ts
- - empty.en-US.md
  - empty.md
  - Empty.tsx
  - index.ts
  - type.ts
- - defaultProps.ts
  - fab.en-US.md
  - fab.md
  - Fab.tsx
  - index.ts
  - type.ts
- - defaultProps.ts
  - footer.en-US.md
  - footer.md
  - Footer.tsx
  - index.ts
  - type.ts
- - const.ts
  - defaultProps.ts
  - form.en-US.md
  - form.md
  - Form.tsx
  - FormContext.tsx
  - FormItem.tsx
  - formModel.ts
  - index.ts
  - type.ts
- - defaultProps.ts
  - grid.en-US.md
  - grid.md
  - Grid.tsx
  - GridContext.tsx
  - GridItem.tsx
  - index.tsx
  - type.ts
- - defaultProps.ts
  - guide.en-US.md
  - guide.md
  - Guide.tsx
  - index.ts
  - type.ts
- - useClass.ts
  - useConfig.ts
  - useControlled.ts
  - useDefaultProps.ts
  - useElementHeight.ts
  - useHover.ts
  - useLatest.ts
  - useLayoutEffect.ts
  - useLengthLimit.ts
  - useLockScroll.ts
  - useMutationObserver.ts
  - useSetState.ts
  - useThemeColor.ts
  - useVariables.ts
- - icon.en-US.md
  - icon.md
  - type.ts
- - defaultProps.ts
  - image.en-US.md
  - image.md
  - Image.tsx
  - index.ts
  - type.ts
- - defaultProps.ts
  - getFixScaleEleTransPosition.ts
  - image-viewer.en-US.md
  - image-viewer.md
  - image-viewer.tsx
  - index.ts
  - raf.ts
  - transform.ts
  - type.ts
  - useTouchEvent.ts
  - util.ts
- - defaultProps.ts
  - index.tsx
  - indexes.en-US.md
  - indexes.md
  - Indexes.tsx
  - IndexesAnchor.tsx
  - IndexesContext.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - input.en-US.md
  - input.md
  - Input.tsx
  - type.ts
- - Col.tsx
  - defaultProps.ts
  - index.ts
  - layout.en-US.md
  - layout.md
  - Row.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - link.en-US.md
  - link.md
  - Link.tsx
  - type.ts
- - index.ts
  - list.en-US.md
  - list.md
  - list.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - loading.en-US.md
  - loading.md
  - Loading.tsx
  - plugin.tsx
  - type.ts
- - ar_KW.ts
  - en_US.ts
  - it_IT.ts
  - ja_JP.ts
  - ko_KR.ts
  - LocalReceiver.ts
  - ru_RU.ts
  - zh_CN.ts
  - zh_TW.ts
- - defaultProps.ts
  - index.tsx
  - message.en-US.md
  - message.md
  - Message.tsx
  - methods.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - navbar.en-US.md
  - navbar.md
  - Navbar.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - notice-bar.en-US.md
  - notice-bar.md
  - NoticeBar.tsx
  - type.ts
- - defaultProps.ts
  - index.tsx
  - overlay.en-US.md
  - overlay.md
  - Overlay.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - picker-context.ts
  - picker.class.ts
  - picker.en-US.md
  - picker.md
  - Picker.tsx
  - PickerItem.tsx
  - type.ts
  - utils.ts
- - defaultProps.ts
  - index.ts
  - popover.en-US.md
  - popover.md
  - Popover.tsx
  - type.ts
- - defaultProps.ts
  - index.tsx
  - popup.en-US.md
  - popup.md
  - Popup.tsx
  - type.ts
- - constants.ts
  - defaultProps.ts
  - index.tsx
  - progress.en-US.md
  - progress.md
  - Progress.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - pull-down-refresh.en-US.md
  - pull-down-refresh.md
  - PullDownRefresh.tsx
  - type.ts
  - useTouch.ts
- - defaultProps.ts
  - index.ts
  - qrcode.en-US.md
  - qrcode.md
  - QRCode.tsx
  - QRCodeCanvas.tsx
  - QRCodeStatus.tsx
  - QRCodeSVG.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - radio.en-US.md
  - radio.md
  - Radio.tsx
  - RadioGroup.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - rate.en-US.md
  - rate.md
  - Rate.tsx
  - RateIcon.tsx
  - RateText.tsx
  - RateTips.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - result.en-US.md
  - result.md
  - Result.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - search.en-US.md
  - search.md
  - Search.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - segmented.en-US.md
  - segmented.md
  - Segmented.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - side-bar.en-US.md
  - side-bar.md
  - SideBar.tsx
  - SideBarContext.tsx
  - SideBarItem.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - skeleton.en-US.md
  - skeleton.md
  - Skeleton.tsx
  - type.ts
- - constants.ts
  - defaultProps.ts
  - index.tsx
  - slider.en-US.md
  - slider.md
  - Slider.tsx
  - type.ts
- - defaultProps.ts
  - index.tsx
  - stepper.en-US.md
  - stepper.md
  - Stepper.tsx
  - type.ts
- - defaultProps.ts
  - index.tsx
  - StepItem.tsx
  - steps.en-US.md
  - steps.md
  - Steps.tsx
  - StepsContext.tsx
  - type.ts
- - defaultProps.ts
  - index.tsx
  - sticky.en-US.md
  - sticky.md
  - Sticky.tsx
  - type.ts
- - css.js
  - index.js
- - defaultProps.ts
  - index.ts
  - swipe-cell.en-US.md
  - swipe-cell.md
  - SwipeCell.tsx
  - type.ts
- - defaultProps.ts
  - index.tsx
  - swiper.en-US.md
  - swiper.md
  - Swiper.tsx
  - SwiperContext.tsx
  - SwiperItem.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - switch.en-US.md
  - switch.md
  - Switch.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - tab-bar.en-US.md
  - tab-bar.md
  - TabBar.tsx
  - TabBarContext.tsx
  - TabBarItem.tsx
  - type.ts
- - BaseTable.tsx
  - defaultProps.ts
  - Ellipsis.tsx
  - FilterController.tsx
  - index.tsx
  - interface.ts
  - PrimaryTable.tsx
  - SorterButton.tsx
  - table.en-US.md
  - table.md
  - TablePagination.tsx
  - tablePaginationDefaultProps.ts
  - type.ts
- - context.ts
  - defaultProps.ts
  - index.ts
  - TabPanel.tsx
  - tabs.en-US.md
  - tabs.md
  - Tabs.tsx
  - type.ts
- - CheckTag.tsx
  - defaultProps.ts
  - index.ts
  - tag.en-US.md
  - tag.md
  - Tag.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - textarea.en-US.md
  - textarea.md
  - Textarea.tsx
  - type.ts
- - constant.ts
  - defaultProps.ts
  - index.ts
  - methods.tsx
  - toast.en-US.md
  - toast.md
  - Toast.tsx
  - type.ts
- - defaultProps.ts
  - index.ts
  - tree-select.en-US.md
  - tree-select.md
  - tree-select.tsx
  - type.ts
- - defaultProps.ts
  - Ellipsis.tsx
  - index.ts
  - Paragraph.tsx
  - Text.tsx
  - Title.tsx
  - type.ts
  - typography.en-US.md
  - typography.md
  - Typography.tsx
- - defaultProps.ts
  - index.ts
  - type.ts
  - upload.en-US.md
  - upload.md
  - Upload.tsx
  - util.ts
- - defaultProps.ts
  - index.ts
  - type.ts
  - utils.ts
  - watermark.en-US.md
  - watermark.md
  - Watermark.tsx
- _common
- common.ts
- index-lib.ts
- index.ts
- - cypress.json
  - jest.base.conf.js
  - jest.ssr.conf.js
  - jest.unit.conf.js
- - setup-framework.js
- - csr.test.jsx
  - ssr.test.jsx
- - index.ts
- README.md
.eslintignore
.eslintrc.js
.gitignore
.gitmodules
.node-version
.prettierrc.js
babel.config.js
CHANGELOG.md
commitlint.config.js
CONTRIBUTING.md
DEVELOP_GUIDE.md
LICENSE
package.json
postcss.config.js
README-zh_CN.md
README.md
tsconfig.build.json
tsconfig.json
vitest.config.mts

# Installation Guide

1. Get the code

git clone https://github.com/Tencent/tdesign-mobile-react

Downloads the entire project code from GitHub to your computer.

cd tdesign-mobile-react

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

<img src="https://img.shields.io/npm/l/tdesign-mobile-react.svg?sanitize=true" alt="License" />

Type this command into your terminal and run it.

<img src="https://img.shields.io/npm/v/tdesign-mobile-react.svg?sanitize=true" alt="Version">

Type this command into your terminal and run it.

<img src="https://img.shields.io/npm/dt/tdesign-mobile-react.svg?sanitize=true" alt="Downloads" />

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)