├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmrc ├── README.md ├── babel.config.js ├── config ├── dev.js ├── index.js └── prod.js ├── global.d.ts ├── package.json ├── project.config.json ├── src ├── app.config.ts ├── app.scss ├── app.ts ├── index.html └── pages │ ├── accordion │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── activity-indicator │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── badge │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── button │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── card │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── carousel │ ├── index.config.ts │ └── index.tsx │ ├── checkbox │ ├── index.config.ts │ └── index.tsx │ ├── drawer-base │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── drawer │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── flex │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── grid │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── icon │ ├── index.config.ts │ └── index.tsx │ ├── index │ ├── images │ │ ├── bottom.png │ │ └── top.png │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── input │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── list │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── locale-provider │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── menu │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── navbar │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── notice-bar │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── pagination │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── popover │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── progress │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── radio │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── result │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── search-bar │ ├── index.config.ts │ └── index.tsx │ ├── segmented-control │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── stepper │ ├── index.config.ts │ └── index.tsx │ ├── steps │ ├── images │ │ └── success.png │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── tabbar │ ├── demo-0 │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.tsx │ ├── demo-1 │ │ ├── index.config.ts │ │ ├── index.scss │ │ └── index.tsx │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── tabs │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── tag │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ ├── white-space │ ├── index.config.ts │ ├── index.scss │ └── index.tsx │ └── wing-blank │ ├── index.config.ts │ ├── index.scss │ └── index.tsx ├── tsconfig.json └── yarn.lock /.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 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["taro/react"], 3 | "rules": { 4 | "react/jsx-uses-react": "off", 5 | "react/react-in-jsx-scope": "off" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | deploy_versions/ 3 | .temp/ 4 | .rn_temp/ 5 | node_modules/ 6 | .DS_Store 7 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npm.taobao.org 2 | disturl=https://npm.taobao.org/dist 3 | sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 4 | phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/ 5 | electron_mirror=https://npm.taobao.org/mirrors/electron/ 6 | chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver 7 | operadriver_cdnurl=https://npm.taobao.org/mirrors/operadriver 8 | selenium_cdnurl=https://npm.taobao.org/mirrors/selenium 9 | node_inspector_cdnurl=https://npm.taobao.org/mirrors/node-inspector 10 | fsevents_binary_host_mirror=http://npm.taobao.org/mirrors/fsevents/ 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ant Design Mobile 2 | 3 | > Taro v3.3+ 4 | 5 | 在 Taro 中使用支付宝移动端组件库 [Ant Design Mobile](https://mobile.ant.design/docs/react/introduce-cn)。 6 | 7 | `Ant Design Mobile` 官方示例：https://mobile.ant.design/kitchen-sink/?lang=zh-CN。 8 | 9 | 能直接兼容使用的组件大概为 **80%**，具体适配情况请见下文。 10 | 11 | ## Getting Start 12 | 13 | ```bash 14 | # 安装 CLI 15 | npm i @tarojs/cli@alpha -g 16 | 17 | # 启动项目 18 | cd taro-antd 19 | npm i 20 | taro build --type weapp --watch 21 | 22 | # 预览项目时需要以 prod 模式打包 23 | taro build --type weapp 24 | ``` 25 | 26 | ## 兼容工作 27 | 28 | 相对于官方示例的 H5 代码，本项目主要做了以下兼容工作： 29 | 30 | ### 1. 浏览器默认样式 31 | 32 | #### 方式一、开发者可以选择在全局引入浏览器的默认样式 33 | 34 | Taro 提供两种内置样式我们可以直接引入生效： 35 | 36 | - `@tarojs/taro/html.css`: W3C HTML4 的内置样式，只有 HTML4 标签样式，体积较小，兼容性强，能适应大多数情况。 37 | - `@tarojs/taro/html5.css`: Chrome(Blink) HTML5 的内置样式，内置样式丰富，包括了大多数 HTML5 标签，体积较大，不一定支持所有小程序容器。 38 | 39 | ```scss 40 | // app.css 41 | // html4 42 | import '@tarojs/taro/html.css'; 43 | // html5 44 | import '@tarojs/taro/html5.css'; 45 | ``` 46 | 47 | #### 方式二、只摘取部分需要的浏览器默认样式 48 | 49 | 以往编写 H5 应用时，我们常常会写一些样式去重置浏览器默认样式。所以一般情况不需要引入，或者可以手动挑选必须的样式。 50 | 51 | ```scss 52 | // app.css 53 | // 以下是为了适配 Antd 项目所需要的默认样式 54 | .h5-span { 55 | display: inline; 56 | } 57 | ``` 58 | 59 | ### 2. 尺寸单位 60 | 61 | Taro 默认会对开发者编写的尺寸进行转换： 62 | 63 | - 小程序：px -> rpx 64 | - H5：px -> rem 65 | 66 | 但是组件库一般按照 750px 设计稿的 1/2 编写尺寸，Taro 不需要再对组件库的尺寸进行转换。 67 | 68 | 可以配置 `@tarojs/plugin-html` 的 `pxtransformBlackList` 选项进行过滤： 69 | 70 | ```js 71 | // config/index.js 72 | config = { 73 | plugins: [ 74 | ['@tarojs/plugin-html', { 75 | // 过滤 antd 组件库的前缀：am- 76 | pxtransformBlackList: [/am-/, /demo-/, /^body/] 77 | }] 78 | ] 79 | // ... 80 | } 81 | ``` 82 | 83 | ### 3. SVG 图标 84 | 85 | 小程序不支持 SVG，目前组件库中的 SVG 图标都不能使用。 86 | 87 | 开发者可以配置的图标尽量使用 ``，组件内置的 SVG 图标则暂时没有办法处理。 88 | 89 | ### 4. 获取元素尺寸 90 | 91 | 因为在小程序中获取元素尺寸的 API（SelectorQuery） 是**异步**的，和 H5 的**同步**获取（如 `elment.offsetHeight`）不一样。所以需要调用 H5 DOM API 获取元素尺寸的组件，如 `SwipeAction`、`Search`，均不能使用。 92 | 93 | ### 5. 样式选择器 94 | 95 | 以下选择器不能正常工作： 96 | 97 | - 通配符 `*` 98 | - 媒体查询 99 | - 属性选择器，当属性不是对应小程序组件的内置属性时 100 | 101 | ## 组件支持列表 102 | 103 | ### 布局 Layout 104 | 105 | | 组件 | 是否支持 | 备注 | 106 | | :---- | :------ | :---- | 107 | | Flex | ✓ | | 108 | | WhiteSpace | ✓ | | 109 | | WingBlank | ✓ | | 110 | 111 | ### 导航 Navigation 112 | 113 | | 组件 | 是否支持 | 备注 | 114 | | :---- | :------ | :---- | 115 | | Drawer | ✓ | | 116 | | Menu | ✓ | | 117 | | NavBar | ✓ | Icon 需要自定义 | 118 | | Pagination | ✓ | | 119 | | Popover | ✗ | 不支持 `ReactDOM.unstable_renderSubtreeIntoContainer` | 120 | | SegmentedControl | ✓ | | 121 | | TabBar | ✓ | | 122 | | Tabs | ✓ | | 123 | 124 | ### 数据录入 Data Entry 125 | 126 | | 组件 | 是否支持 | 备注 | 127 | | :---- | :------ | :---- | 128 | | Button | ✓ | 带 SVG Icon 的不能使用 | 129 | | Calendar | - | | 130 | | Checkbox | ✓ | | 131 | | DatePicker | - | 使用小程序的 `` 代替 | 132 | | DatePickerView | - | 使用小程序的 `` 代替 | 133 | | ImagePicker | - | | 134 | | InputItem | ✓ | 不支持模拟键盘 | 135 | | Picker | - | 使用小程序的 `` 代替 | 136 | | PickerView | - | 使用小程序的 `` 代替 | 137 | | Radio | ✓ | | 138 | | Range | - | | 139 | | SearchBar | ✗ | | 140 | | Slider | - | 使用小程序的 `` 代替 | 141 | | Stepper | ✗ | | 142 | | Switch | - | 使用小程序的 `` 代替 | 143 | | TextareaItem | - | | 144 | 145 | ### 数据展示 Data Display 146 | 147 | | 组件 | 是否支持 | 备注 | 148 | | :---- | :------ | :---- | 149 | | Accordion | ✓ | 属性选择器有问题，动画会失效 | 150 | | Badge | ✓ | | 151 | | Card | ✓ | 图片要显式设置宽高 | 152 | | Carousel | ✗ | 使用小程序的 `Swiper` 代替 | 153 | | Grid | ✓ | | 154 | | Icon | ✓ | 不支持 SVG | 155 | | List | ✓ | | 156 | | NoticeBar | ✗ | 组件内部有报错，不支持 SVG Icon | 157 | | Steps | ✓ | 把 SVG ICON 替换为自定义 Icon 才能使用 | 158 | | Tag | ✓ | | 159 | 160 | ### 操作反馈 Feedback 161 | 162 | | 组件 | 是否支持 | 备注 | 163 | | :---- | :------ | :---- | 164 | | ActionSheet | ✗ | 使用小程序的 `` 代替 | 165 | | ActivityIndicator | ✓ | | 166 | | Modal | ✗ | 使用 `Taro.showModal` 代替 | 167 | | Progress | ✓ | | 168 | | Toast | ✗ | 使用 `Taro.showToast` 代替 | 169 | 170 | 171 | ### 手势 Gesture 172 | 173 | | 组件 | 是否支持 | 备注 | 174 | | :---- | :------ | :---- | 175 | | PullToRefresh | ✗ | | 176 | | SwipeAction | ✗ | 不支持以浏览器的同步 API 获取 DOM 尺寸 | 177 | 178 | 179 | ### 组合组件 Combination 180 | 181 | | 组件 | 是否支持 | 备注 | 182 | | :---- | :------ | :---- | 183 | | ListView | ✗ | 使用 Taro 提供的 `VirtualList` 组件代替 | 184 | | Result | ✓ | 不能使用 SVG Icon | 185 | 186 | 187 | ### 其他 Other 188 | 189 | | 组件 | 是否支持 | 备注 | 190 | | :---- | :------ | :---- | 191 | | LocaleProvider | ✓ | 只能适配 `Menu` 和 `Pagination` 组件 | 192 | 193 | ## 共建 194 | 195 | 组件库还有若干组件未完成兼容测试，如**是否支持**列为 `-`，备注为空的组件，欢迎各位同学进行共建～ 196 | 197 | 另外，有一些组件如 `SwipeAction`、`Search` 针对小程序环境作一些修改后是可以使用的，也欢迎各位进行共建～ 198 | -------------------------------------------------------------------------------- /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 | plugins: [['import', { 11 | libraryName: 'antd-mobile', 12 | style: 'css' 13 | }]] 14 | } 15 | -------------------------------------------------------------------------------- /config/dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | NODE_ENV: '"development"' 4 | }, 5 | defineConstants: { 6 | }, 7 | mini: {}, 8 | h5: {} 9 | } 10 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | projectName: 'taro-antd', 3 | date: '2021-3-31', 4 | designWidth: 750, 5 | deviceRatio: { 6 | 640: 2.34 / 2, 7 | 750: 1, 8 | 828: 1.81 / 2 9 | }, 10 | sourceRoot: 'src', 11 | outputRoot: 'dist', 12 | plugins: [ 13 | ['@tarojs/plugin-html', { 14 | pxtransformBlackList: [/am-/, /demo-/, /^body/] 15 | }] 16 | ], 17 | defineConstants: { 18 | }, 19 | copy: { 20 | patterns: [ 21 | ], 22 | options: { 23 | } 24 | }, 25 | framework: 'react', 26 | mini: { 27 | miniCssExtractPluginOption: { 28 | ignoreOrder: true 29 | }, 30 | postcss: { 31 | url: { 32 | enable: true, 33 | config: { 34 | limit: 1024 // 设定转换尺寸上限 35 | } 36 | }, 37 | cssModules: { 38 | enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true 39 | config: { 40 | namingPattern: 'module', // 转换模式，取值为 global/module 41 | generateScopedName: '[name]__[local]___[hash:base64:5]' 42 | } 43 | } 44 | } 45 | }, 46 | h5: { 47 | publicPath: '/', 48 | staticDirectory: 'static', 49 | postcss: { 50 | autoprefixer: { 51 | enable: true, 52 | config: { 53 | } 54 | }, 55 | cssModules: { 56 | enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true 57 | config: { 58 | namingPattern: 'module', // 转换模式，取值为 global/module 59 | generateScopedName: '[name]__[local]___[hash:base64:5]' 60 | } 61 | } 62 | } 63 | } 64 | } 65 | 66 | module.exports = function (merge) { 67 | if (process.env.NODE_ENV === 'development') { 68 | return merge({}, config, require('./dev')) 69 | } 70 | return merge({}, config, require('./prod')) 71 | } 72 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.png'; 2 | declare module '*.gif'; 3 | declare module '*.jpg'; 4 | declare module '*.jpeg'; 5 | declare module '*.svg'; 6 | declare module '*.css'; 7 | declare module '*.less'; 8 | declare module '*.scss'; 9 | declare module '*.sass'; 10 | declare module '*.styl'; 11 | 12 | declare namespace NodeJS { 13 | interface ProcessEnv { 14 | TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd' 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "taro-antd", 3 | "version": "1.0.0", 4 | "private": true, 5 | "description": "", 6 | "templateInfo": { 7 | "name": "default", 8 | "typescript": true, 9 | "css": "sass" 10 | }, 11 | "scripts": { 12 | "build:weapp": "taro build --type weapp", 13 | "build:swan": "taro build --type swan", 14 | "build:alipay": "taro build --type alipay", 15 | "build:tt": "taro build --type tt", 16 | "build:h5": "taro build --type h5", 17 | "build:rn": "taro build --type rn", 18 | "build:qq": "taro build --type qq", 19 | "build:jd": "taro build --type jd", 20 | "build:quickapp": "taro build --type quickapp", 21 | "dev:weapp": "npm run build:weapp -- --watch", 22 | "dev:swan": "npm run build:swan -- --watch", 23 | "dev:alipay": "npm run build:alipay -- --watch", 24 | "dev:tt": "npm run build:tt -- --watch", 25 | "dev:h5": "npm run build:h5 -- --watch", 26 | "dev:rn": "npm run build:rn -- --watch", 27 | "dev:qq": "npm run build:qq -- --watch", 28 | "dev:jd": "npm run build:jd -- --watch", 29 | "dev:quickapp": "npm run build:quickapp -- --watch" 30 | }, 31 | "browserslist": [ 32 | "last 3 versions", 33 | "Android >= 4.1", 34 | "ios >= 8" 35 | ], 36 | "author": "", 37 | "dependencies": { 38 | "@babel/runtime": "^7.7.7", 39 | "@tarojs/components": "3.3.3", 40 | "@tarojs/plugin-html": "3.3.3", 41 | "@tarojs/react": "3.3.3", 42 | "@tarojs/runtime": "3.3.3", 43 | "@tarojs/taro": "3.3.3", 44 | "antd-mobile": "^2.3.4", 45 | "rc-form": "^2.4.12", 46 | "react": "^17.0.0", 47 | "react-dom": "^17.0.0" 48 | }, 49 | "devDependencies": { 50 | "@babel/core": "^7.8.0", 51 | "@tarojs/mini-runner": "3.3.3", 52 | "@tarojs/webpack-runner": "3.3.3", 53 | "@types/react": "^17.0.2", 54 | "@types/webpack-env": "^1.13.6", 55 | "@typescript-eslint/eslint-plugin": "^4.15.1", 56 | "@typescript-eslint/parser": "^4.15.1", 57 | "babel-plugin-import": "^1.13.3", 58 | "babel-preset-taro": "3.3.3", 59 | "eslint": "^6.8.0", 60 | "eslint-config-taro": "3.3.3", 61 | "eslint-plugin-import": "^2.12.0", 62 | "eslint-plugin-react": "^7.8.2", 63 | "eslint-plugin-react-hooks": "^4.2.0", 64 | "stylelint": "9.3.0", 65 | "typescript": "^4.1.0", 66 | "webpack-bundle-analyzer": "^4.4.1" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "miniprogramRoot": "./dist", 3 | "projectname": "taro-antd", 4 | "description": "", 5 | "appid": "touristappid", 6 | "setting": { 7 | "urlCheck": true, 8 | "es6": false, 9 | "postcss": false, 10 | "minified": false 11 | }, 12 | "compileType": "miniprogram" 13 | } 14 | -------------------------------------------------------------------------------- /src/app.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | pages: [ 3 | 'pages/index/index', 4 | 'pages/button/index', 5 | 'pages/flex/index', 6 | 'pages/white-space/index', 7 | 'pages/wing-blank/index', 8 | 'pages/drawer-base/index', 9 | 'pages/drawer/index', 10 | 'pages/menu/index', 11 | 'pages/navbar/index', 12 | 'pages/pagination/index', 13 | 'pages/popover/index', 14 | 'pages/segmented-control/index', 15 | 'pages/tabbar/index', 16 | 'pages/tabbar/demo-0/index', 17 | 'pages/tabbar/demo-1/index', 18 | 'pages/tabs/index', 19 | 'pages/accordion/index', 20 | 'pages/badge/index', 21 | 'pages/card/index', 22 | 'pages/grid/index', 23 | 'pages/carousel/index', 24 | 'pages/icon/index', 25 | 'pages/list/index', 26 | 'pages/notice-bar/index', 27 | 'pages/steps/index', 28 | 'pages/tag/index', 29 | 'pages/checkbox/index', 30 | 'pages/radio/index', 31 | 'pages/input/index', 32 | 'pages/stepper/index', 33 | 'pages/search-bar/index', 34 | 'pages/activity-indicator/index', 35 | 'pages/progress/index', 36 | 'pages/result/index', 37 | 'pages/locale-provider/index' 38 | ], 39 | window: { 40 | backgroundTextStyle: 'light', 41 | navigationBarBackgroundColor: '#fff', 42 | navigationBarTitleText: 'WeChat', 43 | navigationBarTextStyle: 'black' 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/app.scss: -------------------------------------------------------------------------------- 1 | // @import 'antd-mobile/dist/antd-mobile.css'; 2 | 3 | .demo-sub-title { 4 | color: #888; 5 | font-size: 14px; 6 | padding: 30px 0 18px 0; 7 | } 8 | 9 | .demo-placeholder { 10 | background-color: #ebebef; 11 | color: #bbb; 12 | text-align: center; 13 | height: 30px; 14 | line-height: 30px; 15 | width: 100%; 16 | } 17 | 18 | .demo-title { 19 | padding: 15px 0 9px 15px; 20 | color: #000; 21 | font-size: 16px; 22 | line-height: 16px; 23 | height: 16px; 24 | font-weight: bolder; 25 | position: relative; 26 | } 27 | 28 | .h5-span { 29 | display: inline; 30 | } 31 | -------------------------------------------------------------------------------- /src/app.ts: -------------------------------------------------------------------------------- 1 | import { Component } from 'react' 2 | import './app.scss' 3 | 4 | class App extends Component { 5 | 6 | componentDidMount () {} 7 | 8 | componentDidShow () {} 9 | 10 | componentDidHide () {} 11 | 12 | componentDidCatchError () {} 13 | 14 | // this.props.children 是将要会渲染的页面 15 | render () { 16 | return this.props.children 17 | } 18 | } 19 | 20 | export default App 21 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /src/pages/accordion/index.config.ts: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/pages/accordion/index.scss: -------------------------------------------------------------------------------- 1 | 2 | .my-accordion .pad .am-accordion-content-box { 3 | padding: 10px 4 | } 5 | -------------------------------------------------------------------------------- /src/pages/accordion/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Accordion, List } from 'antd-mobile' 3 | import './index.scss' 4 | 5 | class AccordionExmple1 extends React.Component { 6 | onChange = (key) => { 7 | console.log(key) 8 | } 9 | 10 | render() { 11 | return ( 12 |
13 | 14 | 15 | 16 | content 1 17 | content 2 18 | content 3 19 | 20 | 21 | this is panel content2 or other 22 | 23 | text text text text text text text text text text text text text text text 24 | 25 | 26 |
27 | ) 28 | } 29 | } 30 | 31 | class AccordionExmple2 extends React.Component { 32 | onChange = (key) => { 33 | console.log(key) 34 | } 35 | 36 | render() { 37 | return ( 38 |
39 | 40 | 41 | 42 | content 1 43 | content 2 44 | content 3 45 | 46 | 47 | this is panel content2 or other 48 | 49 | text text text text text text text text text text text text text text text 50 | 51 | 52 |
53 | ) 54 | } 55 | } 56 | 57 | export default function Index () { 58 | return ( 59 | 60 |
61 |
基本
62 | 63 |
64 |
65 |
手风琴模式
66 | 67 |
68 | 69 | ) 70 | } 71 | 72 | -------------------------------------------------------------------------------- /src/pages/activity-indicator/index.config.ts: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/pages/activity-indicator/index.scss: -------------------------------------------------------------------------------- 1 | .loading-example { 2 | display: flex; 3 | justify-content: flex-start; 4 | } 5 | .align { 6 | display: flex; 7 | flex-direction: column; 8 | } 9 | 10 | .h5-body { 11 | height: 100vh; 12 | } 13 | -------------------------------------------------------------------------------- /src/pages/activity-indicator/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './index.scss' 3 | 4 | import { ActivityIndicator, WingBlank, WhiteSpace, Button } from 'antd-mobile' 5 | 6 | class App extends React.Component { 7 | state = { 8 | animating: false 9 | } 10 | 11 | componentWillUnmount() { 12 | clearTimeout(this.closeTimer) 13 | } 14 | 15 | closeTimer: NodeJS.Timeout 16 | 17 | showToast = () => { 18 | this.setState({ animating: !this.state.animating }) 19 | this.closeTimer = setTimeout(() => { 20 | this.setState({ animating: !this.state.animating }) 21 | }, 1000) 22 | } 23 | render() { 24 | return ( 25 |
26 | 27 |
28 |

Without text

29 |
30 | 31 |
32 |

With text

33 |
34 | 37 |
38 |

With large size and customized text style

39 |
40 |
41 | 42 | Loading... 43 |
44 |
45 |
46 |
47 | 48 | 49 |
50 | 55 |
56 |
57 | 58 |
59 | ) 60 | } 61 | } 62 | 63 | 64 | export default function Index () { 65 | return ( 66 | 67 |
68 |
基本
69 | 70 |
71 | 72 | ) 73 | } 74 | 75 | -------------------------------------------------------------------------------- /src/pages/badge/index.config.ts: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/pages/badge/index.scss: -------------------------------------------------------------------------------- 1 | .demo-corner-badge { 2 | height: 50px; 3 | width: 200px; 4 | } 5 | .special-badge .am-list-line { 6 | padding-right: 0; 7 | } 8 | .special-badge .am-list-line .am-list-extra { 9 | padding: 0; 10 | height: 44px; 11 | } 12 | .special-badge .am-badge { 13 | transform: rotate(45deg); 14 | transform-origin: right bottom; 15 | right: 0; 16 | top: 13px; 17 | width: 50px; 18 | } 19 | .special-badge .am-badge-text { 20 | border-radius: 1px; 21 | } 22 | -------------------------------------------------------------------------------- /src/pages/badge/index.tsx: -------------------------------------------------------------------------------- 1 | import { List, Badge } from 'antd-mobile' 2 | import './index.scss' 3 | 4 | const BadgeDemo = () => ( 5 | 6 | 7 | 8 | 9 | 10 | Dot badge 11 | 12 | } 15 | arrow='horizontal' 16 | > 17 | Content 18 | 19 | 20 | Use corner prop 21 | 22 | }> 23 | Custom corner 24 | 25 | 26 | Text number 0 27 | 28 | 29 | 30 | Marketing: 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | Customize 39 | 40 | 41 | 51 | 52 | 53 | ) 54 | 55 | export default function Index () { 56 | return ( 57 | 58 |
59 |
基本
60 | 61 |
62 | 63 | ) 64 | } 65 | 66 | -------------------------------------------------------------------------------- /src/pages/button/index.config.ts: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/pages/button/index.scss: -------------------------------------------------------------------------------- 1 | .result-example .spe { 2 | width: 60px; 3 | height: 60px; 4 | } 5 | .sub-title { 6 | color: #888; 7 | font-size: 14px; 8 | padding: 30px 0 18px 0; 9 | margin-left: 15px; 10 | } 11 | -------------------------------------------------------------------------------- /src/pages/button/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button, List, WhiteSpace, WingBlank } from 'antd-mobile' 2 | import './index.scss' 3 | 4 | const ButtonExample = () => ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {/* */} 16 | {/* */} 17 | 18 | {/* */} 19 | {/* */} 20 | 21 | 22 | {/* */} 23 | {/* */} 24 | 25 | 26 | 27 | {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */} 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */} 36 | 37 | 38 | ) 39 | 40 | const ComplexButtonDemo = () => ( 41 | 42 | small} 44 | multipleLine 45 | > 46 | Regional manager 47 | 48 | Can be collected, refund, discount management, view data and other operations 49 | 50 | 51 | small} 53 | multipleLine 54 | > 55 | Regional manager 56 | 57 | Can be collected, refund, discount management, view data and other operations 58 | 59 | 60 | 61 | ) 62 | 63 | export default function Index () { 64 | return ( 65 | <> 66 | 67 | 68 | 69 | ) 70 | } 71 | 72 | -------------------------------------------------------------------------------- /src/pages/card/index.config.ts: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/pages/card/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NervJS/taro-antd-mobile/133593098f61bee94c36da2c17303cd36f06640a/src/pages/card/index.scss -------------------------------------------------------------------------------- /src/pages/card/index.tsx: -------------------------------------------------------------------------------- 1 | import { Card, WingBlank, WhiteSpace } from 'antd-mobile' 2 | import './index.scss' 3 | 4 | function Demo1 () { 5 | return ( 6 | 7 | 8 | 9 | this is extra} 17 | /> 18 | 19 |
This is content of `Card`
20 | 21 | extra footer content} /> 22 | 23 | 24 | 25 | ) 26 | } 27 | 28 | function Demo2 () { 29 | return ( 30 |
31 | 32 | 33 | this is extra} 41 | /> 42 | 43 |
This is content of `Card`
44 | 45 | extra footer content
} /> 46 | 47 | 48 | ) 49 | } 50 | 51 | export default function Index () { 52 | return ( 53 | 54 |
55 |
默认
56 | 57 |
58 |
59 |
通栏
60 | 61 |
62 | 63 | ) 64 | } 65 | 66 | -------------------------------------------------------------------------------- /src/pages/carousel/index.config.ts: -------------------------------------------------------------------------------- 1 | export default {} 2 | -------------------------------------------------------------------------------- /src/pages/carousel/index.tsx: -------------------------------------------------------------------------------- 1 | 2 | export default function Index () { 3 | return ( 4 |
5 | {'不支持