本地环境

• antd-mobile 版本：
• 操作系统及其版本：
• 浏览器及其版本：

你做了什么？

你期待的结果是：

实际上的结果：

可重现的在线演示

http://localhost:8001/kitchen-sink/icon/

icon 没有 demo 目录、引起报错，是否可以改成直接用 ./icon/index.md 里的demo ？

如题

计划

• dealine 8月26日
• 发布时间 8月31日

样式

• #18 @ all

RN组件

• checkbox @linfaxin @pingan1927
• radio @linfaxin @pingan1927
• Tabs @silentcloud
• - Tooltip @silentcloud
• Steps @liqi07
• Carousel @foriacus
• Grid @benjycui
• Menu @afc163
• SearchBar @afc163
• SegmentedControl @silentcloud
• TabBar @silentcloud

web组件

• Menu增加勾选图标位置/selectIconPosition、对齐/align (gitlab 114) @pingan1927 新的视觉稿暂时没有这样的配置
• InputItem配置项及样式优化(gitlab 113) @pingan1927
• Tabs 拆分为 SegmentedControl、TabBar、Tabs @silentcloud

website

• 网站改造、遗留问题优化 @liqi07

测试反馈

• Uploader建议优化 (gitlab 136) @pingan1927
• APIS样式问题 （gitlab 208)
  • ActionSheet 动作面板 @warmhug (invalid)
  • Dropdown 下拉菜单 @warmhug
  • Modal 对话框 @silentcloud
  • Toast 轻提示 @silentcloud

0.7遗留

• rn 框架(router ScrollView) 导致部分组件demo无法工作(RefreshControl/Drawer) @silentcloud

这个配置只能选择其一，能否支持 libraryName 为 antd 、antd-mobile 一起

• datepicker rn组件功能问题 @warmhug
• toast 穿透问题 @silentcloud
• rn 框架(router ScrollView) 导致部分组件demo无法工作(RefreshControl/Drawer) @silentcloud

1. 按照 antui 样式规范进行重写，设计师会重做视觉稿，并进行细致全面的标注。
2. 严格按最新的变量规范和标注进行实现。
3. 使用 components/style/themes/default.less 里的变量完全替换原来的变量文件。

设计师出稿时间点：8.2-8.12

• 设计变量表及命名规范
• 前端变量文件

如题

官网文档有写
构建后总体积：~110KB

但我们实际按需构建后，css有缩小了，但js还有400kb。

@yiminghe @afc163

本地环境

• antd-mobile 版本：0.7.x
• 操作系统及其版本：
• 浏览器及其版本：谷歌

你做了什么？

<Tabs type="tabbar" mode="dark" defaultActiveKey="1" > <TabPane tab={<span><Icon type="home" />首页</span>} key="1"><div style={{ width: '100%', height:"100%" }}>sdfsdfsdf</div></TabPane> <TabPane tab={<span><Icon type="team" />好友</span>} key="2">选项好友内容</TabPane> <TabPane tab={<span><Icon type="setting" />设置</span>} key="3">选项设置的内容</TabPane> </Tabs>

你期待的结果是：

TabPane 能自适应大小

实际上的结果：

可重现的在线演示

本地环境

• antd-mobile 版本：0.7.2
• 操作系统及其版本：osx EI Capitan
• 浏览器及其版本：谷歌 版本 51.0.2704.103 (64-bit)

你做了什么？

import { Toast } from 'antd-mobile';

你期待的结果是：

使用toast组件能正常调用

实际上的结果：

