BÀI TẬP 10

Tạo Component <x-card> & Tách Header ra partials/header.blade.php

Tái sử dụng giao diện hiệu quả bằng cách đóng gói khung nội dung thành Blade Component <x-card title="..." subtitle="..."> (sử dụng biến $slot, $actions, $footer) và tách thanh menu điều hướng thành partial @include('partials.header').

1. Partial @include('partials.header') (resources/views/partials/header.blade.php):
2. Các ví dụ tái sử dụng Component <x-card> (resources/views/components/card.blade.php):
Thống kê Học tập
Truyền prop title, subtitle & headerClass="bg-primary text-white"
$actions slot

Đây là vùng nội dung chính được truyền thông qua biến mặc định {{ $slot }} của Blade Component <x-card>.

<x-card title="Thống kê Học tập" subtitle="...">
    Nội dung bên trong {{ $slot }}
</x-card>
Footer tùy chọn qua <x-slot:footer>
Thông báo Hệ thống
Tùy biến màu sắc với headerClass="bg-success text-white"
+ Thêm mới

Nhờ tách Component <x-card>, các trang students/index.blade.php, students/create.blade.php và pages/about.blade.php đều đồng nhất về phong cách thiết kế.

<x-card title="Thông báo Hệ thống" headerClass="bg-success text-white">
    <x-slot:actions>...</x-slot:actions>
    ...
</x-card>
Tái sử dụng trên toàn bộ dự án Lab01_Framework
1. app/View/Components/Card.php
2. resources/views/components/card.blade.php
3. resources/views/partials/header.blade.php
4. resources/views/layouts/app.blade.php