VÀ CHÈN CSS TÙY CHỈNH QUA @PUSH('STYLES') / @STACK('STYLES') */ function renderBladeButton( string $label, string $variant = 'primary', string $size = 'md', ?string $icon = null, string $type = 'button', string $extraClass = '' ): string { $sizeClass = match ($size) { 'sm' => 'btn-sm', 'lg' => 'btn-lg', default => '', }; $iconHtml = $icon ? '' : ''; $classes = trim("btn btn-{$variant} {$sizeClass} d-inline-flex align-items-center gap-1 {$extraClass}"); return sprintf( '', htmlspecialchars($type), htmlspecialchars($classes), $iconHtml, htmlspecialchars($label) ); } $pushCustomStyles = isset($_GET['push_styles']) ? (bool) $_GET['push_styles'] : true; $btnBladeCode = file_get_contents(__DIR__ . '/../resources/views/components/button.blade.php'); $btnClassCode = file_get_contents(__DIR__ . '/../app/View/Components/Button.php'); ?> Bài 08: Component <x-button> & @stack('styles') - Lab 07
Thực nghiệm `@push('styles')` kết hợp `<x-button>`
Bật/tắt `@push('styles')` để quan sát sự thay đổi kiểu dáng nút bấm (bo tròn pill & hiệu ứng nổi 3D khi di chuột).
Bật `@push('styles')` Mặc định Bootstrap
1. Các biến thể màu sắc (`variant`):
2. Các kích thước (`size="sm" | "md" | "lg"`):
3. Cú pháp sử dụng trong Blade View:
@push('styles')
<style>
    .btn { border-radius: 999px; transition: all .25s ease; }
</style>
@endpush

<x-button type="submit" variant="primary" size="md" icon="bi-check2-circle">
    Lưu bài viết
</x-button>
resources/views/components/button.blade.php
app/View/Components/Button.php