Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 8945402

Browse files
AlmeroSteynAlmeroSteyn
committed
docs(cb-a11y): Building examples - Form controls
1 parent 243bad3 commit 8945402

File tree

7 files changed

+115
-2
lines changed

7 files changed

+115
-2
lines changed

‎public/docs/_examples/cb-a11y/ts/app/a11y-form-controls.component.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<form #accessibleForm="ngForm"
2+
(ngSubmit)="submit(accessibleForm.value)">
3+
4+
<a11y-input [uniqueId]="'forinput'">
5+
Label for input:
6+
</a11y-input>
7+
8+
<label for="fortextArea">
9+
Label for text area:
10+
</label>
11+
<textarea id="fortextArea" class="form-control"></textarea>
12+
13+
<fieldset class="form-group row">
14+
<div class="col-xs-12">
15+
<legend>What do you like most about Angular 2:</legend>
16+
<div class="checkbox col-xs-12">
17+
<input id="templatesyntax" type="checkbox" name="likes" value="templateSyntax">
18+
<label for="templatesyntax">Template syntax</label>
19+
</div>
20+
<div class="checkbox col-xs-12">
21+
<input id="observables" type="checkbox" name="likes" value="observables">
22+
<label for="observables">Observables</label><br>
23+
</div>
24+
<div class="checkbox col-xs-12">
25+
<input id="components" type="checkbox" name="likes" value="components">
26+
<label for="components">Components</label><br>
27+
</div>
28+
<div class="checkbox col-xs-12">
29+
<input id="forms" type="checkbox" name="likes" value="forms">
30+
<label for="forms">Forms</label>
31+
</div>
32+
</div>
33+
</fieldset>
34+
35+
<fieldset class="form-group row">
36+
<div class="col-xs-12">
37+
<legend>Choose a shipping method:</legend>
38+
<div class="radio col-xs-12">
39+
<input id="overnight" type="radio" name="shipping" value="overnight">
40+
<label for="overnight">Overnight</label><br>
41+
</div>
42+
<div class="radio col-xs-12">
43+
<input id="twoday" type="radio" name="shipping" value="twoday">
44+
<label for="twoday">Two day</label><br>
45+
</div>
46+
<div class="radio col-xs-12">
47+
<input id="ground" type="radio" name="shipping" value="ground">
48+
<label for="ground">Ground</label>
49+
</div>
50+
</div>
51+
</fieldset>
52+
53+
<label for="favcity">Choose your favorite city?</label>
54+
<select id="favcity" name="select" class="form-control">
55+
<option value="1">Amsterdam</option>
56+
<option value="2">Buenos Aires</option>
57+
<option value="3">Delhi</option>
58+
<option value="4">Hong Kong</option>
59+
<option value="5">London</option>
60+
<option value="6">Los Angeles</option>
61+
<option value="7">Moscow</option>
62+
<option value="8">Mumbai</option>
63+
<option value="9">New York</option>
64+
<option value="10">Sao Paulo</option>
65+
<option value="11">Tokyo</option>
66+
</select>
67+
68+
69+
<button class="btn btn-primary" type="submit">Submit</button>
70+
71+
</form>

‎public/docs/_examples/cb-a11y/ts/app/a11y-form-controls.component.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Component} from "angular2/core";
2+
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/common";
3+
import {A11yInput} from "./a11y-input.component";
4+
5+
@Component({
6+
selector: 'a11y-form-controls',
7+
templateUrl: './app/a11y-form-controls.component.html',
8+
directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, A11yInput]
9+
})
10+
export class A11yFormControls {
11+
12+
submit(formValue: any):void{
13+
console.log(formValue)
14+
15+
}
16+
}

‎public/docs/_examples/cb-a11y/ts/app/a11y-input.component.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!-- #docregion cb-a11y-form-controls-input-for2 -->
2+
<label [attr.for]="uniqueId">
3+
<ng-content></ng-content>
4+
</label>
5+
<input [id]="uniqueId"
6+
class="form-control">
7+
<!--#enddocregion-->

‎public/docs/_examples/cb-a11y/ts/app/a11y-input.component.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {Component, Input} from "angular2/core";
2+
3+
@Component({
4+
selector: 'a11y-input',
5+
templateUrl: './app/a11y-input.component.html'
6+
})
7+
export class A11yInput {
8+
@Input()
9+
uniqueId:string;
10+
11+
}

‎public/docs/_examples/cb-a11y/ts/app/app.component.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
<h1 id="top">A11y Cookbook </h1>
1+
<div class="container">
2+
<h1 id="top">A11y Cookbook </h1>
3+
4+
<a11y-form-controls></a11y-form-controls>
5+
</div>

‎public/docs/_examples/cb-a11y/ts/app/app.component.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import {Component} from 'angular2/core';
2+
import {A11yFormControls} from "./a11y-form-controls.component";
23

34
@Component({
45
selector: 'app',
56
templateUrl: 'app/app.component.html',
7+
directives:[A11yFormControls]
68
})
79
export class AppComponent {
810

‎public/docs/_examples/cb-a11y/ts/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<title>A11y demonstration</title>
55

66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
7+
<!-- #docregion bootstrap -->
8+
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
9+
<!-- #enddocregion bootstrap -->
810
<link rel="stylesheet" href="styles.css">
911

1012
<!-- IE required polyfills, in this exact order -->

0 commit comments

Comments
 (0)