ng-zorro/ng-zorro-antd-mobile

A configurable Mobile UI components based on Ant Design Mobile and Angular. 🐜

NG-ZORRO-Mobile

This is the Angular implementation of Ant Design Mobile specification, serving Alibaba big data wireless service.

中文 README

Scan QR Code

Features

• An enterprise-class UI design language for Angular mobile web applications.
• The UI is fully Configurable and Scalable, easily adapt to all kinds of product style.
• Use TypeScript to develop, provide type definition files, support type and attribute smart tips for easy business development.
• Provide "Components are loaded on demand" / "Web page HD display" / "SVG Icon" optimization features, integrated development.
• Support running in Ionic[Guide].

Environment Support

with polyfills

• iOS 10.3+
• Android 4.4+

Angular Support

Now Supports Angular ^17.0.0.

Installation

We recommend using @angular/cli to install，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of angular packages and tooling.

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd-mobile

More information about @angular/cli here.

You can also install ng-zorro-antd-mobile with npm or yarn

$ npm install ng-zorro-antd-mobile

Contributing

We welcome all contributions. Please read our CONTRIBUTING.md first.

If you'd like to help us improve NG-ZORRO-MOBILE, just create a Pull Request. Feel free to report bugs and issues here.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way(This guide does not provide actual support services for this project!) and How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

Help from the Community

For questions on how to use NG-ZORRO-MOBILE, please post questions to using the ng-zorro-mobile tag. If you're not finding what you need on StackOverflow, you can find us on as well.

As always, we encourage experienced users to help those who are not familiar with NG-ZORRO-MOBILE!

Users

• Alibaba

If your company or product is using NG-ZORRO-MOBILE, please let us know here!

License

MIT

ng-zorro-antd-mobile's Issues

在 ngOnInit 使用Toast.fail ,Toast.loading 等方法时 会出现ApplicationRef.tick is called recursively 错误

Version

0.9.9

Environment

angular 6.4.7

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-brzqvy

Steps to reproduce

在 ngOnInit 函数中调用

What is expected?

页面加载业务条件不满足 弹出轻提示

What is actually happening?

报错

Other?

如实现

safari The provided animation property "touch-action" is not a supported CSS property for animations，是因为不支持动画？

Version

0.9.6

Environment

mac safari

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-qks3k3

Steps to reproduce

在sarial打开重现链接就可以看到tabs是空白

What is expected?

正确显示tab

What is actually happening?

正确显示tab

Other?

ng6,用了web-animations-js兼容库，还是解决不了问题。

Tabs 高度问题 如第一个 TabPane 不设置高度 之后的 TabPane 都固定高度为0 内容无法显示

Version

0.9.10

Environment

浏览器

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-t6vjw4

Steps to reproduce

Tabs 中 TabPane 不设置高度 由内容体撑起高度

What is expected?

由于 业务需求 这边期望 TabPane 里面的 内容是异步加载的 高度为不确定 如果设置了固定高度内容无法正常显示

What is actually happening?

如实例

Other?

Icon组件line-height不生效

在encapsulation: ViewEncapsulation.None的情况下，:host无法使用，已提pr

当使用Chrome的console来和组件交互时(或者使用移动端evaluateJavaScript时),Toast显示不正常

Version

0.9.6

Environment

macOS10.14 chrome(70.0.3538.77),安卓或者苹果手机的Webview

Reproduction link

https://stackblitz.com/run?stackblitz无法复现内容,重现步骤有项目下载链接

Steps to reproduce

stackblitz 无法实现,请下载 https://dh-development.oss-cn-beijing.aliyuncs.com/BridgeTest.zip
npm install
ng serve
在console 运行bridge.test(),这种状况类似于在iOS或者Android执行evaluateJavaScript
Toast显示异常

What is expected?

Toast正常显示.这种情况出现的原因是什么呢?因为我们希望使用js bridge来和native之间进行通讯,目前可以使用window,postMessage解决,请问这个是什么原因造成的呢?同样的情况进行route进行路由切换也会造成页面混杂,不同页面混合在一起.

