ng-zorro / ng-zorro-antd Goto Github PK
View Code? Open in Web Editor NEWAngular UI Component Library based on Ant Design
Home Page: https://ng.ant.design
License: MIT License
Angular UI Component Library based on Ant Design
Home Page: https://ng.ant.design
License: MIT License
你好,在快速上手中提示:‘在根 module 中使用 NgZorroAntdModule.forRoot()’
那之前类似 RouterModule.forRoot (rootRouterConfig, {useHash: true}),的这种写法该如何支持呢?
请问,目前可以在生产环境使用了吗?后续有没有发布计划,版本升级改怎么处理?谢谢。
官网文档展开全部代码没效果 chrome 60
ng-zorro 的 vscode 代码片断:ng-zorro snippets
按 F1
输入 ext install ng-zorro-vscode
后回车。
你可以任意 .html
、.ts
文件,输入 nz-
开头会自动出现在智能提醒列表当中;仅此而已!
× Install fail! SyntaxError: Unexpected token < in JSON at position 0
SyntaxError: Unexpected token < in JSON at position 0
at Object.parse (native)
English is not my native language; please excuse typing errors.
when i input the first page or the last page, corresponding button not highlighted.
我用文字可以,用了form布局就会乱,看起来像是height不够导致控件换行了
[ ] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
Angular version: X.Y.Z
ng-zorro-antd version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
可惜不是沙发。
https://ng.ant.design/#/changelog
从更新日志来看,第一个版本应该在8月15号回出来,期待!!!
I hope your team can formulate a plan about NG - ZORRO.
The plan can let us know when there will be a new component release or what is the break change.
Thanks.
Best Regard,
不知道是字体太小,细还是颜色太浅,好像挺难看清的。
https://ng.ant.design/#/components/input-number
名义是 input number 但是没有限制。
项目中有嵌套路由,首先在app.component.html中引入跟组件:
<nz-root> <router-outlet></router-outlet> </nz-root>
并在根 module 和子module都引入了NgZorroAntdModule
在子module调用datepicker
<nz-datepicker [(ngModel)]="_date" [nzPlaceHolder]="'Select date'"></nz-datepicker>
chrome报错:
compiler.es5.js:1690 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'nz-datepicker'.
{{item.name}}开始时间
是我调用有什么问题吗?
[ ] Bug report
[ ] Feature request
[x] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
See here
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
Enterprise-class there are a lot of contextmenu, this can support ?
折线图,饼状图那样的
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
As suggested in doc, <nz-root>
component must be listed at outermost layer of the app, which seems inconvenient for user.
Do not require <nz-root>
in component template.
forRoot()
method.InjectionToken
for that configuration param.APP_INITIALIZER
to apply font styles.
Angular version: X.Y.Z
ng-zorro-antd version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
在官网的例子上操作了下好像不能恢复为0
期待很久了,虽然没有源码,看了一下tabs的示例,动态增加tab标签,也只是数据源的增加,有实现能够动态创建一个tab,tab内容是一个其他的组件页面?是不是这种比较难实现?
使用Layout 布局时,使用官方示例代码,
html代码:
<nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null" nzCollapseChange="onCollapseChange" >
<div class="logo"></div>
<ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
<li nz-submenu>
<span title><i class="anticon anticon-user"></i><span class="nav-text">菜单</span></span>
<ul>
<li nz-menu-item>Tom</li>
<li nz-menu-item>Bill</li>
<li nz-menu-item>Alex</li>
</ul>
</li>
<li nz-submenu>
<span title><i class="anticon anticon-team"></i><span class="nav-text">菜单</span></span>
<ul>
<li nz-menu-item>Team 1</li>
<li nz-menu-item>Team 2</li>
</ul>
</li>
<li nz-menu-item><span><i class="anticon anticon-file"></i><span class="nav-text">File</span></span></li>
</ul>
</nz-sider>
ts代码:
export class AppComponent implements OnInit {
isCollapsed = false;
constructor() {
}
ngOnInit() {
}
}
[ ] Bug report
[ x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
在zn-menu-item中添加了路由后没法根据当前的默认路径自动高亮
在默认跳转到指定路径时routerLinkActive匹配的路由能够自动高亮
Angular version: X.Y.Z
ng-zorro-antd version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
使用这个选项需要什么前提,只是基本工程,啥也没加。
ERROR in ./node_modules/rxjs/observable/BoundNodeCallbackObservable.js
Module build failed: TypeError: Cannot read property 'type' of undefined
2m的体积,能否像material 那样分模块,在官方文档中好像没找到?能否告知一下 ,多谢
[x ] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
menu需要区分是否有子项,遍历后浏览器会报一个错误。
layout.component.html
<nz-layout>
<nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
<div class="logo" *ngIf="isCollapsed">
</div>
</div>
<!-- 侧边拦 -->
<ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
<ng-template ngFor let-item [ngForOf]="links | async">
<li nz-menu-item *ngIf="item.type === 'link'" [routerLink]="['/', item.state]">
<span title><i class="anticon anticon-user"></i><span class="nav-text">{{item.name}}</span></span>
</li>
<li nz-submenu *ngIf="item.type === 'sub'">
<span title><i class="anticon anticon-user"></i><span class="nav-text">{{item.name}}</span></span>
<ul>
<li nz-menu-item *ngFor="let subItem of item.children" [routerLink]="['/', item.state, subItem.state]">{{subItem.name}}</li>
</ul>
</li>
</ng-template>
</ul>
</nz-sider>
<nz-layout>
<!-- 头部 -->
<nz-header style="background: #fff; padding:0;">
<i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>
</nz-header>
<!-- 内容区 -->
<nz-content style="margin:0 16px;">
<nz-breadcrumb style="margin:12px 0;">
<nz-breadcrumb-item *ngFor="let breadcrumb of breadcrumbs" [routerLink]="[breadcrumb.url]">{{breadcrumb.name}}</nz-breadcrumb-item>
</nz-breadcrumb>
<div style="padding:24px; background: #fff; min-height: 480px;">
<router-outlet></router-outlet>
</div>
</nz-content>
<nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
</nz-layout>
</nz-layout>
layout.component.ts
import { Component, OnInit, ChangeDetectionStrategy } from "@angular/core";
import {
Router,
ActivatedRoute,
ActivatedRouteSnapshot,
UrlSegment
} from "@angular/router";
import { Observable } from 'rxjs/Observable';
import "rxjs/add/operator/filter";
import "rxjs/add/operator/map";
@Component({
selector: "app-layout",
// changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: "./layout.component.html",
styleUrls: ["./layout.component.scss"]
})
export class LayoutComponent implements OnInit {
public breadcrumbs: Array<any> = [];
private links: Observable<any>;
constructor(private router: Router, private activatedRoute: ActivatedRoute) {
this.links = Observable.of([
{
state: "dashboard",
name: "首页",
type: "link",
icon: "icon-shouye_shouye1"
},
{
state: "backend-manage",
name: "后台管理",
type: "sub",
icon: "icon-shouye_shouye1",
children: [
{ state: "vender", name: "供应商管理" },
{ state: "brand", name: "品牌管理" }
]
},
{
state: "system-setting",
name: "系统设置",
type: "sub",
icon: "icon-xitongshezhi",
children: [
{ state: "user", name: "用户管理" },
{ state: "role", name: "角色管理" },
{ state: "navigation", name: "菜单管理" },
{ state: "bibles", name: "字典管理" }
]
}
]);
}
ngOnInit() {
this.parseRoute(this.router.routerState.snapshot.root);
this.router.events.subscribe(event => {
this.breadcrumbs = [];
this.parseRoute(this.router.routerState.snapshot.root);
});
}
parseRoute(node: ActivatedRouteSnapshot) {
if (node.data["title"]) {
let urlSegments: UrlSegment[] = [];
node.pathFromRoot.forEach(routerState => {
urlSegments = urlSegments.concat(routerState.url);
});
const url = urlSegments
.map(urlSegment => {
return urlSegment.path;
})
.join("/");
this.breadcrumbs.push({
name: node.data["title"],
url: "/" + url
});
}
if (node.firstChild) {
this.parseRoute(node.firstChild);
}
}
}
[ ] Bug report
[ ] Feature request
[x] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
目前showcase的文档是直接写在html中的(类似primeng),不知是否有有计划直接写markdown(类似antd)的计划?
Angular version: X.Y.Z
ng-zorro-antd version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
angular-cli: 1.0.0-beta.28.3
node: 6.10.3
os: win32 x64
@angular/cdk: 2.0.0-beta.8
@angular/animations: 4.3.4
@angular/common: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/platform-browser: 4.3.4
@angular/cli: 1.3.0
@angular/compiler: 4.3.4
@angular/compiler-cli: 4.3.4
@angular/http: 4.3.4
@angular/language-service: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/router: 4.3.4
[ ] Bug report
[X] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
如何更改颜色主题?
vendor.7345c6a74bffbc4b63fa.bundle.js:1 ERROR TypeError: this.remaining.startsWith is not a function
at t.BkNc.t.peekStartsWith (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
at t.BkNc.t.consumeOptional (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
at t.BkNc.t.parseRootSegment (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
at t.BkNc.t.parse (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
at t.BkNc.t.parseUrl (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
at t.BkNc.t.navigateByUrl (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
at t.navigateTo (main.0d02cc9f28de90c3c0ec.bundle.js:1)
at Object.handleEvent (main.0d02cc9f28de90c3c0ec.bundle.js:1)
at Object._ [as handleEvent] (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
at Object.handleEvent (vendor.7345c6a74bffbc4b63fa.bundle.js:1)
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
虽说【面包屑】绝大多数运用在导航,但有时需要做一些底部导航时,如果默认最后一项强制加粗会显得非常奇怪。
pagination组件,在点到最后一页后,下一页 按钮在禁用时鼠标移上去还有蓝色背景,不知是不是原本就是这样设计的
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
@Component({
selector : 'nz-button-group',
encapsulation: ViewEncapsulation.None,
template : `
<div [ngClass]="_classMap" #groupWrapper>
<ng-content></ng-content>
</div>
`,
styleUrls : []
})
export class NzButtonGroupComponent implements AfterContentInit {
_size: NzButtonGroupSize;
_prefixCls = 'ant-btn-group';
_sizeMap = { large: 'lg', small: 'sm' };
@ViewChild('groupWrapper') _groupWrapper: ElementRef;
please don't use _prefixCls = 'ant-btn-group';
class filed will consume memory when instance, simplify field will benefit performance.
UI framework/component, should be welcome to developer just using COPY/PASTE command, simplify field will lead developer just focus on data associate field whitch commonly related to binding data.
ui class name
, html tag
should simple behave as literal exactly. please use string function or string operator as less as possible. (developer can just find or replace what he need globally)
i see some _prefixCls
with string combine style. like [ant-tag-${this.nzColor}] : isPresetColor,
this sames like less/scss problem. the real effect style should be ant-tag someofngcolor
fininally, i insist on simplify field. and _prefixCls
field should be removed.
Angular version: X.Y.Z
ng-zorro-antd version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
https://ng.ant.design/#/components/menu
只展开当前父级菜单
控制菜单开合,点击菜单,收起其他展开的所有菜单,保持菜单聚焦简洁。
Menu的 toggle会抖动.
Waiting...
NG-ZORRO [尚未发布,如果看到该页面,请暂时不要传播,谢谢]
SORRY [被隐藏的地址 ]
H:\NG-ZORRO\FirstProject> npm install ng-zorro-antd --save
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\\nodejs_v6.11.2\\node.exe" "D:\\nodejs_v6.11.2\\node_modules\\npm\\bin\\npm-cli.js" "install" "ng-zorro-antd" "--save"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code E404
npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/ng-zorro-antd
npm ERR! 404
npm ERR! 404 'ng-zorro-antd' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! Please include the following file with any support request:
npm ERR! H:\NG-ZORRO\FirstProject\npm-debug.log
左右滑动的方式
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
Some components just don't support universal currently.
It would be very appreciate if this project support universal.Thanks!
Angular version: X.Y.Z
ng-zorro-antd version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
[ x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
使用表格分页远程加载数据
根据服务端分页要求传递页码
当使用远程加载数据时,_current小于或等于0时,nzPageIndexChange事件会触发两次
后台分页规则不一,有的是从0开始的,虽然已经解决了该问题,但还是提一下!
补充下问题,页码从0开始时切换pageIndex或者pageSize都会触发两次请求数据的事件!
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
当路由至一个带有:
<nz-card nzNoHovering="true">
</nz-card>
产生闪现:
[ ] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here
Angular version: X.Y.Z
ng-zorro-antd version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] IE version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
现在在阅读文档的时候,每次点击菜单切换页面,窗口不会滚动到最顶端,如果点击的是最底下的几个菜单,一开始看到的就是页面底部的内容,会造成阅读上的不便
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.