报错 提示antd-mobile 模块不存在
Module not found: Error: Cannot resolve module 'antd-mobile' in /Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/src/containers
resolve module antd-mobile in /Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/src/containers
looking for modules in /Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules
resolve 'file' antd-mobile in /Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules
resolve file
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile is not a file
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile.js doesn't exist
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile.jsx doesn't exist
resolve 'file' or 'directory' /Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile
resolve file
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile is not a file
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile.js doesn't exist
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile.jsx doesn't exist
resolve directory
directory default file index
resolve file index in /Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile/index doesn't exist
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile/index.js doesn't exist
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile/index.jsx doesn't exist
resolve 'bower component' antd-mobile manifest files using [bower.json]
resolve file
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/src/containers/bower_components/antd-mobile/bower.json doesn't exists
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/src/bower_components/antd-mobile/bower.json doesn't exists
/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/bower_components/antd-mobile/bower.json doesn't exists
/Users/yangyangliang/apps/1mdata-frontend/bower_components/antd-mobile/bower.json doesn't exists
/Users/yangyangliang/apps/bower_components/antd-mobile/bower.json doesn't exists
/Users/yangyangliang/bower_components/antd-mobile/bower.json doesn't exists
/Users/bower_components/antd-mobile/bower.json doesn't exists
/bower_components/antd-mobile/bower.json doesn't exists
[/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile.js]
[/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile.js]
[/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile.jsx]
[/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile.jsx]
[/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile/index]
[/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile/index.js]
[/Users/yangyangliang/apps/1mdata-frontend/xlt-wechat-doctor/node_modules/antd-mobile/index.jsx]
@ ./src/containers/sendDrug.js 39:18-40

可重现的在线演示

本地环境

• antd-mobile：0.72
• webpack: ^1.13.1,
• node: 6.3.1

报错信息

ERROR in .//react-hot-loader!.//babel-loader!./src/containers/ArtisanList/index.jsx
Module not found: Error: Cannot resolve module 'antd-mobile' in /Users/admin/Workspace/asm_wx_fe/src/containers/ArtisanList
@ .//react-hot-loader!.//babel-loader!./src/containers/ArtisanList/index.jsx 15:18-40

出错代码

import { ListView, Toast } from 'antd-mobile'

目测是 package.json 文件中没有添加 main 字段, 添加以下字段到 package.json 后可以使用

"main": "dist/antd-mobile.js",

使用 npm 与 cnpm 皆出现此问题

rn-kitchen-sink android back 和 navigator 不兼容

https://facebook.github.io/react-native/docs/backandroid.html

导入后大小没变

rn 还没做 react 15.3 的兼容，demo app 首页会有很多 warning！

https://facebook.github.io/react/warnings/dont-call-proptypes.html

先暂时降回 15.2.1， 待 rn 更新

源码中有 kitchen-sink， 但是用bisheng run起来的，具体项目没有参考性。

没有类似 antd-init 生成例子，或者 yoeman 的实例项目？

或者文档类似：
http://ant.design/docs/react/getting-started

• FloatMenu http://mobile.ant.design/components/float-menu 改名为 Popover http://framework7.io/docs/popover.html
• Collapse http://mobile.ant.design/components/collapse 改名为 Accordion http://framework7.io/docs/accordion.html#accordion-layout

List

<List>
  <List.Header />
  <List.Body>
    <List.Item />
    <List.Item />
  </List.Body>
</List>

改成 =>

<List title="原来的 header">
  <List.Item />
  <List.Item />
</List>

List.Item

从

<List.Item>
  <div>
    垂直居中对齐
    <div className="am-list-brief">辅助文字内容</div>
  </div>
</List.Item>

改为：

// 去掉 `.am-list-brief`，改为 description
<List.Item description={} extra={} arrow={} >

// 此用法保持不变
<List.Item>
  <InputItem />
</List.Item>

去处 swipeAction，增加 ListActionItem

<ListActionItem actions={}/>

设为此

{
 "plugins": [["antd", { style: "css", libraryName: "antd-mobile" }]]
}

报错：

把设置中的 style: "css" 改为 style: true ，正确