What is actually happening?

显示不正常,不完整.

Other?

寻求解决办法以及出现这种状况的原因.谢谢

惰性加载无法使用button元素

Version

0.9.5

Environment

ng 惰性加载

Reproduction link

https://stackblitz.com/edit/angular-ubvhjn

Steps to reproduce

点击Customers

What is expected?

惰性加载可以使用相关元素，希望有相关惰性加载的用例可测试

What is actually happening?

未知

Other?

暂时只是测试button元素，其他的在惰性加载是否可用未知。

在 ios 8.3 中 InputItem 组件 Button 组件 Navbar 组件 均无法正常显示

Version

0.9.9

Environment

angular 6.4.7

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-injnaq

Steps to reproduce

页面兼容问题 测试到 iso 这个版本 基本上大部分组件都无法使用 已经添加了基本的腻子脚本 core-es6 classlist 等 均无法解决 官方说明的环境支持是 ios7 所以希望能支持这个版本 现还有很多人在使用 8.3

What is expected?

正常显示

What is actually happening?

页面 输入框 InputItem 点击无反应 不弹出键盘 Button 里面的文字无法显示 Navbar 消失 安卓8.0显示正常 如实例中的调用 在ios8.3中 不具有原有功能

Other?

inputitem的数字键盘customkeyboard点击确定按钮无法收起

http://ng.mobile.ant.design/issue-helper/#/zh 这个地址上版本现在无法选择，无法实现预览

问题：inputitem的数字键盘customkeyboard点击确定未消失
版本：2018.10.9日master
环境：win10 chrome69版本
复现：目前demo上数字键盘就是有问题的，展开后点击确定无法收起

看了下代码：
custom-input.service.ts：

custom-keyboard.component.ts：
CustomKeyboard组件没有wrapperCls属性，只有wrapCls属性，该属性是绑定在table的td上的

custom-keyboard.component.html：

看代码感觉是要将'am-number-keyboard-wrapper-hide'样式绑定在CustomKeyboard组件上的，估计得用HostBinding属性装饰器搞了

NG-ZORRO-MOBILE Users Research 使用者调研

如果您和您的公司或组织使用了 NG-ZORRO_MOBILE ，非常感谢您的支持，欢迎留下公司或产品名，您的回复将成为维护者、社区用户和观望者的信心来源。

在不泄露信息的前提下，建议把截图晒一晒~
无关回复将会定期删除

推荐回复格式：

- 产品：
- 公司或组织：（如果可以）
- 链接：（如果可以）
- 截图：（如果可以）

We appreciate you support if you or your organization is using NG-ZORRO-MOBILE. You are welcome to leave replies about your product and organization here, which could became the confidence of maintiners, communication and undecided watchers.

Recommended reply format:

- Product：
- Company or Organization: (if any)
- Link: (if any)
- Screenshot: (if any)

tabBarUnderlineStyle 属性怎么用

tabBarUnderlineStyle 在官网API中介绍是传对象，可是对象内写什么没有例子参考，能给出对象内容用什么形式写吗

通过localeProviderService.setLocale 不能动态切换语言

Version

0.9.7

Environment

Chrome，Firefox，IE

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-wv4cj4

Steps to reproduce

1. 在一个Component中通过this.localeProviderService.setLocale(zh_CN); 切换语言
2. 其它NZ-Mobile对应的语言发生切换
3. 语言没有发生切换

What is expected?

NZ-Mobile 组件根据 localeProviderService 设置的locale发生切换

What is actually happening?

NZ-Mobile 组件没有根据 localeProviderService 设置的locale发生切换

Other?

IN18 error while using LocaleProvider

Version

0.9.6

Environment

Angular 6, NG Zorro Mobile 0.9.6

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-5slbsk

Steps to reproduce

1. add proverders: { provide: LOCAL_PROVIDER_TOKEN, useValue: en_US } in AppModule
2. add import { LOCAL_PROVIDER_TOKEN, en_US } from 'ng-zorro-antd-mobile'; in AppModule
3. cause import compilation error says: ng-zorro-antd-mobile has not exported member LOCAL_PROVIDER_TOKEN

