truly-ui/demo/src/app/components/listbox/listboxdemo.component.html

Web Components for Desktop Applications.

<div class="router-outlet">
  <div class="header-title-demo">
    <h1 class="title">ListBox</h1>
    <p class="text-content">ListBox is a component where exists a list of itens to search and select.</p>
    <p class="text-content">Truly UI has two diferent types of list, the default and with Custom Template, like shown below.</p>
  </div>
  <hr>
  <div class="showcase">
    <div class="row">
        <div class="col-md-6">
          <h5>Basic Usage</h5>
          <tl-input [iconAfter]="'ion-ios-search-strong'" [clearButton]="true" #inputBasic
                    [autocomplete]="'off'"
                    [placeholder]="'Search...'">
          </tl-input>
          <tl-listbox
            [data]="dataBasic"
            (onClickItem)="onClickNoItem($event)"
            [itensToShow]="10"
            [searchElement]="inputBasic"
            [id]="'id'"
            [label]="'firstName'"
            [labelDetail]="'city'"
            [rowHeight]="50">
          </tl-listbox>
        </div>
        <div class="col-md-6">
          <h5>With Custom Template</h5>
          <tl-input [iconAfter]="'ion-ios-search-strong'" [clearButton]="true" #inputCustom
                    [autocomplete]="'off'"
                    [placeholder]="'Search...'"></tl-input>
          <tl-listbox
            [data]="dataCustom"
            (onClickItem)="onClickNoItem($event)"
            [itensToShow]="10"
            [searchElement]="inputCustom"
            [id]="'id'"
            [label]="'firstName'"
            [labelDetail]="'city'"
            [rowHeight]="50">
            <ng-template let-item="item" let-index="index">
              <li class="list-template-demo">
                <img class="img-circle" src="../assets/img/avatar.png"
                     width="30">{{item.firstName}} - <span>{{item.lastName}}</span>
                <span class="list-bagde badge">{{item.id}}</span>
              </li>
            </ng-template>
          </tl-listbox>
        </div>
    </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 Usage</h5>
      <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'html'">
        <tl-listbox
          [data]="data"
          (onClickItem)="onClickNoItem($event)"
          [itensToShow]="10"
          [searchElement]="input"
          [id]="'id'"
          [label]="'firstName'"
          [labelDetail]="'city'"
          [rowHeight]="50">
        </tl-listbox>
    </textarea>
    </div>
    <div class="group-component">
      <h5 class="title">With Custom Template</h5>
      <p><code>Atention:</code> The example below needs to be interpolated <code>{{example}}</code> for example. Not allowed to used here on highlight code.</p>
      <textarea highlight-js [options]="{}" [lang]="'html'">
<tl-listbox
          [data]="data"
          (onClickItem)="onClickNoItem($event)"
          [itensToShow]="10"
          [searchElement]="input"
          [id]="'id'"
          [label]="'firstName'"
          [labelDetail]="'city'"
          [rowHeight]="50">

   <ng-template let-item="item" let-index="index">
      <li class="list-template-demo">
        <img class="img-circle" src="../assets/img/avatar.png"
             width="30"> item.firstName - <span> item.lastName </span>
        <span class="list-bagde badge"> item.id </span>
      </li>
   </ng-template>

</tl-listbox>
    </textarea>
    </div>
  </div>
</div>