├── packages ├── taro-demo │ ├── env │ │ ├── .env │ │ ├── .env.prod │ │ └── .env.development │ ├── src │ │ ├── pages │ │ │ ├── skeleton │ │ │ │ ├── index.less │ │ │ │ ├── index.config.ts │ │ │ │ └── index.tsx │ │ │ ├── switch │ │ │ │ ├── index.less │ │ │ │ └── index.config.ts │ │ │ ├── toast │ │ │ │ ├── index.less │ │ │ │ └── index.config.ts │ │ │ ├── popup │ │ │ │ ├── index.less │ │ │ │ ├── index.config.ts │ │ │ │ └── index.tsx │ │ │ ├── sort │ │ │ │ ├── index.less │ │ │ │ └── index.config.ts │ │ │ ├── empty │ │ │ │ ├── index.less │ │ │ │ └── index.config.ts │ │ │ ├── badge │ │ │ │ └── index.config.ts │ │ │ ├── cell │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ │ ├── field │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ │ ├── form │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ │ ├── grid │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ │ ├── icon │ │ │ │ ├── index.config.ts │ │ │ │ ├── icons.ts │ │ │ │ └── index.less │ │ │ ├── image │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ │ ├── modal │ │ │ │ └── index.config.ts │ │ │ ├── price │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ │ ├── rate │ │ │ │ └── index.config.ts │ │ │ ├── tab │ │ │ │ ├── index.config.ts │ │ │ │ └── index.tsx │ │ │ ├── button │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ │ ├── canvas │ │ │ │ └── index.config.ts │ │ │ ├── loading │ │ │ │ └── index.config.ts │ │ │ ├── nav-bar │ │ │ │ └── index.config.ts │ │ │ ├── overlay │ │ │ │ ├── index.config.ts │ │ │ │ └── index.tsx │ │ │ ├── progress │ │ │ │ ├── index.config.ts │ │ │ │ └── index.tsx │ │ │ ├── search-bar │ │ │ │ └── index.config.ts │ │ │ ├── tag-price │ │ │ │ ├── index.config.ts │ │ │ │ └── index.tsx │ │ │ ├── uploader │ │ │ │ ├── index.config.ts │ │ │ │ └── index.tsx │ │ │ ├── input-number │ │ │ │ └── index.config.ts │ │ │ ├── config-provider │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ │ ├── datetime-picker │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ │ ├── dropdown-menu │ │ │ │ └── index.config.ts │ │ │ ├── footer-button │ │ │ │ └── index.config.ts │ │ │ ├── progress-circle │ │ │ │ ├── index.config.ts │ │ │ │ └── index.tsx │ │ │ └── home │ │ │ │ ├── index.config.ts │ │ │ │ └── index.less │ │ ├── assets │ │ │ └── images │ │ │ │ ├── avatar.png │ │ │ │ ├── curtain.png │ │ │ │ ├── logo_taro.png │ │ │ │ ├── icon-list-form.png │ │ │ │ ├── icon-list-hoc.png │ │ │ │ ├── icon-list-view.png │ │ │ │ ├── icon-list-action.png │ │ │ │ ├── icon-list-basic.png │ │ │ │ ├── icon-list-layout.png │ │ │ │ ├── verification_code.png │ │ │ │ └── icon-list-navigation.png │ │ ├── utils │ │ │ └── index.ts │ │ ├── components │ │ │ └── doc-header │ │ │ │ ├── index.less │ │ │ │ └── index.tsx │ │ ├── app.config.ts │ │ ├── app.tsx │ │ └── index.html │ ├── .gitignore │ ├── config │ │ ├── dev.js │ │ └── prod.js │ ├── project.tt.json │ ├── .editorconfig │ ├── babel.config.js │ ├── project.private.config.json │ ├── global.d.ts │ └── tsconfig.json ├── ui │ ├── src │ │ ├── components │ │ │ ├── icon │ │ │ │ ├── README.md │ │ │ │ ├── index.ts │ │ │ │ ├── type.ts │ │ │ │ ├── demo │ │ │ │ │ ├── icons.ts │ │ │ │ │ └── index.less │ │ │ │ ├── README.zh-CN.md │ │ │ │ ├── icon.tsx │ │ │ │ └── icon.less │ │ │ ├── tab │ │ │ │ ├── README.md │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ └── type.ts │ │ │ ├── button │ │ │ │ ├── test │ │ │ │ │ └── .gitkeep │ │ │ │ ├── index.ts │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── var.less │ │ │ │ └── type.ts │ │ │ ├── skeleton │ │ │ │ ├── demo │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── type.ts │ │ │ │ ├── skeleton.less │ │ │ │ ├── README.md │ │ │ │ ├── README.zh-CN.md │ │ │ │ └── skeleton.tsx │ │ │ ├── switch │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── switch.less │ │ │ │ └── type.ts │ │ │ ├── toast │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ └── type.ts │ │ │ ├── popup │ │ │ │ ├── demo │ │ │ │ │ ├── index.less │ │ │ │ │ └── index.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ └── type.ts │ │ │ ├── badge │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── type.ts │ │ │ │ └── badge.less │ │ │ ├── empty │ │ │ │ ├── index.ts │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── var.less │ │ │ │ ├── type.ts │ │ │ │ ├── empty.less │ │ │ │ ├── empty.tsx │ │ │ │ ├── README.md │ │ │ │ └── README.zh-CN.md │ │ │ ├── field │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ └── demo │ │ │ │ │ └── index.less │ │ │ ├── form │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── form.less │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── type.ts │ │ │ │ ├── form.tsx │ │ │ │ ├── README.md │ │ │ │ └── README.zh-CN.md │ │ │ ├── rate │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── type.ts │ │ │ │ ├── rate.less │ │ │ │ ├── README.md │ │ │ │ └── README.zh-CN.md │ │ │ ├── footer-button │ │ │ │ ├── var.less │ │ │ │ ├── index.ts │ │ │ │ ├── footer-button.less │ │ │ │ └── type.ts │ │ │ ├── image │ │ │ │ ├── index.ts │ │ │ │ ├── image.less │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── type.ts │ │ │ │ ├── README.md │ │ │ │ └── README.zh-CN.md │ │ │ ├── price │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ └── type.ts │ │ │ ├── sort │ │ │ │ ├── index.ts │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── sort.less │ │ │ │ └── type.ts │ │ │ ├── loading │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── type.ts │ │ │ │ ├── loading.less │ │ │ │ ├── README.md │ │ │ │ ├── README.zh-CN.md │ │ │ │ └── loading.tsx │ │ │ ├── nav-bar │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ └── type.ts │ │ │ ├── overlay │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── type.ts │ │ │ │ ├── overlay.less │ │ │ │ ├── overlay.tsx │ │ │ │ ├── README.md │ │ │ │ ├── README.zh-CN.md │ │ │ │ └── demo │ │ │ │ │ └── index.tsx │ │ │ ├── progress │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── type.ts │ │ │ │ └── demo │ │ │ │ │ └── index.tsx │ │ │ ├── tag-price │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── type.ts │ │ │ │ ├── tag-price.less │ │ │ │ ├── README.md │ │ │ │ ├── README.zh-CN.md │ │ │ │ ├── tag-price.tsx │ │ │ │ └── demo │ │ │ │ │ └── index.tsx │ │ │ ├── search-bar │ │ │ │ ├── index.ts │ │ │ │ └── var.less │ │ │ ├── uploader │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── demo │ │ │ │ │ └── index.tsx │ │ │ │ ├── README.md │ │ │ │ └── README.zh-CN.md │ │ │ ├── input-number │ │ │ │ ├── index.ts │ │ │ │ └── var.less │ │ │ ├── datetime-picker │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ └── type.ts │ │ │ ├── progress-circle │ │ │ │ ├── index.ts │ │ │ │ ├── progress-circle.less │ │ │ │ ├── type.ts │ │ │ │ ├── README.md │ │ │ │ ├── README.zh-CN.md │ │ │ │ └── demo │ │ │ │ │ └── index.tsx │ │ │ ├── config-provider │ │ │ │ ├── type.ts │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── index.ts │ │ │ │ └── config-provider.tsx │ │ │ ├── grid │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── var.less │ │ │ │ ├── index.ts │ │ │ │ ├── type.ts │ │ │ │ └── grid.less │ │ │ ├── cell │ │ │ │ ├── demo │ │ │ │ │ └── index.less │ │ │ │ ├── var.less │ │ │ │ ├── index.ts │ │ │ │ ├── group │ │ │ │ │ └── index.tsx │ │ │ │ ├── type.ts │ │ │ │ └── cell.less │ │ │ ├── canvas │ │ │ │ ├── index.ts │ │ │ │ ├── type.ts │ │ │ │ └── canvas.less │ │ │ ├── modal │ │ │ │ ├── var.less │ │ │ │ ├── index.ts │ │ │ │ ├── header │ │ │ │ │ └── index.tsx │ │ │ │ ├── content │ │ │ │ │ └── index.tsx │ │ │ │ ├── action │ │ │ │ │ └── index.tsx │ │ │ │ └── type.ts │ │ │ └── dropdown-menu │ │ │ │ ├── index.ts │ │ │ │ ├── var.less │ │ │ │ ├── type.ts │ │ │ │ └── item │ │ │ │ └── index.tsx │ │ ├── common │ │ │ ├── constants.ts │ │ │ ├── index.ts │ │ │ ├── type.d.ts │ │ │ └── comp-container.tsx │ │ ├── utils │ │ │ ├── event-center.ts │ │ │ ├── init-center.ts │ │ │ └── is.ts │ │ └── styles │ │ │ ├── mixins │ │ │ ├── libs │ │ │ │ ├── position.less │ │ │ │ ├── active.less │ │ │ │ ├── absolute-center.less │ │ │ │ ├── placeholder.less │ │ │ │ ├── overlay.less │ │ │ │ ├── line.less │ │ │ │ └── border.less │ │ │ └── index.less │ │ │ └── index.less │ ├── package.json │ └── README.md ├── sites │ ├── src │ │ ├── docs │ │ │ ├── pages │ │ │ │ └── markdown │ │ │ │ │ ├── design.md │ │ │ │ │ └── introduce.md │ │ │ ├── App.tsx │ │ │ └── components │ │ │ │ └── md-to-react │ │ │ │ └── index.tsx │ │ ├── vite-env.d.ts │ │ ├── favicon.ico │ │ ├── constants │ │ │ ├── index.ts │ │ │ ├── layout.ts │ │ │ └── home-resources.ts │ │ ├── interface │ │ │ ├── index.ts │ │ │ └── layout.ts │ │ ├── main.tsx │ │ ├── demo.tsx │ │ └── demo │ │ │ ├── index.tsx │ │ │ └── home │ │ │ ├── index.less │ │ │ └── index.tsx │ └── tsconfig.json └── demo │ ├── src │ ├── vite-env.d.ts │ ├── App.css │ ├── utils │ │ └── index.ts │ ├── main.tsx │ ├── router.ts │ ├── index.css │ ├── App.tsx │ └── components │ │ ├── doc-header │ │ ├── index.less │ │ └── index.tsx │ │ └── home │ │ ├── index.less │ │ └── index.tsx │ └── tsconfig.json ├── .stylelintignore ├── .eslintignore ├── .commitlintrc.js ├── .eslintrc.js ├── .stylelintrc.js ├── scripts ├── build.sh └── start.sh ├── .gitignore ├── demo.html ├── index.html ├── README.md ├── tsconfig.json └── .github └── workflows └── node.yml /packages/taro-demo/env/.env: -------------------------------------------------------------------------------- 1 | API_STATIC=/ -------------------------------------------------------------------------------- /packages/ui/src/components/icon/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/ui/src/components/tab/README.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/taro-demo/env/.env.prod: -------------------------------------------------------------------------------- 1 | API_STATIC=/h5 -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/skeleton/index.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/switch/index.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/ui/src/components/button/test/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/taro-demo/env/.env.development: -------------------------------------------------------------------------------- 1 | API_STATIC=/ -------------------------------------------------------------------------------- /packages/ui/src/components/skeleton/demo/index.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/ui/src/components/switch/demo/index.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | packages/sites/src/docs/layouts/index.less -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .eslintrc.js 2 | tsconfig.json 3 | package.json -------------------------------------------------------------------------------- /packages/sites/src/docs/pages/markdown/design.md: -------------------------------------------------------------------------------- 1 | # 设计资源 2 | 待补充 -------------------------------------------------------------------------------- /packages/demo/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/ui/src/components/icon/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './icon'; -------------------------------------------------------------------------------- /packages/ui/src/components/tab/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from './tab'; -------------------------------------------------------------------------------- /packages/sites/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/toast/index.less: -------------------------------------------------------------------------------- 1 | .toast-container { 2 | 3 | } -------------------------------------------------------------------------------- /packages/ui/src/components/toast/demo/index.less: -------------------------------------------------------------------------------- 1 | .toast-container { 2 | 3 | } -------------------------------------------------------------------------------- /packages/demo/src/App.css: -------------------------------------------------------------------------------- 1 | .app { 2 | width: 100%; 3 | text-align: center; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/popup/index.less: -------------------------------------------------------------------------------- 1 | .operate-area{ 2 | margin-top: 20px; 3 | } -------------------------------------------------------------------------------- /packages/ui/src/components/popup/demo/index.less: -------------------------------------------------------------------------------- 1 | .operate-area{ 2 | margin-top: 20px; 3 | } -------------------------------------------------------------------------------- /packages/ui/src/components/badge/index.ts: -------------------------------------------------------------------------------- 1 | import Badge from './badge' 2 | 3 | export default Badge -------------------------------------------------------------------------------- /packages/ui/src/components/empty/index.ts: -------------------------------------------------------------------------------- 1 | import Empty from './empty' 2 | 3 | export default Empty -------------------------------------------------------------------------------- /packages/ui/src/components/field/index.ts: -------------------------------------------------------------------------------- 1 | import Field from './field' 2 | 3 | export default Field -------------------------------------------------------------------------------- /packages/ui/src/components/form/index.ts: -------------------------------------------------------------------------------- 1 | import Form from './form' 2 | 3 | export default Form -------------------------------------------------------------------------------- /packages/ui/src/components/rate/index.ts: -------------------------------------------------------------------------------- 1 | import Rate from "./rate"; 2 | 3 | export default Rate -------------------------------------------------------------------------------- /.commitlintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "@jd-antelope/commitlint-config-selling" 3 | } 4 | -------------------------------------------------------------------------------- /packages/ui/src/components/button/index.ts: -------------------------------------------------------------------------------- 1 | import Button from './button' 2 | 3 | export default Button -------------------------------------------------------------------------------- /packages/ui/src/components/footer-button/var.less: -------------------------------------------------------------------------------- 1 | 2 | :root, page { 3 | --footer-height: 70px; 4 | } -------------------------------------------------------------------------------- /packages/ui/src/components/image/index.ts: -------------------------------------------------------------------------------- 1 | import Image from "./image"; 2 | 3 | export default Image -------------------------------------------------------------------------------- /packages/ui/src/components/popup/index.ts: -------------------------------------------------------------------------------- 1 | import Popup from "./popup"; 2 | 3 | export default Popup -------------------------------------------------------------------------------- /packages/ui/src/components/price/index.ts: -------------------------------------------------------------------------------- 1 | import Price from "./price"; 2 | 3 | export default Price -------------------------------------------------------------------------------- /packages/ui/src/components/sort/index.ts: -------------------------------------------------------------------------------- 1 | import Sort from "./sort"; 2 | 3 | export default Sort 4 | -------------------------------------------------------------------------------- /packages/ui/src/components/switch/index.ts: -------------------------------------------------------------------------------- 1 | import Switch from "./switch"; 2 | 3 | export default Switch -------------------------------------------------------------------------------- /packages/ui/src/components/toast/index.ts: -------------------------------------------------------------------------------- 1 | import Toast from "./toast"; 2 | 3 | export default Toast -------------------------------------------------------------------------------- /packages/ui/src/components/loading/index.ts: -------------------------------------------------------------------------------- 1 | import Loading from "./loading"; 2 | 3 | export default Loading -------------------------------------------------------------------------------- /packages/ui/src/components/nav-bar/index.ts: -------------------------------------------------------------------------------- 1 | import NavBar from './nav-bar' 2 | 3 | export default NavBar -------------------------------------------------------------------------------- /packages/ui/src/components/overlay/index.ts: -------------------------------------------------------------------------------- 1 | import Overlay from './overlay' 2 | 3 | export default Overlay -------------------------------------------------------------------------------- /packages/sites/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/sites/src/favicon.ico -------------------------------------------------------------------------------- /packages/ui/src/components/overlay/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --overlay-bg-color: rgba(0, 0, 0, .65); 3 | } 4 | -------------------------------------------------------------------------------- /packages/ui/src/components/progress/index.ts: -------------------------------------------------------------------------------- 1 | import Progress from './progress' 2 | 3 | export default Progress -------------------------------------------------------------------------------- /packages/ui/src/components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | import Skeleton from "./skeleton"; 2 | 3 | export default Skeleton -------------------------------------------------------------------------------- /packages/ui/src/components/tag-price/index.ts: -------------------------------------------------------------------------------- 1 | import TagPrice from "./tag-price"; 2 | 3 | export default TagPrice -------------------------------------------------------------------------------- /packages/taro-demo/.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | deploy_versions/ 3 | .temp/ 4 | .rn_temp/ 5 | node_modules/ 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /packages/ui/src/common/constants.ts: -------------------------------------------------------------------------------- 1 | export const BUYIMG = 'https://storage.360buyimg.com/hawley-common/tard-image'; -------------------------------------------------------------------------------- /packages/ui/src/components/search-bar/index.ts: -------------------------------------------------------------------------------- 1 | import SearchBar from './search-bar' 2 | 3 | export default SearchBar -------------------------------------------------------------------------------- /packages/ui/src/components/uploader/index.ts: -------------------------------------------------------------------------------- 1 | import Uploader from "./uploader"; 2 | 3 | export default Uploader 4 | -------------------------------------------------------------------------------- /packages/sites/src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const IMG_PREFIX = 'https://storage.360buyimg.com/hawley-common/tard-image' -------------------------------------------------------------------------------- /packages/ui/src/utils/event-center.ts: -------------------------------------------------------------------------------- 1 | import Event from 'eventemitter3' 2 | 3 | export const eventCenter = new Event(); -------------------------------------------------------------------------------- /packages/ui/src/components/footer-button/index.ts: -------------------------------------------------------------------------------- 1 | import FooterButton from './footer-button' 2 | 3 | export default FooterButton -------------------------------------------------------------------------------- /packages/ui/src/components/input-number/index.ts: -------------------------------------------------------------------------------- 1 | import InputNumber from './input-number' 2 | 3 | export default InputNumber -------------------------------------------------------------------------------- /packages/ui/src/components/datetime-picker/index.ts: -------------------------------------------------------------------------------- 1 | import DatetimePicker from './datetime-picker' 2 | 3 | export default DatetimePicker -------------------------------------------------------------------------------- /packages/ui/src/components/progress-circle/index.ts: -------------------------------------------------------------------------------- 1 | import ProgressCircle from './progress-circle' 2 | 3 | export default ProgressCircle -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/sort/index.less: -------------------------------------------------------------------------------- 1 | .sort-container{ 2 | .doc-body-content__info { 3 | padding-bottom: 10px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/ui/src/components/loading/var.less: -------------------------------------------------------------------------------- 1 | 2 | :root, page { 3 | // loading 4 | --loading-zindex: 1090; 5 | --loading-sp: 50px; 6 | } -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/avatar.png -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/curtain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/curtain.png -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/empty/index.less: -------------------------------------------------------------------------------- 1 | .selfBtn { 2 | height: 80px; 3 | } 4 | 5 | .slc-image-default { 6 | background: none; 7 | } 8 | -------------------------------------------------------------------------------- /packages/ui/src/components/sort/demo/index.less: -------------------------------------------------------------------------------- 1 | .sort-container{ 2 | .doc-body-content__info { 3 | padding-bottom: 10px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/logo_taro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/logo_taro.png -------------------------------------------------------------------------------- /packages/ui/src/components/empty/demo/index.less: -------------------------------------------------------------------------------- 1 | .selfBtn { 2 | height: 80px; 3 | } 4 | 5 | .slc-image-default { 6 | background: none; 7 | } 8 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/badge/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'badge', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/cell/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'cell', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/empty/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'empty', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/field/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'field', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/form/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'form', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/grid/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'grid', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/icon/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'icon', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/image/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'image', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/modal/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'modal', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/popup/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'popup', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/price/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'price', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/rate/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'rate', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/sort/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'sort', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/tab/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'tab', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/toast/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'toast', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/demo/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | import Taro from '@tarojs/taro' 2 | 3 | const isWeb = Taro.getEnv() === Taro.ENV_TYPE.WEB 4 | 5 | export { 6 | isWeb 7 | } 8 | -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/icon-list-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/icon-list-form.png -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/icon-list-hoc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/icon-list-hoc.png -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/icon-list-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/icon-list-view.png -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/button/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'button', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/canvas/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'canvas', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/loading/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'loading', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/nav-bar/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'nav-bar', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/overlay/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'overlay', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/switch/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'switch', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/icon-list-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/icon-list-action.png -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/icon-list-basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/icon-list-basic.png -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/icon-list-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/icon-list-layout.png -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/verification_code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/verification_code.png -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/grid/index.less: -------------------------------------------------------------------------------- 1 | .grid-image { 2 | width: 108px; 3 | height: 28px; 4 | } 5 | 6 | .doc-grid-item-custom { 7 | padding: 24px 0; 8 | } -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/progress/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'progress', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/search-bar/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'search-bar', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/skeleton/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'skeleton', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/tag-price/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'tag-price', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/uploader/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'uploader', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/utils/index.ts: -------------------------------------------------------------------------------- 1 | import Taro from '@tarojs/taro' 2 | 3 | const isWeb = Taro.getEnv() === Taro.ENV_TYPE.WEB 4 | 5 | export { 6 | isWeb 7 | } 8 | -------------------------------------------------------------------------------- /packages/ui/src/components/config-provider/type.ts: -------------------------------------------------------------------------------- 1 | export type ConfigProviderProps = { 2 | className?: string, 3 | style?: any, 4 | [propName: string]: any 5 | } -------------------------------------------------------------------------------- /packages/ui/src/components/grid/demo/index.less: -------------------------------------------------------------------------------- 1 | .grid-image { 2 | width: 108px; 3 | height: 28px; 4 | } 5 | 6 | .doc-grid-item-custom { 7 | padding: 24px 0; 8 | } -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/input-number/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'input-number', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/assets/images/icon-list-navigation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jd-antelope/tard/HEAD/packages/taro-demo/src/assets/images/icon-list-navigation.png -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/cell/index.less: -------------------------------------------------------------------------------- 1 | .left-content { 2 | display: flex; 3 | align-items: center; 4 | 5 | &__text { 6 | padding-right: 12px; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/config-provider/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'config-provider', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/datetime-picker/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'datetime-picker', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/dropdown-menu/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'dropdown-menu', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/footer-button/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'footer-button', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/progress-circle/index.config.ts: -------------------------------------------------------------------------------- 1 | 2 | export default { 3 | navigationBarTitleText: 'progress-circle', 4 | enableShareAppMessage: true 5 | } 6 | -------------------------------------------------------------------------------- /packages/ui/src/components/form/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | // form 3 | --form-round: 16px; 4 | --form-round-bg: var(--color-white); 5 | --form-bg-color: transparent; 6 | } -------------------------------------------------------------------------------- /packages/ui/src/components/rate/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | // price 3 | --rate-icon-size: 20px; 4 | --rate-star-color: #ECECEC; 5 | --rate-star-color-on: #FFCA3E; 6 | } -------------------------------------------------------------------------------- /packages/ui/src/components/cell/demo/index.less: -------------------------------------------------------------------------------- 1 | .left-content { 2 | display: flex; 3 | align-items: center; 4 | 5 | &__text { 6 | padding-right: 12px; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | module.exports = { 3 | "extends": ['selling/taro'], 4 | "rules": { 5 | "no-require-imports": true, 6 | "no-console": false 7 | } 8 | } -------------------------------------------------------------------------------- /packages/ui/src/styles/mixins/libs/position.less: -------------------------------------------------------------------------------- 1 | .mixin-position-absolute () { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | right: 0; 6 | bottom: 0; 7 | } 8 | -------------------------------------------------------------------------------- /packages/taro-demo/config/dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: '"development"' 4 | }, 5 | defineConstants: { 6 | }, 7 | mini: {}, 8 | h5: {} 9 | } 10 | -------------------------------------------------------------------------------- /.stylelintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "stylelint-config-selling", 3 | "rules": { 4 | "selector-type-no-unknown": null, 5 | "selector-pseudo-class-allowed-list": null 6 | } 7 | } -------------------------------------------------------------------------------- /packages/ui/src/components/empty/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | // Empty 3 | --empty-image-size: 200px; 4 | --empty-image-size: 200px; 5 | --empty-image-radius: 24px; 6 | --empty-text-size: 32px; 7 | } -------------------------------------------------------------------------------- /packages/ui/src/common/index.ts: -------------------------------------------------------------------------------- 1 | import Taro from '@tarojs/taro' 2 | 3 | export const CssPrefix = 'tard' 4 | 5 | export const cssPrefix = () => { 6 | return (Taro as any).Current.app?.cssPrefix || 'tard' 7 | } 8 | -------------------------------------------------------------------------------- /packages/sites/src/interface/index.ts: -------------------------------------------------------------------------------- 1 | export interface FooterResources { 2 | title: string 3 | children: Children[] 4 | } 5 | 6 | export interface Children { 7 | title: string, 8 | url: string 9 | } 10 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/home/index.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | navigationBarTitleText: ' ', 3 | enableShareAppMessage: true, 4 | navigationBarBackgroundColor: '#f8f8f8', 5 | backgroundColor: '#f8f8f8' 6 | } -------------------------------------------------------------------------------- /packages/ui/src/styles/mixins/libs/active.less: -------------------------------------------------------------------------------- 1 | /** 2 | * 点击态 3 | */ 4 | .active { 5 | transition: background-color 0.3s; 6 | 7 | &:active { 8 | background-color: var(--color-grey-5); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/taro-demo/project.tt.json: -------------------------------------------------------------------------------- 1 | { 2 | "miniprogramRoot": "./", 3 | "projectname": "taro-demo", 4 | "appid": "testAppId", 5 | "setting": { 6 | "es6": false, 7 | "minified": false 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/ui/src/components/canvas/index.ts: -------------------------------------------------------------------------------- 1 | import { isWeb } from '../../utils' 2 | import CanvasWeapp from './weapp' 3 | import CanvasH5 from './h5' 4 | 5 | const SlCanvas = isWeb ? CanvasH5 : CanvasWeapp 6 | 7 | export default SlCanvas 8 | -------------------------------------------------------------------------------- /packages/ui/src/components/icon/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon, { IconBaseProps } from '../../common/type' 2 | 3 | export interface IconProps extends IconBaseProps, CompCommon { 4 | /** 5 | * 点击事件 6 | */ 7 | onClick?: Function 8 | } 9 | -------------------------------------------------------------------------------- /scripts/build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | #source /etc/profile 4 | 5 | echo 'build' 6 | 7 | yarn build:vite 8 | cd packages/taro-demo 9 | APP_ENV=prod yarn build:h5 10 | cd ../../ 11 | mkdir dist/h5 12 | cp -r packages/taro-demo/dist/* ./dist/h5 -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/button/index.less: -------------------------------------------------------------------------------- 1 | .button-box { 2 | &__item { 3 | margin-right: 38px; 4 | margin-bottom: 38px; 5 | cursor: pointer; 6 | 7 | &:nth-child(3) { 8 | margin-right: 0; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/ui/src/components/button/demo/index.less: -------------------------------------------------------------------------------- 1 | .button-box { 2 | &__item { 3 | margin-right: 38px; 4 | margin-bottom: 38px; 5 | cursor: pointer; 6 | 7 | &:nth-child(3) { 8 | margin-right: 0; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/ui/src/styles/mixins/libs/absolute-center.less: -------------------------------------------------------------------------------- 1 | /** 2 | * 元素居中定位 3 | */ 4 | .mixin-absolute-center (@pos: absolute, @top: 50%) { 5 | position: @pos; 6 | top: @top; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | } 10 | -------------------------------------------------------------------------------- /packages/ui/src/components/price/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --price-height: 50px; 3 | --price-commission-height: 30px; 4 | --price-line-horizontal-padding: var(--spacing-v-sm); 5 | --price-font-size-lg: 60px; 6 | --price-font-size-ml: 48px; 7 | } 8 | -------------------------------------------------------------------------------- /packages/ui/src/components/tag-price/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | // TagPrice 3 | --tag-price-color: var(--color-primary); 4 | --tag-price-padding: 3px 10px; 5 | --tag-price-text-size: 24px; 6 | --tag-price-border-radius: var(--border-radius-sm); 7 | } -------------------------------------------------------------------------------- /packages/ui/src/styles/mixins/libs/placeholder.less: -------------------------------------------------------------------------------- 1 | /** 2 | * 设置placeholder 颜色 3 | */ 4 | .placeholder(@color: @color-grey-3) { 5 | .placeholder { 6 | color: @color; 7 | } 8 | 9 | &::placeholder { 10 | color: @color; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/config-provider/index.less: -------------------------------------------------------------------------------- 1 | .button-box { 2 | &__item { 3 | margin-right: 38px; 4 | margin-bottom: 38px; 5 | cursor: pointer; 6 | 7 | &:nth-child(3) { 8 | margin-right: 0; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/ui/src/components/config-provider/demo/index.less: -------------------------------------------------------------------------------- 1 | .button-box { 2 | &__item { 3 | margin-right: 38px; 4 | margin-bottom: 38px; 5 | cursor: pointer; 6 | 7 | &:nth-child(3) { 8 | margin-right: 0; 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/ui/src/components/switch/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | // switch 3 | --switch-title-color: var(--color-grey-0); 4 | --switch-bg-color: #F2F2F2; 5 | --switch-btn-color: var(--color-white); 6 | --switch-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1); 7 | } -------------------------------------------------------------------------------- /packages/ui/src/styles/mixins/libs/overlay.less: -------------------------------------------------------------------------------- 1 | /** 2 | * 通用的遮罩 3 | */ 4 | .mixin-overlay (@color: var(--overlay-bg-color)) { 5 | top: 0; 6 | left: 0; 7 | width: 100%; 8 | height: 100%; 9 | position: absolute; 10 | background-color: @color; 11 | } 12 | -------------------------------------------------------------------------------- /packages/ui/src/components/cell/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --cell-horizontal-padding: 36px; 3 | --cell-vertical-padding: 20px; 4 | --cell-group-title-padding: var(--cell-vertical-padding) var(--cell-horizontal-padding); 5 | --cell-background-color: var(--color-white); 6 | } 7 | -------------------------------------------------------------------------------- /packages/ui/src/components/grid/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | // Grid 3 | --grid-bg: var(--color-white); 4 | --grid-item-padding-y: 18px; 5 | --grid-item-image-size: 60px; 6 | --grid-item-text-padding: 12px; 7 | --grid-item-text-size: 24px; 8 | --grid-item-width: 100%; 9 | } -------------------------------------------------------------------------------- /packages/taro-demo/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /packages/taro-demo/babel.config.js: -------------------------------------------------------------------------------- 1 | // babel-preset-taro 更多选项和默认值： 2 | // https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md 3 | module.exports = { 4 | presets: [ 5 | ['taro', { 6 | framework: 'react', 7 | ts: true 8 | }] 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /packages/ui/src/utils/init-center.ts: -------------------------------------------------------------------------------- 1 | import Taro from '@tarojs/taro' 2 | import { eventCenter } from './event-center' 3 | 4 | export const initEvent = () => { 5 | if ((Taro as any).Current.app.eventCenter) return 6 | // 声明事件总线 7 | (Taro as any).Current.app.eventCenter = eventCenter 8 | } -------------------------------------------------------------------------------- /packages/ui/src/components/uploader/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --uploader-btn-add-color: var(--color-grey-2); 3 | --uploader-btn-remove-color: --color-white; 4 | --uploader-btn-remove-bg-color: var(--color-grey-1); 5 | --uploader-btn-remove-size: 30px; 6 | --uploader-btn-remove-pos: -10px; 7 | } -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/price/index.less: -------------------------------------------------------------------------------- 1 | .coupon-text { 2 | display: flex; 3 | align-items: center; 4 | margin-right: 8px; 5 | font-size: 28px; 6 | color: #999999; 7 | } 8 | 9 | .coupon-text-r { 10 | margin-left: 8px; 11 | } 12 | 13 | .tard-price__text { 14 | color: #FF2929; 15 | } 16 | -------------------------------------------------------------------------------- /packages/ui/src/components/overlay/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface OverlayProps extends CompCommon { 4 | /** 5 | * 是否展示遮罩层 6 | * @default false 7 | */ 8 | show: boolean 9 | /** 10 | * 点击时触发 11 | */ 12 | onClick?: Function 13 | } -------------------------------------------------------------------------------- /packages/ui/src/components/price/demo/index.less: -------------------------------------------------------------------------------- 1 | .coupon-text { 2 | display: flex; 3 | align-items: center; 4 | margin-right: 8px; 5 | font-size: 28px; 6 | color: #999999; 7 | } 8 | 9 | .coupon-text-r { 10 | margin-left: 8px; 11 | } 12 | 13 | .tard-price__text { 14 | color: #FF2929; 15 | } 16 | -------------------------------------------------------------------------------- /packages/ui/src/styles/mixins/index.less: -------------------------------------------------------------------------------- 1 | @import './libs/overlay'; 2 | @import './libs/line'; 3 | @import './libs/absolute-center'; 4 | @import './libs/flex'; 5 | @import './libs/border'; 6 | @import './libs/active'; 7 | @import './libs/hairline'; 8 | @import './libs/position'; 9 | @import './libs/placeholder'; 10 | -------------------------------------------------------------------------------- /packages/ui/src/components/progress/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --progress-height: 16px; 3 | --progress-text-size: var(--font-size-sm); 4 | --progress-icon-size: var(--font-size-xl); 5 | --progress-inner-bg-color: #F7F7F7; 6 | --progress-bar-bg-color: #78A4F4; 7 | --progress-bar-bg-color-active: var(--color-white); 8 | } 9 | -------------------------------------------------------------------------------- /packages/ui/src/components/datetime-picker/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | // datetime-picker 3 | --datetime-picker-font-size: 28px; 4 | --datetime-picker-btn-font-size: 32px; 5 | --datetime-picker-default-font-color: var(--color-grey-0); 6 | --datetime-picker-gray-font-color: var(--color-grey-1); 7 | --datetime-picker-mask-index: 1; 8 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | ./.vscode 3 | .DS_Store 4 | lerna-debug.log 5 | yarn.lock 6 | package-lock.json 7 | 8 | # Build outputs 9 | dist 10 | lib 11 | 12 | # umi 13 | .umi 14 | .umi-production 15 | .umi-test 16 | .env.local 17 | 18 | # dependencies 19 | /npm-debug.log* 20 | /yarn-error.log 21 | /yarn.lock 22 | /package-lock.json 23 | 24 | -------------------------------------------------------------------------------- /packages/sites/src/interface/layout.ts: -------------------------------------------------------------------------------- 1 | export interface Layout { 2 | routes: LayoutList[] 3 | } 4 | 5 | export interface LayoutList { 6 | nameEn: string 7 | name: string 8 | path: null 9 | isDocs?: boolean 10 | children: Children[] 11 | } 12 | 13 | export interface Children { 14 | name: string 15 | nameEn: string 16 | path: string 17 | } 18 | -------------------------------------------------------------------------------- /packages/ui/src/components/field/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | // field 3 | --field-label-color: var(--color-text); 4 | --field-text-color: var(--color-text); 5 | --field-font-size: var(--font-size-base); 6 | --field-placeholder-color: var(--color-grey-2); 7 | --field-label-h: 60px; 8 | --field-padding-x: 20px; 9 | --field-zindex: 700; 10 | } 11 | -------------------------------------------------------------------------------- /packages/ui/src/components/nav-bar/var.less: -------------------------------------------------------------------------------- 1 | // NavBar 2 | :root, page { 3 | --nav-bar-title-color: var(--color-text); 4 | --nav-bar-link-color: var(--color-text); 5 | --nav-bar-spacing-v: 9px; 6 | --nav-bar-spacing-h: 5px; 7 | --nav-bar-font-size: 32px; 8 | --nav-bar-back-font-size: 28px; 9 | --nav-bar-height: 92px; 10 | --nav-zindex: 800; 11 | } 12 | -------------------------------------------------------------------------------- /packages/ui/src/styles/mixins/libs/line.less: -------------------------------------------------------------------------------- 1 | 2 | .line(@num: 1) { 3 | overflow: hidden; 4 | text-overflow: ellipsis; 5 | } 6 | 7 | .line(@num: 1) when(@num = 1 ){ 8 | white-space: nowrap; 9 | } 10 | 11 | .line(@num: 1) when not(@num = 1 ){ 12 | display: -webkit-box; 13 | -webkit-line-clamp: $num; 14 | -webkit-box-orient: vertical; 15 | } -------------------------------------------------------------------------------- /packages/sites/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import { BrowserRouter } from 'react-router-dom' 4 | import App from './docs/App' 5 | 6 | ReactDOM.render( 7 | 8 | 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ) 14 | -------------------------------------------------------------------------------- /packages/ui/src/components/overlay/overlay.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | @import "./var.less"; 4 | 5 | .@{--css-prefix}-overlay-wrapper { 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | z-index: var(--zindex-common); 10 | width: 100%; 11 | height: 100%; 12 | background-color: var(--overlay-bg-color); 13 | } 14 | -------------------------------------------------------------------------------- /packages/sites/src/demo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import { BrowserRouter } from 'react-router-dom' 4 | import H5Demo from './demo/index' 5 | 6 | ReactDOM.render( 7 | 8 | 9 | 10 | 11 | , 12 | document.getElementById('demo') 13 | ) 14 | -------------------------------------------------------------------------------- /packages/sites/src/demo/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { FC } from 'react' 3 | import { Routes, Route } from 'react-router-dom' 4 | import Home from './home' 5 | import './index.less' 6 | 7 | const H5Page: FC = () => { 8 | return (
9 | 10 | }> 11 | 12 |
) 13 | } 14 | 15 | export default H5Page -------------------------------------------------------------------------------- /packages/demo/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { BrowserRouter } from 'react-router-dom' 3 | import ReactDOM from 'react-dom' 4 | import './index.css' 5 | import App from './App' 6 | 7 | ReactDOM.render( 8 | 9 | 10 | 11 | 12 | , 13 | document.getElementById('app') 14 | ) 15 | -------------------------------------------------------------------------------- /packages/demo/src/router.ts: -------------------------------------------------------------------------------- 1 | const modulesPage = import.meta.glob('/packages/core/**/demo.tsx') 2 | 3 | const routes: any[] = [] 4 | for (const path in modulesPage) { 5 | const name = (/packages\/(.*)\/demo.tsx/.exec(path) as any[])[1] 6 | routes.push({ 7 | path: '/' + name.toLowerCase(), 8 | component: modulesPage[path], 9 | name, 10 | }) 11 | } 12 | 13 | export default routes -------------------------------------------------------------------------------- /scripts/start.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | #source /etc/profile 4 | 5 | echo 'start' 6 | 7 | npx vite serve --mode development --config build/vite/vite.config.ts 8 | 9 | sleep 5 10 | nodeport=` netstat -lntp|grep "7000"|awk '{print $4}'|awk -F":" '{print $4}'` 11 | echo $nodeport 12 | 13 | if [ "$nodeport" ];then 14 | echo -e "\033[32m[ node process start success on dev env ! ]\033[0m" 15 | fi -------------------------------------------------------------------------------- /packages/ui/src/components/badge/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --badge-color: var(--color-white); 3 | --badge-bg-color: var(--color-error); 4 | --badge-bg: var(--badge-bg-color); 5 | --badge-font-size: var(--font-size-xs); 6 | --badge-dot-size: 20px; 7 | --badge-border-radius: calc(var(--badge-font-size) * .7); 8 | --badge-box-shadow: 0 4px 8px 0 rgba(var(--badge-bg-color), .2); 9 | } 10 | -------------------------------------------------------------------------------- /packages/ui/src/components/progress-circle/progress-circle.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | 4 | .@{--css-prefix}-progress-circle { 5 | position: relative; 6 | 7 | &-text { 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | width: 100%; 12 | text-align: center; 13 | transform: translate(-50%, -50%); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /packages/ui/src/components/modal/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --modal-duration: 200ms; 3 | --modal-width: 540px; 4 | --modal-header-text-color: var(--color-text); 5 | --modal-content-text-color: var(--color-text); 6 | --modal-btn-default-color: var(--color-text); 7 | --modal-btn-confirm-color: var(--color-primary); 8 | --modal-bg-color: var(--color-white); 9 | --modal-zindex: 1000; 10 | } 11 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/icon/icons.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | 'main': [ 3 | 'search', 4 | 'loading', 5 | 'loading-ios', 6 | 'loading-size', 7 | 'close' 8 | ], 9 | 'arrow': [ 10 | 'chevron-up', 11 | 'chevron-down', 12 | 'chevron-left', 13 | 'chevron-right' 14 | ], 15 | 'photo': [ 16 | 'camera', 17 | 'video' 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/ui/src/components/icon/demo/icons.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | 'main': [ 3 | 'search', 4 | 'loading', 5 | 'loading-ios', 6 | 'loading-size', 7 | 'close' 8 | ], 9 | 'arrow': [ 10 | 'chevron-up', 11 | 'chevron-down', 12 | 'chevron-left', 13 | 'chevron-right' 14 | ], 15 | 'photo': [ 16 | 'camera', 17 | 'video' 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/ui/src/components/cell/index.ts: -------------------------------------------------------------------------------- 1 | import CellComponent from './cell' 2 | import CellGroup from './group' 3 | 4 | import { CellProps } from './type' 5 | 6 | interface CellInterface { 7 | // eslint-disable-next-line no-undef 8 | (props: CellProps): JSX.Element 9 | 10 | Group: typeof CellGroup 11 | } 12 | 13 | const Cell = CellComponent as CellInterface 14 | Cell.Group = CellGroup 15 | 16 | export default Cell -------------------------------------------------------------------------------- /packages/ui/src/components/grid/index.ts: -------------------------------------------------------------------------------- 1 | import GridComponent from "./grid" 2 | 3 | import GridItem from './grid-item' 4 | 5 | import { GridProps } from './type' 6 | 7 | interface GridInterface { 8 | // eslint-disable-next-line no-undef 9 | (props: GridProps): JSX.Element 10 | 11 | Item: typeof GridItem 12 | } 13 | 14 | const Grid = GridComponent as GridInterface 15 | Grid.Item = GridItem 16 | 17 | export default Grid 18 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tard Demo 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /packages/demo/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /packages/ui/src/components/tab/var.less: -------------------------------------------------------------------------------- 1 | 2 | :root, page { 3 | // Tab 4 | --tab-color: var(--color-text); 5 | --tab-color-active: var(--color-primary); 6 | --tab-font-size: var(--font-size-base); 7 | --tab-line-height: 3px; 8 | --tab-underline-color: var(--color-grey-3); 9 | --tab-bg-color: var(--color-white); 10 | --tab-item-space: 60px; 11 | --tab-item-underline-space: var(--spacing-v-xl); 12 | --tab-pane-min-height: 100px; 13 | } -------------------------------------------------------------------------------- /packages/taro-demo/config/prod.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: '"production"' 4 | }, 5 | defineConstants: { 6 | }, 7 | mini: {}, 8 | h5: { 9 | /** 10 | * 如果h5端编译后体积过大，可以使用webpack-bundle-analyzer插件对打包体积进行分析。 11 | * 参考代码如下： 12 | * webpackChain (chain) { 13 | * chain.plugin('analyzer') 14 | * .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, []) 15 | * } 16 | */ 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /packages/ui/src/components/tag-price/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface TagPriceProps extends CompCommon { 4 | /** 5 | * 价格标签颜色 6 | * @default: '#FF2929' 7 | */ 8 | color?: string; 9 | /** 10 | * 价格标签title 11 | * @default: '渠道奖励' 12 | */ 13 | title?: string; 14 | /** 15 | * 价格 16 | */ 17 | price: string; 18 | /** 19 | * 字体大小 20 | * @default 24 21 | */ 22 | size?: number; 23 | } 24 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/field/index.less: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 100vw; 3 | padding: 0; 4 | .doc-body { 5 | &-content-tip { 6 | padding-left: 36px; 7 | } 8 | } 9 | .input-group .tard-field:not(:last-child)::after { 10 | position: absolute; 11 | box-sizing: border-box; 12 | content: ' '; 13 | pointer-events: none; 14 | right: 36px; 15 | bottom: 0; 16 | left: 36px; 17 | border-bottom: 2px solid rgba(239,239,239,1); 18 | } 19 | } -------------------------------------------------------------------------------- /packages/ui/src/components/field/demo/index.less: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 100vw; 3 | padding: 0; 4 | .doc-body { 5 | &-content-tip { 6 | padding-left: 36px; 7 | } 8 | } 9 | .input-group .tard-field:not(:last-child)::after { 10 | position: absolute; 11 | box-sizing: border-box; 12 | content: ' '; 13 | pointer-events: none; 14 | right: 36px; 15 | bottom: 0; 16 | left: 36px; 17 | border-bottom: 2px solid rgba(239,239,239,1); 18 | } 19 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | Tard 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /packages/sites/src/docs/App.tsx: -------------------------------------------------------------------------------- 1 | import { Route, Routes } from 'react-router-dom' 2 | import Portal from './pages/portal' 3 | import LayoutComponent from './layouts' 4 | import './index.less' 5 | 6 | export default function IndexPage () { 7 | return ( 8 |
9 | 10 | } /> 11 | } 13 | > 14 | 15 | 16 |
17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /packages/ui/src/components/form/form.less: -------------------------------------------------------------------------------- 1 | 2 | @import "../../variable.less"; 3 | @import "../../mixins/index.less"; 4 | @import "./var.less"; 5 | 6 | .@{--css-prefix}-form { 7 | display: block; 8 | background-color: var(--form-bg-color); 9 | 10 | &.@{--css-prefix}-form-border { 11 | .mixin-hairline-top-bottom(#f2f2f2); 12 | } 13 | 14 | &.@{--css-prefix}-form-round { 15 | border-radius: var(--form-round); 16 | background: var(--form-round-bg); 17 | overflow: hidden; 18 | } 19 | } -------------------------------------------------------------------------------- /packages/ui/src/components/loading/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface LoadingProps extends CompCommon { 4 | /** 5 | * 颜色 6 | */ 7 | color?: string 8 | /** 9 | * 类型 10 | * @default default 11 | */ 12 | type?: 'default' | 'ios' | 'loading' 13 | /** 14 | * 是否有全局定位 15 | */ 16 | overlay?: boolean 17 | /** 18 | * loading大小 19 | */ 20 | size?: number 21 | /** 22 | * 点击事件 23 | */ 24 | onClick?: Function | null 25 | } 26 | -------------------------------------------------------------------------------- /packages/ui/src/components/skeleton/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface SkeletonProps extends CompCommon { 4 | /** 5 | * 宽 6 | */ 7 | width?: number 8 | /** 9 | * 高 10 | */ 11 | height?: number 12 | /** 13 | * 圆角类型 14 | */ 15 | type?: Type | string 16 | } 17 | 18 | enum Type { 19 | default = 'default', 20 | /** 21 | * 圆角 22 | */ 23 | rounded = 'rounded', 24 | /** 25 | * 直角 26 | */ 27 | squared = 'squared' 28 | } 29 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/datetime-picker/index.less: -------------------------------------------------------------------------------- 1 | .datetime-container { 2 | .comp-items{ 3 | position: relative; 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | margin: 0 0 20px; 8 | padding: 0 40px; 9 | color: #333; 10 | font-weight: 500; 11 | line-height: 88px; 12 | background: #fff; 13 | border-radius: 8px; 14 | -webkit-transition: background 0.3s; 15 | transition: background 0.3s; 16 | cursor: pointer; 17 | } 18 | } -------------------------------------------------------------------------------- /packages/ui/src/components/datetime-picker/demo/index.less: -------------------------------------------------------------------------------- 1 | .datetime-container { 2 | .comp-items{ 3 | position: relative; 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | margin: 0 0 20px; 8 | padding: 0 40px; 9 | color: #333; 10 | font-weight: 500; 11 | line-height: 88px; 12 | background: #fff; 13 | border-radius: 8px; 14 | -webkit-transition: background 0.3s; 15 | transition: background 0.3s; 16 | cursor: pointer; 17 | } 18 | } -------------------------------------------------------------------------------- /packages/ui/src/components/popup/var.less: -------------------------------------------------------------------------------- 1 | 2 | :root, page { 3 | // popup 4 | --popup-mask-timer: 150ms; 5 | --popup-contianer-timer: 200ms; 6 | --popup-height-min: 600px; 7 | --popup-height-max: 950px; 8 | --popup-header-height: 72px; 9 | --popup-height: 72px; 10 | --popup-header-position-right: 48px; 11 | --popup-header-close-width: 40px; 12 | --popup-header-close-height: 40px; 13 | --popup-close-btn-width: 36px; 14 | --popup-layout-zindex: 1000; 15 | --popup-close-btn-color: var(--color-grey-2); 16 | } -------------------------------------------------------------------------------- /packages/ui/src/components/empty/type.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import CompCommon from '../../common/type' 4 | 5 | export interface EmptyProps extends CompCommon { 6 | /** 7 | * 结果提示所需要的图片src 8 | */ 9 | src?: string 10 | /** 11 | * 结果提示所需要的文案 12 | */ 13 | text?: string 14 | /** 15 | * 按钮配置属性文案 16 | */ 17 | btnText?: string 18 | /** 19 | * 按钮点击回调 20 | */ 21 | onClick?: Function 22 | /** 23 | * 图片圆角类型 angle, circle 24 | */ 25 | rect: string 26 | 27 | } 28 | -------------------------------------------------------------------------------- /packages/ui/src/components/input-number/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --input-number-btn-horizontal-padding: 12px; 3 | --input-number-btn-padding-lg: 20px; 4 | --input-number-text-color: var(--color-text); 5 | --input-number-font-size: var(--font-size-base); 6 | --input-number-font-size-lg: var(--font-size-xl); 7 | --input-number-btn-color: var(--color-primary); 8 | --input-number-btn-size: 30px; 9 | --input-number-btn-size-lg: 36px; 10 | --input-number-width-min: 80px; 11 | --input-number-width-min-lg: 120px; 12 | } 13 | -------------------------------------------------------------------------------- /packages/ui/src/components/dropdown-menu/index.ts: -------------------------------------------------------------------------------- 1 | import DropdownMenuComponent from './dropdown-menu' 2 | 3 | import DropdownMenuItem from './item' 4 | 5 | import { DropdownMenuProps } from './type' 6 | 7 | interface DropdownMenuInterface { 8 | // eslint-disable-next-line no-undef 9 | (props: DropdownMenuProps): JSX.Element 10 | 11 | Item: typeof DropdownMenuItem 12 | } 13 | 14 | 15 | const DropdownMenu = DropdownMenuComponent as DropdownMenuInterface 16 | DropdownMenu.Item = DropdownMenuItem 17 | 18 | export default DropdownMenu 19 | -------------------------------------------------------------------------------- /packages/taro-demo/project.private.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "condition": { 3 | "miniprogram": { 4 | "list": [ 5 | { 6 | "name": "", 7 | "pathName": "pages/dropdown-menu/index", 8 | "query": "", 9 | "scene": null 10 | } 11 | ] 12 | } 13 | }, 14 | "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html" 15 | } -------------------------------------------------------------------------------- /packages/ui/src/components/popup/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface PopupProps extends CompCommon { 4 | /** 5 | * 组件标题 6 | */ 7 | title?: string 8 | /** 9 | * 是否允许外部点击关闭 10 | * @default false 11 | */ 12 | closeOnclickOverlay?: boolean 13 | /** 14 | * 头部标题的对齐方式 15 | * @default center 16 | */ 17 | titleAlign?: string 18 | /** 19 | * 组件是否显示 20 | */ 21 | visible: boolean 22 | /** 23 | * 组件关闭回调 24 | * @default false 25 | */ 26 | onClose?: Function 27 | 28 | } 29 | -------------------------------------------------------------------------------- /packages/ui/src/components/toast/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --toast-padding-has-img: 60px; 3 | --toast-padding-no-img: 36px; 4 | --toast-min-width: 248px; 5 | --toast-max-width: 460px; 6 | --toast-image-size: 64px; 7 | --toast-font-size: var(--font-size-base); 8 | --toast-icon-size: 64px; 9 | --toast-slot-vertical-padding: 30px; 10 | --toast-slot-horizontal-padding: 32px; 11 | --toast-icon-margin--top: 24px; 12 | --toast-color: var(--color-white); 13 | --toast-bg-color: rgba(0, 0, 0, 0.8); 14 | --toast-custom-padding-bottom: 40px; 15 | } -------------------------------------------------------------------------------- /packages/ui/src/common/type.d.ts: -------------------------------------------------------------------------------- 1 | import { CSSProperties } from 'react' 2 | 3 | export interface CompCommon { 4 | className?: string 5 | 6 | customStyle?: string | CSSProperties 7 | 8 | customizeStyle?: string 9 | } 10 | 11 | export interface IconBaseProps2 extends CompCommon { 12 | value: string 13 | 14 | color?: string 15 | } 16 | 17 | export interface IconBaseProps extends CompCommon { 18 | value: string 19 | 20 | color?: string 21 | 22 | prefixClass?: string 23 | 24 | size?: number | string 25 | } 26 | 27 | export default CompCommon 28 | -------------------------------------------------------------------------------- /packages/ui/src/components/search-bar/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --search-bar-font-size: 28px; 3 | --search-bar-input-height: 68px; 4 | --search-bar-input-padding: 44px; 5 | --search-bar-btn-padding-left: 36px; 6 | --search-bar-placeholder-padding: 14px; 7 | --search-bar-input-bg-color: #F7F8FA; 8 | --search-bar-input-color: var(--color-text); 9 | --search-bar-placeholder-color: var(--color-text-placeholder); 10 | --search-bar-vertical-padding: 24px; 11 | --search-bar-horizontal-padding: 36px; 12 | --search-bar-input-radius: 40px; 13 | } 14 | -------------------------------------------------------------------------------- /packages/ui/src/components/modal/index.ts: -------------------------------------------------------------------------------- 1 | import ModalComponent from './modal' 2 | import Action from './action' 3 | import Header from './header' 4 | import Content from './content' 5 | import { ModalProps } from './type' 6 | interface ModalInterface { 7 | (props: ModalProps): JSX.Element 8 | 9 | Action: typeof Action 10 | Header: typeof Header 11 | Content: typeof Content 12 | } 13 | 14 | const Modal = ModalComponent as ModalInterface 15 | Modal.Header = Header 16 | Modal.Content = Content 17 | Modal.Action = Action 18 | 19 | export default Modal 20 | -------------------------------------------------------------------------------- /packages/ui/src/components/badge/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface BadgeProps extends CompCommon { 4 | /** 5 | * 角标红点 6 | * @default false 7 | */ 8 | dot?: boolean 9 | /** 10 | * 角标内容 11 | */ 12 | value?: string | number 13 | /** 14 | * 角标最大值 15 | * @default 99 16 | */ 17 | maxValue?: number 18 | /** 19 | * 徽标背景颜色 20 | * @default 主题色 21 | */ 22 | color?: string 23 | /** 24 | * 自定义内容 25 | */ 26 | content?: React.ReactNode 27 | } 28 | 29 | -------------------------------------------------------------------------------- /packages/ui/src/components/dropdown-menu/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --dropdown-menu-background-color: var(--color-white); 3 | --dropdown-menu-title-font-size: var(--font-size-base); 4 | --dropdown-menu-title-text-color: var(--color-text); 5 | --dropdown-menu-height: 80px; 6 | --dropdown-menu-box-shadow: 0 2px 12px #EBEDF0; 7 | --dropdown-item-z-index: 10; 8 | --dropdown-item-border-radius: 16px; 9 | --dropdown-menu-active-background-color: #F4F6FA; 10 | --dropdown-overlay-bg-color: var(--overlay-bg-color); 11 | --dropdown-overlay-z-index: 99; 12 | } 13 | 14 | -------------------------------------------------------------------------------- /packages/demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/sites/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": false, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["./src"] 20 | } 21 | -------------------------------------------------------------------------------- /packages/ui/src/components/modal/header/index.tsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames' 2 | import React, { FC } from 'react' 3 | import { View } from '@tarojs/components' 4 | import { ModalContentProps } from '../type' 5 | import { cssPrefix } from '../../../common' 6 | 7 | const ModalHeader: FC = ({ children, className }) => { 8 | const CssPrefix = cssPrefix() 9 | const rootClass = classNames(`${CssPrefix}-modal__header`, className) 10 | return {children} 11 | 12 | } 13 | 14 | ModalHeader.prototype.displayName = 'ModalHeader' 15 | 16 | export default ModalHeader -------------------------------------------------------------------------------- /packages/demo/src/App.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-curly-brace-presence */ 2 | import { HashRouter, Route, Routes } from 'react-router-dom' 3 | import { useState } from 'react' 4 | import routes from './router' 5 | import Home from './components/home' 6 | import './App.css' 7 | 8 | function App () { 9 | return ( 10 |
11 | 12 | 13 | } 16 | /> 17 | 18 | 1111 19 | 20 | 21 |
22 | ) 23 | } 24 | 25 | export default App 26 | -------------------------------------------------------------------------------- /packages/ui/src/components/canvas/type.ts: -------------------------------------------------------------------------------- 1 | 2 | import CompCommon from '../../common/type' 3 | 4 | export interface CanvasProps extends CompCommon { 5 | /** 6 | * canvas唯一标识 7 | */ 8 | id?: string 9 | /** 10 | * 宽度 11 | */ 12 | width?: number 13 | /** 14 | * 高度 15 | */ 16 | height?: number 17 | /** 18 | * 是否有遮照 19 | */ 20 | overlay?: boolean 21 | /** 22 | * 是否打开 23 | */ 24 | visible: boolean 25 | /** 26 | * 关闭回调 27 | */ 28 | onClose?: Function 29 | /** 30 | * 内容方法 31 | * @param ctx canvas实例 32 | * @param dpr 数字计算 33 | */ 34 | contentCallback?: (ctx, dpr) => void 35 | } 36 | -------------------------------------------------------------------------------- /packages/taro-demo/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | declare module '*.png'; 5 | declare module '*.gif'; 6 | declare module '*.jpg'; 7 | declare module '*.jpeg'; 8 | declare module '*.svg'; 9 | declare module '*.css'; 10 | declare module '*.less'; 11 | declare module '*.scss'; 12 | declare module '*.sass'; 13 | declare module '*.styl'; 14 | 15 | declare namespace NodeJS { 16 | interface ProcessEnv { 17 | TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd' 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /packages/ui/src/components/icon/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | 2 | # Icon 图标 3 | ### 介绍 4 | 基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用 5 | ### 引入 6 | ```js 7 | import { Icon } from 'tard' 8 | ``` 9 | ## 代码演示 10 | ### 基础用法 11 | ```js 12 | 13 | ``` 14 | ## API 15 | ### Props 16 | | 属性 | 说明 | 类型 | 默认值 | 17 | | ---- | ---- | ---- | ---- | 18 | | value | 图标名称 | string | IconBaseProps | - | 19 | | color | 图标颜色 | string | inherit | 20 | | size | 图标颜色 | string | inherit | 21 | 22 | ### Events 23 | | 事件名 | 说明 | 回调参数 | 24 | | ---- | ---- | ---- | 25 | | onClick | 点击事件 | CommonEventFunction | 26 | 27 | 28 | -------------------------------------------------------------------------------- /packages/ui/src/components/button/var.less: -------------------------------------------------------------------------------- 1 | :root, page { 2 | --button-height: 76px; 3 | --button-default-v-padding: 40px; 4 | --button-min-width: 192px; 5 | --button-min-width-mini: 120px; 6 | --button-height-mini: 32px; 7 | --button-mini-text-size: 24px; 8 | --button-mini-v-padding: 6px; 9 | --button-min-width-small: 144px; 10 | --button-height-small: 56px; 11 | --button-small-text-size: var(--font-size-base); 12 | --button-small-v-padding: 24px; 13 | --button-min-large-width: 360px; 14 | --button-large-height: 96px; 15 | --button-large-text-size: var(--font-size-lg); 16 | --button-large-v-padding: 48px; 17 | --button-radius: var(--border-radius-md); 18 | } 19 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/form/index.less: -------------------------------------------------------------------------------- 1 | .form-container { 2 | .form-submit { 3 | padding: 34px 36px; 4 | font-size: 0; 5 | 6 | &-button { 7 | border-radius: 8px; 8 | 9 | .tard-button__text { 10 | height: 80px; 11 | line-height: 80px; 12 | } 13 | } 14 | } 15 | 16 | .input-group .tard-field:not(:last-child)::after { 17 | content: " "; 18 | position: absolute; 19 | right: 36px; 20 | bottom: 0; 21 | left: 36px; 22 | box-sizing: border-box; 23 | border-bottom: 2px solid rgba(239, 239, 239, 1); 24 | pointer-events: none; 25 | } 26 | 27 | .pd-0 { 28 | padding-bottom: 0; 29 | } 30 | } 31 | 32 | -------------------------------------------------------------------------------- /packages/ui/src/components/modal/content/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { FC } from 'react' 3 | import classNames from 'classnames' 4 | import { ScrollView } from '@tarojs/components' 5 | import { ModalContentProps } from '../type' 6 | import { cssPrefix } from '../../../common' 7 | 8 | const ModalContent: FC = ({ children, className }) => { 9 | const CssPrefix = cssPrefix() 10 | const rootClass = classNames(`${CssPrefix}-modal__content`, className) 11 | return ( 12 | 13 | {children} 14 | 15 | ) 16 | } 17 | 18 | ModalContent.prototype.displayName = 'ModalContent' 19 | 20 | export default ModalContent -------------------------------------------------------------------------------- /packages/ui/src/components/progress-circle/type.ts: -------------------------------------------------------------------------------- 1 | 2 | import CompCommon from '../../common/type' 3 | 4 | export interface ProgressCircleProps extends CompCommon { 5 | /** 6 | * 百分比 7 | * @default 0 8 | */ 9 | percent: number 10 | /** 11 | * 圆环直径 12 | * @default 200 13 | */ 14 | size: number 15 | /** 16 | * 进度条颜色 17 | * @default #DC8D20 18 | */ 19 | color: string 20 | /** 21 | * 轨道背景颜色 22 | * @default #EFEFEF 23 | */ 24 | layerColor: string 25 | /** 26 | * 文字 27 | */ 28 | text?: string 29 | /** 30 | * 进度条宽度，单位为px 31 | * @default 4 32 | */ 33 | strokeWidth: number 34 | } -------------------------------------------------------------------------------- /packages/ui/src/components/form/demo/index.less: -------------------------------------------------------------------------------- 1 | .form-container { 2 | .form-submit { 3 | padding: 34px 36px; 4 | font-size: 0; 5 | 6 | &-button { 7 | border-radius: 8px; 8 | 9 | .tard-button__text { 10 | height: 80px; 11 | line-height: 80px; 12 | } 13 | } 14 | } 15 | 16 | .input-group .tard-field:not(:last-child)::after { 17 | content: " "; 18 | position: absolute; 19 | right: 36px; 20 | bottom: 0; 21 | left: 36px; 22 | box-sizing: border-box; 23 | border-bottom: 2px solid rgba(239, 239, 239, 1); 24 | pointer-events: none; 25 | } 26 | 27 | .pd-0 { 28 | padding-bottom: 0; 29 | } 30 | } 31 | 32 | -------------------------------------------------------------------------------- /packages/ui/src/components/rate/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface RateProps extends CompCommon { 4 | /** 5 | * 评分星星大小 6 | * @default 20 7 | */ 8 | size?: number; 9 | /** 10 | * 当前评分,开发者需要通过 onChange 事件来更新 value 值，必填 11 | */ 12 | value?: number; 13 | /** 14 | * 最大评分 15 | * @default 5 16 | */ 17 | max?: number; 18 | /** 19 | * 元素间隔,单位根据环境自动转为 rpx 或 rem 20 | * @default 5 21 | */ 22 | margin?: number; 23 | /** 24 | * 选中元素的颜色 25 | */ 26 | activeColor?: string 27 | /** 28 | * 输入框值改变时触发的事件，开发者需要通过 onChange 事件来更新 value 值变化，但不填写 onChange 函数时，该组件只读 29 | */ 30 | onChange?: Function; 31 | 32 | } 33 | -------------------------------------------------------------------------------- /packages/ui/src/components/empty/empty.less: -------------------------------------------------------------------------------- 1 | 2 | @import "../../variable.less"; 3 | @import "../../mixins/index.less"; 4 | @import "./var.less"; 5 | 6 | .@{--css-prefix}-empty { 7 | .flex-center(); 8 | .flex-direction(column); 9 | 10 | &__image { 11 | width: var(--empty-image-size); 12 | height: var(--empty-image-size); 13 | margin-bottom: var(--spacing-v-sm); 14 | } 15 | 16 | &__image__angle{ 17 | border-radius: var(--empty-image-radius); 18 | } 19 | &__image__circle{ 20 | border-radius: 50%; 21 | } 22 | 23 | &__text { 24 | margin-bottom: var(--spacing-v-lg); 25 | font-size: var(--empty-text-size); 26 | color: var(--color-grey-0); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/ui/src/components/overlay/overlay.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { FC } from 'react' 3 | import { OverlayProps } from './type' 4 | import { cssPrefix } from '../../common' 5 | import CompContainer from '../../common/comp-container' 6 | 7 | const Overlay: FC = ({ show = false, onClick = () => {}, children, customizeStyle }) => { 8 | const CssPrefix = cssPrefix() 9 | return onClick()} 14 | > 15 | {children} 16 | 17 | 18 | } 19 | 20 | export default Overlay -------------------------------------------------------------------------------- /packages/demo/src/components/doc-header/index.less: -------------------------------------------------------------------------------- 1 | .doc-header { 2 | display: flex; 3 | align-items: center; 4 | height: 60px; 5 | line-height: 60px; 6 | background: #fff; 7 | position: fixed; 8 | top: 0; 9 | width: calc(100vw - 20px); 10 | right: 0; 11 | padding: 10px; 12 | z-index: 99; 13 | 14 | &__title { 15 | position: relative; 16 | height: 60px; 17 | color: #333; 18 | font-size: 36px; 19 | font-weight: 500; 20 | display: flex; 21 | align-items: center; 22 | margin: auto; 23 | } 24 | 25 | &__box { 26 | height: 80px 27 | } 28 | 29 | &__icon{ 30 | cursor: pointer; 31 | position: absolute; 32 | left: 14px; 33 | top: 14px; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/taro-demo/src/components/doc-header/index.less: -------------------------------------------------------------------------------- 1 | .doc-header { 2 | display: flex; 3 | align-items: center; 4 | height: 60px; 5 | line-height: 60px; 6 | background: #fff; 7 | position: fixed; 8 | top: 0; 9 | width: calc(100vw - 20px); 10 | right: 0; 11 | padding: 10px; 12 | z-index: 99; 13 | 14 | &__title { 15 | position: relative; 16 | height: 60px; 17 | color: #333; 18 | font-size: 36px; 19 | font-weight: 500; 20 | display: flex; 21 | align-items: center; 22 | margin: auto; 23 | } 24 | 25 | &__box { 26 | height: 80px 27 | } 28 | 29 | &__icon{ 30 | cursor: pointer; 31 | position: absolute; 32 | left: 14px; 33 | top: 14px; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/ui/src/components/loading/loading.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | @import "./var.less"; 4 | 5 | @keyframes rotate { 6 | 0% { 7 | transform: rotate(0); 8 | } 9 | 100% { 10 | transform: rotate(360deg); 11 | } 12 | } 13 | 14 | .@{--css-prefix}-loading { 15 | overflow: hidden; 16 | &-icon { 17 | width: var(--loading-sp); 18 | height: var(--loading-sp); 19 | animation: rotate 1s linear infinite; 20 | font-size: var(--loading-sp); 21 | } 22 | } 23 | 24 | .@{--css-prefix}-loading-flex { 25 | position: fixed; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 100vh; 30 | z-index: var(--zindex-loading); 31 | .flex-center () 32 | } 33 | -------------------------------------------------------------------------------- /packages/ui/src/components/form/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | import { CommonEvent } from '@tarojs/components/types/common' 3 | 4 | type FormFunction = (event: CommonEvent) => void 5 | 6 | export interface FormProps extends CompCommon { 7 | /** 8 | * 是否返回 formId 用于发送模板消息 9 | * @default false 10 | */ 11 | reportSubmit?: boolean 12 | /** 13 | * 是否是卡片模式 14 | * @default false 15 | */ 16 | round?: boolean 17 | /** 18 | * 是否需要border 19 | * @default false 20 | */ 21 | border?: boolean 22 | /** 23 | * 携带 form 中的数据触发 submit 事件，由于小程序组件化的限制，onSubmit 事件获得的 event 中的 event.detail.value 始终为空对象，开发者要获取数据，可以自行在页面的 state 中获取 24 | */ 25 | onSubmit?: FormFunction 26 | /** 27 | * 表单重置时会触发 reset 事件 28 | */ 29 | onReset?: FormFunction 30 | } 31 | -------------------------------------------------------------------------------- /packages/ui/src/components/skeleton/skeleton.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | 4 | @keyframes skeleton-loading { 5 | 0% { 6 | background-position: 100% 50%; 7 | } 8 | 100% { 9 | background-position: 0 50%; 10 | } 11 | } 12 | 13 | .@{--css-prefix}-skeleton { 14 | padding: var(--spacing-h-sm) var(--spacing-h-lg); 15 | overflow: hidden; 16 | &-box { 17 | background-image: linear-gradient( 18 | 90deg,rgba(190,190,190,.2) 25%,rgba(129,129,129,.24) 37%,rgba(190,190,190,.2) 63%); 19 | border-radius: var(--border-radius-sm); 20 | background-size: 400% 100%; 21 | animation: skeleton-loading 1.4s ease-in-out infinite; 22 | } 23 | &-squared { 24 | border-radius: 0; 25 | } 26 | &-rounded { 27 | border-radius: 50%; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/ui/src/components/image/image.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | 4 | @keyframes buffer { 5 | 0% { 6 | opacity: 0; 7 | } 8 | 40% { 9 | opacity: 0; 10 | } 11 | 100% { 12 | opacity: 1; 13 | } 14 | } 15 | 16 | .@{--css-prefix}-image-default { 17 | background: var(--color-grey-3); 18 | animation: buffer 0.5s; 19 | } 20 | 21 | .@{--css-prefix}-image-loading { 22 | width: 100%; 23 | height: 100%; 24 | } 25 | 26 | .@{--css-prefix}-image-none { 27 | background: var(--color-grey-3); 28 | animation: buffer 0.5s; 29 | } 30 | 31 | .@{--css-prefix}-image-error { 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | color: var(--color-grey-2); 36 | background: var(--color-grey-3); 37 | font-size: 24px; 38 | } 39 | -------------------------------------------------------------------------------- /packages/ui/src/components/switch/switch.less: -------------------------------------------------------------------------------- 1 | 2 | @import "../../variable.less"; 3 | @import "../../mixins/index.less"; 4 | @import "./var.less"; 5 | 6 | .@{--css-prefix}-switch { 7 | width: 90px; 8 | height: 32px; 9 | position: relative; 10 | 11 | &__bg { 12 | background: var(--switch-bg-color); 13 | border-radius: 19px; 14 | } 15 | 16 | &__btn { 17 | position: absolute; 18 | width: 44px; 19 | height: 44px; 20 | left: 0; 21 | top: -6px; 22 | box-shadow: var(--switch-box-shadow); 23 | border-radius: 50%; 24 | background: var(--switch-btn-color); 25 | } 26 | 27 | &__active { 28 | .@{--css-prefix}-switch__bg { 29 | background: var(--color-primary); 30 | } 31 | 32 | .@{--css-prefix}-switch__btn { 33 | transform: translateX(46px); 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/ui/src/components/skeleton/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Skeleton 骨架屏 3 | ### 介绍 4 | 该标签设计了简单的骨架结构 5 | ### 引入 6 | ```js 7 | import { Skeleton } from 'tard' 8 | ``` 9 | ## 代码演示 10 | ### 基础用法 11 | ```js 12 | 13 | ``` 14 | 15 | ### 自定义宽高 16 | 可以设置 `width` 和 `height` 属性去自定义宽高 17 | ```js 18 | 19 | ``` 20 | 21 | ### 圆角 22 | 修改属性 `type=rounded` 时可将元素变成圆角 23 | ```js 24 | 25 | ``` 26 | 27 | ### 直角 28 | 修改属性 `type=squared` 时可将元素变成直角 29 | ```js 30 | 31 | ``` 32 | 33 | 34 | ## API 35 | ### Props 36 | | 属性 | 说明 | 类型 | 默认值 | 37 | | ---- | ---- | ---- | ---- | 38 | | width | 宽 | number | 24 | 39 | | height | 高 | number | 24 | 40 | | type | 圆角类型 | default｜rounded｜squared | default | 41 | 42 | -------------------------------------------------------------------------------- /packages/ui/src/components/modal/action/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import classNames from 'classnames' 3 | import { View } from '@tarojs/components' 4 | import { ModalActionProps } from '../type' 5 | import { cssPrefix } from '../../../common' 6 | 7 | const ModalAction: FC = ({ isSimple = false, className, children }) => { 8 | const CssPrefix = cssPrefix() 9 | const rootClass = classNames( 10 | `${CssPrefix}-modal__footer`, 11 | { 12 | [`${CssPrefix}-modal__footer--simple`]: isSimple 13 | }, 14 | className 15 | ) 16 | 17 | return ( 18 | 19 | {children} 20 | 21 | ) 22 | } 23 | 24 | ModalAction.prototype.displayName = 'ModalAction' 25 | 26 | export default ModalAction 27 | 28 | -------------------------------------------------------------------------------- /packages/ui/src/components/skeleton/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | 2 | # Skeleton 骨架屏 3 | ### 介绍 4 | 该标签设计了简单的骨架结构 5 | ### 引入 6 | ```js 7 | import { Skeleton } from 'tard' 8 | ``` 9 | ## 代码演示 10 | ### 基础用法 11 | ```js 12 | 13 | ``` 14 | 15 | ### 自定义宽高 16 | 可以设置 `width` 和 `height` 属性去自定义宽高 17 | ```js 18 | 19 | ``` 20 | 21 | ### 圆角 22 | 修改属性 `type=rounded` 时可将元素变成圆角 23 | ```js 24 | 25 | ``` 26 | 27 | ### 直角 28 | 修改属性 `type=squared` 时可将元素变成直角 29 | ```js 30 | 31 | ``` 32 | 33 | 34 | ## API 35 | ### Props 36 | | 属性 | 说明 | 类型 | 默认值 | 37 | | ---- | ---- | ---- | ---- | 38 | | width | 宽 | number | 24 | 39 | | height | 高 | number | 24 | 40 | | type | 圆角类型 | default｜rounded｜squared | default | 41 | 42 | -------------------------------------------------------------------------------- /packages/taro-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2017", 4 | "module": "commonjs", 5 | "removeComments": false, 6 | "preserveConstEnums": true, 7 | "moduleResolution": "node", 8 | "experimentalDecorators": true, 9 | "noImplicitAny": false, 10 | "allowSyntheticDefaultImports": true, 11 | "outDir": "lib", 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "strictNullChecks": true, 15 | "sourceMap": true, 16 | "baseUrl": ".", 17 | "rootDir": ".", 18 | "jsx": "react-jsx", 19 | "allowJs": true, 20 | "resolveJsonModule": true, 21 | "typeRoots": [ 22 | "node_modules/@types" 23 | ] 24 | }, 25 | "include": ["./src", "global.d.ts"], 26 | "exclude": [ 27 | "node_modules", 28 | "dist" 29 | ], 30 | "compileOnSave": false 31 | } 32 | -------------------------------------------------------------------------------- /packages/ui/src/components/config-provider/index.ts: -------------------------------------------------------------------------------- 1 | import Taro from '@tarojs/taro' 2 | import ConfigProviderComponent from './config-provider' 3 | import { ConfigProviderProps } from './type' 4 | 5 | interface ConfigProviderInterface { 6 | // eslint-disable-next-line no-undef 7 | (props: ConfigProviderProps): JSX.Element 8 | config: Function 9 | } 10 | 11 | const config = ({ 12 | theme = {}, 13 | cssPrefix = 'tard' 14 | }) => { 15 | if ((Taro as any).Current.app.eventCenter) { 16 | (Taro as any).Current.app.eventCenter.emit('THEME_CHANGE', theme) 17 | } 18 | (Taro as any).Current.app.themeParams = theme; 19 | (Taro as any).Current.app.cssPrefix = cssPrefix; 20 | }; 21 | 22 | const ConfigProvider = ConfigProviderComponent as ConfigProviderInterface 23 | ConfigProvider.config = config 24 | 25 | export default ConfigProvider as ConfigProviderInterface 26 | -------------------------------------------------------------------------------- /packages/ui/src/components/toast/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface ToastProps extends CompCommon { 4 | /** 5 | * 是否展示元素 6 | * @default false 7 | */ 8 | visible: boolean 9 | /** 10 | * 元素的内容 11 | */ 12 | text?: string 13 | /** 14 | * icon 的类型 15 | */ 16 | icon?: string 17 | /** 18 | * toast自定位置距离 19 | */ 20 | top?: string 21 | /** 22 | * 元素展示的图片 23 | */ 24 | image?: string 25 | /** 26 | * 元素的状态 27 | */ 28 | status?: 'error' | 'loading' | 'success' 29 | /** 30 | * 元素持续的事件（设置为 0 将不会自动消失） 31 | * @default 3000 32 | */ 33 | duration?: number 34 | /** 35 | * 是否存在底部遮罩层(无法点击底部的内容区) 36 | */ 37 | overlay?: boolean 38 | /** 39 | * 元素被点击之后触发的事件 40 | */ 41 | onClick?: Function 42 | /** 43 | * 元素被关闭之后触发的事件 44 | */ 45 | onClose?: Function 46 | } 47 | 48 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/image/index.less: -------------------------------------------------------------------------------- 1 | @keyframes MoveLoading { 2 | 0% { 3 | transform: rotate(0); 4 | } 5 | 100% { 6 | transform: rotate(360deg); 7 | } 8 | } 9 | 10 | .image-page { 11 | .base-image { 12 | width: 160px; 13 | height: 160px; 14 | color: #999999; 15 | &-loading { 16 | width: 160px; 17 | height: 160px; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | &__tip { 22 | animation: MoveLoading 2s linear infinite; 23 | } 24 | } 25 | } 26 | .base-box { 27 | display: flex; 28 | flex-direction: column; 29 | line-height: 28px; 30 | font-size: 28px; 31 | &__tip { 32 | width: 100%; 33 | margin-top: 32px; 34 | line-height: 28px; 35 | font-size: 28px; 36 | text-align: center; 37 | color: #666666; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/ui/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tard", 3 | "version": "0.0.2-alpha.3", 4 | "description": "", 5 | "main": "dist/tard.js", 6 | "module": "dist/tard.es.js", 7 | "source": "src/components/index.ts", 8 | "publishConfig": { 9 | "registry": "https://registry.npmjs.org", 10 | "access": "public" 11 | }, 12 | "files": [ 13 | "dist", 14 | "lib", 15 | "types", 16 | "README.md" 17 | ], 18 | "typeRoots": [ 19 | "node_modules/@types", 20 | "types" 21 | ], 22 | "types": "lib/components/index.d.ts", 23 | "author": "", 24 | "license": "ISC", 25 | "devDependencies": { 26 | "@tarojs/react": "^3.4.2", 27 | "@tarojs/taro": "^3.4.2", 28 | "typescript": "^4.5.5" 29 | }, 30 | "peerDependencies": { 31 | "@tarojs/components": ">=3", 32 | "@tarojs/react": ">=3", 33 | "react": ">=16.13.0", 34 | "react-dom": ">=16.13.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/ui/src/components/image/demo/index.less: -------------------------------------------------------------------------------- 1 | @keyframes MoveLoading { 2 | 0% { 3 | transform: rotate(0); 4 | } 5 | 100% { 6 | transform: rotate(360deg); 7 | } 8 | } 9 | 10 | .image-page { 11 | .base-image { 12 | width: 160px; 13 | height: 160px; 14 | color: #999999; 15 | &-loading { 16 | width: 160px; 17 | height: 160px; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | &__tip { 22 | animation: MoveLoading 2s linear infinite; 23 | } 24 | } 25 | } 26 | .base-box { 27 | display: flex; 28 | flex-direction: column; 29 | line-height: 28px; 30 | font-size: 28px; 31 | &__tip { 32 | width: 100%; 33 | margin-top: 32px; 34 | line-height: 28px; 35 | font-size: 28px; 36 | text-align: center; 37 | color: #666666; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /packages/ui/src/components/progress/type.ts: -------------------------------------------------------------------------------- 1 | 2 | import CompCommon from '../../common/type' 3 | 4 | export interface ProgressProps extends CompCommon { 5 | /** 6 | * 进度百分比 7 | * @default 0 8 | */ 9 | percent: number 10 | /** 11 | * 进度条粗细 12 | * @default 4px 13 | */ 14 | strokeWidth: number 15 | /** 16 | * 进度条颜色 17 | * @default #DC8D20 18 | */ 19 | color: string 20 | /** 21 | * 进度条圆角 22 | * @default 6px 23 | */ 24 | radius: number 25 | /** 26 | * 轨道颜色 27 | * @default #EFEFEF 28 | */ 29 | trackColor: string 30 | /** 31 | * 进度文字内容 32 | * @default 百分比 33 | */ 34 | pivotText?: string 35 | /** 36 | * 是否显示进度文字 37 | * @default true 38 | */ 39 | showPivot: boolean 40 | /** 41 | * 进度条状态 42 | */ 43 | status?: 'progress' | 'error' | 'success' 44 | } 45 | -------------------------------------------------------------------------------- /packages/ui/src/components/cell/group/index.tsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames' 2 | import React, { FC } from 'react' 3 | import { View } from '@tarojs/components' 4 | import { CellGroupProps } from '../type' 5 | import { cssPrefix } from '../../../common' 6 | 7 | const CellGroup: FC = ({ 8 | border = true, 9 | inset = false, 10 | title, 11 | children 12 | }) => { 13 | const CssPrefix = cssPrefix() 14 | const itemClass = classNames( 15 | `${CssPrefix}-cell-group-item`, 16 | { 17 | [`${CssPrefix}-cell__border`]: border, 18 | [`${CssPrefix}-cell__inset`]: inset 19 | } 20 | ) 21 | 22 | return ( 23 | 24 | {title && {title}} 25 | 26 | {children} 27 | 28 | 29 | ) 30 | } 31 | 32 | export default CellGroup -------------------------------------------------------------------------------- /packages/ui/src/components/image/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | import { ImageProps as ImagePropsBase } from '@tarojs/components/types/Image' 3 | 4 | export interface ImageProps extends ImagePropsBase, CompCommon { 5 | /** 6 | * 图片链接 7 | */ 8 | src: string, 9 | /** 10 | * 自定义失败内容 11 | */ 12 | errorContent?: string, 13 | /** 14 | * 是否支持全屏预览图片 15 | * @default false 16 | */ 17 | preview?: boolean, 18 | /** 19 | * 图片其他参数 20 | */ 21 | res?: any, 22 | /** 23 | * 是否展示动画 24 | * @default true 25 | */ 26 | transition?: boolean 27 | /** 28 | * 圆角大小，默认单位为px 29 | * @default 0 30 | */ 31 | radius?: number 32 | /** 33 | * 是否显示为圆形 34 | * @default false 35 | */ 36 | round?: false 37 | /** 38 | * 是否展示图片加载中提示 39 | * @default true 40 | */ 41 | showLoading?: boolean 42 | /** 43 | * 自定义加载内容 44 | */ 45 | loadingContent?: string, 46 | } -------------------------------------------------------------------------------- /packages/ui/src/utils/is.ts: -------------------------------------------------------------------------------- 1 | export function isString (o: unknown): o is string { 2 | return typeof o === 'string' 3 | } 4 | 5 | export function isUndefined (o: unknown): o is undefined { 6 | return typeof o === 'undefined' 7 | } 8 | 9 | export function isNull (o: unknown): o is null { 10 | return o === null 11 | } 12 | 13 | export function isObject (o: unknown): o is T { 14 | return o !== null && typeof o === 'object' 15 | } 16 | 17 | export function isBoolean (o: unknown): o is boolean { 18 | return o === true || o === false 19 | } 20 | 21 | export function isFunction (o: unknown): o is (...args: any[]) => any { 22 | return typeof o === 'function' 23 | } 24 | 25 | export function isNumber (o: unknown): o is number { 26 | return typeof o === 'number' 27 | } 28 | 29 | export function isBooleanStringLiteral (o: unknown): o is string { 30 | return o === 'true' || o === 'false' 31 | } 32 | 33 | export const isArray = Array.isArray 34 | -------------------------------------------------------------------------------- /packages/ui/src/components/tag-price/tag-price.less: -------------------------------------------------------------------------------- 1 | 2 | @import "../../variable.less"; 3 | @import "../../mixins/index.less"; 4 | @import "./var.less"; 5 | 6 | .@{--css-prefix}-tag-price { 7 | display: flex; 8 | align-items: center; 9 | overflow: hidden; 10 | color: var(--tag-price-color); 11 | font-size: var(--tag-price-text-size); 12 | 13 | &__title { 14 | padding: var(--tag-price-padding); 15 | line-height: 1; 16 | background: var(--tag-price-color); 17 | color: var(--color-white); 18 | border: 1px solid var(--tag-price-color); 19 | border-radius: var(--tag-price-border-radius) 0 0 var(--tag-price-border-radius); 20 | } 21 | 22 | &__price { 23 | padding: var(--tag-price-padding); 24 | line-height: 1; 25 | border: 1px solid; 26 | border-radius: 0 var(--tag-price-border-radius) var(--tag-price-border-radius) 0; 27 | 28 | .@{--css-prefix}-price__text { 29 | line-height: 1; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tard 2 | 一套基于 **Taro** 框架开发的多端 **React UI** 组件库 3 | 4 | ![Alt](http://storage.360buyimg.com/hawley-common/tard-image/Tard-logo.png) 5 | > Tard 取名自 `Taro React Design` 简写，发音特的 6 | 7 | ## 介绍 8 | Tard是开源移动端多端组件库, 开发和服务于移动Web界面的企业级产品 9 | 10 | ## 版本提示 11 | 目前版本处于alpha状态，适用于taro的`React`版本，taro要在3.X以上版本 12 | ## 特性 13 | + 🏠 基于 `Taro` 开发 `UI` 组件 14 | + 💎 30+ 个高质量组件，覆盖移动端主流场景 15 | + 💪 使用 TypeScript 编写，提供完整的类型定义 16 | + 📖 提供完善的中文文档和组件示例 17 | + 📦 支持 React 18 | + 🎨 支持主题定制，内置 200+ 个主题变量，支持组件样式动态变化 19 | + 🍭 支持按需引用 20 | 21 | ## 示例 22 | ![Alt](http://storage.360buyimg.com/hawley-common/tard-image/taro-weapp.jpg) 23 | 24 | ## 快速上手 25 | 请参考[快速上手](https://tard-ui.selling.cn/quickstart)章节 26 | ## 支持环境 27 | + Android 5.0+ 28 | + iOS 9.2+ 29 | 30 | ## 链接 31 | + [仓库地址](https://github.com/jd-antelope/tard) 32 | + [意见反馈](https://github.com/jd-antelope/tard/issues) 33 | 34 | ## 开源协议 35 | 本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源 36 | -------------------------------------------------------------------------------- /packages/taro-demo/src/app.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | pages: ['pages/home/index','pages/badge/index','pages/button/index','pages/canvas/index','pages/cell/index','pages/config-provider/index','pages/datetime-picker/index','pages/dropdown-menu/index','pages/empty/index','pages/field/index','pages/footer-button/index','pages/form/index','pages/grid/index','pages/icon/index','pages/image/index','pages/input-number/index','pages/loading/index','pages/modal/index','pages/nav-bar/index','pages/overlay/index','pages/popup/index','pages/price/index','pages/progress/index','pages/progress-circle/index','pages/rate/index','pages/search-bar/index','pages/skeleton/index','pages/sort/index','pages/switch/index','pages/tab/index','pages/tag-price/index','pages/toast/index','pages/uploader/index'], 3 | window: { 4 | backgroundTextStyle: 'light', 5 | navigationBarBackgroundColor: '#fff', 6 | navigationBarTitleText: 'Tard', 7 | navigationBarTextStyle: 'black' 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/ui/README.md: -------------------------------------------------------------------------------- 1 | # Tard 2 | 一套基于 **Taro** 框架开发的多端 **React UI** 组件库 3 | 4 | ![Alt](http://storage.360buyimg.com/hawley-common/tard-image/Tard-logo.png) 5 | > Tard 取名自 `Taro React Design` 简写，发音特的 6 | 7 | ## 介绍 8 | Tard是开源移动端多端组件库, 开发和服务于移动Web界面的企业级产品 9 | 10 | ## 版本提示 11 | 目前版本处于alpha状态，适用于taro的`React`版本，taro要在3.X以上版本 12 | ## 特性 13 | + 🏠 基于 `Taro` 开发 `UI` 组件 14 | + 💎 30+ 个高质量组件，覆盖移动端主流场景 15 | + 💪 使用 TypeScript 编写，提供完整的类型定义 16 | + 📖 提供完善的中文文档和组件示例 17 | + 📦 支持 React 18 | + 🎨 支持主题定制，内置 200+ 个主题变量，支持组件样式动态变化 19 | + 🍭 支持按需引用 20 | 21 | ## 示例 22 | ![Alt](http://storage.360buyimg.com/hawley-common/tard-image/taro-weapp.jpg) 23 | 24 | ## 快速上手 25 | 请参考[快速上手](https://tard-ui.selling.cn/quickstart)章节 26 | ## 支持环境 27 | + Android 5.0+ 28 | + iOS 9.2+ 29 | 30 | ## 链接 31 | + [仓库地址](https://github.com/jd-antelope/tard) 32 | + [意见反馈](https://github.com/jd-antelope/tard/issues) 33 | 34 | ## 开源协议 35 | 本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源 36 | -------------------------------------------------------------------------------- /packages/ui/src/components/sort/sort.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | 4 | .@{--css-prefix}-sort { 5 | overflow: hidden; 6 | display: flex; 7 | 8 | 9 | &__item { 10 | display: inline-block; 11 | flex-shrink: 0; 12 | 13 | &-text { 14 | font-size: 24px; 15 | line-height: 24px; 16 | height: 24px; 17 | margin-bottom: 24px; 18 | padding: 9px 24px; 19 | display: flex; 20 | align-items: center; 21 | } 22 | 23 | &-icon { 24 | display: flex; 25 | flex-direction: column; 26 | margin-left: 6px; 27 | 28 | &-item { 29 | width: 0; 30 | height: 0; 31 | border-left: 6px solid transparent; 32 | border-right: 6px solid transparent; 33 | border-bottom: 8px solid; 34 | 35 | &:last-child { 36 | margin-top: 4px; 37 | transform: rotate(180deg); 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/ui/src/components/switch/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface SwitchProps extends CompCommon { 4 | /** 5 | * 标签名 6 | */ 7 | title?: string 8 | /** 9 | * 背景颜色 10 | */ 11 | bgColor?: string 12 | /** 13 | * 背景选中颜色 14 | */ 15 | activeColor?: string 16 | /** 17 | * 按钮颜色 18 | * @default 19 | */ 20 | btnColor?: string 21 | /** 22 | * 背景高度 23 | * @default 32 24 | */ 25 | bgHeight?: number 26 | /** 27 | * 背景宽度 28 | * @default 90 29 | */ 30 | bgWidth?: number 31 | /** 32 | * 按钮大小 33 | * @default 44 34 | */ 35 | btnSize?: number 36 | /** 37 | * 是否显示开启 38 | * @default false 39 | */ 40 | checked?: boolean 41 | /** 42 | * 是否禁止点击 43 | * @default false 44 | */ 45 | disabled?: boolean 46 | /** 47 | * border-radius的大小 48 | * @default 19 49 | */ 50 | radius?: number 51 | /** 52 | * 输入框值改变时触发的事件 53 | */ 54 | onChange?: (value: boolean) => void 55 | } 56 | -------------------------------------------------------------------------------- /packages/sites/src/docs/pages/markdown/introduce.md: -------------------------------------------------------------------------------- 1 | # Tard 2 | 一套基于 **Taro** 框架开发的多端 **React UI** 组件库 3 | 4 | ![Alt](http://storage.360buyimg.com/hawley-common/tard-image/Tard-logo.png) 5 | > Tard 取名自 `Taro React Design` 简写，发音特的 6 | 7 | ## 介绍 8 | Tard是开源移动端多端组件库, 开发和服务于移动Web界面的企业级产品 9 | 10 | ## 版本提示 11 | 目前版本处于alpha状态，适用于taro的`React`版本，taro要在3.X以上版本 12 | ## 特性 13 | + 🏠 基于 `Taro` 开发 `UI` 组件 14 | + 💎 30+ 个高质量组件，覆盖移动端主流场景 15 | + 💪 使用 TypeScript 编写，提供完整的类型定义 16 | + 📖 提供完善的中文文档和组件示例 17 | + 📦 支持 React 18 | + 🎨 支持主题定制，内置 200+ 个主题变量，支持组件样式动态变化 19 | + 🍭 支持按需引用 20 | 21 | ## 示例 22 | ![Alt](http://storage.360buyimg.com/hawley-common/tard-image/taro-weapp.jpg) 23 | 24 | ## 快速上手 25 | 请参考[快速上手](https://tard-ui.selling.cn/quickstart)章节 26 | ## 支持环境 27 | + Android 5.0+ 28 | + iOS 9.2+ 29 | 30 | ## 链接 31 | + [仓库地址](https://github.com/jd-antelope/tard) 32 | + [意见反馈](https://github.com/jd-antelope/tard/issues) 33 | 34 | ## 开源协议 35 | 本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源 36 | -------------------------------------------------------------------------------- /packages/ui/src/styles/mixins/libs/border.less: -------------------------------------------------------------------------------- 1 | /** 2 | * 默认主题下 var(--color-border-light) 3 | */ 4 | 5 | .border-thin( 6 | @color: var(--color-border-light), 7 | @style: solid, 8 | @directions: top bottom right left, 9 | @width: 1px 10 | ) { 11 | each(@directions, { 12 | border-@{value}: @width @color @style; 13 | }) 14 | } 15 | 16 | .border-thin-top( 17 | @color: var(--color-border-light), 18 | @style: solid, 19 | @width: 1px 20 | ) { 21 | .border-thin(@color, @style, top, @width); 22 | } 23 | 24 | .border-thin-left( 25 | @color: var(--color-border-light), 26 | @style: solid, 27 | @width: 1px 28 | ) { 29 | .border-thin(@color, @style, left, @width); 30 | } 31 | 32 | .border-thin-right( 33 | @color: var(--color-border-light), 34 | @style: solid, 35 | @width: 1px 36 | ) { 37 | .border-thin(@color, @style, right, @width); 38 | } 39 | 40 | .border-thin-bottom( 41 | @color: var(--color-border-light), 42 | @style: solid, 43 | @width: 1px 44 | ) { 45 | .border-thin(@color, @style, bottom, @width); 46 | } 47 | -------------------------------------------------------------------------------- /packages/taro-demo/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { navigateTo } from '@tarojs/taro' 2 | import React from 'react' 3 | import Taro from '@tarojs/taro' 4 | import { ConfigProvider } from 'tard' 5 | import { isWeb } from './utils' 6 | import './app.less' 7 | 8 | class App extends React.Component { 9 | 10 | componentDidShow() { 11 | // ConfigProvider.config({ 12 | // // cssPrefix: 'tard', 13 | // theme: { 14 | // 'color-primary': 'purple',//purple 15 | // 'font-size-base': '16px', 16 | // 'button-radius': '20px' 17 | // } 18 | // }) 19 | 20 | if (isWeb) { 21 | window.addEventListener("message", this.iframeListener, false); 22 | } 23 | } 24 | 25 | iframeListener(e: any) { 26 | const activeMenu = e.data.path 27 | if (activeMenu) { 28 | navigateTo({ 29 | url: `/pages${activeMenu}/index` 30 | }); 31 | } 32 | } 33 | 34 | public render(): React.ReactNode { 35 | return this.props.children 36 | } 37 | } 38 | 39 | export default App 40 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "experimentalDecorators": true, 5 | "jsx": "react", 6 | "moduleResolution": "node", 7 | "noImplicitAny": false, 8 | "noUnusedLocals": true, 9 | "noUnusedParameters": true, 10 | "preserveConstEnums": true, 11 | "skipLibCheck": true, 12 | "sourceMap": false, 13 | "strictNullChecks": true, 14 | "resolveJsonModule": true, 15 | "target": "esnext", 16 | "module": "esnext", 17 | "downlevelIteration": true, 18 | "allowJs": false, 19 | "strict": true, 20 | "esModuleInterop": false, 21 | "removeComments": true, 22 | "declaration": false, 23 | "declarationMap": false, 24 | "rootDir": ".", 25 | "types": ["node"], 26 | "typeRoots": [ 27 | "node_modules/@types" 28 | ] 29 | }, 30 | "compileOnSave": false, 31 | "exclude": [ 32 | "node_modules/*", 33 | "packages/vite/*", 34 | "packages/demo/*", 35 | "packages/ui/src/**/demo/*" 36 | ], 37 | } 38 | -------------------------------------------------------------------------------- /packages/ui/src/components/rate/rate.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | @import "./var.less"; 4 | 5 | .@{--css-prefix}-rate { 6 | font-size: 0; 7 | line-height: 0; 8 | 9 | /* elements */ 10 | &__left { 11 | display: inline-block; 12 | position: absolute; 13 | left: 0; 14 | top: 0; 15 | width: 50%; 16 | height: 100%; 17 | color: transparent; 18 | overflow: hidden; 19 | z-index: 10; 20 | } 21 | 22 | &__icon { 23 | position: relative; 24 | display: inline-block; 25 | color: var(--rate-star-color); 26 | font-size: 0; 27 | line-height: 0; 28 | transition: all 0.2s; 29 | 30 | .@{--css-prefix}-icon { 31 | font-size: var(--rate-icon-size); 32 | } 33 | 34 | &--on { 35 | color: var(--rate-star-color-on); 36 | } 37 | 38 | &--off { 39 | color: var(--rate-star-color); 40 | } 41 | 42 | &--half { 43 | .@{--css-prefix}-rate__left { 44 | color: var(--rate-star-color-on); 45 | } 46 | } 47 | } 48 | } 49 | 50 | -------------------------------------------------------------------------------- /packages/ui/src/components/tag-price/README.md: -------------------------------------------------------------------------------- 1 | # TabPrice 价格标签 2 | ### 介绍 3 | 价格标签组件 4 | ### 引入 5 | ```js 6 | import { TagPrice } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基本用法 10 | ```js 11 | 12 | ``` 13 | 14 | ### 自定义颜色 15 | 设置属性 `color` 可以自定义价格颜色 16 | ```js 17 | 18 | ``` 19 | 20 | ### 自定义字体 21 | 设置属性 `size` 可以自定义价格大小 22 | ```js 23 | 24 | ``` 25 | 26 | ### 自定义标题 27 | 设置属性 `title` 可以修改标题文字 28 | ```js 29 | 30 | ``` 31 | 32 | ## API 33 | ### Props 34 | | 属性 | 说明 | 类型 | 默认值 | 35 | | ---- | ---- | ---- | ---- | 36 | | color | 价格标签颜色 | string | - | 37 | | title | 价格标签title | string | - | 38 | | price | 价格 | string | - | 39 | | size | 字体大小 | number | 24 | 40 | 41 | 42 | ### 样式变量 43 | | 名称 | 默认值 | 44 | | ---- | ---- | 45 | | --tag-price-color | var(--color-primary) | 46 | | --tag-price-padding | 3px 10px | 47 | | --tag-price-text-size | 24px | 48 | | --tag-price-border-radius | var(--border-radius-sm) | 49 | -------------------------------------------------------------------------------- /packages/ui/src/components/tag-price/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # TabPrice 价格标签 2 | ### 介绍 3 | 价格标签组件 4 | ### 引入 5 | ```js 6 | import { TagPrice } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基本用法 10 | ```js 11 | 12 | ``` 13 | 14 | ### 自定义颜色 15 | 设置属性 `color` 可以自定义价格颜色 16 | ```js 17 | 18 | ``` 19 | 20 | ### 自定义字体 21 | 设置属性 `size` 可以自定义价格大小 22 | ```js 23 | 24 | ``` 25 | 26 | ### 自定义标题 27 | 设置属性 `title` 可以修改标题文字 28 | ```js 29 | 30 | ``` 31 | 32 | ## API 33 | ### Props 34 | | 属性 | 说明 | 类型 | 默认值 | 35 | | ---- | ---- | ---- | ---- | 36 | | color | 价格标签颜色 | string | - | 37 | | title | 价格标签title | string | - | 38 | | price | 价格 | string | - | 39 | | size | 字体大小 | number | 24 | 40 | 41 | 42 | ### 样式变量 43 | | 名称 | 默认值 | 44 | | ---- | ---- | 45 | | --tag-price-color | var(--color-primary) | 46 | | --tag-price-padding | 3px 10px | 47 | | --tag-price-text-size | 24px | 48 | | --tag-price-border-radius | var(--border-radius-sm) | 49 | -------------------------------------------------------------------------------- /packages/ui/src/components/icon/icon.tsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames' 2 | import React, { FC } from 'react' 3 | import { Text } from '@tarojs/components' 4 | import { IconProps } from './type' 5 | import { mergeStyle, pxTransform } from '../../utils' 6 | import { cssPrefix } from '../../common' 7 | 8 | const Icon: FC = (props) => { 9 | const CssPrefix = cssPrefix() 10 | const { 11 | customStyle = '', 12 | className = '', 13 | prefixClass = CssPrefix + '-icon', 14 | value = '', 15 | color = '', 16 | size = 16, 17 | onClick = () => {} 18 | } = props 19 | const handleClick = (e) => { 20 | onClick(e) 21 | } 22 | 23 | const rootStyle = { 24 | fontSize: `${pxTransform(parseInt(String(size)) * 2)}`, 25 | color 26 | } 27 | 28 | const iconName = value ? `${prefixClass}-${value}` : '' 29 | return ( 30 | 35 | ) 36 | } 37 | 38 | export default Icon -------------------------------------------------------------------------------- /packages/ui/src/components/progress-circle/README.md: -------------------------------------------------------------------------------- 1 | # ProgressCircle 圆形进度条 2 | ### 介绍 3 | 圆环形的进度条组件，支持进度渐变动画 4 | > ⚠️ 该组件通过svg实现，svg不支持rpx，故小程序和H5单位均转换为rem 5 | ### 引入 6 | ```js 7 | import { ProgressCircle } from 'tard' 8 | ``` 9 | ## 代码演示 10 | ### 基础用法 11 | `percent` 属性表示进度条的进度，表示 `percent / 100` 12 | ```js 13 | 14 | ``` 15 | ### 自定义颜色 16 | 通过 `color` 属性来控制进度条颜色， `layerColor` 属性来控制轨道颜色 17 | ```js 18 | 19 | ``` 20 | ### 自定义圆环直径 21 | 通过 `size` 属性设置圆环直径 22 | ```js 23 | 24 | ``` 25 | 26 | ### 自定义进度条宽度 27 | 通过 `strokeWidth` 属性设置进度条宽度 28 | ```js 29 | 30 | ``` 31 | ## API 32 | ### Props 33 | | 参数 | 说明 | 类型 | 默认值 | 34 | | ---- | ---- | ---- | ---- | 35 | | percent | 百分比 | number | 0 | 36 | | size | 百圆环直径，单位自适应为rem | number | 200 | 37 | | color | 进度条颜色 | string | #DC8D20 | 38 | | layerColor | 轨道背景颜色 | string | #EFEFEF | 39 | | text | 文字 | string | - | 40 | | strokeWidth | 进度条宽度，单位自适应为rem | number | 4 | -------------------------------------------------------------------------------- /packages/ui/src/components/config-provider/config-provider.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC, useEffect, useState } from 'react' 2 | import { View } from '@tarojs/components' 3 | import { ConfigProviderProps } from './type' 4 | 5 | const ConfigProvider: FC = ({ style, className, children }) => { 6 | const [customStyle, setCustomStyle] = useState('') 7 | 8 | useEffect(() => { 9 | let themeStyle = '' 10 | for (const item in style) { 11 | themeStyle += `--${item}: ${style[item]};` 12 | } 13 | themeStyle+= 'display: inline-block;' 14 | setCustomStyle(themeStyle) 15 | }, [style]) 16 | 17 | // 给组件套入配置组件 18 | const content = React.Children.map(children, (child) => { 19 | if (!React.isValidElement(child)) { 20 | return null 21 | } 22 | const childProps = { 23 | ...child.props, 24 | customizeStyle: customStyle 25 | } 26 | return React.cloneElement(child, childProps) 27 | }) 28 | 29 | return ( 30 | 31 | {content} 32 | 33 | ) 34 | } 35 | 36 | export default ConfigProvider -------------------------------------------------------------------------------- /packages/ui/src/components/progress-circle/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # ProgressCircle 圆形进度条 2 | ### 介绍 3 | 圆环形的进度条组件，支持进度渐变动画 4 | > ⚠️ 该组件通过svg实现，svg不支持rpx，故小程序和H5单位均转换为rem 5 | ### 引入 6 | ```js 7 | import { ProgressCircle } from 'tard' 8 | ``` 9 | ## 代码演示 10 | ### 基础用法 11 | `percent` 属性表示进度条的进度，表示 `percent / 100` 12 | ```js 13 | 14 | ``` 15 | ### 自定义颜色 16 | 通过 `color` 属性来控制进度条颜色， `layerColor` 属性来控制轨道颜色 17 | ```js 18 | 19 | ``` 20 | ### 自定义圆环直径 21 | 通过 `size` 属性设置圆环直径 22 | ```js 23 | 24 | ``` 25 | 26 | ### 自定义进度条宽度 27 | 通过 `strokeWidth` 属性设置进度条宽度 28 | ```js 29 | 30 | ``` 31 | ## API 32 | ### Props 33 | | 参数 | 说明 | 类型 | 默认值 | 34 | | ---- | ---- | ---- | ---- | 35 | | percent | 百分比 | number | 0 | 36 | | size | 百圆环直径，单位自适应为rem | number | 200 | 37 | | color | 进度条颜色 | string | #DC8D20 | 38 | | layerColor | 轨道背景颜色 | string | #EFEFEF | 39 | | text | 文字 | string | - | 40 | | strokeWidth | 进度条宽度，单位自适应为rem | number | 4 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/icon/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Example 样式 3 | */ 4 | .panel__content { 5 | .example-item { 6 | margin-bottom: 20px; 7 | 8 | &:last-child { 9 | margin-bottom: 0; 10 | } 11 | 12 | .subitem { 13 | display: inline-block; 14 | margin-left: 24px; 15 | } 16 | 17 | &__desc { 18 | margin-bottom: 12px; 19 | color: #333; 20 | font-size: 24px; 21 | } 22 | } 23 | } 24 | 25 | .icon-list { 26 | display: flex; 27 | justify-content: flex-start; 28 | align-items: flex-start; 29 | flex-wrap: wrap; 30 | 31 | &__item { 32 | margin-bottom: 30px; 33 | width: 200px; 34 | height: 260px; 35 | background: #fff; 36 | text-align: center; 37 | display: flex; 38 | flex-direction: column; 39 | align-items: center; 40 | justify-content: center; 41 | margin-right: 33px; 42 | border-radius: 16px; 43 | &:nth-child(3n) { 44 | margin-right: 0; 45 | } 46 | } 47 | 48 | &__name { 49 | margin-top: 20px; 50 | color: #88889C; 51 | font-size: 20px; 52 | text-align: center; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/ui/src/components/icon/demo/index.less: -------------------------------------------------------------------------------- 1 | /** 2 | * Example 样式 3 | */ 4 | .panel__content { 5 | .example-item { 6 | margin-bottom: 20px; 7 | 8 | &:last-child { 9 | margin-bottom: 0; 10 | } 11 | 12 | .subitem { 13 | display: inline-block; 14 | margin-left: 24px; 15 | } 16 | 17 | &__desc { 18 | margin-bottom: 12px; 19 | color: #333; 20 | font-size: 24px; 21 | } 22 | } 23 | } 24 | 25 | .icon-list { 26 | display: flex; 27 | justify-content: flex-start; 28 | align-items: flex-start; 29 | flex-wrap: wrap; 30 | 31 | &__item { 32 | margin-bottom: 30px; 33 | width: 200px; 34 | height: 260px; 35 | background: #fff; 36 | text-align: center; 37 | display: flex; 38 | flex-direction: column; 39 | align-items: center; 40 | justify-content: center; 41 | margin-right: 33px; 42 | border-radius: 16px; 43 | &:nth-child(3n) { 44 | margin-right: 0; 45 | } 46 | } 47 | 48 | &__name { 49 | margin-top: 20px; 50 | color: #88889C; 51 | font-size: 20px; 52 | text-align: center; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /packages/taro-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Selling C UI 12 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /packages/ui/src/components/sort/type.ts: -------------------------------------------------------------------------------- 1 | 2 | import CompCommon from '../../common/type' 3 | 4 | interface ListProps { 5 | /** 6 | * 排序的key 7 | */ 8 | key: string; 9 | /** 10 | * 排序key对应的文字 11 | */ 12 | text: string; 13 | } 14 | 15 | export interface SortProps extends CompCommon { 16 | /** 17 | * 排序列表 18 | */ 19 | list: ListProps[]; 20 | 21 | /** 22 | * 当前排序 23 | */ 24 | activeKey?: string; 25 | 26 | /** 27 | * 升序/降序 28 | * @default 'asc' 29 | */ 30 | activeSort?: 'asc' | 'desc'; 31 | 32 | /** 33 | * 排序改变，回调函数 34 | */ 35 | onChange?: Function; 36 | 37 | /** 38 | * 是否滚动 39 | * @default false 40 | */ 41 | scroll?: boolean; 42 | /** 43 | * 文字颜色 44 | * @default '#333333' 45 | */ 46 | textColor?: string; 47 | /** 48 | * 升序/降序箭头颜色 49 | * @default '#CCCCCC' 50 | */ 51 | arrowColor?: string; 52 | /** 53 | * 选中项的颜色 54 | * @default '#FF2929' 55 | */ 56 | activeColor?: string; 57 | /** 58 | * 是否有border 59 | * @default false 60 | */ 61 | border: boolean; 62 | } 63 | 64 | export type ActiveSort = 'asc' | 'desc'; 65 | 66 | 67 | -------------------------------------------------------------------------------- /packages/ui/src/components/footer-button/footer-button.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | @import "./var.less"; 4 | 5 | .@{--css-prefix}-footer { 6 | overflow: hidden 7 | } 8 | 9 | .@{--css-prefix}-custom-footer-container { 10 | background: #fff; 11 | max-width: 100vw; 12 | box-sizing: border-box; 13 | display: flex; 14 | 15 | .@{--css-prefix}-custom-outer { 16 | width: 100%; 17 | display: flex; 18 | } 19 | 20 | .@{--css-prefix}-custom-footer{ 21 | flex: 1; 22 | text-align: center; 23 | height: var(--footer-height); 24 | .flex-center() 25 | } 26 | 27 | .@{--css-prefix}-custom-footer-btn1 { 28 | color: #fff; 29 | background: var(--color-primary); 30 | } 31 | 32 | .@{--css-prefix}-custom-footer-btn2{ 33 | color: #333; 34 | background: #f1f1f1; 35 | } 36 | } 37 | .@{--css-prefix}-custom-footer-container-fixed { 38 | position: fixed; 39 | bottom: 0; 40 | right: 0; 41 | left: 0; 42 | z-index: 99; 43 | padding-bottom: constant(safe-area-inset-bottom) !important; 44 | padding-bottom: env(safe-area-inset-bottom) !important; 45 | } 46 | -------------------------------------------------------------------------------- /packages/ui/src/components/modal/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface ModalProps extends CompCommon { 4 | /** 5 | * 元素的标题 6 | */ 7 | title?: string 8 | /** 9 | * 是否显示模态框 10 | * @default false 11 | */ 12 | isOpened: boolean 13 | /** 14 | * 元素的内容 15 | */ 16 | content?: string 17 | /** 18 | * 元素的内容对齐方式 19 | * @default center 20 | */ 21 | contentAlign?: 'center' | 'left' | 'right' 22 | /** 23 | * 点击浮层的时候时候自动关闭 24 | * @default true 25 | */ 26 | closeOnClickOverlay?: boolean 27 | /** 28 | * 取消按钮的文本 29 | */ 30 | cancelText?: string 31 | /** 32 | * 确认按钮的文本 33 | */ 34 | confirmText?: string 35 | /** 36 | * 触发关闭时的事件 37 | */ 38 | onClose?: Function 39 | /** 40 | * 点击取消按钮触发的事件 41 | */ 42 | onCancel?: Function 43 | /** 44 | * 点击确认按钮触发的事件 45 | */ 46 | onConfirm?: Function 47 | } 48 | 49 | 50 | export interface ModalActionProps extends CompCommon { 51 | isSimple: boolean 52 | } 53 | 54 | export interface ModalContentProps extends CompCommon { } 55 | 56 | export interface ModalHeaderProps extends CompCommon { } 57 | 58 | -------------------------------------------------------------------------------- /packages/ui/src/components/badge/badge.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | @import "./var.less"; 4 | 5 | .@{--css-prefix}-badge { 6 | position: relative; 7 | display: inline-block; 8 | font-size: 0; 9 | vertical-align: middle; 10 | 11 | /* elements */ 12 | &__dot { 13 | position: absolute; 14 | top: -6px; 15 | right: -6px; 16 | width: var(--badge-dot-size); 17 | height: var(--badge-dot-size); 18 | border-radius: 50%; 19 | box-shadow: var(--badge-box-shadow); 20 | overflow: hidden; 21 | background: var(--badge-bg); 22 | } 23 | 24 | &__num { 25 | position: absolute; 26 | top: calc(0rem - var(--badge-border-radius)); 27 | right: -6px; 28 | z-index: 1; 29 | padding: 0 var(--spacing-h-sm); 30 | border-radius: var(--badge-border-radius) var(--badge-border-radius) var(--badge-border-radius) 0; 31 | box-shadow: var(--badge-box-shadow); 32 | overflow: hidden; 33 | font-size: var(--badge-font-size); 34 | line-height: 1.4; 35 | color: var(--badge-color); 36 | background: var(--badge-bg); 37 | transform: translate(50%, 0); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/ui/src/components/footer-button/type.ts: -------------------------------------------------------------------------------- 1 | 2 | import CompCommon from '../../common/type' 3 | 4 | export interface FooterButtonProps extends CompCommon { 5 | /** 6 | * 按钮名字 7 | * @default 按钮 8 | */ 9 | name?: string 10 | /** 11 | * 点击事件 12 | */ 13 | onClick?: Function 14 | /** 15 | * 自定义按钮内容 16 | */ 17 | content?: React.ReactNode 18 | /** 19 | * 按钮颜色 20 | */ 21 | color?: string 22 | /** 23 | * 填充颜色 24 | */ 25 | background?: string 26 | /** 27 | * 外边框的padding 28 | */ 29 | padding?: string 30 | /** 31 | * 双按钮之间的间隔巨鹿 32 | */ 33 | margin?: number 34 | /** 35 | * 按钮radius 36 | */ 37 | radius?: number 38 | /** 39 | * line-height 40 | */ 41 | lineHeight?: number 42 | /** 43 | * 是否为双按钮 44 | */ 45 | doubleBtn?: boolean 46 | /** 47 | * 第二个按钮文字 48 | */ 49 | secondName?: string 50 | /** 51 | * 第二个按钮按钮颜色 52 | */ 53 | secColor?: string 54 | /** 55 | * 第二个按钮填充颜色 56 | */ 57 | secBackground?: string 58 | /** 59 | * 点击事件 60 | */ 61 | secClick?: Function 62 | /** 63 | * 是否开启定位底部 64 | * @default true 65 | */ 66 | isFixed?: boolean 67 | } 68 | -------------------------------------------------------------------------------- /packages/ui/src/components/overlay/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Overlay 遮罩层 3 | ### 介绍 4 | 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作 5 | ### 引入 6 | ```js 7 | import { Overlay } from 'tard' 8 | ``` 9 | ## 代码演示 10 | ### 基础用法 11 | 通过 `show` 属性控制是否显示遮罩层， `onClick` 属性为点击遮罩层触发事件 12 | ```js 13 | const [show, setShow] = useState(false) 14 | 15 | 16 | setShow(false)} /> 17 | ``` 18 | 19 | ### 嵌入内容 20 | 通过默认插槽可以在遮罩层上嵌入任意内容 21 | ```js 22 | const [show, setShow] = useState(false) 23 | 24 | 25 | setShow(false)}> 26 | 27 | 28 | 29 | ``` 30 | 31 | ## API 32 | ### Props 33 | | 属性 | 说明 | 类型 | 默认值 | 34 | | ---- | ---- | ---- | ---- | 35 | | show | 是否展示遮罩层 | boolean | false | 36 | 37 | ### Events 38 | | 事件名 | 说明 | 回调参数 | 39 | | ---- | ---- | ---- | 40 | | onClose | 触发关闭时的事件 | - | 41 | 42 | ### 样式变量 43 | | 名称 | 默认值 | 44 | | ---- | ---- | 45 | | --overlay-bg-color | rgba(0, 0, 0, .65) | 46 | | --zindex-overlay | 1000 | -------------------------------------------------------------------------------- /packages/ui/src/components/tab/type.ts: -------------------------------------------------------------------------------- 1 | 2 | import CompCommon from '../../common/type' 3 | 4 | export interface TabList { 5 | title: string 6 | } 7 | 8 | export interface TabProps extends CompCommon { 9 | /** 10 | * tab 列表 11 | * @default [] 12 | **/ 13 | tabList: TabList[] 14 | /** 15 | * 当前选中的tab 16 | * @default 0 17 | **/ 18 | current: number 19 | /** 20 | * tab 的高度 21 | **/ 22 | height?: string 23 | 24 | /** 25 | * 点击或滑动时触发事件 26 | **/ 27 | onClick?: Function 28 | 29 | /** 30 | * 组件容器样式 31 | */ 32 | customStyle: string 33 | /** 34 | * tab 的排布方式 35 | * @default 'horizontal' 36 | */ 37 | tabDirection: 'horizontal' | 'vertical' 38 | /** 39 | * 是否滚动 40 | * @default false 41 | */ 42 | scroll: boolean 43 | 44 | /** 45 | * 是否支持手势滑动切换内容页，当 tabDirection='vertical'时，无论是否设置，都不支持手势滑动切换内容页 46 | * @default true 47 | */ 48 | swipeable: boolean 49 | 50 | /** 51 | * 是否开启切换动画 52 | * @default true 53 | */ 54 | animated: boolean 55 | 56 | /** 57 | * 自定义选中标签的颜色 58 | * @default '#FF2929' 59 | */ 60 | activeColor?: string 61 | 62 | /** 63 | * 默认标签颜色 64 | * @default '#666666' 65 | */ 66 | color?: string 67 | } 68 | 69 | -------------------------------------------------------------------------------- /packages/ui/src/components/overlay/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | 2 | # Overlay 遮罩层 3 | ### 介绍 4 | 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作 5 | ### 引入 6 | ```js 7 | import { Overlay } from 'tard' 8 | ``` 9 | ## 代码演示 10 | ### 基础用法 11 | 通过 `show` 属性控制是否显示遮罩层， `onClick` 属性为点击遮罩层触发事件 12 | ```js 13 | const [show, setShow] = useState(false) 14 | 15 | 16 | setShow(false)} /> 17 | ``` 18 | 19 | ### 嵌入内容 20 | 通过默认插槽可以在遮罩层上嵌入任意内容 21 | ```js 22 | const [show, setShow] = useState(false) 23 | 24 | 25 | setShow(false)}> 26 | 27 | 28 | 29 | ``` 30 | 31 | ## API 32 | ### Props 33 | | 属性 | 说明 | 类型 | 默认值 | 34 | | ---- | ---- | ---- | ---- | 35 | | show | 是否展示遮罩层 | boolean | false | 36 | 37 | ### Events 38 | | 事件名 | 说明 | 回调参数 | 39 | | ---- | ---- | ---- | 40 | | onClose | 触发关闭时的事件 | - | 41 | 42 | ### 样式变量 43 | | 名称 | 默认值 | 44 | | ---- | ---- | 45 | | --overlay-bg-color | rgba(0, 0, 0, .65) | 46 | | --zindex-overlay | 1000 | -------------------------------------------------------------------------------- /packages/sites/src/docs/components/md-to-react/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import ReactMarkdown from 'react-markdown' 3 | import remarkGfm from 'remark-gfm' 4 | import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' 5 | 6 | const MdToReact: FC = ({ route }) => { 7 | return 21 | ) : ( 22 | 23 | {children} 24 | 25 | ) 26 | }, 27 | }} 28 | > 29 | } 30 | 31 | export default MdToReact -------------------------------------------------------------------------------- /packages/ui/src/components/nav-bar/type.ts: -------------------------------------------------------------------------------- 1 | import { ComponentClass } from 'react' 2 | 3 | import CompCommon, { IconBaseProps } from '../../common/type' 4 | 5 | export interface NavBarProps extends CompCommon { 6 | /** 7 | * 标题文字 8 | */ 9 | title?: string 10 | /** 11 | * 是否固定顶部 12 | * @default false 13 | */ 14 | fixed?: boolean 15 | /** 16 | * 是否显示下划线 17 | * @since v1.4.0 18 | * @default true 19 | */ 20 | border?: boolean 21 | /** 22 | * 链接文字跟图标颜色，不包括标题 23 | * @default #6190E8 24 | */ 25 | color?: string 26 | /** 27 | * 是否显示左侧箭头 28 | * @default false 29 | */ 30 | leftIcon?: boolean 31 | /** 32 | * 左边图标类型，图标类型请看 Icon 文档 33 | * @default 'chevron-left' 34 | */ 35 | leftIconType?: string | IconBaseProps 36 | /** 37 | * 左边文字 38 | */ 39 | leftText?: string 40 | /** 41 | * 从右到左，第一个图标类型，图标类型请看 Icon 文档 42 | */ 43 | rightIconType?: string | IconBaseProps 44 | /** 45 | * 点击左侧按钮及文字时触发 46 | */ 47 | onClickLeft?: Function 48 | /** 49 | * 点击右侧按钮及文字时触发 50 | */ 51 | onClickRight?: Function 52 | } 53 | 54 | declare const NavBar: ComponentClass 55 | 56 | export default NavBar 57 | -------------------------------------------------------------------------------- /packages/ui/src/components/skeleton/skeleton.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { FC } from 'react' 3 | import cn from 'classnames' 4 | import { View } from '@tarojs/components' 5 | import { pxTransform } from '../../utils' 6 | import CompContainer from '../../common/comp-container' 7 | import { cssPrefix } from '../../common' 8 | import { SkeletonProps } from './type' 9 | 10 | const obj = { 11 | 'squared': `${cssPrefix()}-skeleton-squared`, 12 | 'rounded': `${cssPrefix()}-skeleton-rounded`, 13 | 'default': '' 14 | } 15 | 16 | const Skeleton: FC = ({ 17 | className = '', 18 | width = 24, 19 | height = 24, 20 | type = "default", 21 | customizeStyle = '' 22 | }) => { 23 | const CssPrefix = cssPrefix() 24 | const customStyle = { 25 | 'width': pxTransform(width || 24), 26 | 'minHeight': pxTransform(height || 24), 27 | }; 28 | return ( 29 | 30 | 39 | 40 | ) 41 | } 42 | 43 | export default Skeleton 44 | -------------------------------------------------------------------------------- /packages/demo/src/components/doc-header/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | import { navigateTo } from '@tarojs/taro' 3 | import Icon from '../../../../ui/src/components/icon' 4 | import { View } from '@tarojs/components' 5 | import { isWeb } from '../../utils' 6 | import './index.less' 7 | 8 | export interface DocsHeaderProps { 9 | title?: string 10 | } 11 | 12 | const DocsHeader: FC = ({ title = '标题' }) => { 13 | 14 | const postIframeParentMessage = () => { 15 | if (isWeb) { 16 | window.parent.postMessage({ path: '/' }, '*') 17 | } 18 | } 19 | 20 | return ( 21 | 22 | 23 | { 29 | navigateTo({ url: '/pages/home/index' }) 30 | postIframeParentMessage() 31 | } } 32 | /> 33 | 34 | {title} 35 | 36 | 37 | 38 | 39 | ) 40 | } 41 | 42 | export default DocsHeader -------------------------------------------------------------------------------- /packages/ui/src/components/datetime-picker/type.ts: -------------------------------------------------------------------------------- 1 | 2 | import CompCommon from '../../common/type' 3 | 4 | export interface DatetimePickerProps extends CompCommon { 5 | /** 6 | * 是否有开始时间和结束时间两个时间选项 7 | * @default false 8 | */ 9 | showEndDate?: boolean 10 | /** 11 | * 打开弹窗 12 | * @default false 13 | */ 14 | visible: boolean 15 | /** 16 | * 关闭回调 17 | */ 18 | onClose?: Function 19 | /** 20 | * 确认回调 21 | */ 22 | onOk?: Function 23 | /** 24 | * 是否能点击遮罩层关闭 25 | * @default false 26 | */ 27 | closeOnclickOverlay?: boolean 28 | /** 29 | * 左侧默认提示title 30 | * @default '选中时间' 31 | */ 32 | title?: string 33 | /** 34 | * 右侧默认提示title 35 | * @default '结束时间' 36 | */ 37 | endTitle?: string 38 | /** 39 | * 默认开始时间 40 | * @default now 41 | */ 42 | value?: string 43 | /** 44 | * 默认结束时间 45 | * @default now 46 | */ 47 | endValue?: string 48 | /** 49 | * 是否展示时间 50 | * @default false 51 | */ 52 | type?: 'date' | 'time' | 'datetime' 53 | /** 54 | * 最小时间 55 | * @default 1990-01-01 56 | */ 57 | minDate?: string 58 | /** 59 | * 最大时间 60 | * @default 2025-01-01 61 | */ 62 | maxDate?: string 63 | /** 64 | * 是否倒角 65 | * @default false 66 | */ 67 | round?: boolean 68 | } 69 | -------------------------------------------------------------------------------- /packages/ui/src/components/tag-price/tag-price.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { FC } from 'react' 3 | import { View } from '@tarojs/components' 4 | import cn from 'classnames' 5 | import { TagPriceProps } from './type' 6 | import { pxTransform } from '../../utils' 7 | import CompContainer from '../../common/comp-container' 8 | import Price from '../price' 9 | import { cssPrefix } from '../../common' 10 | 11 | const TagPrice: FC = ({ 12 | className = '', 13 | color = '#FF2929', 14 | title = '价格', 15 | price = '0', 16 | size = 24, 17 | customizeStyle = '' 18 | }) => { 19 | const CssPrefix = cssPrefix() 20 | const containerStyle = { 21 | color: color, 22 | fontSize: pxTransform(size || 24) 23 | } 24 | 25 | const titleStyle = { 26 | background: color, 27 | borderColor: color 28 | } 29 | 30 | return ( 31 | 32 | {title} 33 | 38 | 39 | ) 40 | } 41 | 42 | export default TagPrice 43 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/tag-price/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | import { FC } from '@tarojs/taro'; 3 | import { View } from '@tarojs/components'; 4 | import { TagPrice } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | 7 | const TagPricePage: FC = () => { 8 | return ( 9 | 10 | 11 | 12 | 基本用法 13 | 14 | 15 | 16 | 17 | 自定义颜色 18 | 19 | 20 | 21 | 22 | 自定义字体 23 | 24 | 25 | 26 | 27 | 自定义标题 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default memo(TagPricePage); -------------------------------------------------------------------------------- /packages/ui/src/components/tag-price/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | import { FC } from '@tarojs/taro'; 3 | import { View } from '@tarojs/components'; 4 | import { TagPrice } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | 7 | const TagPricePage: FC = () => { 8 | return ( 9 | 10 | 11 | 12 | 基本用法 13 | 14 | 15 | 16 | 17 | 自定义颜色 18 | 19 | 20 | 21 | 22 | 自定义字体 23 | 24 | 25 | 26 | 27 | 自定义标题 28 | 29 | 30 | 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default memo(TagPricePage); -------------------------------------------------------------------------------- /packages/sites/src/constants/layout.ts: -------------------------------------------------------------------------------- 1 | import introduce from '../docs/pages/markdown/introduce.md?raw' 2 | import design from '../docs/pages/markdown/design.md?raw' 3 | import quickstart from '../docs/pages/markdown/quickstart.md?raw' 4 | import theme from '../docs/pages/markdown/theme.md?raw' 5 | 6 | export const menuData = [ 7 | { 8 | title: '指南', 9 | path: '/introduce' 10 | }, { 11 | title: '组件', 12 | path: '/comps/button' 13 | }, 14 | { 15 | title: '示例', 16 | path: '/h5' 17 | }, 18 | // { 19 | // title: '资源', 20 | // path: '/docs' 21 | // }, 22 | { 23 | title: '加入我们', 24 | path: 'https://github.com/jd-antelope' 25 | }] 26 | 27 | export const introduceList = [{ 28 | nameEn: 'Guide', 29 | name: '开发指南', 30 | path: null, 31 | isDocs: true, 32 | children: [{ 33 | name: '介绍', 34 | nameEn: '', 35 | path: '/introduce', 36 | component: introduce 37 | }, { 38 | name: '快速上手', 39 | nameEn: '', 40 | path: '/quickstart', 41 | component: quickstart 42 | }, { 43 | name: '主题定制', 44 | nameEn: '', 45 | path: '/theme', 46 | component: theme 47 | }, { 48 | name: '设计资源', 49 | nameEn: '', 50 | path: '/design', 51 | component: design 52 | }] 53 | }] 54 | 55 | export const logoUrl = 'https://storage.360buyimg.com/hawley-common/tard-image/logo.png' -------------------------------------------------------------------------------- /packages/ui/src/components/grid/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface GridProps extends CompCommon { 4 | /** 5 | * 列数 6 | * @default 4 7 | */ 8 | columnNum?: number 9 | /** 10 | * 图标大小，默认单位为px 11 | * @default 60px 12 | */ 13 | iconSize?: number 14 | /** 15 | * 是否显示边框 16 | * @default false 17 | */ 18 | border?: boolean 19 | /** 20 | * 图文位置 21 | * @default 'down' 22 | */ 23 | direction?: 'top' | 'bottom' | 'left' | 'right', 24 | /** 25 | * 是否开启格子点击反馈 26 | * @default false 27 | */ 28 | clickable?: boolean 29 | } 30 | 31 | export interface GridItemProps extends CompCommon { 32 | /** 33 | * 图片链接 34 | */ 35 | url?: string, 36 | /** 37 | * icon类型 38 | */ 39 | icon?: string, 40 | /** 41 | * 文字 42 | */ 43 | text?: string, 44 | /** 45 | * 图文位置 46 | * @default bottom 47 | */ 48 | direction?: 'top' | 'bottom' | 'left' | 'right', 49 | /** 50 | * 边框 51 | * @default false 52 | */ 53 | border?: boolean 54 | /** 55 | * 列数 56 | * @default 4 57 | */ 58 | columnNum?: number 59 | /** 60 | * 总数 61 | */ 62 | length?: number 63 | /** 64 | * 数量 65 | */ 66 | index?: number 67 | /** 68 | * 图标大小，默认单位为px 69 | * @default 60px 70 | */ 71 | iconSize?: number 72 | /** 73 | * 点击事件 74 | */ 75 | onClick?: Function, 76 | } 77 | -------------------------------------------------------------------------------- /packages/ui/src/components/price/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface PriceProps extends CompCommon { 4 | /** 5 | * 价格 6 | */ 7 | price?: string | string[] 8 | /** 9 | * 原价 10 | */ 11 | originPrice?: string 12 | /** 13 | * 原价颜色 14 | */ 15 | originColor?: string 16 | /** 17 | * 颜色 18 | */ 19 | color?: string 20 | /** 21 | * 价格前面的内容 22 | */ 23 | beforeContent?: React.ReactNode, 24 | /** 25 | * 价格后面的内容 26 | */ 27 | afterContent?: React.ReactNode, 28 | /** 29 | * 是否展示佣金 30 | */ 31 | commissionPrice?: string 32 | /** 33 | * 保留几位小数点 34 | */ 35 | fixedNum?: number 36 | /** 37 | * 类型 38 | */ 39 | type?: Size | string 40 | /** 41 | * 整体价格大小 42 | */ 43 | size?: number 44 | /** 45 | * 只修改价格大小 46 | */ 47 | symbolSize?: number 48 | /** 49 | * 价格为数组时是否展示后面单位 50 | */ 51 | showAfterSymbol?: boolean 52 | /** 53 | * 价格单位 54 | */ 55 | priceUnit?: string 56 | /** 57 | * 价格单位大小 58 | */ 59 | unitSize?: number 60 | /** 61 | * 是否按照千分号形式显示 62 | */ 63 | thousands?: boolean 64 | } 65 | 66 | enum Size { 67 | small = 'small', // 24 + 24 68 | smallMiddle = 'smallMiddle', // 28 + 28 69 | middle = 'middle', // 24 + 36 70 | largeMiddle = 'largeMiddle', // 28 + 48 71 | large = 'large', // 36 + 60 72 | } 73 | -------------------------------------------------------------------------------- /packages/ui/src/components/canvas/canvas.less: -------------------------------------------------------------------------------- 1 | 2 | @import "../../variable.less"; 3 | @import "../../mixins/index.less"; 4 | 5 | @keyframes canvasBuffer { 6 | 0% { 7 | opacity: 0; 8 | } 9 | 100% { 10 | opacity: 1; 11 | } 12 | } 13 | 14 | .@{--css-prefix}-canvas { 15 | width: 100%; 16 | height: 100vh; 17 | position: fixed; 18 | top: 0; 19 | left: 0; 20 | background: rgba(0, 0, 0, 0.4); 21 | display: none; 22 | z-index: var(--zindex-common); 23 | &-box { 24 | .mixin-absolute-center(absolute); 25 | overflow: hidden; 26 | animation: buffer 0.3s; 27 | } 28 | &-content { 29 | border-radius: var(--border-radius-lg); 30 | background: var(--color-white); 31 | } 32 | &-contenth5 { 33 | padding: var(--spacing-h-lg); 34 | box-sizing: border-box; 35 | } 36 | &-icon { 37 | width: 100%; 38 | margin-bottom: var(--spacing-v-sm); 39 | .flex-justify(flex-end) 40 | } 41 | &-save { 42 | margin-top: var(--spacing-v-lg); 43 | .flex-center(); 44 | width: 100%; 45 | 46 | &__button { 47 | margin-top: var(--spacing-v-sm); 48 | background: var(--color-primary); 49 | } 50 | } 51 | &.@{--css-prefix}-canvas-show { 52 | display: block; 53 | } 54 | } 55 | 56 | .@{--css-prefix}-canvas-overlay { 57 | display: none; 58 | &.@{--css-prefix}-canvas-overlay-show { 59 | display: block; 60 | } 61 | } -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/progress-circle/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FC } from '@tarojs/taro' 3 | import { View } from '@tarojs/components' 4 | import { ProgressCircle } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | 7 | const Person: FC = () => { 8 | return ( 9 | 10 | 11 | 12 | 基本用法 13 | 14 | 15 | 16 | 17 | 自定义颜色 18 | 19 | 20 | 21 | 22 | 自定义圆环直径 23 | 24 | 25 | 26 | 27 | 自定义进度条宽度 28 | 29 | 30 | 31 | 32 | 33 | 34 | ) 35 | } 36 | 37 | export default Person -------------------------------------------------------------------------------- /packages/ui/src/components/form/form.tsx: -------------------------------------------------------------------------------- 1 | import classNames from 'classnames' 2 | import React, { FC } from 'react' 3 | import { Form } from '@tarojs/components' 4 | import CompContainer from '../../common/comp-container' 5 | import { cssPrefix } from '../../common' 6 | import { FormProps } from './type' 7 | 8 | const FormComponent: FC = ({ 9 | className = '', 10 | customStyle = '', 11 | reportSubmit = false, 12 | border = false, 13 | round = false, 14 | onReset = () => {}, 15 | onSubmit = () => {}, 16 | children, 17 | customizeStyle = '' 18 | }) => { 19 | const CssPrefix = cssPrefix() 20 | const onSubmitCallback = (event) => { 21 | onSubmit && onSubmit(event) 22 | } 23 | 24 | const onResetCallback = (event) => { 25 | onReset && onReset(event) 26 | } 27 | 28 | const rootCls = classNames( 29 | `${CssPrefix}-form`, 30 | className, 31 | { [`${CssPrefix}-form-round`]: round }, 32 | { [`${CssPrefix}-form-border`]: border } 33 | ) 34 | 35 | return ( 36 | 37 |
44 | {children} 45 |
46 | 47 | ) 48 | } 49 | 50 | export default FormComponent -------------------------------------------------------------------------------- /packages/ui/src/components/progress-circle/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FC } from '@tarojs/taro' 3 | import { View } from '@tarojs/components' 4 | import { ProgressCircle } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | 7 | const Person: FC = () => { 8 | return ( 9 | 10 | 11 | 12 | 基本用法 13 | 14 | 15 | 16 | 17 | 自定义颜色 18 | 19 | 20 | 21 | 22 | 自定义圆环直径 23 | 24 | 25 | 26 | 27 | 自定义进度条宽度 28 | 29 | 30 | 31 | 32 | 33 | 34 | ) 35 | } 36 | 37 | export default Person -------------------------------------------------------------------------------- /packages/ui/src/components/empty/empty.tsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, FC } from 'react' 2 | import classNames from 'classnames' 3 | import { Text } from '@tarojs/components' 4 | import Image from '../image' 5 | import Button from '../button' 6 | import CompContainer from '../../common/comp-container' 7 | import { EmptyProps } from './type' 8 | import { cssPrefix } from '../../common' 9 | 10 | const Empty: FC = ({ 11 | src = '', 12 | text = '', 13 | btnText = '', 14 | rect = 'rect', 15 | className = '', 16 | children = '', 17 | customizeStyle = '', 18 | onClick = () => { } 19 | }) => { 20 | const CssPrefix = cssPrefix() 21 | const rootClass = classNames( 22 | `${CssPrefix}-empty`, 23 | className 24 | ) 25 | 26 | const emptyImgClass = classNames( 27 | `${CssPrefix}-empty__image`, 28 | { [`${CssPrefix}-empty__image__${rect}`]: ['angle', 'circle'].includes(rect) } 29 | ) 30 | 31 | return ( 32 | 33 | {src && } 34 | {text && {text}} 35 | {children ? children : 36 | 37 | {btnText && } 38 | 39 | } 40 | 41 | ) 42 | } 43 | 44 | export default Empty 45 | -------------------------------------------------------------------------------- /packages/sites/src/constants/home-resources.ts: -------------------------------------------------------------------------------- 1 | import { IMG_PREFIX } from './index' 2 | import { FooterResources } from '../interface' 3 | 4 | export const FOOTTER_RESOURCES = [{ 5 | title: '相关产品', 6 | children: [{ 7 | title: 'Taro', 8 | url: 'https://docs.taro.zone/' 9 | }, { 10 | title: 'React', 11 | url: 'https://zh-hans.reactjs.org/' 12 | }, { 13 | title: 'Relay', 14 | url: 'https://relay.jd.com/' 15 | }, { 16 | title: 'Typescript', 17 | url: 'https://www.tslang.cn/' 18 | }] 19 | }, { 20 | title: '社区', 21 | children: [{ 22 | title: 'GitHub', 23 | url: 'https://github.com/jd-antelope/tard' 24 | }] 25 | }, { 26 | title: '相关产品', 27 | children: [{ 28 | title: '加入我们', 29 | url: 'https://github.com/jd-antelope/tard' 30 | }, { 31 | title: '意见反馈', 32 | url: 'https://github.com/jd-antelope/tard/issues' 33 | }] 34 | }] as FooterResources[] 35 | 36 | export const COMPS_LIST = [{ 37 | title: '前沿技术', 38 | content: '', 39 | des: 'React \n Typescript', 40 | url: `${IMG_PREFIX}/frond.png` 41 | }, { 42 | title: '适配多端', 43 | content: '轻松开发小程序', 44 | des: 'Taro', 45 | url: `${IMG_PREFIX}/multi.png` 46 | }, { 47 | title: '自定义主题', 48 | content: '内置主题变量数', 49 | des: '400+', 50 | url: `${IMG_PREFIX}/theme.png` 51 | }, { 52 | title: '组件丰富', 53 | content: '支持常用组件数', 54 | des: '30+', 55 | url: `${IMG_PREFIX}/comps.png`, 56 | isTip: true 57 | }] -------------------------------------------------------------------------------- /packages/ui/src/components/empty/README.md: -------------------------------------------------------------------------------- 1 | # Empty 空状态 2 | ### 介绍 3 | 该组件封装了日常业务中常见的空数据的展示效果 4 | ### 引入 5 | ```js 6 | import { Empty } from 'tard' 7 | ``` 8 | ## 使用指南 9 | ### 基础用法 10 | 最简单的使用是通过src设置一张默认显示图片即可 11 | ```js 12 | 13 | ``` 14 | ### 图文混排效果 15 | 通过指定src 与 text 实现图文混排的效果 16 | ```js 17 | 20 | ``` 21 | 22 | ### 支持用户反馈操作 23 | 可通过 btnText 属性展示默认按钮，支持用户交互操作 24 | ```js 25 | 30 | ``` 31 | 32 | ## Api 33 | ### Props 34 | | 属性 | 说明 | 类型 | 默认值 | 35 | | ---- | ---- | ---- | ---- | 36 | | src | 默认展示图片路径 | sting | - | 37 | | rect | 默认图片默认圆角类型 | rectType | rect | 38 | | text | 默认提示文案 | sting | - | 39 | | btnText | 默认按钮的展示文案 | sting | - | 40 | 41 | ### RectType 42 | | 值 | 说明 | 43 | | ---- | ---- | 44 | | rect | 矩形 | 45 | | angle | 值为24px的倒角 | 46 | | circle | 圆形 | 47 | 48 | ### Events 49 | | 事件名称 | 说明 | 回调参数 | 50 | | ---- | ---- | ---- | 51 | | onClick | 按钮点击回调 | - | 52 | 53 | ### 样式变量 54 | | 属性 | 默认值 | 55 | | ---- | ---- | 56 | | --empty-image-size | 200px | 57 | | --empty-image-size | 200px | 58 | | --empty-image-radius | 24px | 59 | | --empty-text-size | 32px | 60 | -------------------------------------------------------------------------------- /packages/ui/src/components/button/type.ts: -------------------------------------------------------------------------------- 1 | 2 | import { ButtonProps as TButtonProps } from '@tarojs/components/types/Button' 3 | import CompCommon from '../../common/type' 4 | 5 | type TaroButtonProps = Pick 9 | 10 | export interface ButtonProps extends TaroButtonProps, CompCommon { 11 | /** 12 | *按钮类型 13 | * @defalt default 14 | */ 15 | type?: string 16 | /** 17 | * 是否填充背景 18 | * @default false 19 | */ 20 | fill?: boolean 21 | /** 22 | * 自动充满父容器 23 | * @default false 24 | */ 25 | full?: boolean 26 | /** 27 | * 按钮尺寸大小 28 | */ 29 | size?: 'large' | 'normal' | 'small' | 'mini' 30 | /** 31 | * 是否圆角 32 | * @default normal 33 | */ 34 | round?: string 35 | /** 36 | * 按钮颜色 37 | */ 38 | color?: string 39 | /** 40 | * 按钮填充颜色 41 | */ 42 | fillColor?: string 43 | /** 44 | * 是否使用边框 45 | */ 46 | border?: boolean 47 | /** 48 | * 边框颜色 49 | */ 50 | borderColor?: string 51 | /** 52 | * 按钮自定义圆角 53 | */ 54 | radius?: number 55 | /** 56 | * 自定义样式对象 57 | */ 58 | customStyle?: object 59 | /** 60 | * 设置按钮为禁用态（不可点击） 61 | */ 62 | disabled?: boolean 63 | /** 64 | * 点击按钮时触发 65 | */ 66 | onClick?: Function 67 | } 68 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/skeleton/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | import { FC } from '@tarojs/taro'; 3 | import { View } from '@tarojs/components'; 4 | import { Skeleton } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | import './index.less'; 7 | 8 | const SkeletonPage: FC = () => { 9 | return ( 10 | 11 | 12 | 13 | 14 | 基本用法 15 | 16 | 17 | 18 | 自定义宽高 19 | 20 | 21 | 22 | 圆角 23 | 24 | 25 | 26 | 27 | 直角 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export default memo(SkeletonPage); -------------------------------------------------------------------------------- /packages/ui/src/components/empty/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Empty 空状态 2 | ### 介绍 3 | 该组件封装了日常业务中常见的空数据的展示效果 4 | ### 引入 5 | ```js 6 | import { Empty } from 'tard' 7 | ``` 8 | ## 使用指南 9 | ### 基础用法 10 | 最简单的使用是通过src设置一张默认显示图片即可 11 | ```js 12 | 13 | ``` 14 | ### 图文混排效果 15 | 通过指定src 与 text 实现图文混排的效果 16 | ```js 17 | 20 | ``` 21 | 22 | ### 支持用户反馈操作 23 | 可通过 btnText 属性展示默认按钮，支持用户交互操作 24 | ```js 25 | 30 | ``` 31 | 32 | ## Api 33 | ### Props 34 | | 属性 | 说明 | 类型 | 默认值 | 35 | | ---- | ---- | ---- | ---- | 36 | | src | 默认展示图片路径 | sting | - | 37 | | rect | 默认图片默认圆角类型 | rectType | rect | 38 | | text | 默认提示文案 | sting | - | 39 | | btnText | 默认按钮的展示文案 | sting | - | 40 | 41 | ### RectType 42 | | 值 | 说明 | 43 | | ---- | ---- | 44 | | rect | 矩形 | 45 | | angle | 值为24px的倒角 | 46 | | circle | 圆形 | 47 | 48 | ### Events 49 | | 事件名称 | 说明 | 回调参数 | 50 | | ---- | ---- | ---- | 51 | | onClick | 按钮点击回调 | - | 52 | 53 | ### 样式变量 54 | | 属性 | 默认值 | 55 | | ---- | ---- | 56 | | --empty-image-size | 200px | 57 | | --empty-image-size | 200px | 58 | | --empty-image-radius | 24px | 59 | | --empty-text-size | 32px | 60 | -------------------------------------------------------------------------------- /packages/ui/src/components/skeleton/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo } from 'react'; 2 | import { FC } from '@tarojs/taro'; 3 | import { View } from '@tarojs/components'; 4 | import { Skeleton } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | import './index.less'; 7 | 8 | const SkeletonPage: FC = () => { 9 | return ( 10 | 11 | 12 | 13 | 14 | 基本用法 15 | 16 | 17 | 18 | 自定义宽高 19 | 20 | 21 | 22 | 圆角 23 | 24 | 25 | 26 | 27 | 直角 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | export default memo(SkeletonPage); -------------------------------------------------------------------------------- /packages/ui/src/components/dropdown-menu/type.ts: -------------------------------------------------------------------------------- 1 | 2 | import { ReactNode } from 'react' 3 | import CompCommon from '../../common/type' 4 | 5 | interface Option { 6 | /** 7 | * 文字 8 | */ 9 | text: string, 10 | /** 11 | * 标识符 12 | */ 13 | value: number | string 14 | } 15 | 16 | export interface DropdownMenuProps extends CompCommon { 17 | /** 18 | * 菜单标题和选中态颜色 19 | * @default 主题色 20 | */ 21 | activeColor?: string, 22 | /** 23 | * 菜单标题对齐方式 24 | * @default 'center' 25 | */ 26 | titleAlign?: 'center' | 'right' | 'left', 27 | children: ReactNode 28 | } 29 | 30 | export interface DropdownMenuItemProps extends CompCommon { 31 | /** 32 | * 当先项是否激活，不暴露 33 | */ 34 | active?: boolean 35 | /** 36 | * 点击options展开item，不暴露 37 | */ 38 | onClick?: Function 39 | /** 40 | * 菜单标题和选项的选中态颜色，不暴露 41 | */ 42 | activeColor?: string 43 | /** 44 | * 菜单标题对齐方式，不暴露 45 | * @default 'center' 46 | */ 47 | titleAlign?: 'center' | 'right' | 'left' 48 | /** 49 | * 当前选中项对应的 value 50 | */ 51 | value?: number | string 52 | /** 53 | * 菜单项标题 54 | * @default 当前选中项的文字 55 | */ 56 | title?: string 57 | /** 58 | * 所占比例 59 | * @default 1 60 | */ 61 | flex?: number | string 62 | /** 63 | * 选项数组，text字段-文字，value字段标识符 64 | */ 65 | options?: Option[] 66 | /** 67 | * 自定义内容 68 | * @default true 69 | */ 70 | content?: ReactNode 71 | /** 72 | * 点击options导致 value 变化时触发 73 | */ 74 | onChange?: Function 75 | } 76 | -------------------------------------------------------------------------------- /.github/workflows/node.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - next 10 | 11 | jobs: 12 | build: 13 | 14 | runs-on: ubuntu-latest 15 | 16 | strategy: 17 | fail-fast: false 18 | matrix: 19 | node-version: [12.x] 20 | 21 | steps: 22 | - uses: actions/checkout@v2 23 | - name: Use Node.js ${{ matrix.node-version }} 24 | uses: actions/setup-node@v1 25 | with: 26 | node-version: ${{ matrix.node-version }} 27 | # - name: restore lerna 28 | # uses: actions/cache@v2 29 | # with: 30 | # path: | 31 | # node_modules 32 | # */*/node_modules 33 | # key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }} 34 | - name: Get yarn cache directory path 35 | id: yarn-cache-dir-path 36 | run: echo "::set-output name=dir::$(yarn cache dir)" 37 | 38 | - uses: actions/cache@v2 39 | id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) 40 | with: 41 | path: ${{ steps.yarn-cache-dir-path.outputs.dir }} 42 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 43 | restore-keys: | 44 | ${{ runner.os }}-yarn- 45 | - run: npm install -g yarn 46 | - run: yarn config set registry https://registry.yarnpkg.com 47 | - name: install 48 | run: yarn 49 | - name: build 50 | run: yarn run build 51 | env: 52 | CI: true 53 | -------------------------------------------------------------------------------- /packages/ui/src/components/loading/README.md: -------------------------------------------------------------------------------- 1 | # Loading 加载 2 | ### 介绍 3 | 该标签在 Taro 的 Image 标签上面增加了错误处理、加载动画等属性 4 | ### 引入 5 | ```js 6 | import { Loading } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基础用法 10 | ```js 11 | 12 | ``` 13 | ### 颜色修改 14 | 通过修改 `color` 属性，修改背景颜色 15 | ```js 16 | 17 | ``` 18 | 19 | ### 类型 ios 20 | ```js 21 | 22 | ``` 23 | 24 | ### 类型 loading 25 | ```js 26 | 27 | ``` 28 | 29 | ### 大小 30 | 修改属性 `size` 改变大小 31 | ```js 32 | 33 | ``` 34 | 35 | ### 全局定位 36 | 增加属性 `overlay` 全局定位展示 37 | ```js 38 | const [overlay, setOverlay] = useState(false) 39 | 40 | return ( 41 | 42 | 43 | { 44 | overlay && 45 | { 47 | setOverlay(false) 48 | }} 49 | size={ 100 } 50 | overlay 51 | /> 52 | } 53 | 54 | ); 55 | ``` 56 | 57 | ## API 58 | ### Props 59 | | 属性 | 说明 | 类型 | 默认值 | 60 | | ---- | ---- | ---- | ---- | 61 | | color | 颜色 | string | - | 62 | | type | 类型 | 'default'｜'ios' | default | 63 | | overlay | 是否有全局定位 | boolean | false | 64 | | size | loading大小 | number | 50px | 65 | 66 | ### Events 67 | | 事件名 | 说明 | 回调参数 | 68 | | ---- | ---- | ---- | 69 | | onClick | 点击格子时触发 | - | 70 | 71 | ### 样式变量 72 | | 名称 | 默认值 | 73 | | ---- | ---- | 74 | | --loading-zindex | 1090 | 75 | | --loading-sp | 50px | 76 | -------------------------------------------------------------------------------- /packages/ui/src/styles/index.less: -------------------------------------------------------------------------------- 1 | @import "./components/button/button.less"; 2 | @import "./components/dropdown-menu/dropdown-menu.less"; 3 | @import "./components/icon/icon.less"; 4 | @import "./components/image/image.less"; 5 | @import "./components/price/price.less"; 6 | @import "./components/toast/toast.less"; 7 | @import "./components/loading/loading.less"; 8 | @import "./components/field/field.less"; 9 | @import "./components/form/form.less"; 10 | @import "./components/rate/rate.less"; 11 | @import "./components/switch/switch.less"; 12 | @import "./components/popup/popup.less"; 13 | @import "./components/sort/sort.less"; 14 | @import "./components/empty/empty.less"; 15 | @import "./components/skeleton/skeleton.less"; 16 | @import "./components/tag-price/tag-price.less"; 17 | @import "./components/grid/grid.less"; 18 | @import "./components/badge/badge.less"; 19 | @import "./components/input-number/input-number.less"; 20 | @import "./components/modal/modal.less"; 21 | @import "./components/nav-bar/nav-bar.less"; 22 | @import "./components/overlay/overlay.less"; 23 | @import "./components/search-bar/search-bar.less"; 24 | @import "./components/canvas/canvas.less"; 25 | @import "./components/footer-button/footer-button.less"; 26 | @import "./components/datetime-picker/datetime-picker.less"; 27 | @import "./components/uploader/uploader.less"; 28 | @import "./components/progress-circle/progress-circle.less"; 29 | @import "./components/progress/progress.less"; 30 | @import "./components/cell/cell.less"; 31 | @import "./components/tab/tab.less"; 32 | -------------------------------------------------------------------------------- /packages/ui/src/components/loading/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Loading 加载 2 | ### 介绍 3 | 该标签在 Taro 的 Image 标签上面增加了错误处理、加载动画等属性 4 | ### 引入 5 | ```js 6 | import { Loading } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基础用法 10 | ```js 11 | 12 | ``` 13 | ### 颜色修改 14 | 通过修改 `color` 属性，修改背景颜色 15 | ```js 16 | 17 | ``` 18 | 19 | ### 类型 ios 20 | ```js 21 | 22 | ``` 23 | 24 | ### 类型 loading 25 | ```js 26 | 27 | ``` 28 | 29 | ### 大小 30 | 修改属性 `size` 改变大小 31 | ```js 32 | 33 | ``` 34 | 35 | ### 全局定位 36 | 增加属性 `overlay` 全局定位展示 37 | ```js 38 | const [overlay, setOverlay] = useState(false) 39 | 40 | return ( 41 | 42 | 43 | { 44 | overlay && 45 | { 47 | setOverlay(false) 48 | }} 49 | size={ 100 } 50 | overlay 51 | /> 52 | } 53 | 54 | ); 55 | ``` 56 | 57 | ## API 58 | ### Props 59 | | 属性 | 说明 | 类型 | 默认值 | 60 | | ---- | ---- | ---- | ---- | 61 | | color | 颜色 | string | - | 62 | | type | 类型 | 'default'｜'ios' | default | 63 | | overlay | 是否有全局定位 | boolean | false | 64 | | size | loading大小 | number | 50px | 65 | 66 | ### Events 67 | | 事件名 | 说明 | 回调参数 | 68 | | ---- | ---- | ---- | 69 | | onClick | 点击格子时触发 | - | 70 | 71 | ### 样式变量 72 | | 名称 | 默认值 | 73 | | ---- | ---- | 74 | | --loading-zindex | 1090 | 75 | | --loading-sp | 50px | 76 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/popup/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo, useState } from 'react'; 2 | import { FC } from '@tarojs/taro'; 3 | import { View } from '@tarojs/components'; 4 | import { Popup, Icon } from 'tard' 5 | import DocsHeader from '../../components/doc-header/index' 6 | import './index.less'; 7 | 8 | const PopupPage: FC = () => { 9 | const [isVisible, setIsVisible] = useState(false) 10 | const [isVisibleSelf, setIsVisibleSelf] = useState(false) 11 | return ( 12 | 13 | 14 | 15 | 基本用法 16 | setIsVisible(true)}> 17 | 显示popup 18 | 19 | 20 | 自定义标题、对齐方式、区域外点击关闭 21 | setIsVisibleSelf(true)}> 22 | 显示popup 23 | 24 | 25 | 26 | 27 | 28 | setIsVisible(false)} title="默认标题"/> 29 | setIsVisibleSelf(false)} closeOnclickOverlay titleAlign="left" title="自定义标题"/> 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default memo(PopupPage); -------------------------------------------------------------------------------- /packages/ui/src/components/popup/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo, useState } from 'react'; 2 | import { FC } from '@tarojs/taro'; 3 | import { View } from '@tarojs/components'; 4 | import { Popup, Icon } from 'tard' 5 | import DocsHeader from '../../components/doc-header/index' 6 | import './index.less'; 7 | 8 | const PopupPage: FC = () => { 9 | const [isVisible, setIsVisible] = useState(false) 10 | const [isVisibleSelf, setIsVisibleSelf] = useState(false) 11 | return ( 12 | 13 | 14 | 15 | 基本用法 16 | setIsVisible(true)}> 17 | 显示popup 18 | 19 | 20 | 自定义标题、对齐方式、区域外点击关闭 21 | setIsVisibleSelf(true)}> 22 | 显示popup 23 | 24 | 25 | 26 | 27 | 28 | setIsVisible(false)} title="默认标题"/> 29 | setIsVisibleSelf(false)} closeOnclickOverlay titleAlign="left" title="自定义标题"/> 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default memo(PopupPage); -------------------------------------------------------------------------------- /packages/ui/src/components/icon/icon.less: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "iconfont"; /* Project id 2988095 */ 3 | src: url("//at.alicdn.com/t/font_2988095_9s9rvvpe7s9.woff2?t=1645701513217") format("woff2"), 4 | url("//at.alicdn.com/t/font_2988095_9s9rvvpe7s9.woff?t=1645701513217") format("woff"), 5 | url("//at.alicdn.com/t/font_2988095_9s9rvvpe7s9.ttf?t=1645701513217") format("truetype"); 6 | } 7 | 8 | .@{--css-prefix}-icon { 9 | display: inline-block; 10 | font-family: iconfont; 11 | font-style: normal; 12 | font-weight: 400; 13 | font-variant: normal; 14 | -webkit-font-smoothing: antialiased; 15 | line-height: 1; 16 | text-rendering: auto; 17 | text-transform: none; 18 | vertical-align: middle; 19 | } 20 | 21 | .@{--css-prefix}-icon-search::before { content: "\e63c"; } 22 | 23 | .@{--css-prefix}-icon-chevron-down::before { content: "\e631"; } 24 | 25 | .@{--css-prefix}-icon-chevron-left::before { content: "\e630"; } 26 | 27 | .@{--css-prefix}-icon-chevron-right::before { content: "\e635"; } 28 | 29 | .@{--css-prefix}-icon-chevron-up::before { content: "\e634"; } 30 | 31 | .@{--css-prefix}-icon-camera::before { content: "\e633"; } 32 | 33 | .@{--css-prefix}-icon-video::before { content: "\e636"; } 34 | 35 | .@{--css-prefix}-icon-loading-size::before { content: "\e962"; } 36 | 37 | .@{--css-prefix}-icon-loading::before { content: "\e730"; } 38 | 39 | .@{--css-prefix}-icon-loading-ios::before { content: "\e62f"; } 40 | 41 | .@{--css-prefix}-icon-star::before { content: "\e729"; } 42 | 43 | .@{--css-prefix}-icon-close::before { content: "\e632"; } 44 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/overlay/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo, useState } from 'react'; 2 | import { FC } from '@tarojs/taro'; 3 | import { View } from '@tarojs/components'; 4 | import { Overlay, Icon } from 'tard' 5 | import DocsHeader from '../../components/doc-header/index' 6 | 7 | const OverlayPage: FC = () => { 8 | const [show, setShow] = useState(false) 9 | const [show1, setShow1] = useState(false) 10 | 11 | return ( 12 | 13 | 14 | 15 | 16 | 基本用法 17 | setShow(true)}> 18 | 基本用法 19 | 20 | 21 | setShow(false)} /> 22 | 23 | 嵌入内容 24 | setShow1(true)}> 25 | 嵌入内容 26 | 27 | 28 | setShow1(false)}> 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default memo(OverlayPage); -------------------------------------------------------------------------------- /packages/ui/src/components/overlay/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo, useState } from 'react'; 2 | import { FC } from '@tarojs/taro'; 3 | import { View } from '@tarojs/components'; 4 | import { Overlay, Icon } from 'tard' 5 | import DocsHeader from '../../components/doc-header/index' 6 | 7 | const OverlayPage: FC = () => { 8 | const [show, setShow] = useState(false) 9 | const [show1, setShow1] = useState(false) 10 | 11 | return ( 12 | 13 | 14 | 15 | 16 | 基本用法 17 | setShow(true)}> 18 | 基本用法 19 | 20 | 21 | setShow(false)} /> 22 | 23 | 嵌入内容 24 | setShow1(true)}> 25 | 嵌入内容 26 | 27 | 28 | setShow1(false)}> 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export default memo(OverlayPage); -------------------------------------------------------------------------------- /packages/demo/src/components/home/index.less: -------------------------------------------------------------------------------- 1 | @color-base: #333; 2 | 3 | .index-container { 4 | width: 100%; 5 | background: #f8f8f8; 6 | overflow: hidden; 7 | padding: 0 40px; 8 | box-sizing: border-box; 9 | 10 | .title{ 11 | font-size: 44px; 12 | margin-left: 40px; 13 | margin-bottom: 15px; 14 | box-sizing: border-box; 15 | display: flex; 16 | flex-direction: column; 17 | margin-bottom: 22px; 18 | } 19 | 20 | .logo{ 21 | width: 216px; 22 | height: 56px; 23 | overflow: hidden; 24 | margin-top: 70px; 25 | } 26 | 27 | .logo-des { 28 | font-size: 28px; 29 | margin-top: 30px; 30 | color: #666; 31 | } 32 | 33 | .comp { 34 | overflow: hidden; 35 | } 36 | 37 | .comp-item{ 38 | position: relative; 39 | display: flex; 40 | justify-content: space-between; 41 | align-items: center; 42 | margin: 0 0 16px; 43 | padding: 0 40px; 44 | color: @color-base; 45 | line-height: 88px; 46 | background: #fff; 47 | border-radius: 8px; 48 | -webkit-transition: background 0.3s; 49 | transition: background 0.3s; 50 | cursor: pointer; 51 | &:active{ 52 | background: @color-base; 53 | color: #fff; 54 | } 55 | // &:hover{ 56 | // background: @color-base; 57 | // color: #fff; 58 | // } 59 | } 60 | 61 | .comp-item-parent { 62 | font-size: 28px; 63 | line-height: 28px; 64 | background: none; 65 | color: @color-base; 66 | margin: 48px 0 24px; 67 | font-weight: bold; 68 | } 69 | 70 | .comp-item-text{ 71 | font-size: 28px; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/home/index.less: -------------------------------------------------------------------------------- 1 | @color-base: #333; 2 | 3 | .index-container { 4 | width: 100%; 5 | background: #f8f8f8; 6 | overflow: hidden; 7 | padding: 0 40px; 8 | box-sizing: border-box; 9 | 10 | .title{ 11 | font-size: 44px; 12 | margin-left: 40px; 13 | margin-bottom: 15px; 14 | box-sizing: border-box; 15 | display: flex; 16 | flex-direction: column; 17 | margin-bottom: 22px; 18 | } 19 | 20 | .logo{ 21 | width: 216px; 22 | height: 56px; 23 | overflow: hidden; 24 | margin-top: 70px; 25 | } 26 | 27 | .logo-des { 28 | font-size: 28px; 29 | margin-top: 30px; 30 | color: #666; 31 | } 32 | 33 | .comp { 34 | overflow: hidden; 35 | } 36 | 37 | .comp-item{ 38 | position: relative; 39 | display: flex; 40 | justify-content: space-between; 41 | align-items: center; 42 | margin: 0 0 16px; 43 | padding: 0 40px; 44 | color: @color-base; 45 | line-height: 88px; 46 | background: #fff; 47 | border-radius: 8px; 48 | -webkit-transition: background 0.3s; 49 | transition: background 0.3s; 50 | cursor: pointer; 51 | &:active{ 52 | background: @color-base; 53 | color: #fff; 54 | } 55 | // &:hover{ 56 | // background: @color-base; 57 | // color: #fff; 58 | // } 59 | } 60 | 61 | .comp-item-parent { 62 | font-size: 28px; 63 | line-height: 28px; 64 | background: none; 65 | color: @color-base; 66 | margin: 48px 0 24px; 67 | font-weight: bold; 68 | } 69 | 70 | .comp-item-text{ 71 | font-size: 28px; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/uploader/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { FC } from '@tarojs/taro' 3 | import { View } from '@tarojs/components' 4 | import { Uploader } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | 7 | const UploaderPage: FC = () => { 8 | const [videos, setVideos] = useState([]); 9 | const [iamges, setImages] = useState([]) 10 | const [iamges1, setImages1] = useState([]) 11 | return ( 12 | 13 | 14 | 15 | 基本用法 16 | 17 | { setVideos(v) }} 22 | /> 23 | 24 | 25 | { setImages(v) }} 28 | /> 29 | 30 | 31 | { setImages1(v) }} 34 | > 35 | 测试文本 36 | 37 | 38 | 39 | 40 | ) 41 | } 42 | 43 | export default UploaderPage -------------------------------------------------------------------------------- /packages/ui/src/components/dropdown-menu/item/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | import cn from 'classnames' 4 | import { View } from '@tarojs/components' 5 | import { DropdownMenuItemProps } from '../type' 6 | import Icon from '../../icon' 7 | import { cssPrefix } from '../../../common' 8 | 9 | const DropdownMenuItem: React.FC = ({ 10 | value = '', 11 | title = '', 12 | options = [], 13 | activeColor = '', 14 | titleAlign = 'center', 15 | flex = 1, 16 | active, 17 | onClick = () => {} 18 | }) => { 19 | const CssPrefix = cssPrefix() 20 | return ( 21 | onClick() } 25 | > 26 | 37 | 40 | {title || options?.filter(option => option?.value === value)[0]?.text || options?.[0]?.text} 41 | 42 | 48 | 49 | 50 | ) 51 | 52 | } 53 | 54 | export default DropdownMenuItem 55 | -------------------------------------------------------------------------------- /packages/ui/src/components/uploader/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { FC } from '@tarojs/taro' 3 | import { View } from '@tarojs/components' 4 | import { Uploader } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | 7 | const UploaderPage: FC = () => { 8 | const [videos, setVideos] = useState([]); 9 | const [iamges, setImages] = useState([]) 10 | const [iamges1, setImages1] = useState([]) 11 | return ( 12 | 13 | 14 | 15 | 基本用法 16 | 17 | { setVideos(v) }} 22 | /> 23 | 24 | 25 | { setImages(v) }} 28 | /> 29 | 30 | 31 | { setImages1(v) }} 34 | > 35 | 测试文本 36 | 37 | 38 | 39 | 40 | ) 41 | } 42 | 43 | export default UploaderPage -------------------------------------------------------------------------------- /packages/ui/src/common/comp-container.tsx: -------------------------------------------------------------------------------- 1 | import React, { CSSProperties, FC, useEffect, useState, useCallback } from 'react' 2 | import { View } from '@tarojs/components' 3 | import Taro from '@tarojs/taro' 4 | import { transformationString } from '../utils' 5 | import { isObject } from '../utils/is' 6 | 7 | type CommonProps = { 8 | className?: string, 9 | style?: CSSProperties | string, 10 | customizeStyle?: string, 11 | [propName: string]: any 12 | } 13 | 14 | const CompContainer: FC = ({ 15 | className = '', 16 | style = '', 17 | customizeStyle = '', 18 | children = '', 19 | ...rest 20 | }) => { 21 | const [themeStyle, setThemeStyle] = useState('') 22 | 23 | const setThemeStyleFn = useCallback((data) => { 24 | const themeParams = data 25 | let themeStyleStr = '' 26 | 27 | for (const item in themeParams) { 28 | themeStyleStr += `--${item}: ${themeParams[item]};` 29 | } 30 | setThemeStyle(themeStyleStr) 31 | }, []) 32 | 33 | useEffect(() => { 34 | setThemeStyleFn((Taro as any).Current.app.themeParams); 35 | // setThemeStyleFn(); 36 | (Taro as any).Current.app.eventCenter.on('THEME_CHANGE', (data) => { 37 | setThemeStyleFn(data); 38 | }); 39 | return () => { 40 | (Taro as any).Current.app.eventCenter.removeListener('THEME_CHANGE') 41 | } 42 | }, []) 43 | 44 | const styleString = isObject(style) ? transformationString(style) : style 45 | 46 | return ( 47 | 48 | {children} 49 | 50 | ) 51 | } 52 | 53 | export default CompContainer 54 | -------------------------------------------------------------------------------- /packages/taro-demo/src/components/doc-header/index.tsx: -------------------------------------------------------------------------------- 1 | import PropTypes, { InferProps } from 'prop-types' 2 | import React from 'react' 3 | import { navigateTo } from '@tarojs/taro' 4 | import { Icon } from 'tard' 5 | import { View } from '@tarojs/components' 6 | import { isWeb } from '../../utils' 7 | import './index.less' 8 | 9 | export interface DocsHeaderProps { 10 | title?: string 11 | } 12 | 13 | export default class DocsHeader extends React.Component { 14 | public static defaultProps: DocsHeaderProps 15 | public static propTypes: InferProps 16 | 17 | postIframeParentMessage() { 18 | if (isWeb) { 19 | window.parent.postMessage({ path: 'introduce' }, '*'); 20 | } 21 | } 22 | 23 | public render(): JSX.Element { 24 | const { title } = this.props 25 | 26 | return ( 27 | 28 | 29 | { 35 | navigateTo({ url: `/pages/home/index` }); 36 | this.postIframeParentMessage() 37 | }} 38 | /> 39 | 40 | {title} 41 | 42 | 43 | 44 | 45 | ) 46 | } 47 | } 48 | 49 | DocsHeader.defaultProps = { 50 | title: '标题' 51 | } 52 | 53 | DocsHeader.propTypes = { 54 | title: PropTypes.string 55 | } 56 | -------------------------------------------------------------------------------- /packages/ui/src/components/cell/type.ts: -------------------------------------------------------------------------------- 1 | import CompCommon from '../../common/type' 2 | 3 | export interface CellProps extends CompCommon { 4 | /** 5 | * 左侧标题 6 | */ 7 | title?: number | string 8 | /** 9 | * 右侧内容 10 | */ 11 | value?: number | string 12 | /** 13 | * 标题下方的描述信息 14 | */ 15 | label?: number | string 16 | /** 17 | * 是否展示右侧箭头并开启点击反馈 18 | * @default false 19 | */ 20 | link?: boolean 21 | /** 22 | * 是否显示内边框 23 | * @default true 24 | */ 25 | border?: boolean 26 | /** 27 | * 是否使内容垂直居中 28 | * @default false 29 | */ 30 | center?: boolean 31 | /** 32 | * 左侧图标名称或图片链接 33 | */ 34 | icon?: string 35 | /** 36 | * 箭头方向，可选值为 left up down 37 | * @default 'right' 38 | */ 39 | arrowDirection?: 'left' | 'up' | 'down' | 'right' 40 | /** 41 | * 点击后跳转的目标路由对象，同 Taro路由 的 url 42 | */ 43 | to?: string 44 | /** 45 | * 路由类型 46 | * @default 'switchTab' 47 | */ 48 | pageType?: 'switchTab' | 'reLaunch' | 'redirectTo' | 'navigateTo' 49 | /** 50 | * 自定义单元格左侧内容 51 | */ 52 | leftContent?: React.ReactNode 53 | /** 54 | * 自定义单元格右侧内容 55 | */ 56 | rightContent?: React.ReactNode 57 | /** 58 | * 点击事件 59 | */ 60 | onClick?: Function 61 | 62 | } 63 | 64 | export interface CellGroupProps extends CompCommon { 65 | /** 66 | * 分组标题 67 | */ 68 | title?: number | string 69 | /** 70 | * 是否显示内边框 71 | * @default true 72 | */ 73 | border?: boolean 74 | /** 75 | * 是否卡片风格 76 | * @default false 77 | */ 78 | inset: boolean 79 | } 80 | -------------------------------------------------------------------------------- /packages/ui/src/components/grid/grid.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | @import "./var.less"; 4 | 5 | .@{--css-prefix}-grid { 6 | display: grid; 7 | grid-template-columns: auto auto auto auto; 8 | background: var(--grid-bg); 9 | 10 | &-item { 11 | width: var(--grid-item-width); 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | 16 | &__content{ 17 | width: 100%; 18 | display: flex; 19 | flex-direction: column; 20 | justify-content: center; 21 | align-items: center; 22 | margin-left: 1%; 23 | padding: var(--grid-item-padding-y) 0; 24 | 25 | &-image { 26 | width: var(--grid-item-image-size); 27 | height: var(--grid-item-image-size); 28 | } 29 | 30 | &-text { 31 | font-size: var(--grid-item-text-size); 32 | margin-top: var(--grid-item-text-padding); 33 | } 34 | } 35 | 36 | &__content_row { 37 | flex-direction: row; 38 | .@{--css-prefix}-grid-item__content-text { 39 | margin: 0; 40 | margin-left: 12px; 41 | } 42 | } 43 | 44 | &__content_top { 45 | .@{--css-prefix}-grid-item__content-text { 46 | margin: 0; 47 | margin-bottom: 12px; 48 | } 49 | } 50 | 51 | &__content_right { 52 | .@{--css-prefix}-grid-item__content-text { 53 | margin: 0; 54 | margin-right: 12px; 55 | } 56 | } 57 | } 58 | 59 | &-item-border-right { 60 | border-right: 1PX solid #ebedf0; 61 | } 62 | 63 | &-item-border-bottom { 64 | border-bottom: 1PX solid #ebedf0; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /packages/ui/src/components/form/README.md: -------------------------------------------------------------------------------- 1 | # Form 表单 2 | ### 介绍 3 | 用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，需要与 Field 输入框 组件搭配使用。2.5 版本开始支持此组件。 4 | ### 引入 5 | ```js 6 | import { Form } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基础用法 10 | ```js 11 | const [form, setForm] = useState({ 12 | shopName | '' 13 | }) 14 | 15 | const onSubmit = (event) => { 16 | console.log(event) 17 | } 18 | 19 | const change = (res) => { 20 | setForm({ 21 | ...form, 22 | ...res 23 | }) 24 | } 25 | return ( 26 | 27 |
28 | change({ name | e })} 35 | /> 36 | 37 | 提交 38 |
39 | ); 40 | ``` 41 | 42 | ### 卡片用法 43 | 增加属性 `round` 添加卡片用法 44 | ```js 45 |
46 | ... 47 |
48 | ``` 49 | 50 | ## API 51 | ### Props 52 | | 属性 | 说明 | 类型 | 默认值 | 53 | | ---- | ---- | ---- | ---- | 54 | | reportSubmit | 是否返回formId用于发送模板消息 | boolean | false | 55 | | border | 是否需要border | boolean | false | 56 | | round | 卡片模式 | boolean | false | 57 | 58 | ### Events 59 | | 事件名 | 说明 | 回调参数 | 60 | | ---- | ---- | ---- | 61 | | onSubmit | 携带form中的数据触发submit事件，由于小程序组件化的限制，onSubmit事件获得的event中的event.detail.value始终为空对象，开发者要获取数据，可以自行在页面的state中获取 | event | 62 | | onReset | 表单重置时会触发reset事件 | event | 63 | 64 | ### 样式变量 65 | | 属性 | 默认值 | 66 | | ---- | ---- | 67 | | --form-round | 16px | 68 | | --form-round-bg | var(--color-white) | 69 | | --form-bg-color | transparent | 70 | -------------------------------------------------------------------------------- /packages/ui/src/components/form/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Form 表单 2 | ### 介绍 3 | 用于数据录入、校验，支持输入框、单选框、复选框、文件上传等类型，需要与 Field 输入框 组件搭配使用。2.5 版本开始支持此组件。 4 | ### 引入 5 | ```js 6 | import { Form } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基础用法 10 | ```js 11 | const [form, setForm] = useState({ 12 | shopName | '' 13 | }) 14 | 15 | const onSubmit = (event) => { 16 | console.log(event) 17 | } 18 | 19 | const change = (res) => { 20 | setForm({ 21 | ...form, 22 | ...res 23 | }) 24 | } 25 | return ( 26 | 27 |
28 | change({ name | e })} 35 | /> 36 | 37 | 38 |
39 | ); 40 | ``` 41 | 42 | ### 卡片用法 43 | 增加属性 `round` 添加卡片用法 44 | ```js 45 |
46 | ... 47 |
48 | ``` 49 | 50 | ## API 51 | ### Props 52 | | 属性 | 说明 | 类型 | 默认值 | 53 | | ---- | ---- | ---- | ---- | 54 | | reportSubmit | 是否返回formId用于发送模板消息 | boolean | false | 55 | | border | 是否需要border | boolean | false | 56 | | round | 卡片模式 | boolean | false | 57 | 58 | ### Events 59 | | 事件名 | 说明 | 回调参数 | 60 | | ---- | ---- | ---- | 61 | | onSubmit | 携带form中的数据触发submit事件，由于小程序组件化的限制，onSubmit事件获得的event中的event.detail.value始终为空对象，开发者要获取数据，可以自行在页面的state中获取 | event | 62 | | onReset | 表单重置时会触发reset事件 | event | 63 | 64 | ### 样式变量 65 | | 属性 | 默认值 | 66 | | ---- | ---- | 67 | | --form-round | 16px | 68 | | --form-round-bg | var(--color-white) | 69 | | --form-bg-color | transparent | 70 | -------------------------------------------------------------------------------- /packages/sites/src/demo/home/index.less: -------------------------------------------------------------------------------- 1 | @color-base: #333; 2 | 3 | body { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .index-container { 9 | box-sizing: border-box; 10 | width: 100%; 11 | padding: 0 40px; 12 | overflow: hidden; 13 | background: #F8F8F8; 14 | 15 | .title { 16 | display: flex; 17 | flex-direction: column; 18 | box-sizing: border-box; 19 | margin-bottom: 15px; 20 | margin-bottom: 22px; 21 | margin-left: 40px; 22 | font-size: 44px; 23 | } 24 | 25 | .logo { 26 | width: 216px; 27 | height: 56px; 28 | margin-top: 70px; 29 | overflow: hidden; 30 | } 31 | 32 | .logo-des { 33 | margin-top: 30px; 34 | font-size: 28px; 35 | color: #666666; 36 | } 37 | 38 | .comp { 39 | overflow: hidden; 40 | } 41 | 42 | .comp-item { 43 | position: relative; 44 | display: flex; 45 | align-items: center; 46 | justify-content: space-between; 47 | margin: 0 0 16px; 48 | padding: 0 40px; 49 | border-radius: 8px; 50 | line-height: 88px; 51 | color: @color-base; 52 | background: #FFFFFF; 53 | -webkit-transition: background .3s; 54 | transition: background .3s; 55 | cursor: pointer; 56 | 57 | &:active { 58 | color: #FFFFFF; 59 | background: @color-base; 60 | } 61 | // &:hover{ 62 | // background: @color-base; 63 | // color: #fff; 64 | // } 65 | } 66 | 67 | .comp-item-parent { 68 | margin: 48px 0 24px; 69 | font-size: 28px; 70 | font-weight: bold; 71 | line-height: 28px; 72 | color: @color-base; 73 | background: none; 74 | } 75 | 76 | .comp-item-text { 77 | font-size: 28px; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /packages/ui/src/components/image/README.md: -------------------------------------------------------------------------------- 1 | # Image 图片 2 | ### 介绍 3 | 该标签在 Taro 的 Image 标签上面增加了错误处理、加载动画等属性 4 | ### 引入 5 | ```js 6 | import { Image } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基础用法 10 | ```js 11 | 12 | ``` 13 | 14 | ### 形状图片 15 | 通过 `round` 属性可以设置图片变圆, 修改属性 `radius` 属性可以改变圆角大小 16 | ```js 17 | 18 | 19 | ``` 20 | 21 | ### 加载中提示 22 | 添加属性`showLoading`可增加图片加载提示, 增加属性 `loadingContent` 自定义加载加载提示 23 | ```js 24 | 28 | } 32 | /> 33 | ``` 34 | 35 | ### 加载失败提示 36 | 传入的图片找不到或者加载不出来就会显示默认图片, 增加属性 `errorContent` 自定义加载加载提示 37 | ```js 38 | 加载失败 } 41 | /> 42 | ``` 43 | 44 | ## API 45 | ### Props 46 | 相关属性沿用 `taro` 中 `Image` 属性 47 | | 属性 | 说明 | 类型 | 默认值 | 48 | | ------------ | ------------ | ------- | ------ | 49 | | src | 图片链接 | string | - | 50 | | transition | 是否展示动画 | boolean | true | 51 | | errorContent | 自定义失败内容 | React.ReactNode | - | 52 | | preview | 是否支持全屏预览图片 | boolean | false | 53 | | radius | 圆角大小，默认单位为px | number | 0 | 54 | | round | 是否显示为圆形 | boolean | false | 55 | | showLoading | 自定义加载内容 | boolean | true | 56 | | loadingContent | 是否展示动画 | React.ReactNode | - | 57 | 58 | ### Image Events 59 | | 事件名 | 说明 | 回调参数 | 60 | | ---- | ---- | ---- | 61 | | onClick | 点击图片时触发 | - | 62 | -------------------------------------------------------------------------------- /packages/ui/src/components/image/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Image 图片 2 | ### 介绍 3 | 该标签在 Taro 的 Image 标签上面增加了错误处理、加载动画等属性 4 | ### 引入 5 | ```js 6 | import { Image } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基础用法 10 | ```js 11 | 12 | ``` 13 | 14 | ### 形状图片 15 | 通过 `round` 属性可以设置图片变圆, 修改属性 `radius` 属性可以改变圆角大小 16 | ```js 17 | 18 | 19 | ``` 20 | 21 | ### 加载中提示 22 | 添加属性`showLoading`可增加图片加载提示, 增加属性 `loadingContent` 自定义加载加载提示 23 | ```js 24 | 28 | } 32 | /> 33 | ``` 34 | 35 | ### 加载失败提示 36 | 传入的图片找不到或者加载不出来就会显示默认图片, 增加属性 `errorContent` 自定义加载加载提示 37 | ```js 38 | 加载失败 } 41 | /> 42 | ``` 43 | 44 | ## API 45 | ### Props 46 | 相关属性沿用 `taro` 中 `Image` 属性 47 | | 属性 | 说明 | 类型 | 默认值 | 48 | | ------------ | ------------ | ------- | ------ | 49 | | src | 图片链接 | string | - | 50 | | transition | 是否展示动画 | boolean | true | 51 | | errorContent | 自定义失败内容 | React.ReactNode | - | 52 | | preview | 是否支持全屏预览图片 | boolean | false | 53 | | radius | 圆角大小，默认单位为px | number | 0 | 54 | | round | 是否显示为圆形 | boolean | false | 55 | | showLoading | 自定义加载内容 | boolean | true | 56 | | loadingContent | 是否展示动画 | React.ReactNode | - | 57 | 58 | ### Image Events 59 | | 事件名 | 说明 | 回调参数 | 60 | | ---- | ---- | ---- | 61 | | onClick | 点击图片时触发 | - | 62 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/progress/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FC } from '@tarojs/taro' 3 | import { View } from '@tarojs/components' 4 | import { Progress } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | 7 | const Person: FC = () => { 8 | return ( 9 | 10 | 11 | 12 | 基本用法 13 | 14 | 15 | 16 | 17 | 自定义线条粗细 18 | 19 | 20 | 21 | 22 | 自定进度条颜色 23 | 24 | 25 | 26 | 27 | 自定状态 28 | 29 | 30 | 31 | 32 | 自定文案 33 | 34 | 35 | 36 | 37 | 自定隐藏文案 38 | 39 | 40 | 41 | 42 | 43 | 44 | ) 45 | } 46 | 47 | export default Person -------------------------------------------------------------------------------- /packages/ui/src/components/progress/demo/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FC } from '@tarojs/taro' 3 | import { View } from '@tarojs/components' 4 | import { Progress } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | 7 | const Person: FC = () => { 8 | return ( 9 | 10 | 11 | 12 | 基本用法 13 | 14 | 15 | 16 | 17 | 自定义线条粗细 18 | 19 | 20 | 21 | 22 | 自定进度条颜色 23 | 24 | 25 | 26 | 27 | 自定状态 28 | 29 | 30 | 31 | 32 | 自定文案 33 | 34 | 35 | 36 | 37 | 自定隐藏文案 38 | 39 | 40 | 41 | 42 | 43 | 44 | ) 45 | } 46 | 47 | export default Person -------------------------------------------------------------------------------- /packages/ui/src/components/cell/cell.less: -------------------------------------------------------------------------------- 1 | @import "../../variable.less"; 2 | @import "../../mixins/index.less"; 3 | @import "./var.less"; 4 | 5 | .@{--css-prefix}-cell { 6 | position: relative; 7 | padding: var(--cell-vertical-padding) var(--cell-horizontal-padding); 8 | font-size: var(--font-size-base); 9 | background-color: var(--cell-background-color); 10 | .flex-justify(space-between); 11 | 12 | &__border { 13 | &::after { 14 | content: ""; 15 | position: absolute; 16 | right: var(--cell-horizontal-padding); 17 | bottom: 0; 18 | left: var(--cell-horizontal-padding); 19 | border-bottom: 1px solid var(--color-border-base); 20 | transform: scaleY(.5); 21 | } 22 | } 23 | 24 | &__center { 25 | align-items: center; 26 | } 27 | 28 | &__item { 29 | &:last-child { 30 | color: var(--color-text-secondary); 31 | } 32 | 33 | &:first-child { 34 | color: var(--color-text); 35 | } 36 | 37 | &-icon { 38 | padding-right: 12px; 39 | } 40 | 41 | &-title { 42 | .flex-items(center); 43 | font-size: var(--font-size-base); 44 | } 45 | 46 | &-label { 47 | font-size: var(--font-size-sm); 48 | color: var(--color-text-secondary); 49 | } 50 | 51 | &-link { 52 | padding-left: 12px; 53 | } 54 | 55 | &-click { 56 | cursor: pointer; 57 | } 58 | } 59 | 60 | &-group { 61 | &-title { 62 | padding: var(--cell-group-title-padding); 63 | font-size: var(--font-size-base); 64 | } 65 | 66 | &-item { 67 | background-color: #FFFFFF; 68 | } 69 | } 70 | 71 | &__inset { 72 | margin: 0 36px; 73 | border-radius: 16px; 74 | overflow: hidden; 75 | } 76 | } 77 | 78 | -------------------------------------------------------------------------------- /packages/ui/src/components/loading/loading.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React, { FC } from 'react' 3 | import cn from 'classnames' 4 | import { Text } from '@tarojs/components' 5 | import { CommonEvent } from '@tarojs/components/types/common' 6 | import { LoadingProps } from './type' 7 | import CompContainer from '../../common/comp-container' 8 | import { pxTransform, objectToString } from '../../utils' 9 | import { isFunction } from '../../utils/is' 10 | import { cssPrefix } from '../../common' 11 | 12 | const loadingObj = { 13 | 'default': 'loading', 14 | 'ios': 'loading-ios', 15 | 'loading': 'loading-size' 16 | } 17 | 18 | const LoadingComponent: FC = ({ 19 | type = 'default', 20 | color = '', 21 | overlay = false, 22 | size = 0, 23 | onClick = null, 24 | customizeStyle = '' 25 | }) => { 26 | const CssPrefix = cssPrefix() 27 | const handler = (event: CommonEvent): void => { 28 | if (isFunction(onClick)) { 29 | onClick(event) 30 | } 31 | } 32 | 33 | const iconClass = cn(`${CssPrefix}-loading-icon ${CssPrefix}-icon`, `${CssPrefix}-icon-${loadingObj[type]}`) 34 | 35 | const style = ( 36 | objectToString(size !== 0 ? { 37 | 'width': pxTransform(size), 38 | 'height': pxTransform(size), 39 | 'font-size': pxTransform(size), 40 | } : {}) 41 | ) 42 | 43 | return ( 44 | 49 | 55 | 56 | ) 57 | } 58 | 59 | export default LoadingComponent 60 | -------------------------------------------------------------------------------- /packages/ui/src/components/rate/README.md: -------------------------------------------------------------------------------- 1 | # Rate 评分 2 | ### 介绍 3 | 评分组件，可自定义评分星星图标的大小、间隔、评分数 4 | ### 引入 5 | ~~~js 6 | import { Rate } from 'tard' 7 | ~~~ 8 | ## 代码演示 9 | ### 基础用法 10 | 直接引入组件即可，默认有五个元素 11 | ~~~js 12 | 13 | ~~~ 14 | 15 | ### 设置选中元素个数 16 | 通过设置 `value` 属性的值可以更改选中元素的个数，支持0.5 17 | ~~~js 18 | 19 | 20 | ~~~ 21 | ### 设置元素总个数 22 | 通过设置 `max` 属性的值可以更改选中元素的总个数 23 | ~~~js 24 | 25 | ~~~ 26 | 27 | ### 设置元素之间的间隔 28 | 通过设置 `margin` 属性的值可以更改元素之间的间隔 29 | ~~~js 30 | 31 | ~~~ 32 | 33 | ### 设置元素之间的间隔 34 | 通过设置 `activeColor` 属性的值可以更改选中元素的颜色 35 | ~~~js 36 | 37 | ~~~ 38 | 39 | 40 | ### 设置元素的大小 41 | 通过设置 `size` 属性的值可以更改选中元素的颜色 42 | ~~~js 43 | 44 | ~~~ 45 | 46 | ### 动态选取元素 47 | 通过指定 `onchange` 时间实时改变选中元素的个数 48 | ~~~js 49 | const [value, setValue] = useState(3) 50 | const chage = (v) => { 51 | setValue(v) 52 | } 53 | chage(value)} /> 54 | ~~~ 55 | 56 | 57 | 58 | 59 | ## API 60 | ### Props 61 | | 属性 | 说明 | 类型 | 默认值 | 62 | | ---- | ---- | ---- | ---- | 63 | | value | 当前评分,需要通过 onChange 事件来更新 value 值，必填 | number | 0 | 64 | | max | 元素的最大个数 | number | 5 | 65 | | size | 元素尺寸大小(单位:px) | string | - | 66 | | margin | 元素间隔(单位:px) | number / string | 20 | 67 | | activeColor | 选中元素的颜色 | string | '#ffca3e' | 68 | 69 | ### Events 70 | | 事件名称 | 说明 | 返回参数 | 71 | | ---- | ---- | ---- | 72 | | onChange | 输入框值改变时触发的事件，开发者需要通过 onChange 事件来更新 value 值变化，但不填写 onChange 函数时，该组件只读 | value | 73 | 74 | ### 样式变量 75 | | 属性 | 默认值 | 76 | | ---- | ---- | 77 | | --rate-icon-size | 20px | 78 | | --rate-star-color | #ECECEC | 79 | | --rate-star-color-on | #FFCA3E | 80 | -------------------------------------------------------------------------------- /packages/ui/src/components/uploader/README.md: -------------------------------------------------------------------------------- 1 | # Uploader 上传 2 | ### 介绍 3 | 用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。 4 | ### 引入 5 | ```js 6 | import { Uploader } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基础用法 10 | ```js 11 | {}} 18 | /> 19 | 20 | { setImages(v) }} 26 | /> 27 | ``` 28 | 29 | ## API 30 | ### Props 31 | | 属性 | 说明 | 类型 | 默认值 | 32 | | ---- | ---- | ---- | ---- | 33 | | mediaType | 媒体组件类型 image or video | string | - | 34 | | maxDuration | 当type为video时可指定最大时长默认30s内 | number | - | 35 | | files | 图片文件数组, 元素为对象, 包含属性 url（必选) | File[] | - | 36 | | mode | 图片预览模式，详见[微信开发者文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html) | string | aspectFill | 37 | | showAddBtn | 是否显示添加图片按钮 | boolean | true | 38 | | multiple | 是否支持多选 | boolean | false | 39 | | length | 单行的图片数量，不能为 0 或负数 | number | 4 | 40 | | maxCount | 一行显示最大值 | number | 3 | 41 | | count | 最多可以选择的图片张数 | number | - | 42 | | sizeType | 所选的图片的尺寸 | string[] | - | 43 | | sourceType | 选择图片的来源 | string[] | - | 44 | 45 | ### Events 46 | | 事件名 | 说明 | 回调参数 | 47 | | ---- | ---- | ---- | 48 | | onChange | files 值发生变化触发的回调函数, operationType 操作类型有添加，移除，如果是移除操作，则第三个参数代表的是移除图片的索引 | event | 49 | | onImageClick | 点击图片触发的回调 | event | 50 | | onFail | 选择失败触发的回调 | event | 51 | 52 | ### 样式变量 53 | | 属性 | 默认值 | 54 | | ---- | ---- | 55 | | ---btn-add-color | var(--color-grey-2) | 56 | | ---btn-remove-color | --color-white | 57 | | ---btn-remove-bg-color | var(--color-grey-1) 58 | | ---btn-remove-size | 30px | 59 | | ---btn-remove-pos | -10px | 60 | -------------------------------------------------------------------------------- /packages/ui/src/components/rate/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Rate 评分 2 | ### 介绍 3 | 评分组件，可自定义评分星星图标的大小、间隔、评分数 4 | ### 引入 5 | ~~~js 6 | import { Rate } from 'tard' 7 | ~~~ 8 | ## 代码演示 9 | ### 基础用法 10 | 直接引入组件即可，默认有五个元素 11 | ~~~js 12 | 13 | ~~~ 14 | 15 | ### 设置选中元素个数 16 | 通过设置 `value` 属性的值可以更改选中元素的个数，支持0.5 17 | ~~~js 18 | 19 | 20 | ~~~ 21 | ### 设置元素总个数 22 | 通过设置 `max` 属性的值可以更改选中元素的总个数 23 | ~~~js 24 | 25 | ~~~ 26 | 27 | ### 设置元素之间的间隔 28 | 通过设置 `margin` 属性的值可以更改元素之间的间隔 29 | ~~~js 30 | 31 | ~~~ 32 | 33 | ### 设置元素之间的间隔 34 | 通过设置 `activeColor` 属性的值可以更改选中元素的颜色 35 | ~~~js 36 | 37 | ~~~ 38 | 39 | 40 | ### 设置元素的大小 41 | 通过设置 `size` 属性的值可以更改选中元素的颜色 42 | ~~~js 43 | 44 | ~~~ 45 | 46 | ### 动态选取元素 47 | 通过指定 `onchange` 时间实时改变选中元素的个数 48 | ~~~js 49 | const [value, setValue] = useState(3) 50 | const chage = (v) => { 51 | setValue(v) 52 | } 53 | chage(value)} /> 54 | ~~~ 55 | 56 | 57 | 58 | 59 | ## API 60 | ### Props 61 | | 属性 | 说明 | 类型 | 默认值 | 62 | | ---- | ---- | ---- | ---- | 63 | | value | 当前评分,需要通过 onChange 事件来更新 value 值，必填 | number | 0 | 64 | | max | 元素的最大个数 | number | 5 | 65 | | size | 元素尺寸大小(单位:px) | string | - | 66 | | margin | 元素间隔(单位:px) | number / string | 20 | 67 | | activeColor | 选中元素的颜色 | string | '#ffca3e' | 68 | 69 | ### Events 70 | | 事件名称 | 说明 | 返回参数 | 71 | | ---- | ---- | ---- | 72 | | onChange | 输入框值改变时触发的事件，开发者需要通过 onChange 事件来更新 value 值变化，但不填写 onChange 函数时，该组件只读 | value | 73 | 74 | ### 样式变量 75 | | 属性 | 默认值 | 76 | | ---- | ---- | 77 | | --rate-icon-size | 20px | 78 | | --rate-star-color | #ECECEC | 79 | | --rate-star-color-on | #FFCA3E | 80 | -------------------------------------------------------------------------------- /packages/ui/src/components/uploader/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Uploader 上传 2 | ### 介绍 3 | 用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。 4 | ### 引入 5 | ```js 6 | import { Uploader } from 'tard' 7 | ``` 8 | ## 代码演示 9 | ### 基础用法 10 | ```js 11 | {}} 18 | /> 19 | 20 | { setImages(v) }} 26 | /> 27 | ``` 28 | 29 | ## API 30 | ### Props 31 | | 属性 | 说明 | 类型 | 默认值 | 32 | | ---- | ---- | ---- | ---- | 33 | | mediaType | 媒体组件类型 image or video | string | - | 34 | | maxDuration | 当type为video时可指定最大时长默认30s内 | number | - | 35 | | files | 图片文件数组, 元素为对象, 包含属性 url（必选) | File[] | - | 36 | | mode | 图片预览模式，详见[微信开发者文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html) | string | aspectFill | 37 | | showAddBtn | 是否显示添加图片按钮 | boolean | true | 38 | | multiple | 是否支持多选 | boolean | false | 39 | | length | 单行的图片数量，不能为 0 或负数 | number | 4 | 40 | | maxCount | 一行显示最大值 | number | 3 | 41 | | count | 最多可以选择的图片张数 | number | - | 42 | | sizeType | 所选的图片的尺寸 | string[] | - | 43 | | sourceType | 选择图片的来源 | string[] | - | 44 | 45 | ### Events 46 | | 事件名 | 说明 | 回调参数 | 47 | | ---- | ---- | ---- | 48 | | onChange | files 值发生变化触发的回调函数, operationType 操作类型有添加，移除，如果是移除操作，则第三个参数代表的是移除图片的索引 | event | 49 | | onImageClick | 点击图片触发的回调 | event | 50 | | onFail | 选择失败触发的回调 | event | 51 | 52 | ### 样式变量 53 | | 属性 | 默认值 | 54 | | ---- | ---- | 55 | | ---btn-add-color | var(--color-grey-2) | 56 | | ---btn-remove-color | --color-white | 57 | | ---btn-remove-bg-color | var(--color-grey-1) 58 | | ---btn-remove-size | 30px | 59 | | ---btn-remove-pos | -10px | 60 | -------------------------------------------------------------------------------- /packages/demo/src/components/home/index.tsx: -------------------------------------------------------------------------------- 1 | import { Fragment, useState } from 'react' 2 | import { View, Image } from '@tarojs/components' 3 | import './index.less' 4 | import MenuObj from '../../docs-route' 5 | 6 | function Home () { 7 | const [itemActive, setItemAcitve] = useState(false) 8 | const [key, setKey] = useState('') 9 | const postIframeParentMessage = (path: string) => { 10 | window.parent.postMessage({ path }, '*') 11 | } 12 | 13 | return ( 14 | 15 | 16 | 17 | 一套基于Taro框架开发的多端React UI组件库 18 | 19 | 20 | {MenuObj.routes.map(v => ( 21 | 22 | {v.name} 26 | { 27 | v.children.map(val => ( 28 | { 32 | postIframeParentMessage(val.path) 33 | } } 34 | onTouchStart={ () => { 35 | setKey(val.path) 36 | setItemAcitve(true) 37 | } } 38 | onTouchEnd={ () => { 39 | setItemAcitve(false) 40 | } } 41 | > 42 | {val.nameEn} {val.name} 43 | 44 | )) 45 | } 46 | 47 | )) 48 | } 49 | 50 | 51 | ) 52 | } 53 | 54 | export default Home 55 | -------------------------------------------------------------------------------- /packages/sites/src/demo/home/index.tsx: -------------------------------------------------------------------------------- 1 | import { Fragment, useState } from 'react' 2 | import { View, Image } from '@tarojs/components' 3 | import './index.less' 4 | import routes from '../../constants/docs-route' 5 | 6 | function Home () { 7 | const [itemActive, setItemAcitve] = useState(false) 8 | const [key, setKey] = useState('') 9 | const postIframeParentMessage = (path: string) => { 10 | window.parent.postMessage({ path }, '*') 11 | } 12 | 13 | return ( 14 |
15 | 16 | 17 | 一套基于Taro框架开发的多端React UI组件库 18 | 19 | 20 | {routes.map(v => ( 21 | 22 | {v.name} 26 | { 27 | v.children.map(val => ( 28 | { 32 | postIframeParentMessage(val.path) 33 | } } 34 | onTouchStart={ () => { 35 | setKey(val.path) 36 | setItemAcitve(true) 37 | } } 38 | onTouchEnd={ () => { 39 | setItemAcitve(false) 40 | } } 41 | > 42 | {val.nameEn} {val.name} 43 | 44 | )) 45 | } 46 | 47 | )) 48 | } 49 | 50 |
51 | ) 52 | } 53 | 54 | export default Home 55 | -------------------------------------------------------------------------------- /packages/taro-demo/src/pages/tab/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { memo, useState } from 'react'; 2 | import { FC } from '@tarojs/taro'; 3 | import { View } from '@tarojs/components'; 4 | import { Tab } from 'tard' 5 | import DocsHeader from '../../components/doc-header' 6 | 7 | const orderStatus = [{ 8 | key: 'total', 9 | title: '全部' 10 | }, { 11 | key: '1', 12 | title: '待付款' 13 | }, { 14 | key: '2', 15 | title: '已付款' 16 | }, { 17 | key: '4', 18 | title: '已完成' 19 | }, { 20 | key: '5', 21 | title: '无效' 22 | }, { 23 | key: '6', 24 | title: '已结算' 25 | }] 26 | 27 | const TabDemo: FC = () => { 28 | 29 | const [current1, setCurrent1] = useState(0) 30 | const [current2, setCurrent2] = useState(1) 31 | const [current3, setCurrent3] = useState(2) 32 | 33 | return ( 34 | 35 | 36 | 37 | 基本用法 38 | { 41 | setCurrent1(active) 42 | }} 43 | /> 44 | 支持滚动 45 | { 49 | setCurrent2(active) 50 | }} 51 | /> 52 | 文字颜色变换 53 | { 57 | setCurrent3(active) 58 | }} 59 | /> 60 | 61 | 62 | 63 | ); 64 | }; 65 | 66 | export default memo(TabDemo); --------------------------------------------------------------------------------