What is expected?

import successfully

What is actually happening?

cause import compilation error

Other?

Calendar日期时间区间 ，选择异常，显示NaN

Version

0.9.5

Environment

Win10专业版64位 Chrome 版本 69.0.3497.100（正式版本） （64 位）

Reproduction link

https://github.com/zynzszyn521/QAApp

Steps to reproduce

{
"name": "ionic-conference-app",
"version": "0.0.0",
"description": "Ionic Conference App",
"license": "Apache-2.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"precommit": "npm run lint"
},
"repository": {
"type": "git",
"url": "https://github.com/ionic-team/ionic-conference-app.git"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "~6.1.0",
"@angular/core": "~6.1.0",
"@angular/forms": "~6.1.0",
"@angular/http": "~6.1.0",
"@angular/platform-browser": "~6.1.0",
"@angular/platform-browser-dynamic": "~6.1.0",
"@angular/router": "~6.1.0",
"@ionic-native/app-availability": "^5.0.0-beta.21",
"@ionic-native/app-minimize": "^5.0.0-beta.21",
"@ionic-native/app-version": "^5.0.0-beta.21",
"@ionic-native/camera": "^5.0.0-beta.21",
"@ionic-native/core": "^5.0.0-beta.21",
"@ionic-native/file": "^5.0.0-beta.21",
"@ionic-native/file-transfer": "^5.0.0-beta.21",
"@ionic-native/in-app-browser": "5.0.0-beta.21",
"@ionic-native/splash-screen": "5.0.0-beta.21",
"@ionic-native/status-bar": "5.0.0-beta.21",
"@ionic-native/toast": "^5.0.0-beta.21",
"@ionic/angular": "4.0.0-beta.7",
"@ionic/storage": "^2.1.3",
"cordova-android": "7.1.1",
"cordova-ios": "^4.5.5",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-appminimize": "^1.0.0",
"cordova-plugin-camera": "^4.0.3",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-inappbrowser": "^3.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.2",
"cordova-plugin-ionic-webview": "^2.1.4",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-toast": "^2.7.0",
"core-js": "^2.5.7",
"ng-zorro-antd": "^1.5.0",
"ng-zorro-antd-mobile": "^0.9.5",
"rxjs": "6.2.2",
"rxjs-compat": "^6.3.3",
"sw-toolbox": "3.6.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/architect": "~0.7.1",
"@angular-devkit/build-angular": "~0.7.1",
"@angular-devkit/core": "~0.7.1",
"@angular-devkit/schematics": "~0.7.1",
"@angular/cli": "~6.1.0",
"@angular/compiler": "~6.1.0",
"@angular/compiler-cli": "~6.1.0",
"@angular/language-service": "~6.1.0",
"@ionic/lab": "^1.0.0",
"@ionic/ng-toolkit": "^1.0.0",
"@ionic/schematics-angular": "^1.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^4.4.4",
"husky": "^0.14.3",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"tslint": "^5.11.0",
"typescript": "~2.9.2"
},
"cordova": {
"platforms": [
"android",
"ios"
],
"plugins": {
"cordova-plugin-device": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27. "
},
"cordova-plugin-statusbar": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-camera": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-file": {},
"cordova-plugin-appminimize": {},
"cordova-plugin-app-version": {},
"cordova-plugin-x-toast": {}
}
}
}

What is expected?

可以正常显示日历控件的时间选择

What is actually happening?

英文语言正常，中文语言显示时间为NaN

Other?

Ionic4开发，引用zorro mobile控件

动态构建 tabs 的时候会报错

 <div *ngIf="homePageItem.length">
            <Tabs [activeTab]="index"
                  [page]="homePageItem.length"
                  (onChange)="onChange1($event)"
                  (onTabClick)="onTabClick($event)">
                <div *ngFor="let tabItem of homePageItem;">
                    <TabPane
                            style="display: flex; height: 150px; width: 100%; background-color: white;align-items: center;justify-content: center;"
                            [title]="tabItem.blockTitle">
                        <div>
                            Content of tab
                        </div>
                    </TabPane>
                </div>
            </Tabs>
        </div>

