feat(module:input): support borderless (#5781)

NG-ZORRO · Sep 15, 2020 · 6e7877b · 6e7877b
1 parent e5ed4d2
commit 6e7877b
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 6 deletions.
diff --git a/components/core/transition-patch/transition-patch.directive.ts b/components/core/transition-patch/transition-patch.directive.ts
@@ -12,7 +12,8 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
  * https://github.com/angular/angular/issues/34718
  */
 @Directive({
-  selector: '[nz-button],nz-button-group,[nz-icon],[nz-menu-item],[nz-submenu],nz-select-top-control,nz-select-placeholder'
+  selector:
+    '[nz-button], nz-button-group, [nz-icon], [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group'
 })
 export class NzTransitionPatchDirective implements AfterViewInit, OnChanges {
   @Input() hidden: NzSafeAny = null;

diff --git a/components/divider/doc/index.en-US.md b/components/divider/doc/index.en-US.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Other
+type: Layout
 title: Divider
 cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
 ---

diff --git a/components/divider/doc/index.zh-CN.md b/components/divider/doc/index.zh-CN.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-type: 其他
+type: 布局
 title: Divider
 subtitle: 分割线
 cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg

diff --git a/components/input/demo/borderless.md b/components/input/demo/borderless.md
@@ -0,0 +1,14 @@
+---
+order: 11
+title:
+    zh-CN: 无边框
+    en-US: Borderless
+---
+
+## zh-CN
+
+没有边框。
+
+## en-US
+
+Borderless input.
diff --git a/components/input/demo/borderless.ts b/components/input/demo/borderless.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-input-borderless',
+  template: `
+    <input nz-input placeholder="borderless" nzBorderless />
+  `
+})
+export class NzDemoInputBorderlessComponent {}
diff --git a/components/input/doc/index.en-US.md b/components/input/doc/index.en-US.md
@@ -27,6 +27,7 @@ All props of input supported by [w3c standards](https://www.w3schools.com/tags/t
 | -------- | ----------- | ---- | ------- |
 | `[nzSize]` | The size of the input box. Note: in the context of a form, the `large` size is used. | `'large' \| 'small' \| 'default'` | `'default'` |
 | `[nzAutosize]` | Only used for `textarea`, height autosize feature, can be set to `boolean` or an object `{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false` |
+| `[nzBorderless]` | Whether hide border | `boolean` | `false` |
 
 
 ### nz-input-group

diff --git a/components/input/doc/index.zh-CN.md b/components/input/doc/index.zh-CN.md
@@ -27,6 +27,7 @@ nz-input 可以使用所有的W3C标准下的所有 [使用方式](https://www.w
 | --- | --- | --- | --- |
 | `[nzSize]` | 控件大小。注：标准表单内的输入框大小限制为 `large` | `'large' \| 'small' \| 'default'` | `'default'` |
 | `[nzAutosize]` | 只可以用于 `textarea`，自适应内容高度，可设置为 `boolean` 或对象：`{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false` |
+| `[nzBorderless]` | 是否隐藏边框 | `boolean` | `false` |
 
 ### nz-input-group
 

diff --git a/components/input/input.directive.ts b/components/input/input.directive.ts
@@ -6,6 +6,7 @@
 import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, Optional, Renderer2, Self, SimpleChanges } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { BooleanInput, NzSizeLDSType } from 'ng-zorro-antd/core/types';
+import { InputBoolean } from 'ng-zorro-antd/core/util';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
@@ -14,14 +15,16 @@ import { filter, takeUntil } from 'rxjs/operators';
   exportAs: 'nzInput',
   host: {
     '[class.ant-input-disabled]': 'disabled',
+    '[class.ant-input-borderless]': 'nzBorderless',
     '[class.ant-input-lg]': `nzSize === 'large'`,
     '[class.ant-input-sm]': `nzSize === 'small'`,
     '[attr.disabled]': 'disabled || null'
   }
 })
 export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
   static ngAcceptInputType_disabled: BooleanInput;
-
+  static ngAcceptInputType_nzBorderless: BooleanInput;
+  @Input() @InputBoolean() nzBorderless = false;
   @Input() nzSize: NzSizeLDSType = 'default';
   @Input()
   get disabled(): boolean {

diff --git a/package.json b/package.json
@@ -121,7 +121,7 @@
     "tslint": "~6.1.0",
     "typescript": "~4.0.2",
     "yaml-front-matter": "^4.0.0",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.1"
   },
   "lint-staged": {
     "components/**/*.{html,ts}": [

diff --git a/scripts/site/_site/doc/app/header/header.less b/scripts/site/_site/doc/app/header/header.less
@@ -148,7 +148,7 @@
 
     & > .ant-menu-item,
     & > .ant-menu-submenu {
-      min-width: 72px;
+      min-width: 40px;
       height: @header-height;
       line-height: @header-height - @menu-item-border - 2px;
       border-top: @menu-item-border solid transparent;