ng-zorro / ng-zorro-antd-mobile Goto Github PK
View Code? Open in Web Editor NEWA configurable Mobile UI components based on Ant Design Mobile and Angular. 🐜
Home Page: http://ng.mobile.ant.design
License: Other
A configurable Mobile UI components based on Ant Design Mobile and Angular. 🐜
Home Page: http://ng.mobile.ant.design
License: Other
0.9.7
Chrome,Firefox,IE
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-wv4cj4
NZ-Mobile 组件根据 localeProviderService 设置的locale发生切换
NZ-Mobile 组件没有根据 localeProviderService 设置的locale发生切换
样式兼容问题
可以兼容title和message为空的情况
0.9.5
ng 惰性加载
https://stackblitz.com/edit/angular-ubvhjn
点击Customers
惰性加载可以使用相关元素,希望有相关惰性加载的用例可测试
未知
暂时只是测试button元素,其他的在惰性加载是否可用未知。
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 ,非常感谢您的支持,欢迎留下公司或产品名,您的回复将成为维护者、社区用户和观望者的信心来源。
在不泄露信息的前提下,建议把截图晒一晒~
无关回复将会定期删除
推荐回复格式:
- 产品:
- 公司或组织:(如果可以)
- 链接:(如果可以)
- 截图:(如果可以)
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)
Tabs
swipeable attribute invalid . If I set attribute [swipeable]="false"
,tabs still can swipe.TabPane
height, the tabs
only display the first tab content。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
0.9.5
常用的浏览器均是如此
https://stackblitz.com/edit/angular-jshdse
在移动设备打开,按下按钮滚动页面,依然会触发事件.看了下组件,touch等事件的考虑太少,touchmove,touchcancel没有考虑在内,点击中滚动,长按等事件,均没有处理,导致的问题就是按钮不能碰,碰了必执行.建议不要自己写这些触控事件,太复杂,光touch,mouse太多,没有特殊的操作不建议使用此方式实现.
正常的button点击操作,正常处理move等事件
按钮不能碰,碰了必执行.
建议不要自己写这些触控事件,太复杂,光touch,mouse太多,没有特殊的操作不建议使用此方式实现.
0.9.6
微信浏览器
https://stackblitz.com/edit/ng-zorro-antd-mobile-start?file=src/app/app.component.ts
使用官网上的代码,在微信浏览器中无效
能出现官网介绍的效果
无效
stackblitz.com上无法重现微信的环境,所以用了一个空白项目。请谅解。
在encapsulation: ViewEncapsulation.None的情况下,:host无法使用,已提pr
开发环境: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=/
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;
}
The lack of danish language in the components.
I expect the API to be consistent with implementation of other locales.
很期待呢,什么时候可以用啊?
tabBarUnderlineStyle 在官网API中介绍是传对象,可是对象内写什么没有例子参考,能给出对象内容用什么形式写吗
0.9.5
angular 6.1.0, ng zorro-antd mobile 0.9.5
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-5slbsk
"styles": [
"src/theme.less",
"src/styles.less"
]
button 的背景颜色变成 #2a5370
button 的背景颜色仍然为ng zorro antd mobile默认的背景色
由于stackblitz.com上的theme.less文件中import zorro mobile报错//@import "../node_modules/ng-zorro-antd-mobile/ng-zorro-antd-mobile.less";
链接中的代码没有完整体现上面的步骤4和步骤5
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]
);
}
}
}
0.9.9
angular 6.4.7
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-injnaq
页面兼容问题 测试到 iso 这个版本 基本上大部分组件都无法使用 已经添加了基本的腻子脚本 core-es6 classlist 等 均无法解决 官方说明的环境支持是 ios7 所以希望能支持这个版本 现还有很多人在使用 8.3
正常显示
页面 输入框 InputItem 点击无反应 不弹出键盘 Button 里面的文字无法显示 Navbar 消失 安卓8.0显示正常 如实例中的调用 在ios8.3中 不具有原有功能
data entry这个分类下的组件如果可以使用ngModel的方式去绑定数据,会更加方便用户的操作,也能更大发挥angular响应式表单的特性
data entry分类下的组件能够实现ControlValueAccessor,用户可以使用[(ngModel)]绑定数据
请问 有没有计划 出angular版的小程序框架 , 小程序需求很大 需要大厂支持啊 。 美团有vue的mpvue虽然很坑不怎么维护了, 京东有react的taro 看样子还不错[微笑]
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中那样的赋值
0.9.4
stackblitz
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-xkthd7
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-xkthd7 打开即可
能运行吧
你猜
就看文档测试一下。。。
0.9.6
mac safari
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-qks3k3
在sarial打开重现链接就可以看到tabs是空白
正确显示tab
正确显示tab
ng6,用了web-animations-js兼容库,还是解决不了问题。
一直是Angular和Ant Design的使用者和喜爱者 十分期待 两个生态的繁荣
0.9.5
Win10专业版64位 Chrome 版本 69.0.3497.100(正式版本) (64 位)
https://github.com/zynzszyn521/QAApp
{
"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": {}
}
}
}
可以正常显示日历控件的时间选择
英文语言正常,中文语言显示时间为NaN
Ionic4开发,引用zorro mobile控件
0.9.5
angular 6.1.0, ng zorro-antd mobile 0.9.5
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-5slbsk
"styles": [
"src/theme.less",
"src/styles.less"
]
button 的背景颜色变成 #2a5370
button 的背景颜色仍然为ng zorro antd mobile默认的背景色
由于stackblitz.com上的theme.less文件中import zorro mobile报错//@import "../node_modules/ng-zorro-antd-mobile/ng-zorro-antd-mobile.less";
链接中的代码没有完整体现上面的步骤4和步骤5
0.9.7
0.9.7
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-zx42mw
执行stackbliz上的程序,检查console中的报错信息,即可了解
能展示过个项目
只能展示12个项目,超过的项目不显示,并报错。
1.如果不加最大行列是渲染不出来grid的
2.即使渲染出来也会报icon/text属性找不到的错误
图片浏览是一个很重要且广泛使用的组件,既然已经提供了图片上传的组件,那么类似的需求和场景会很多。请求提供类似微信查看图片组的组件。
options:
{
photos: Array[{
url: string,
type: string,
title:string,
describe: string
}],
closeIcon: string,
initialSlide: number,
}
Gallery.show( {
photos: photos,
initialSlide: index
});
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?
我们可以在 ionic 开发框架下使用 NG-ZORRO-MOBILE,下面我们用一个简单的实例来说明。
NG-ZORRO-MOBILE can be used in Ionic, let's get started with a simple example.
使用前,务必确认 Node.js 已经安装。
Please make sure Node.js has been installed before use.
$ npm install -g ionic
在创建项目之前,请确保
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
进入项目文件夹,执行以下命令后将自动完成 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.
一键启动调试,运行成功后显示欢迎页面。
Run your project now, you can see the img below now.
$ ionic serve
ng-zorro-antd-mobile
$ npm install ng-zorro-antd-mobile --save
在 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 {}
在 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"
}
]
0.9.9
angular 6.4.7
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-brzqvy
在 ngOnInit 函数中调用
页面加载业务条件不满足 弹出轻提示
报错
如实现
0.9.6
macOS10.14 chrome(70.0.3538.77),安卓或者苹果手机的Webview
https://stackblitz.com/run?stackblitz无法复现内容,重现步骤有项目下载链接
stackblitz 无法实现,请下载 https://dh-development.oss-cn-beijing.aliyuncs.com/BridgeTest.zip
npm install
ng serve
在console 运行bridge.test(),这种状况类似于在iOS或者Android执行evaluateJavaScript
Toast显示异常
Toast正常显示.这种情况出现的原因是什么呢?因为我们希望使用js bridge来和native之间进行通讯,目前可以使用window,postMessage解决,请问这个是什么原因造成的呢?同样的情况进行route进行路由切换也会造成页面混杂,不同页面混合在一起.
显示不正常,不完整.
寻求解决办法以及出现这种状况的原因.谢谢
0.9.9
All
Try to use Danish locale. It is not possible as it has not been exported.
The danish is expected to work.
It is not possible to use the danish locale as it has not been exported.
I contributed the danish locale, but it is incomplete. I will try to fix.
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 ?
0.9.6
Angular 6, NG Zorro Mobile 0.9.6
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-5slbsk
import successfully
cause import compilation error
我把 【Carousel走马灯】 嵌套在 【Tabs标签页】里使用
他们都有滑动的效果,我的期望是滑动【Carousel走马灯】时,【Tabs标签页】不要跟着切换
现在的现象是:
1.小幅滑动时,可以只有【Carousel走马灯】切换,【Tabs标签页】未切换
2.但稍微幅度大点的滑动,这俩一起都切换了
请问组建兼容ionic3吗
0.9.10
浏览器
https://stackblitz.com/edit/ng-zorro-antd-mobile-start-t6vjw4
Tabs 中 TabPane 不设置高度 由内容体撑起高度
由于 业务需求 这边期望 TabPane 里面的 内容是异步加载的 高度为不确定 如果设置了固定高度内容无法正常显示
如实例
0.9.10
android 8.0.0
https://ng-zorro-antd-mobile-start-hx49py.stackblitz.io
<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;
选择日期之后,选择相应的时分。
After selecting the date, select the appropriate time.
上滑下滑选择分钟的时候,发现重复了上一区域的分钟,例如刚好滚动在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.
问问大家,Ant Design Mobile of Angular开发公众号 打包后文件好大,有何破解,才写了四五个页面,main.4a3478bbab1ee507f529.js文件就1.8M了,使用的ng build --prod --build-optimizer命令。是不是这个框架不适合做公众号开发?
<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
carousel sholud not just a diaplay component without link.
I expect when click carousel, it link to to another page.
0.9.10
ios 浏览器
https://ng-zorro-antd-mobile-start-pxbejk.stackblitz.io/
<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();
年选择有问题
年选择没问题
Carousel 轮播到最后一张图后,会瞬间出现空白,然后马上跳到第一张
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.