opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-10-24 23:35:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Support compact aside sections

Browse Source
This commit is contained in:
Dan Harrin
2023-04-30 15:27:07 +01:00
parent 854ffab9c5
commit 05fe03458a
4 changed files with 36 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/forms/resources/views/components/section.blade.php
+1
View File
@@ -7,6 +7,7 @@
:collapsed="$isCollapsed()"
:collapsible="$isCollapsible() && (! $isAside)"
:compact="$isCompact()"
:content-before="$isFormBefore()"
:icon="$getIcon()"
{{
$attributes
packages/infolists/resources/views/components/section.blade.php
+1
View File
@@ -7,6 +7,7 @@
:collapsed="$isCollapsed()"
:collapsible="$isCollapsible() && (! $isAside)"
:compact="$isCompact()"
:content-before="$isContentBefore()"
:icon="$getIcon()"
{{
$attributes
packages/infolists/src/Components/Section.php
+14
View File
@@ -27,6 +27,8 @@ class Section extends Component
protected string | Closure | null $icon = null;
protected bool | Closure $isContentBefore = false;
final public function __construct(string | Htmlable | Closure $heading)
{
$this->heading($heading);
@@ -109,4 +111,16 @@ class Section extends Component
{
return $this->evaluate($this->icon);
}
public function contentBefore(bool | Closure $condition = true): static
{
$this->isContentBefore = $condition;
return $this;
}
public function isContentBefore(): bool
{
return (bool) $this->evaluate($this->isContentBefore);
}
}
packages/support/resources/views/components/section.blade.php
+20 -10
View File
@@ -3,6 +3,7 @@
'collapsed' => false,
'collapsible' => false,
'compact' => false,
'contentBefore' => false,
'description' => null,
'heading',
'icon' => null,
@@ -35,7 +36,10 @@
{{ $attributes->class([
'filament-section-component',
'rounded-xl bg-white ring-1 ring-gray-900/10 dark:bg-gray-800 dark:ring-gray-50/10' => ! $aside,
'grid grid-cols-1 md:grid-cols-2' => $aside,
'grid grid-cols-1' => $aside,
'md:grid-cols-2' => $aside && ! $compact,
'md:grid-cols-3' => $aside && $compact,
'md:order-last' => $contentBefore,
]) }}
>
<div
@@ -43,7 +47,9 @@
'filament-section-header-wrapper flex rtl:space-x-reverse overflow-hidden rounded-t-xl',
'min-h-[40px]' => $compact,
'min-h-[56px]' => ! $compact,
'pe-6 pb-4' => $aside,
'pb-4' => $aside,
'pe-6' => $aside && ! $contentBefore,
'ps-6' => $aside && $contentBefore,
'px-4 py-2 items-center bg-gray-100 dark:bg-gray-900' => ! $aside,
])
@if ($collapsible)
@@ -57,15 +63,15 @@
])>
<h3 @class([
'font-medium leading-6 pointer-events-none flex flex-row items-center',
'text-lg'=> ! $compact,
'text-lg'=> ! $compact || $aside,
])>
@if ($icon)
<x-dynamic-component
:component="$icon"
@class([
'me-1',
'h-4 w-4' => $compact,
'h-6 w-6' => ! $compact,
'h-4 w-4' => $compact && ! $aside,
'h-6 w-6' => ! $compact || $aside,
])
/>
@endif
@@ -76,8 +82,8 @@
@if ($description?->isNotEmpty())
<p @class([
'text-gray-500',
'text-sm' => $compact,
'text-base' => ! $compact,
'text-sm' => $compact && ! $aside,
'text-base' => ! $compact || $aside,
])>
{{ $description }}
</p>
@@ -114,13 +120,17 @@
x-bind:aria-expanded="(! isCollapsed).toString()"
@if ($collapsed) x-cloak @endif
@endif
class="filament-section-content-wrapper"
@class([
'filament-section-content-wrapper',
'col-span-2' => $aside && $compact,
'md:order-first' => $contentBefore,
])
>
<div @class([
'filament-section-content',
'rounded-xl bg-white ring-1 ring-gray-900/10 dark:bg-gray-800 dark:ring-gray-50/10' => $aside,
'p-6' => ! $compact,
'p-4' => $compact,
'p-6' => ! $compact || $aside,
'p-4' => $compact && ! $aside,
])>
{{ $slot }}
</div>