AdminLTE - vol 01: thẻ card - Lớp học Vi Tính - khóa học vi tính văn phòng

Chủ Nhật, 8 tháng 12, 2024

AdminLTE - vol 01: thẻ card

AdminLTE là 01 bộ tools dùng code cho phần admin web - vẽ đồ thị thống kê ...

Hôm nay mình giới thiệu tính năng thẻ card trong bộ tools này.

Link gốc:

https://adminlte.io/docs/3.2/components/cards.html

Phần SET UP:

+ Thẻ HEAD

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | CARD</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- Theme style -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">

</head>

+ Trước thẻ đóng BODY

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<!-- AdminLTE App -->
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>

</body>
</html>

Ví dụ 01:

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Default Card Example</h3>
    <div class="card-tools">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
      <span class="badge badge-primary">Label</span>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
  <div class="card-footer">
    The footer of the card
  </div>
  <!-- /.card-footer -->
</div>
<!-- /.card -->

p/S: bài viết này mình mặc định các bạn đã có kiến thức về HTML nên không nói lại

01 - Tất cả tùy biến cho thẻ card

<div class="card">...</div>
<div class="card card-primary">...</div>
<div class="card card-secondary">...</div>
<div class="card card-success">...</div>
<div class="card card-info">...</div>
<div class="card card-warning">...</div>
<div class="card card-danger">...</div>
<div class="card card-dark">...</div>

02 - Vẽ outline

<div class="card card-outline card-primary">...</div>
<div class="card card-outline card-secondary">...</div>
<div class="card card-outline card-success">...</div>
<div class="card card-outline card-info">...</div>
<div class="card card-outline card-warning">...</div>
<div class="card card-outline card-danger">...</div>
<div class="card card-outline card-dark">...</div>

03 - Màu nền

<div class="card bg-primary">...</div>
<div class="card bg-secondary">...</div>
<div class="card bg-success">...</div>
<div class="card bg-info">...</div>
<div class="card bg-warning">...</div>
<div class="card bg-danger">...</div>
<div class="card bg-dark">...</div>

04 - Màu nền chuyển màu

<div class="card bg-gradient-primary">...</div>
<div class="card bg-gradient-secondary">...</div>
<div class="card bg-gradient-success">...</div>
<div class="card bg-gradient-info">...</div>
<div class="card bg-gradient-warning">...</div>
<div class="card bg-gradient-danger">...</div>
<div class="card bg-gradient-dark">...</div>

05 - Nút bấm góc

<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">Card Tools</h3>

    <div class="card-tools">
      <!-- This will cause the card to maximize when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
      <!-- This will cause the card to collapse when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
      <!-- This will cause the card to be removed when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->

06 - Loading style

<div class="overlay">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

...

Thêm phần AI Copilot cho xôm tụ:

Trong AdminLTE, thành phần card là một thành phần giao diện phổ biến và thường được sử dụng để hiển thị nội dung theo hình dạng một bộ nhớ đệm (card).

Mỗi card có thể chứa nội dung như tiêu đề, mô tả, hình ảnh, và các liên kết.

Đây là một ví dụ đơn giản về cách sử dụng card trong AdminLTE:

<div class="card">
    <div class="card-header">
      <h3 class="card-title">Tiêu đề Card</h3>
      <div class="card-tools">
        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
      </div>
    </div>
    <div class="card-body">
      <p class="card-text">Nội dung của card đây.</p>
    </div>
  </div>

Trong đoạn mã trên:

- card-header: Chứa tiêu đề của card và các công cụ như nút để thu gọn card.

- card-body: Chứa nội dung chính của card.

Bạn có thể tùy chỉnh card theo nhu cầu của mình bằng cách thêm các thành phần khác như hình ảnh, biểu đồ, hoặc các liên kết.

By #drM

NTM Solutions

Lớp học Vi Tính

Chủ Nhật, 8 tháng 12, 2024