npm WARN addRemoteGit Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit at ChildProcess.exithandler (child_process.js:202:12)
npm WARN addRemoteGit at emitTwo (events.js:100:13)
npm WARN addRemoteGit at ChildProcess.emit (events.js:185:7)
npm WARN addRemoteGit at maybeClose (internal/child_process.js:850:16)
npm WARN addRemoteGit at Socket. (internal/child_process.js:323:11)
npm WARN addRemoteGit at emitOne (events.js:90:13)
npm WARN addRemoteGit at Socket.emit (events.js:182:7)
npm WARN addRemoteGit at Pipe._onclose (net.js:475:12)
npm WARN addRemoteGit git+https://github.com/dancormier/react-native-swipeout.git#master resetting remote C:\Users\1\AppData\Roaming\npm-cache_git-remotes\git-https-github-com-dancormier-react-native-swipeout-git-master-decd8cbf because of error: { [Error: Command failed: git -c core.longpaths=true config --get remote.origin.url
npm WARN addRemoteGit ]
npm WARN addRemoteGit killed: false,
npm WARN addRemoteGit code: 1,
npm WARN addRemoteGit signal: null,
npm WARN addRemoteGit cmd: 'git -c core.longpaths=true config --get remote.origin.url' }

http://mobile.ant.design/kitchen-sink/

Like https://weui.io/

现在打开要刷半天，体验很不好。

0.7.0

@silentcloud

• change log
• mobile app
• release: npm run pub

https://github.com/ant-design/ant-design-mobile/blob/0.7.x/CHANGELOG.md

npm install antd-mobile --save

npm WARN addRemoteGit at Socket. (internal/child_process.js:323:11)
npm WARN addRemoteGit at emitOne (events.js:96:13)
npm WARN addRemoteGit at Socket.emit (events.js:188:7)
npm WARN addRemoteGit at Pipe._handle.close as _onclose
npm WARN addRemoteGit killed: false,
npm WARN addRemoteGit code: 1,
npm WARN addRemoteGit signal: null,
npm WARN addRemoteGit cmd: 'git -c core.longpaths=true config --get remote.origin.url' }
fetchMetadata -> vacuum-f - |#################-----------------------------------------|

ant-design-mobile 的源码已经下载， npm run ios 调出模拟器 可以看到实例。

但是如何在本地浏览器上 显示出 类似 http://mobile.ant.design/kitchen-sink/ 这种效果。

package.json里的 命令都试过了，没有用，感谢指教~~

官方演示demo

• antd-mobile 版本：0.7.2
• 操作系统及其版本：ios7.1.2
• 浏览器及其版本：ios7.1.2

你做了什么？

进入grid demo

你期待的结果是：

正常显示

实际上的结果：

布局变形，元素文字越多变形越厉害，并且单击事件失效

可重现的在线演示

官方的就有问题

本地环境

• antd-mobile 版本： "^0.7.2"
• 操作系统及其版本：OSX 10.11.5
• react native 版本："^0.30.0"

你做了什么？

import { TextareaItem } from 'antd-mobile'，同时已安装 babel-plugin-antd ，并配置 .babelrc :

{
  "plugins": [
    ["antd", {
      style: 'css',  // 'less',
      libraryName: 'antd-mobile',
    }]
  ]
}

你期待的结果是：

像官网一样正常显示

实际上的结果：

如题

https://github.com/ant-design/ant-design-mobile/blob/2cef3100e65637dda985918b7ecabd5e063912dc/components/badge/style/index.less

icon 在最终 build 中生成多份

@ALL 0.7.x 分支相关人照着这个改： 96c7db9

建议增加，目前我们是通过自己先改源码实现。

menu组件没有引入radio组件样式

现在 点击下边的按钮，url 不会更新，需要更新掉，不然刷新页面就又回到了切换前的页面。

本地环境

• antd-mobile 版本：0.7.3
• 操作系统及其版本：osx 10.11.6 ／ react native: 0.31.0 / react : 15.2.1 / android : 4.4+
• 浏览器及其版本：无（react native端）

你做了什么？

