feat(module:radio): add solid button style (#1892)

close #1891
NG-ZORRO · Aug 3, 2018 · 945a924 · 945a924
1 parent cea0e51
commit 945a924
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 0 deletions.
diff --git a/components/radio/doc/index.en-US.md b/components/radio/doc/index.en-US.md
@@ -34,6 +34,7 @@ radio group，wrap a group of `nz-radio`。
 | `[nzDisabled]` | Disable all radio buttons | boolean |  false |
 | `[nzSize]` | Size, only on radio style | `large` `default` `small` | `default` |
 | `(ngModelChange)` | the callback function when current selected `nz-radio` value change | `EventEmitter<string>` | - |
+| `[nzButtonStyle]` | style type of radio button | `outline` 丨 `solid` | `outline` |
 
 ## Methods
 

diff --git a/components/radio/doc/index.zh-CN.md b/components/radio/doc/index.zh-CN.md
@@ -36,6 +36,7 @@ title: Radio
 | `[nzDisabled]` | 设定所有 `nz-radio` disable 状态 | boolean | false |
 | `[nzSize]` | 大小，只对按钮样式生效 | `large` ｜ `default` ｜ `small` | `default` |
 | `(ngModelChange)` | 选中变化时回调 | `EventEmitter<boolean>` | - |
+| `[nzButtonStyle]` | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` 丨 `solid` | `outline` |
 
 ## 方法
 

diff --git a/components/radio/nz-radio-group.component.ts b/components/radio/nz-radio-group.component.ts
@@ -11,6 +11,7 @@ import { isNotNil } from '../core/util/check';
 import { toBoolean } from '../core/util/convert';
 
 export type NzRadioGroupSizeType = 'large' | 'default' | 'small';
+export type NzRadioButtonStyle = 'outline' | 'solid';
 
 import { NzRadioButtonComponent } from './nz-radio-button.component';
 import { NzRadioComponent } from './nz-radio.component';
@@ -72,6 +73,8 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
     return this._name;
   }
 
+  @Input() nzButtonStyle: NzRadioButtonStyle = 'outline';
+
   updateDisabledState(): void {
     if (isNotNil(this.nzDisabled)) {
       this.radios.forEach((radio) => {
@@ -104,6 +107,11 @@ export class NzRadioGroupComponent implements AfterContentInit, ControlValueAcce
     return this.nzSize === 'small';
   }
 
+  @HostBinding('class.ant-radio-group-solid')
+  get isSolid(): boolean {
+    return this.nzButtonStyle === 'solid';
+  }
+
   addRadio(radio: NzRadioComponent | NzRadioButtonComponent): void {
     this.radios.push(radio);
     radio.nzChecked = radio.nzValue === this.value;

diff --git a/components/radio/nz-radio.spec.ts b/components/radio/nz-radio.spec.ts
@@ -194,6 +194,19 @@ describe('radio', () => {
       expect(testComponent.value).toBe('A');
     }));
   });
+  describe('radio group solid', () => {
+    let fixture;
+    let radioGroup;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestRadioGroupSolidComponent);
+      fixture.detectChanges();
+      radioGroup = fixture.debugElement.query(By.directive(NzRadioGroupComponent));
+      it('should support solid css', () => {
+        fixture.detectChanges();
+        expect(radioGroup.nativeElement.classList).toContain('ant-radio-group-solid');
+      });
+    });
+  });
   describe('radio form', () => {
     let fixture;
     let testComponent;
@@ -410,3 +423,18 @@ export class NzTestRadioGroupDisabledFormComponent implements OnInit {
     });
   }
 }
+
+@Component({
+  selector: 'nz-test-radui-group-solid',
+  template: `
+    <nz-radio-group [(ngModel)]="value" [nzButtonStyle]="'solid'">
+      <label nz-radio-button nzValue="A">A</label>
+      <label nz-radio-button nzValue="B">B</label>
+      <label nz-radio-button nzValue="C" [nzDisabled]="singleDisabled">C</label>
+      <label nz-radio-button nzValue="D">D</label>
+    </nz-radio-group>`
+})
+export class NzTestRadioGroupSolidComponent {
+  value = 'A';
+  singleDisabled = false;
+}
diff --git a/components/radio/style/index.less b/components/radio/style/index.less
@@ -177,6 +177,22 @@ span.@{radio-prefix-cls} + * {
     padding: 0 @control-padding-horizontal-sm - 1px;
   }
 
+  .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
+    background: @radio-dot-color;
+    border-color: @radio-dot-color;
+    color: #fff;
+    &:hover {
+      border-color: @radio-button-hover-color;
+      background: @radio-button-hover-color;
+      color: #fff;
+    }
+    &:active {
+      border-color: @radio-button-active-color;
+      background: @radio-button-active-color;
+      color: #fff;
+    }
+  }
+
   &:not(:first-child) {
     &::before {
       content: "";