Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(chips): chips & autocomplete docs #395

Merged
merged 4 commits into from
Mar 2, 2017
Merged

docs(chips): chips & autocomplete docs #395

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eb38257
demo/code added for docs
richavyas Feb 28, 2017
e891d96
removed unused vars & modified html
richavyas Mar 1, 2017
df45169
removed param which is not required for the block
richavyas Mar 1, 2017
db73810
chore(): updated demos in chips
Mar 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 88 additions & 6 deletions src/app/components/components/chips/chips.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,94 @@
<md-card-subtitle>Small blocks for multiple items</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<p>Basic Demo</p>
<td-chips placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
<p>Autocomplete Demo</p>
<td-chips [items]="items" placeholder="Enter any string" [readOnly]="readOnly"></td-chips>
<p>Autocomplete and requireMatch Demo</p>
<td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
<h3 class="md-title">Basic Demo</h3>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<td-chips placeholder="Enter any string"></td-chips>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips placeholder="Enter any string"></td-chips>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
export class ChipsDemoComponent {

}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">Autocomplete Demo</h3>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<td-chips [items]="items" placeholder="Enter any string"></td-chips>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips [items]="items" placeholder="Enter any string"></td-chips>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
export class ChipsDemoComponent {

items: string[] = [...];

}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">Autocomplete and requireMatch Demo</h3>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-chips [items]="items" [(ngModel)]="itemsRequireMatch" placeholder="Enter autocomplete strings" [readOnly]="readOnly" requireMatch></td-chips>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
export class ChipsDemoComponent {
readOnly: boolean = false;

itemsRequireMatch: string[] = this.items.slice(0, 6);

toggleReadOnly(): void {
this.readOnly = !this.readOnly;
}
}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
<md-divider></md-divider>
<md-card-actions>
Expand Down
4 changes: 0 additions & 4 deletions src/app/components/components/chips/chips.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,6 @@ export class ChipsDemoComponent {

itemsRequireMatch: string[] = this.items.slice(0, 6);

itemsReadOnly: string[] = this.items.slice(2, 8);

itemsForms: string[] = this.items.slice(6, 11);

toggleReadOnly(): void {
this.readOnly = !this.readOnly;
}
Expand Down