错误代码重现：
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-9qcch6

calendar component is difficult to select right minute

Version

0.9.10

Environment

android 8.0.0

Reproduction link

https://ng-zorro-antd-mobile-start-hx49py.stackblitz.io

Steps to reproduce

<ListItem [arrow]="‘horizontal’" (onClick)=“show=true”>

选择 1月1日8时50分

<Calendar [locale]="‘zhCN’" [visible]=“show” [defaultDate]=“now” [pickTime]="‘true’" [type]="‘range’" [infinite]=“true” (onCancel)=“show=false”

(onConfirm)=“show=false” >

now = new Date； show:boolean = true;

What is expected?

选择日期之后，选择相应的时分。
After selecting the date, select the appropriate time.

What is actually happening?

上滑下滑选择分钟的时候，发现重复了上一区域的分钟，例如刚好滚动在15-19分，再上滑的时候，区域不是在20分往后的区域，而是不断地重现10-19分区域。
When you slide down or up to select minutes, you can find that the minutes of the previous area are repeated, for example, just rolling between 15-19 minutes, and then sliding up, the area is not in the 20 area, but continuously reproduces 10- 19 points area.

Other?

Add support for danish locale

What problem does this feature solve?

The lack of danish language in the components.

What does the proposed API look like?

I expect the API to be consistent with implementation of other locales.

Grid组件carousel按照文档无法正常现实

1.如果不加最大行列是渲染不出来grid的
2.即使渲染出来也会报icon/text属性找不到的错误

How to create 'Picker' with code, like 'Toast, Modal' ?

I mean no this:

      <ListItem Picker
                [extra]="name1"
                [arrow]="'horizontal'"
                [mask]=true
                [title]="'Areas'"
                [value]="value1"
                (onOk)="onOk1($event)"
      >
        Multiple & cascader
      </ListItem>

Just like Toast and Modal with this code:

import { Injectable } from '@angular/core';
import { Toast, Modal } from 'ng-zorro-antd-mobile';
import { ToastType } from '../../enums/toast-type';
import { AlertType } from '../../enums/alert-type';

@Injectable({
  providedIn: 'root'
})
export class ToastAlertService {

  constructor(private _toast: Toast, private _modal: Modal) { }

  showToast(message: string, type?: ToastType, callback?: () => void) {
    const onClose = () => {
      if (callback) {
        callback();
      }
    };
    if (!type || type === ToastType.Text) {
      Toast.info(message, 2000, onClose);
    } else if (type === ToastType.NetwokError) {
      Toast.offline(message, 2000);
    } else if (type === ToastType.Success) {
      Toast.success(message, 2000, onClose);
    } else if (type === ToastType.Fail) {
      Toast.fail(message, 2000, onClose);
    } else if (type === ToastType.Loading) {
      Toast.loading(message, 0, onClose);
    }
  }

  showAlert(title: string, message: string, buttons: any[], alertType?: AlertType,
    placeholder?: string, callback?: (data?: string) => void) {

    if (!alertType || alertType === AlertType.Alert) {
      Modal.alert(title, message, buttons);
    } else {
      Modal.prompt(
        title,
        message,
        (data) => {
          if (callback) {
            callback(data);
          }
        },
        title,
        null,
        [placeholder]
      );
    }
  }
}

carousel need support link

What problem does this feature solve?

carousel sholud not just a diaplay component without link.

What does the proposed API look like?

I expect when click carousel, it link to to another page.

有没有计划适配小程序的框架？

请问 有没有计划 出angular版的小程序框架 ， 小程序需求很大 需要大厂支持啊 。 美团有vue的mpvue虽然很坑不怎么维护了， 京东有react的taro 看样子还不错[微笑]

data entry分类下的组件能否实现[(ngModel)]双向绑定呢

What problem does this feature solve?

