truly-ui/demo/src/app/components/modal/modaldemo.component.html

Web Components for Desktop Applications.

<div class="router-outlet">
<div class="header-title-demo">
  <h1 class="title">Modal</h1>
  <p class="text-content">Modals are pretty cool stuff, so truly ui have it.</p>
</div>
<hr>
<div class="showcase">
  <div class="row">
    <div class="col-md-3">
      <div class="group-component">
        <tl-button [text]="'Show Modal'" [iconAddonBefore]="'ion-monitor'" (click)="modal1()"></tl-button>
        <br><br>
        <span class="returned-value">Modal Result: {{ modalResult }}</span>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="container-modal">
        <tl-container-modal></tl-container-modal>
      </div>
    </div>
  </div>
  <br>
  <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 modalprop; 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 modalevts; 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">Modal Options</h5>
      <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'typescript'">
        &nbsp;&nbsp;&nbsp;&nbsp;this.modalOptions = {
        title: 'New Modal',
        icon: 'ion-monitor',
        draggable: true,
        width: '500px',
        height: 'auto',
        maximizable: true,
        minimizable: true
        };
      </textarea>
    </div>
    <div class="group-component">
      <h5 class="title">Modal With Options</h5>
      <textarea highlight-js [options]="{'tabReplace': ''}" [lang]="'typescript'">
        &nbsp;&nbsp;this.modalService.createModal(NewModal, this.modalOptions, (modalResult) => {
      console.log('Return',modalResult);
    });
      </textarea>
    </div>
  </div>


  <footer class="minimize-box">
    <span *ngFor="let item of modals; let i = index" (click)="show(item, i)">{{item.instance.label}}</span>
  </footer>
</div>
</div>