引入了Toast和Button，并执行：
<Button type='warning' onClick={()=>Toast.fail('xxxx')}>click</Button>

你期待的结果是：

显示warning button，点击后显示一个toast 提示。

实际上的结果：

1，Warning Button显示不正常, �警告信息为：“Failed prop type�, invalid prop type of value 'warning' supplied to Button, expected one of ['primary', 'default']”

2，Toast显示错误，错误信息：‘Require unknown module './images/success.png' ....’

可重现的在线演示

使用mobile demo，引入以下代码即可重现：
<Button type='warning' onClick={()=>Toast.fail('xxxx')}>click</Button>

因为需要对 .web.js 后缀进行处理，以及 .web.js 中直接 require 了 less 文件等。
导致服务端的node无法直接require 此包进行服务端渲染。

不知道后续会考虑针对 服务端渲染 进行相关的处理吗？

Checkbox的checked属性更新无法体现在组件上。

RT ，期望ListView.IndexedList右侧导航可以滑动，像native一样。

6fc1367#commitcomment-18554888

本地环境

• antd-mobile 版本：0.7.2
• 操作系统及其版本：osx 10.11.6
• 浏览器及其版本：chrome 51.0

你做了什么？

uploader组件，同一张图片，选择后删除，不能再次选择，没有触发onchange事件，官网示例有同样问题

你期待的结果是：

能再次选择

实际上的结果：

不能再次选择

可重现的在线演示

同一张图片，选择后删除，不能再次选择，没有触发onchange事件

现在 demo 的 demo 在手机上会造成卡顿甚至卡死

使用专门的 App 进行预览，用对应版本 App 扫描 demo 的二维码即可。

App

所有 demo 都打包进一个 bundle，App 每次打开都会尝试更新最新的 demo，二维码只是作为一个索引。

Note: 每发布一个不兼容版本的 antd-mobile，都需要发布一个对应版本的 App 用于预览 demo。

网站

每个组件的 demo 代码分别放在两个 Tab 中，一个是 web 版的代码，另外一个是 RN 版的代码。RN 版 的 Tab 里，右侧用于动态演示的部份改为二维码，使用 App 扫描后可以预览 demo。

线貌似还是穿透了。

重现页面：http://mobile.ant.design/components/menu/

还有一些组件在 web 下有这个问题，大家打开控制台排查一下。

ant-design/ant-design#2253

修复方式按照 64b2ca8 或者 https://fb.me/react-unknown-prop 来。

代码写 rem

• 是否将样式单位切换成rem。
• 假设rem化，约定1rem换算成多少px？
• AntUI最近实现的代码里约定了1rem=100px。
• 也有部分实现是约定1rem=页面宽度/10，这是为了以后更好地兼容vw，vh。
• 今天晚上MR大团队内的代码时，发现有通过mediaQuery设置1rem=18px，1rem=20px等等的。然后业务代码的样式使用rem单位。
• 也可以约定1rem=16px，这个html是默认的font-size。

还有一个问题，组件代码的1px高清方案是基于initial-scale=1这样的viewport设置的，一旦使用rem，用户可能就会使用initial-scale=1/dpr的高清方案，这个时候，组件的1px可能就变为1/dpr^2了，需要考虑这种情况吗？

关于是否使用rem，1.0版我们总结一个最后方案吧。越早确定约好

代码写 px

按照 750 设计稿的标注写 px ，由工具转换成： https://github.com/ant-tool/postcss-plugin-px2rem ，然后经过一些动态页面设置： http://yiminghe.me/lab/playground/2016-exams/6.html 等比缩放.

Android有自己的交互，现在的方式都是 iOS 的，后期 native UI 升级也比较方便

@warmhug

如题

参考 date-picker/action-sheet

kitchen-sink 加入

https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js

update to antd-mobile 1.0 for QA

https://github.com/ant-design/antd-init/tree/master/boilerplates/MobileDemo