changed dev-example for radio

positive-js · Aug 16, 2019 · 8efd084 · 8efd084
1 parent 3c4b077
commit 8efd084
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 30 deletions.
diff --git a/packages/mosaic-dev/radio/module.ts b/packages/mosaic-dev/radio/module.ts
@@ -3,7 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { McRadioModule } from '../../mosaic/radio';
+import { McRadioChange, McRadioModule } from '../../mosaic/radio';
 import { ThemePickerModule } from '../theme-picker';
 
 
@@ -29,6 +29,10 @@ export class DemoComponent {
         {name: 'Yes', value: 'true', selected: false},
         {name: 'No', value: 'false', selected: true}
     ];
+
+    onChange($event: McRadioChange) {
+        console.log('McRadioChange: ', $event);
+    }
 }
 
 @NgModule({

diff --git a/packages/mosaic-dev/radio/styles.scss b/packages/mosaic-dev/radio/styles.scss
@@ -2,8 +2,8 @@
 @import '../../mosaic/core/theming/prebuilt/dark-theme';
 @import '../../mosaic/core/visual/prebuilt/default-visual';
 
-body {
-    margin: 18px;
+.dev-container {
+    padding: 16px;
 }
 
 .example-radio-group {

diff --git a/packages/mosaic-dev/radio/template.html b/packages/mosaic-dev/radio/template.html
@@ -1,34 +1,39 @@
 
 <!--<theme-picker></theme-picker>-->
 
-<mc-radio-group class="example-radio-group" [(ngModel)]="favoriteFruit">
-    <mc-radio-button class="example-radio-button" *ngFor="let season of fruits" [value]="season">
-        {{season}}
-    </mc-radio-button>
-</mc-radio-group>
+<div class="dev-container">
+    <mc-radio-group
+        class="example-radio-group"
+        [(ngModel)]="favoriteFruit"
+        (change)="onChange($event)">
+        <mc-radio-button class="example-radio-button" *ngFor="let season of fruits" [value]="season">
+            {{season}}
+        </mc-radio-button>
+    </mc-radio-group>
 
-<div class="example-selected-value">Your favorite fruit is: {{favoriteFruit}}</div>
+    <div class="example-selected-value">Your favorite fruit is: {{favoriteFruit}}</div>
 
-<p class="mc-headline">Disabled buttons</p>
+    <p class="mc-headline">Disabled buttons</p>
 
-<mc-radio-group
-    class="example-radio-group"
-    name="my_options"
-    [disabled]="isDisabled">
-    <mc-radio-button class="example-radio-button" value="option_1">Option 1</mc-radio-button>
-    <mc-radio-button class="example-radio-button" value="option_2">Option 2</mc-radio-button>
-    <mc-radio-button class="example-radio-button" value="option_3">Option 3</mc-radio-button>
-</mc-radio-group>
+    <mc-radio-group
+        class="example-radio-group"
+        name="my_options"
+        [disabled]="isDisabled">
+        <mc-radio-button class="example-radio-button" value="option_1">Option 1</mc-radio-button>
+        <mc-radio-button class="example-radio-button" value="option_2">Option 2</mc-radio-button>
+        <mc-radio-button class="example-radio-button" value="option_3">Option 3</mc-radio-button>
+    </mc-radio-group>
 
-<p class="mc-headline">Disabled selected buttons</p>
-<mc-radio-group class="example-radio-group">
-    <mc-radio-button
-        class="example-radio-button"
-        *ngFor="let data of selectionList"
-        name="data.value"
-        [disabled]="true"
-        [checked]="data.selected"
-        [value]="data.value">
-        {{data.name}}
-    </mc-radio-button>
-</mc-radio-group>
+    <p class="mc-headline">Disabled selected buttons</p>
+    <mc-radio-group class="example-radio-group">
+        <mc-radio-button
+            class="example-radio-button"
+            *ngFor="let data of selectionList"
+            name="data.value"
+            [disabled]="true"
+            [checked]="data.selected"
+            [value]="data.value">
+            {{data.name}}
+        </mc-radio-button>
+    </mc-radio-group>
+</div>