docs(buttons): add demo

Closes ng-bootstrap#324

Author: pkozlowski-opensource

demo/src/app/components/buttons/buttons.component.html

@@ -1,4 +1,10 @@
 <ngbd-content-wrapper component="Buttons">
   <ngbd-api-docs directive="NgbRadioGroup"></ngbd-api-docs>
   <ngbd-api-docs directive="NgbRadio"></ngbd-api-docs>
+  <ngbd-example-box demoTitle="Radio buttons" [htmlSnippet]="radioHtmlContent" [tsSnippet]="radioTsContent">
+    <ngbd-buttons-radio></ngbd-buttons-radio>
+  </ngbd-example-box>
+  <ngbd-example-box demoTitle="Checkbox buttons" [htmlSnippet]="checkboxHtmlContent" [tsSnippet]="checkboxTsContent">
+    <ngbd-buttons-checkbox></ngbd-buttons-checkbox>
+  </ngbd-example-box>
 </ngbd-content-wrapper>

demo/src/app/components/buttons/buttons.component.ts

@@ -1,10 +1,17 @@
 import {Component} from '@angular/core';
 import {ContentWrapper} from '../../shared';
-import {NgbdApiDocs} from '../shared/api-docs';
+import {ExampleBoxComponent, NgbdApiDocs} from '../shared';
+import {NgbdButtonsCheckbox, checkboxHtmlContent, checkboxTsContent} from './demos';
+import {NgbdButtonsRadio, radioHtmlContent, radioTsContent} from './demos';
 
 @Component({
   selector: 'ngbd-buttons',
   template: require('./buttons.component.html'),
-  directives: [ContentWrapper, NgbdApiDocs]
+  directives: [ContentWrapper, ExampleBoxComponent, NgbdApiDocs, NgbdButtonsCheckbox, NgbdButtonsRadio]
 })
-export class NgbdButtons {}
+export class NgbdButtons {
+  checkboxHtmlContent = checkboxHtmlContent;
+  checkboxTsContent = checkboxTsContent;
+  radioHtmlContent = radioHtmlContent;
+  radioTsContent = radioTsContent;
+}

demo/src/app/components/buttons/demos/checkbox/checkbox.component.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngbd-buttons-checkbox',
+  template: require('./checkbox.html')
+})
+export class NgbdButtonsCheckbox {
+  model = {
+    left: true,
+    middle: false,
+    right: false
+  }
+}

demo/src/app/components/buttons/demos/checkbox/checkbox.html

@@ -0,0 +1,17 @@
+<p>
+  Check-box-like button group can be easily done with pure Angular 2, no custom directives necessary.
+  But we include demo here for completeness.
+</p>
+<div class="btn-group" data-toggle="buttons">
+  <label class="btn btn-primary" [class.active]="model.left">
+    <input type="checkbox" [(ngModel)]="model.left"> Left (pre-checked)
+  </label>
+  <label class="btn btn-primary" [class.active]="model.middle">
+    <input type="checkbox" [(ngModel)]="model.middle"> Middle
+  </label>
+  <label class="btn btn-primary" [class.active]="model.right">
+    <input type="checkbox" [(ngModel)]="model.right"> Right
+  </label>
+</div>
+<hr>
+<pre>{{model | json}}</pre>

demo/src/app/components/buttons/demos/checkbox/index.ts

@@ -0,0 +1,3 @@
+export * from './checkbox.component';
+export const checkboxTsContent = require('!!prismjs?lang=typescript!./checkbox.component');
+export const checkboxHtmlContent = require('!!prismjs?lang=markup!./checkbox.html');

demo/src/app/components/buttons/demos/index.ts

@@ -0,0 +1,2 @@
+export * from './checkbox';
+export * from './radio';

demo/src/app/components/buttons/demos/radio/index.ts

@@ -0,0 +1,3 @@
+export * from './radio.component';
+export const radioTsContent = require('!!prismjs?lang=typescript!./radio.component');
+export const radioHtmlContent = require('!!prismjs?lang=markup!./radio.html');

demo/src/app/components/buttons/demos/radio/radio.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {NGB_RADIO_DIRECTIVES} from '@ng-bootstrap/buttons';
+
+@Component({
+  selector: 'ngbd-buttons-radio',
+  template: require('./radio.html'),
+  directives: [NGB_RADIO_DIRECTIVES]
+})
+export class NgbdButtonsRadio {
+  model = 1;
+}

demo/src/app/components/buttons/demos/radio/radio.html

@@ -0,0 +1,13 @@
+<div class="btn-group" data-toggle="buttons" [(ngModel)]="model" ngbRadioGroup>
+  <label class="btn btn-primary">
+    <input type="radio" [value]="1"> Left (pre-checked)
+  </label>
+  <label class="btn btn-primary">
+    <input type="radio" value="middle"> Middle
+  </label>
+  <label class="btn btn-primary">
+    <input type="radio" [value]="false"> Right
+  </label>
+</div>
+<hr>
+<pre>{{model}}</pre>

webpack.demo.js

@@ -70,6 +70,7 @@ module.exports = function makeWebpackConfig() {
     alias: {
       '@ng-bootstrap/accordion': root('src/accordion/accordion.ts'),
       '@ng-bootstrap/alert': root('src/alert/alert.ts'),
+      '@ng-bootstrap/buttons': root('src/buttons/radio.ts'),
       '@ng-bootstrap/collapse': root('src/collapse/collapse.ts'),
       '@ng-bootstrap/dropdown': root('src/dropdown/dropdown.ts')
     }