notifications.component.html 3.82 KB
Newer Older
Ooh-Ao committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

<app-page-header [title]="'Notifications'" [title1]="'Notifications'" [activeitem]="'Advanced UI'"></app-page-header>
   <!-- Start::row-1 -->
        <div class="grid grid-cols-12 gap-x-5">
          <div class="col-span-12 lg:col-span-3">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Basic Notification</h5>
              </div>
              <div class="box-body text-center">
                <button class="ti-btn ti-btn-primary toast-Tip" (click)="showInfo()">Async notification</button>
              </div>
            </div>
          </div>
          <div class="col-span-12 lg:col-span-3">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Async Notification With Error Message</h5>
              </div>
              <div class="box-body text-center">
                <button type="button" class="ti-btn ti-btn-primary"   (click)="showError()" id="async-error">Async Notification</button>
              </div>
            </div>
          </div>
          <div class="col-span-12 lg:col-span-3">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Async Notification With Success Message</h5>
              </div>
              <div class="box-body text-center">
                <button type="button" class="ti-btn ti-btn-primary"  (click)="showSuccess()" id="async-success">Async Notification</button>
              </div>
            </div>
          </div>
          <div class="col-span-12 lg:col-span-3">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">PopUp Notification</h5>
              </div>
              <div class="box-body text-center">
                <button type="button" class="ti-btn ti-btn-primary" (click)="Notification()" id="popup">Notification</button>
              </div>
            </div>
          </div>
        </div>
        <!-- End::row-1 -->

        <!-- Start::row-2 -->
        <div class="grid grid-cols-12 gap-x-5">
          <div class="col-span-12 lg:col-span-3">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Info Notification</h5>
              </div>
              <div class="box-body text-center">
                <button type="button" class="ti-btn  ti-btn-info" (click)="showInfo()" id="info">Info Notification</button>
              </div>
            </div>
          </div>
          <div class="col-span-12 lg:col-span-3">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Success Notification</h5>
              </div>
              <div class="box-body text-center">
                <button type="button" class="ti-btn  ti-btn-success"  (click)="showSuccess()" id="success">Success Notification</button>
              </div>
            </div>
          </div>
          <div class="col-span-12 lg:col-span-3">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Warning Notification</h5>
              </div>
              <div class="box-body text-center">
                <button type="button" class="ti-btn ti-btn-warning" (click)="ShowWarning()"  id="warning">Warning Notification</button>
              </div>
            </div>
          </div>
          <div class="col-span-12 lg:col-span-3">
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">Error Notification</h5>
              </div>
              <div class="box-body text-center">
                <button type="button" class="ti-btn ti-btn-danger" (click)="showError()" id="error">Error Notification</button>
              </div>
            </div>
          </div>
        </div>
        <!-- End::row-2 -->