feat(module: popover): feat add customClass for customer (#129)

* feat(module: popover): feat add customCls for customer * feat(module: popover): feat modify className for customer * docs(module:popover): update docs className descrpition (#120)
NG-ZORRO · Dec 3, 2018 · 26bbe53 · 26bbe53
1 parent 5f24260
commit 26bbe53
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 2 deletions.
diff --git a/components/popover/doc/index.en-US.md b/components/popover/doc/index.en-US.md
@@ -20,6 +20,7 @@ Properties | Descrition | Type | Default
 | mask    | Whether to display the mask background layer  | Boolean |  false  |
 | overlay   | Popup layer content  | TemplateRef |  -   |
 | onSelect   | when an option is selected    | (node: any, index?: number): void |  -   |
+| className | Custom popover class, e.g. "am-popover-${your className}" | string | am-popover | 
 
 ### Popover.Item
 

diff --git a/components/popover/doc/index.zh-CN.md b/components/popover/doc/index.zh-CN.md
@@ -21,6 +21,7 @@ subtitle: 气泡
 | mask    | 是否显示遮罩背景层    | Boolean |  false  |
 | overlay   | 弹出层内容    | TemplateRef |  -   |
 | onSelect   | 选中某选项时的回调函数    | (node: any, index?: number): void |  -   |
+| className | 传入自定义class, e.g. "am-popover-${your className}"  | string | am-popover | 
 
 ### Popover.Item
 

diff --git a/components/popover/popover-options.provider.ts b/components/popover/popover-options.provider.ts
@@ -3,11 +3,13 @@ export interface PopoverOptionsInterface {
   visible?: boolean;
   placement?: string;
   appendToBody?: boolean;
+  className?: string;
 }
 
 export class PopoverOptions implements PopoverOptionsInterface {
   showArrow: boolean = false;
   mask: boolean = false;
   placement: string = 'bottom';
   appendToBody: boolean = false;
+  className: string = '';
 }
diff --git a/components/popover/popover.component.ts b/components/popover/popover.component.ts
@@ -22,7 +22,8 @@ export class PopoverComponent implements OnInit, AfterViewInit {
     };
     this.popoverCls = {
       [`${this.defaultProps.prefixCls}`]: true,
-      [`${this.defaultProps.prefixCls}-placement-${this.options.placement}`]: true
+      [`${this.defaultProps.prefixCls}-placement-${this.options.placement}`]: true,
+      [`${this.defaultProps.prefixCls}-${this.options.className}`]: true
     };
   }
 

diff --git a/components/popover/popover.directive.ts b/components/popover/popover.directive.ts
@@ -47,6 +47,8 @@ export class PopoverDirective implements OnInit, OnChanges, OnDestroy {
   onSelect: EventEmitter<any> = new EventEmitter();
   @Input()
   appendToBody: boolean;
+  @Input()
+  className: string;
 
   @HostListener('click')
   togglePopover(): void {
@@ -162,7 +164,8 @@ export class PopoverDirective implements OnInit, OnChanges, OnDestroy {
         'showArrow',
         'placement',
         'appendToBody',
-        'overlay'
+        'overlay',
+        'className'
       ];
       optionalParams.forEach(param => {
         if (typeof this[param] !== 'undefined') {