Skip to content

B
BookingMyHrManagement
Commit 0d804d73 by DESKTOP-HF0LVOG\myhr
Options

update เปลี่ยน navtab

parent af1edcf9
Showing with 142 additions and 9 deletions
src/app/pages/equipment/equipment.component.html
......@@ -10,15 +10,143 @@
</div>
</div>
</div>
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem>
<a ngbNavLink>First</a>
<ng-template ngbNavContent>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">เพิ่มรายการ</h4>
<button type="button" class="close" aria-label="Close"
(click)="modal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
<input type="file" class="form-control-file"
id="exampleFormControlFile">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark"
(click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary"
(click)="open(content)">เพิ่มรายการ</button>
<div class="card" style="width: 50rem;">
<div class="mx-auto" style="width: 200px;">
<img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="...">
</div>
</div>
</div>
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize"
(pageChange)="refreshCountries()">
</ngb-pagination>
<select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
(ngModelChange)="refreshCountries()">
<option [ngValue]="10">10 items per page</option>
<option [ngValue]="50">50 items per page</option>
<option [ngValue]="100">100 items per page</option>
</select>
</div>
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-primary" type="button">ยืม</button>
<button class="btn btn-primary" type="button">ยกเลิก</button>
</div>
</div>
</div>
</div>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>Second</a>
<ng-template ngbNavContent>
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">เพิ่มรายการ</h4>
<button type="button" class="close" aria-label="Close"
(click)="modal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleFormControlFile">แนบไฟล์รูปภาพ</label>
<input type="file" class="form-control-file" id="exampleFormControlFile">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark"
(click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">เพิ่มรายการ</button>
<div class="card" style="width: 50rem;">
<div class="mx-auto" style="width: 200px;">
<img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="...">
</div>
</div>
</div>
<div class="d-flex justify-content-between p-2">
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize"
(pageChange)="refreshCountries()">
</ngb-pagination>
<select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
(ngModelChange)="refreshCountries()">
<option [ngValue]="10">10 items per page</option>
<option [ngValue]="50">50 items per page</option>
<option [ngValue]="100">100 items per page</option>
</select>
</div>
<div class="d-grid gap-2 a-md-flex justify-content-md-end">
<button class="btn btn-primary" type="button">ยืม</button>
<button class="btn btn-primary" type="button">ยกเลิก</button>
</div>
</div>
</div>
</div>
</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>
<!-- <ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="ยืมอุปกรณ์IT-tab" data-toggle="tab" href="#ยืมอุปกรณ์IT" role="tab"
aria-controls="ยืมอุปกรณ์IT" aria-selected="true">ยืมอุปกรณ์IT</a>
<a class="nav-link active" id="equirment-tab" data-toggle="tab" href="#equirment" role="tab"
aria-controls="equirment" aria-selected="true">ยืมอุปกรณ์IT</a>
</li>
<li class="nav-item">
<a class="nav-link" id="จองห้อง-รถ-tab" data-toggle="tab" href="#จองห้อง-รถ" role="tab"
aria-controls="จองห้อง-รถ" aria-selected="false">จองห้อง-รถ</a>
<a class="nav-link" id="book-tab" data-toggle="tab" href="#book-tab" role="tab"
aria-controls="book-tab" aria-selected="false">จองห้อง-รถ</a>
</li>
<div class="col-sm-4">
<form class="form-inline my-2 my-lg-0">
......@@ -29,7 +157,7 @@
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="tab-pane fade show active" id="equirment" role="tabpanel" aria-labelledby="equirment-tab">
<div class="row">
<div class="col-sm-12">
<div class="card">
......@@ -86,7 +214,11 @@
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
<div class="tab-pane fade" id="book-tab" role="tabpanel" aria-labelledby="book-tab">
sadasd
</div>
</div> -->
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment