summaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/radio.component.exp.ts
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/radio.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/radio.component.exp.ts179
1 files changed, 179 insertions, 0 deletions
diff --git a/stories/ng2-component-lab/radio.component.exp.ts b/stories/ng2-component-lab/radio.component.exp.ts
new file mode 100644
index 0000000..aa3959b
--- /dev/null
+++ b/stories/ng2-component-lab/radio.component.exp.ts
@@ -0,0 +1,179 @@
+import { experimentOn } from '@islavi/ng2-component-lab';
+
+export default experimentOn('Radios')
+ .group("Radios",[
+ {
+ id: 'radioButtonsGroupTwoWaysBinding',
+ showSource: true,
+ context: {
+ selectedValue: "val2"
+ },
+ title: 'Radio buttons group (two ways binding)',
+ description: 'Radio buttons group (two ways binding)',
+ template:
+ `
+ <sdc-radio-group
+ [legend]="'Radio Buttons Group legend'"
+ [(value)]="selectedValue"
+ [options] = "{
+ items: [
+ {
+ value: 'val1',
+ name: 'radio5',
+ label: 'Label of Radio 1'
+ },
+ {
+ value: 'val2',
+ name: 'radio5',
+ label: 'Label of Radio 2'
+ }
+ ]}"
+ ></sdc-radio-group>
+ <br><div>Selected Radio: {{selectedValue}}</div>
+ `
+ },
+ {
+ id: 'radioButtonsGroupDisabled',
+ title: 'Radio buttons group disabled',
+ description: 'Radio buttons group disabled',
+ showSource: true,
+ context: {
+ selectedValue: "val1"
+ },
+ template: `
+ <sdc-radio-group
+ [legend]="'Radio Buttons Group Disabled legend'"
+ [disabled]="true"
+ [value]="selectedValue"
+ [options] = "{
+ items: [{
+ value: 'val1',
+ name: 'radio6',
+ label: 'Label of Radio 1'
+ }, {
+ value: 'val2',
+ name: 'radio6',
+ label: 'Label of Radio 2'
+ }]
+ }"></sdc-radio-group>
+ <br><div>Selected Radio: {{selectedValue}}</div>
+ `
+ },
+ {
+ id: 'radioButtonsGroupPartiallyDisabled',
+ title: 'Radio buttons group partially disabled',
+ description: 'Radio buttons group partially disabled',
+ showSource: true,
+ context: {
+ selectedValue: "val2"
+ },
+ template: `
+ <sdc-radio-group
+ [legend]="'Radio Buttons Group partially disabled'"
+ [(value)]="selectedValue"
+ [options] = "{
+ items: [{
+ value: 'val1',
+ name: 'radio7',
+ label: 'Label of Radio 1'
+ }, {
+ value: 'val2',
+ disabled: 'true',
+ name: 'radio7',
+ label: 'Label of Radio 2'
+ }, {
+ value: 'val3',
+ name: 'radio7',
+ label: 'Label of Radio 3'
+ }]
+ }"></sdc-radio-group>
+ <br><div>Selected Radio: {{selectedValue}}</div>
+ `
+ },
+ {
+ id: 'radioButtonsGroupVertical',
+ title: 'Radio buttons group vertical',
+ description: 'Radio buttons group vertical',
+ showSource: true,
+ context: {
+ selectedValue: "val1"
+ },
+ template: `
+ <sdc-radio-group
+ [legend]="'Radio Buttons Group Vertical legend'"
+ [(value)]="selectedValue"
+ [direction]="'horizontal'"
+ [options]="{
+ items: [{
+ value:'val1',
+ name: 'radio8',
+ label: 'Label of Radio1'
+ }, {
+ value:'val2',
+ name: 'radio8',
+ label: 'Label of Radio2'
+ }]
+ }"></sdc-radio-group>
+ <br><div>Selected Radio: {{selectedValue}}</div>
+ `
+ },
+ {
+ id: 'radioButtonsGroupGetValue',
+ title: 'Radio buttons group get value',
+ description: 'Radio buttons group get value',
+ showSource: true,
+ context: {
+ selectedValue: "val1",
+ getSelectedValue: (val)=>{
+ alert(val);
+ }
+ },
+ template: `
+ <sdc-radio-group
+ #myRadioGroup
+ [legend]="'Radio Buttons Group Vertical legend'"
+ [(value)]="selectedValue"
+ [options]="{
+ items: [{
+ value:'val1',
+ name: 'radio8',
+ label: 'Label of Radio1'
+ }, {
+ value:'val2',
+ name: 'radio8',
+ label: 'Label of Radio2'
+ }]
+ }"></sdc-radio-group>
+ <br><div>Selected Radio: {{selectedValue}}</div>
+ <br><button (click)="getSelectedValue(myRadioGroup.value)">Get selected value</button>
+ `
+ },
+ {
+ id: 'radioButtonsGroupSelectValue',
+ title: 'Radio buttons group select value',
+ description: 'Radio buttons group select value',
+ showSource: true,
+ context: {
+ selectedValue: "val1"
+ },
+ template: `
+ <sdc-radio-group
+ #myRadioGroup
+ [legend]="'Radio Buttons Group Vertical legend'"
+ [(value)]="selectedValue"
+ [options]="{
+ items: [{
+ value:'val1',
+ name: 'radio8',
+ label: 'Label of Radio1'
+ }, {
+ value:'val2',
+ name: 'radio8',
+ label: 'Label of Radio2'
+ }]
+ }"></sdc-radio-group>
+ <br><div>Selected Radio: {{selectedValue}}</div>
+ <br><button (click)="myRadioGroup.value='val2'">Set value to val2</button>
+ `
+ }
+ ]);