data entry这个分类下的组件如果可以使用ngModel的方式去绑定数据，会更加方便用户的操作，也能更大发挥angular响应式表单的特性

What does the proposed API look like?

data entry分类下的组件能够实现ControlValueAccessor，用户可以使用[(ngModel)]绑定数据

在九宮格中，如果显示的item数量超过12个，就报错

Version

0.9.7

Environment

0.9.7

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-zx42mw

Steps to reproduce

执行stackbliz上的程序，检查console中的报错信息，即可了解

What is expected?

能展示过个项目

What is actually happening?

只能展示12个项目，超过的项目不显示，并报错。

Other?

Implementation of Danish locale is incomplete

Version

0.9.9

Environment

All

Reproduction link

#114

Steps to reproduce

Try to use Danish locale. It is not possible as it has not been exported.

What is expected?

The danish is expected to work.

What is actually happening?

It is not possible to use the danish locale as it has not been exported.

Other?

I contributed the danish locale, but it is incomplete. I will try to fix.

似乎运行不了

Version

0.9.4

Environment

stackblitz

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-xkthd7

Steps to reproduce

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-xkthd7 打开即可

What is expected?

能运行吧

What is actually happening?

你猜

Other?

就看文档测试一下。。。

【Carousel走马灯】如何能阻止滑动冒泡

我把 【Carousel走马灯】 嵌套在 【Tabs标签页】里使用

他们都有滑动的效果，我的期望是滑动【Carousel走马灯】时，【Tabs标签页】不要跟着切换

现在的现象是：
1.小幅滑动时，可以只有【Carousel走马灯】切换，【Tabs标签页】未切换
2.但稍微幅度大点的滑动，这俩一起都切换了

Ant Design Mobile of Angular开发公众号 打包后文件太大

问问大家，Ant Design Mobile of Angular开发公众号 打包后文件好大，有何破解，才写了四五个页面，main.4a3478bbab1ee507f529.js文件就1.8M了，使用的ng build --prod --build-optimizer命令。是不是这个框架不适合做公众号开发？

请问组件兼容ionic3吗

请问组建兼容ionic3吗

定制主题无效

Version

0.9.5

Environment

angular 6.1.0, ng zorro-antd mobile 0.9.5

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-5slbsk

Steps to reproduce

1. 新建 Angular 项目
2. 运行 ng add ng-zorro-antd-mobile --theme 导入模块 ng zorro antd mobile
3. 在页面中加入一个 button 组件如下

primary

4. 在 src下的theme文件中修改背景色 @primary-color: #24378b; @brand-primary: #2a5370; 5. angular.js中应用theme.less

"styles": [
"src/theme.less",
"src/styles.less"
]

What is expected?

button 的背景颜色变成 #2a5370

What is actually happening?

button 的背景颜色仍然为ng zorro antd mobile默认的背景色

Other?

由于stackblitz.com上的theme.less文件中import zorro mobile报错//@import "../node_modules/ng-zorro-antd-mobile/ng-zorro-antd-mobile.less";
链接中的代码没有完整体现上面的步骤4和步骤5

win10环境npm start启动失败

开发环境：win10
全局cli版本：
Your global Angular CLI version (6.2.5) is greater than your local
version (6.2.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
Angular CLI: 6.2.4
Node: 10.8.0
OS: win32 x64
Angular: 6.1.9

zorro mobile cli版本:6.2.3

失败信息：
ng-zorro-antd-mobile\node_modules.bin\ng:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")
^^^^^^^

SyntaxError: missing ) after argument list

个人觉得改成这样更保险，在win10和linux这样是可以启动的（mac没有验证）：npm run site:init && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve --port 4300 --host 0.0.0.0 --deploy-url=/

请求提供一个图片浏览的组件

What problem does this feature solve?

图片浏览是一个很重要且广泛使用的组件，既然已经提供了图片上传的组件，那么类似的需求和场景会很多。请求提供类似微信查看图片组的组件。

What does the proposed API look like?

options:

