Joseph.Rawlings
760cf84451
- Introduced AdminLTE CSS variables for color palette, body colors, card styles, and button styles. - Implemented card components with variants for primary, success, warning, danger, and info. - Added button styles including sizes and outline variants. - Created form controls, select inputs, and input groups with consistent styling. - Included utility classes for text and background colors, gradients, and shadows. - Developed components for badges, alerts, callouts, progress bars, tables, small boxes, and info boxes. - Integrated modal, dropdown, spinner, tooltip, and direct chat styles. - Established timeline and close button styles, with dark mode support for specific components.
134 lines
3.6 KiB
PHP
134 lines
3.6 KiB
PHP
{{--
|
|
Table Component - AdminLTE style
|
|
|
|
Usage:
|
|
<x-proxmox::ui.table>
|
|
<x-slot:head>
|
|
<x-proxmox::ui.table-th>Name</x-proxmox::ui.table-th>
|
|
<x-proxmox::ui.table-th>Status</x-proxmox::ui.table-th>
|
|
</x-slot:head>
|
|
<x-proxmox::ui.table-row>
|
|
<x-proxmox::ui.table-td>Server 1</x-proxmox::ui.table-td>
|
|
<x-proxmox::ui.table-td>Running</x-proxmox::ui.table-td>
|
|
</x-proxmox::ui.table-row>
|
|
</x-proxmox::ui.table>
|
|
--}}
|
|
|
|
@props([
|
|
'striped' => false,
|
|
'hoverable' => true,
|
|
'responsive' => true,
|
|
'compact' => false,
|
|
'bordered' => false,
|
|
])
|
|
|
|
<style>
|
|
.table-lte-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
border-radius: var(--lte-border-radius, 0.375rem);
|
|
border: 1px solid var(--lte-border-color, #dee2e6);
|
|
background-color: #fff;
|
|
}
|
|
.table-lte {
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
color: #212529;
|
|
vertical-align: top;
|
|
border-collapse: collapse;
|
|
font-size: 0.875rem;
|
|
}
|
|
.table-lte thead {
|
|
background-color: #f8f9fa;
|
|
border-bottom: 2px solid var(--lte-border-color, #dee2e6);
|
|
}
|
|
.table-lte tbody {
|
|
background-color: #fff;
|
|
}
|
|
.table-lte tfoot {
|
|
background-color: #f8f9fa;
|
|
border-top: 2px solid var(--lte-border-color, #dee2e6);
|
|
font-weight: 500;
|
|
}
|
|
.table-lte-striped tbody tr:nth-of-type(even) {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
.table-lte-hoverable tbody tr {
|
|
transition: background-color var(--lte-transition-speed, 0.3s) ease;
|
|
}
|
|
.table-lte-hoverable tbody tr:hover {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
}
|
|
.table-lte-bordered {
|
|
border: 1px solid var(--lte-border-color, #dee2e6);
|
|
}
|
|
.table-lte-bordered th,
|
|
.table-lte-bordered td {
|
|
border: 1px solid var(--lte-border-color, #dee2e6);
|
|
}
|
|
.table-lte-compact th,
|
|
.table-lte-compact td {
|
|
padding: 0.375rem 0.75rem;
|
|
}
|
|
/* Dark mode */
|
|
.dark .table-lte-wrapper {
|
|
background-color: #1f2937;
|
|
border-color: #374151;
|
|
}
|
|
.dark .table-lte {
|
|
color: #e5e7eb;
|
|
}
|
|
.dark .table-lte thead {
|
|
background-color: rgba(55, 65, 81, 0.5);
|
|
border-bottom-color: #374151;
|
|
}
|
|
.dark .table-lte tbody {
|
|
background-color: transparent;
|
|
}
|
|
.dark .table-lte tfoot {
|
|
background-color: rgba(55, 65, 81, 0.5);
|
|
border-top-color: #374151;
|
|
}
|
|
.dark .table-lte-striped tbody tr:nth-of-type(even) {
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|
}
|
|
.dark .table-lte-hoverable tbody tr:hover {
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|
}
|
|
.dark .table-lte-bordered th,
|
|
.dark .table-lte-bordered td {
|
|
border-color: #374151;
|
|
}
|
|
</style>
|
|
|
|
<div @class(['table-lte-wrapper' => $responsive])>
|
|
<table
|
|
{{ $attributes->class([
|
|
'table-lte',
|
|
'table-lte-striped' => $striped,
|
|
'table-lte-hoverable' => $hoverable,
|
|
'table-lte-bordered' => $bordered,
|
|
'table-lte-compact' => $compact,
|
|
]) }}
|
|
data-hoverable="{{ $hoverable ? 'true' : 'false' }}"
|
|
data-compact="{{ $compact ? 'true' : 'false' }}"
|
|
>
|
|
@if(isset($head))
|
|
<thead>
|
|
<tr>
|
|
{{ $head }}
|
|
</tr>
|
|
</thead>
|
|
@endif
|
|
<tbody>
|
|
{{ $slot }}
|
|
</tbody>
|
|
@if(isset($foot))
|
|
<tfoot>
|
|
{{ $foot }}
|
|
</tfoot>
|
|
@endif
|
|
</table>
|
|
</div>
|