Skip to content

Commit

Permalink
docs(example): polish example
Browse files Browse the repository at this point in the history
  • Loading branch information
@BioPhoton
BioPhoton committed Apr 2, 2018
1 parent e6dc5e1 commit bc47263
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 53 deletions.
2 changes: 1 addition & 1 deletion apps/angular5-example/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div id="main-container" class="container-fluid">
<nav id="main-menu" class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<a class="navbar-brand" href="#">StarRating</a>
<button class="navbar-toggler d-lg-none"
type="button"
data-toggle="collapse"
Expand Down
121 changes: 70 additions & 51 deletions apps/angular5-example/src/app/components/kitchensink/kitchensink.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ <h1>Kitchen Sink</h1>
</div>

<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="starType"
[starType]="bindingsForm.get('starType').value">
</star-rating-comp>
</div>
Expand All @@ -94,8 +94,8 @@ <h1>Kitchen Sink</h1>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Space"
[space]="bindingsForm.get('space').value">
</star-rating-comp>
</div>
Expand All @@ -115,8 +115,8 @@ <h1>Kitchen Sink</h1>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Number Of Stars"
[numOfStars]="bindingsForm.get('numOfStars').value">
</star-rating-comp>
</div>
Expand All @@ -135,8 +135,8 @@ <h1>Kitchen Sink</h1>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Size"
[size]="bindingsForm.get('size').value">
</star-rating-comp>
</div>
Expand All @@ -161,44 +161,50 @@ <h1>Kitchen Sink</h1>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Static Color"
[staticColor]="bindingsForm.get('staticColor').value">
</star-rating-comp>
</div>
</div>

<div class="row">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="useCustomGetColor">
use custom getColor function
</label>
<div class="form-group">
<label>getColor</label>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="useCustomGetColor">
use custom getColor function
</label>
</div>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Custom Get Color"
[getColor]="bindingsForm.get('useCustomGetColor').value ? _getColor : false">
</star-rating-comp>
</div>
</div>

<div class="row">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="disabled">
Disabled
</label>
<div class="form-group">
<label>Disabled</label>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="disabled">
disabled star rating
</label>
</div>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Static Color"
[disabled]="bindingsForm.get('disabled').value">
</star-rating-comp>
</div>
Expand All @@ -218,8 +224,8 @@ <h1>Kitchen Sink</h1>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Speed"
[speed]="bindingsForm.get('speed').value">
</star-rating-comp>
</div>
Expand All @@ -237,8 +243,8 @@ <h1>Kitchen Sink</h1>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="id"
[id]="bindingsForm.get('id').value">
</star-rating-comp>
</div>
Expand All @@ -253,26 +259,29 @@ <h1>Kitchen Sink</h1>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Rating"
[rating]="bindingsForm.get('rating').value">
</star-rating-comp>
</div>
</div>

<div class="row">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="showHalfStars">
showHalfStars
</label>
<div class="form-group">
<label>ShowHalfStars</label>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="showHalfStars">
showHalfStars
</label>
</div>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Show Half Stars"
[rating]="3.5"
[showHalfStars]="bindingsForm.get('showHalfStars').value">
</star-rating-comp>
Expand All @@ -281,35 +290,41 @@ <h1>Kitchen Sink</h1>

<div class="row">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="showHoverStars">
showHoverStars
</label>
<div class="form-group">
<label>hoverEnabled</label>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="showHoverStars">
showHoverStars
</label>
</div>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Show Hover Stars"
[hoverEnabled]="bindingsForm.get('showHoverStars').value">
</star-rating-comp>
</div>
</div>

<div class="row">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="useCustomGetHalfStarVisible">
use custom getHalfStarVisible function
</label>
<div class="form-group">
<label>Get Half Star Visible</label>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="useCustomGetHalfStarVisible">
use custom getHalfStarVisible function
</label>
</div>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Custom Get Half Star Visible"
[rating]="3.2"
[showHalfStars]="true"
[getHalfStarVisible]="bindingsForm.get('useCustomGetHalfStarVisible').value ? _getHalfStarVisible : false">
Expand All @@ -319,17 +334,20 @@ <h1>Kitchen Sink</h1>

<div class="row">
<div class="col">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="readOnly">
ReadOnly
</label>
<div class="form-group">
<label>Read Only</label>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input"
formControlName="readOnly">
ReadOnly
</label>
</div>
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
labelText="Read Only"
[readOnly]="bindingsForm.get('readOnly').value">
</star-rating-comp>
</div>
Expand All @@ -339,12 +357,13 @@ <h1>Kitchen Sink</h1>
<div class="row">
<div class="col">
<div class="form-group">
<label>Text</label>
<label>Label Text</label>
<input type="text" class="form-control" placeholder=":Label text"
formControlName="labelText">
</div>
</div>
<div class="col">
<label>&nbsp;</label>
<star-rating-comp
[labelText]="bindingsForm.get('labelText').value">
</star-rating-comp>
Expand Down
3 changes: 2 additions & 1 deletion apps/angular5-example/src/app/components/kitchensink/kitchensink.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ import {

@Component({
selector: 'kitchensink',
templateUrl: './kitchensink.component.html'
templateUrl: './kitchensink.component.html',
styles: [``]
})
export class KitchensinkComponent implements OnInit, OnDestroy {
private onDestroy$: Subject<boolean> = new Subject<boolean>();
Expand Down

0 comments on commit bc47263

Please sign in to comment.