truly-ui
Version:
Web Components for Desktop Applications.
70 lines (69 loc) • 2.27 kB
HTML
<div class="router-outlet">
<div class="header-title-demo">
<h1 class="title">CheckBox</h1>
<p class="text-content">The CheckBox component allows the user to select many options.</p>
</div>
<hr>
<div class="showcase">
<div class="form-group">
<tl-checkbox [checked]="true" [label]="'Select this option'"></tl-checkbox>
<tl-checkbox [label]="'Select this option'"></tl-checkbox>
<tl-checkbox [label]="'Select this option'"></tl-checkbox>
<tl-checkbox [label]="'Select this option'"></tl-checkbox>
<tl-checkbox [label]="'Select this option'"></tl-checkbox>
</div>
</div>
<hr>
<div class="setup">
<h3 class="title">Properties</h3>
<div class="table-box">
<table class="table table-truly">
<thead class="table-truly-head">
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th>Options</th>
</tr>
</thead>
<tbody class="table-truly-body" *ngFor="let item of dataTableProperties; let i = index">
<tr>
<td><span>{{ item.name }}</span></td>
<td><span class="badge">{{ item.type }}</span></td>
<td><code>{{ item.default }}</code></td>
<td>{{ item.description }}</td>
<td><code> {{ item.options }} </code></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h3 class="title">Events</h3>
<div class="table-box">
<table class="table table-truly">
<thead class="table-truly-head">
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody class="table-truly-body" *ngFor="let item of events; let i = index">
<tr>
<td><span>{{ item.name }}</span></td>
<td>{{ item.description }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="examples">
<h3 class="title">Examples</h3>
<div class="group-component">
<h5 class="title">Basic</h5>
<textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
<tl-checkbox [checked]="true" [label]="'Select this option'"></tl-checkbox>
</textarea>
</div>
</div>
</div>