Dashboard

Welcome back! Here’s an overview of your projects.

Total Revenue

$45,231.89

20.1%

from last month

Active Users

2,300

15.3%

from last month

Conversion Rate

4.24%

2.1%

from last month

No reports generated yet

Get started by creating a new report. All your generated documents will appear here.

Bố cục cơ bản kết hợp thanh bên trái và tiêu đề trên cùng, được sử dụng phổ biến nhất trong các ứng dụng SaaS hiện đại và Bảng điều khiển dành cho quản trị viên.

Trường hợp sử dụng & Tính năng

Màn hình quản lý/sản phẩm SaaS: Lý tưởng cho các ứng dụng có nhiều mục điều hướng.
Khả năng tương thích đáp ứng: Thanh bên luôn hiển thị trên màn hình được thiết kế để ẩn trên màn hình thiết bị di động và máy tính bảng (trong hoạt động thực tế, nó được hiển thị trong ngăn kéo có menu hamburger, v.v.).
Bố cục Flexbox: Cấu trúc được tính toán để phù hợp với chiều cao toàn màn hình bằng cách kết hợp các tiện ích như flex-1 và min-w-0. Chỉ cuộn khu vực nội dung chính, tiêu đề và thanh bên là cố định.

Những điểm chính của thiết kế và UX (Design & UX)

Tách vùng cuộn: Điều hướng ở bên trái (nav trong aside) và cuộn nội dung chính (main) ở bên phải là độc lập nên ngay cả các menu dài cũng không ảnh hưởng đến màn hình chính.
Thanh cuộn tùy chỉnh: Chúng tôi sử dụng ::-webkit-scrollbar để thay đổi thanh cuộn dày mặc định thành thiết kế mỏng hơn, đẹp hơn nhằm giảm nhiễu giao diện người dùng.
Cấu trúc phân cấp dễ thấy: Bằng cách kết hợp màu nền (bg-slate-50 và bg-white), đường viền (border-slate-200) và bóng sáng (shadow-sm), ranh giới của từng phần được thể hiện một cách tự nhiên.

Cách tùy chỉnh (Hướng dẫn tùy chỉnh)

Độ rộng của thanh bên: Bạn có thể điều chỉnh độ rộng bằng cách thay đổi w-64 (16rem = 256px) được chỉ định trong aside thành w-72 hoặc w-56.
Chiều cao tiêu đề: Bạn có thể kiểm soát chiều cao tổng thể bằng cách thay đổi header và vùng logo ở đầu thanh bên từ h-16 (4rem = 64px) thành h-14, v.v.
Thay đổi màu chủ đề: Vui lòng thay thế indigo-600, v.v. được sử dụng trong mỗi biểu tượng và menu đang hoạt động bằng màu thương hiệu của bạn (ví dụ: blue-600 hoặc violet-500).

mã thực hiện (Implementation)

<div class="h-screen w-full overflow-hidden bg-slate-50 text-slate-900 font-sans flex">
<!-- thanh bên -->
<aside class="hidden md:flex flex-col w-64 bg-white border-r border-slate-200 shrink-0">
  <div class="h-16 flex items-center px-6 border-b border-slate-200 shrink-0">
    <a href="#" class="font-bold text-lg text-indigo-600">NexusApp</a>
  </div>
  
  <nav class="flex-1 overflow-y-auto py-4 px-3">
    <ul class="space-y-1">
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-indigo-50 text-indigo-600">
          Dashboard
        </a>
      </li>
      <li>
        <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-slate-600 hover:bg-slate-50">
          Team
        </a>
      </li>
    </ul>
  </nav>
</aside>

<!-- Thùng chứa chính -->
<div class="flex-1 flex flex-col min-w-0 bg-slate-50">
  <!-- Tiêu đề -->
  <header class="h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 bg-white border-b border-slate-200 shadow-sm shrink-0">
    <div class="flex items-center gap-4">
      <!-- Chuyển đổi menu cho thiết bị di động -->
      <button class="md:hidden p-2 text-slate-500 hover:text-slate-900 rounded-md">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
      </button>
    </div>
    
    <div class="flex items-center gap-4">
      <button class="p-2 text-slate-400 hover:text-slate-600 rounded-full">
        <!-- Notification icons, etc. -->
      </button>
      <div class="h-8 w-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm font-bold">
        JS
      </div>
    </div>
  </header>
  
  <!-- Main content area -->
  <main class="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
    <div class="max-w-7xl mx-auto">
      <!-- Place page-specific content here -->
      <h1 class="text-2xl font-bold text-slate-900 mb-6">Dashboard</h1>
    </div>
  </main>
</div>
</div>

Hỗ trợ trình duyệt

Hoạt động chính xác với các phiên bản mới nhất của trình duyệt hiện đại (Chrome, Safari, Firefox, Edge).
Các trình duyệt cũ (IE, v.v.) không được hỗ trợ vì Flexbox (flex, flex-1, flex-col) được sử dụng nhiều.