{
  photos: Array[{ 
    url: string, 
    type: string, 
    title:string,
    describe: string
  }],
  closeIcon: string,
  initialSlide: number,
}

 Gallery.show( {
  photos: photos,
  initialSlide: index
});

navbar Icon and font are not vertically aligned

Version
0.9.5
Environment
win10
Reproduction link
http://ng.mobile.ant.design/#/components/nav-bar/zh
Steps to reproduce
http://ng.mobile.ant.design/#/components/nav-bar/zh this demo navbar Icon and font are not vertically aligned
What is expected?
navbar Icon and font are vertically aligned
What is actually happening?
navbar Icon and font are not vertically aligned
Other

I see noticebar component use css

noticebar icon {
  display: flex;
}

can I make a pull request to navbar
like noticebar,I will add addon.less

navbar, nzm-nav-bar {
  display: flex;
}

or

.am-navbar-left, .am-navbar-right {
  display: flex;
}

如何在Ionic中使用NG-ZORRO-MOBILE(How to use NG-ZORRO-MOBILE in Ionic)

第一个本地实例 First Local Development

我们可以在 ionic 开发框架下使用 NG-ZORRO-MOBILE，下面我们用一个简单的实例来说明。

NG-ZORRO-MOBILE can be used in Ionic, let's get started with a simple example.

1. 安装脚手架工具 Installation

使用前，务必确认 Node.js 已经安装。

Please make sure Node.js has been installed before use.

$ npm install -g ionic

2. 创建一个项目 Create a New Project

在创建项目之前，请确保 ionic 已被成功安装。

Please make sure ionic has been installed before use.

执行以下命令，ionic 会在当前目录下新建一个名称为 PROJECT-NAME 的文件夹，并自动安装好相应依赖。

A new project can be created using ionic CLI tools with following command.

$ ionic start PROJECT-NAME

3. 安装 Install ng-zorro-antd-mobile

进入项目文件夹，执行以下命令后将自动完成 ng-zorro-antd-mobile 的初始化配置。

ng-zorro-antd-mobile will be installed in the project folder with the following command.

$ ng add ng-zorro-antd-mobile

开发者可以通过增加参数来完成个性化的初始化配置，例如国际化或者自定义主题等，还可以快速生成模板代码，详细可以参考 脚手架 部分。

ng-zorro-antd-mobile supports init configuration with schematics, you can get more info in the schematics part.

4. 开发调试 Development & Debugging

一键启动调试，运行成功后显示欢迎页面。

Run your project now, you can see the img below now.

$ ionic serve

自行构建 Customized Work Flow

1. 安装组件 Install ng-zorro-antd-mobile

$ npm install ng-zorro-antd-mobile --save

2.引入模块 Import module

在 app.modules.ts 中，全局引入 ng-zorro-antd-mobile。

Add ng-zorro-antd-mobile globally in app.modules.ts。

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    NgZorroAntdMobileModule
  ],
  providers: [StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule {}

3.引入样式 Import style

在 angular.json 中，全局引入 ng-zorro-antd-mobile样式。

Add ng-zorro-antd-mobile style globally in angular.json。

"styles": [
  "node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.min.css",
  {
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  }
]

cascader missing from mobile version

What problem does this feature solve?

I expected all components from ng-zorro-antd to be implemented,
but the nz-cascader seems to be missing
Is there a way of implementing this ?

What does the proposed API look like?

https://ng.ant.design/components/cascader/en

跑马灯在横向滑动时，初始化宽度存在问题

Version
0.9.5
Environment
win10
Reproduction link
https://pktsbn.run.stackblitz.io/
Steps to reproduce
https://pktsbn.run.stackblitz.io/
What is expected?
CarouselSlide高度正常
What is actually happening?
CarouselSlide在父元素没有ng动画时，宽度为0
Other

纵向滑动时，宽度是auto未出现问题

carouselInit函数中
v.width = this.vertical ? 'auto' : this._rationWidth - this.cellSpacing; 

横向滑动时，当父组件有ng的动画时，在afterviewinit后会自动插入class:'ng-star-inserted'，dom发生了变化，会调用afterviewInit里面的callback函数，_rationWidth就有数值了，但是在父组件没有ng的动画，BrowserAnimationsModule不会给CarouselSlide增加class:ng-star-inserted，也就无法触发callback，然后this._rationWidth数值一直是0，v.width就是0了

carouselInit(items) {
    this.infinite = this.infinite === undefined ? true : this.infinite;
    this._nodeArr = items['_results'];
    this.dragging = this._nodeArr.length > 1 && this.dragging ? this.dragging : false;
    this.dragging = this.dragging ? this.dragging : false;
    if (this._nodeArr.length > 1) {
      this._lastIndex = this._nodeArr.length - 1;
      setTimeout(() => {
        this._nodeArr.forEach((v, index) => {
          v.width = this.vertical ? 'auto' : this._rationWidth - this.cellSpacing; 
          v.left = this.vertical ? 0 : index === this._lastIndex ? -this._rationWidth : index * this._rationWidth;
          v.top = this.vertical ? (index === this._lastIndex ? -this._rationWidth : index * this._rationWidth) : 0;
          v.margin = this.vertical ? `${this.cellSpacing / 2}px auto` : `auto ${this.cellSpacing / 2}px`;
        });
        this.startTimer();
      }, 0);
    } else if (this._nodeArr.length === 1) {
      setTimeout(() => {
        this._nodeArr.forEach((v, index) => {
          v.width = this._rationWidth - this.cellSpacing;
          v.left = 0;
          v.top = 0;
          v.margin = `auto ${this.cellSpacing / 2}px`;
        });
      }, 0);
    }
  }

方案：
给carousel的component装饰器加上动画好使，不过这个ng-star-inserted是ng5出现的，未来不知道会不会去掉，有一点风险

animations: [
    trigger('', []) // 利用动画增加的css类ng-star-inserted首次触发MutationObserver
  ]

或者在afterviewinit里给_rationWidth等变量做callback中那样的赋值

什么时候可以用ng-zorro-antd-mobile啊

很期待呢,什么时候可以用啊?

DatePickerDirective中,设置了minDate和maxDate后ios的浏览器中年无法显示.

Version

0.9.10

Environment

ios 浏览器

Reproduction link

https://ng-zorro-antd-mobile-start-pxbejk.stackblitz.io/

Steps to reproduce

 <ListItem DatePicker
            [extra]="name1"
            [arrow]="'horizontal'"
            [mode]="'date'"
            [value]="value1"
            [minDate]="minDate"
            [maxDate]="maxDate2"
  >
    我有错误
  </ListItem>

name1 = '选择';
 minDate = new Date('2000-1-1');
  maxDate1 = new Date('2001-1-1');
  maxDate2 = new Date('2010-1-1');
 value1 = new Date();

What is expected?

年选择有问题

What is actually happening?

年选择没问题

Other?

tab `swipeable` attribute and tabPane height bug

1. Tabs swipeable attribute invalid . If I set attribute [swipeable]="false" ,tabs still can swipe.
2. If I not specifies TabPane height, the tabs only display the first tab content。
   code reproduce:
   https://stackblitz.com/edit/ng-zorro-antd-mobile-start-9qcch6

always got 'Cannot read property 'selector' of null' error in ionic4 project, even new project

whre use it:

import { Component } from '@angular/core';
import { Toast } from 'ng-zorro-antd-mobile';

@Component({
  selector: 'app-about',
  templateUrl: 'about.page.html',
  styleUrls: ['about.page.scss']
})
export class AboutPage {
  test() {
    const toast = Toast.loading('Loading...', 3000, () => {
      console.log('Load complete !!!');
    });
  }
}

app.module.ts ：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdMobileModule, ToastComponent } from 'ng-zorro-antd-mobile';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [ToastComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,
    BrowserAnimationsModule, FormsModule, HttpClientModule, NgZorroAntdMobileModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

ionic info:

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.13
   @angular-devkit/core       : 0.8.6
   @angular-devkit/schematics : 0.8.6
   @angular/cli               : 6.2.6
   @ionic/ng-toolkit          : not installed
   @ionic/schematics-angular  : not installed

System:

   NodeJS : v8.12.0 (/Users/Allen/.nvm/versions/node/v8.12.0/bin/node)
   npm    : 6.4.1
   OS     : macOS

Environment:

   http_proxy  : http://127.0.0.1:6152
   https_proxy : http://127.0.0.1:6152

button组件点击事件问题

Version

0.9.5

Environment

常用的浏览器均是如此

Reproduction link

https://stackblitz.com/edit/angular-jshdse

Steps to reproduce

在移动设备打开,按下按钮滚动页面,依然会触发事件.看了下组件,touch等事件的考虑太少,touchmove,touchcancel没有考虑在内,点击中滚动,长按等事件,均没有处理,导致的问题就是按钮不能碰,碰了必执行.建议不要自己写这些触控事件,太复杂,光touch,mouse太多,没有特殊的操作不建议使用此方式实现.

What is expected?

正常的button点击操作,正常处理move等事件

What is actually happening?

按钮不能碰,碰了必执行.

Other?

建议不要自己写这些触控事件,太复杂,光touch,mouse太多,没有特殊的操作不建议使用此方式实现.

ng-zorro-antd-mobile build aot error

ng-zorro-antd-mobile期待 为Angular生态做出大贡献

一直是Angular和Ant Design的使用者和喜爱者 十分期待 两个生态的繁荣

ActionSheet只有按钮时候的样式问题

What problem does this feature solve?

样式兼容问题

What does the proposed API look like?

可以兼容title和message为空的情况

roadmap

ngmodel support

• Checkbox
• Radio
• DatePicker
• DatePickerView
• Picker
• PickerView
• Switch
• Slider
• InputItem
• TextareaItem
• Range
• Stepper
• SearchBar
• Calendar

OnPush support

• Checkbox
• Radio

定制主题无效

Version

0.9.5

Environment

angular 6.1.0, ng zorro-antd mobile 0.9.5

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start-5slbsk

Steps to reproduce

1. 新建 Angular 项目
2. 运行 ng add ng-zorro-antd-mobile --theme 导入模块 ng zorro antd mobile
3. 在页面中加入一个 button 组件如下

primary

4. 在 src下的theme文件中修改背景色 @primary-color: #24378b; @brand-primary: #2a5370; 5. angular.js中应用theme.less

"styles": [
"src/theme.less",
"src/styles.less"
]

What is expected?

button 的背景颜色变成 #2a5370

What is actually happening?

button 的背景颜色仍然为ng zorro antd mobile默认的背景色

Other?

由于stackblitz.com上的theme.less文件中import zorro mobile报错//@import "../node_modules/ng-zorro-antd-mobile/ng-zorro-antd-mobile.less";
链接中的代码没有完整体现上面的步骤4和步骤5

在ios中，点击表单弹出键盘的时候出现了一个白屏，请问这是什么原因

表单校验功能没有

按钮的 loading 动态改变boolean ，不起作用

Version
0.9.10

Environment
浏览器

Reproduction link
https://stackblitz.com/edit/angular-cdkpns

Steps to reproduce
在组件ts内动态改变，而前端只有在 true转false起作用，而也试试首次起作用。
disabled 却可以动态起效的。

What is expected?
通过后台ts动态改变loading状态，已达到显示和隐藏加载动画图标

What is actually happening?
如实例

Other?

SwipeAction在微信的浏览器中无效

Version

0.9.6

Environment

微信浏览器

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-mobile-start?file=src/app/app.component.ts

Steps to reproduce

使用官网上的代码，在微信浏览器中无效

What is expected?

能出现官网介绍的效果

What is actually happening?

无效

Other?

stackblitz.com上无法重现微信的环境，所以用了一个空白项目。请谅解。

picker报错

Carousel 轮播到最后一张图后，会瞬间出现空白，然后马上跳到第一张

Carousel 轮播到最后一张图后，会瞬间出现空白，然后马上跳到第一张