Filament•17mo ago

collapsible section in a blade file

For the mods here, should I add docs and a feature, where if you want to add collapsible sections in a blade file, you also have the option to choose where you want the icon. so you could say:

<x-filament::section collapsible position="right">
    <x-slot name="heading">
        User details
    </x-slot>
 
    {{-- Content --}}
</x-filament::section>

<x-filament::section collapsible position="right">
    <x-slot name="heading">
        User details
    </x-slot>
 
    {{-- Content --}}
</x-filament::section>

11 Replies

MatthewOP•17mo ago

Not sure if this already exists but I coulndt find anything helpful in the docs

Dennis Koch•17mo ago

How does it look before/after?

MatthewOP•17mo ago

        <x-filament::section collapsible position="left">
            {{$this->selectTab($activeTab)}}
        </x-filament::section>

        <x-filament::section collapsible position="left">
            {{$this->selectTab($activeTab)}}
        </x-filament::section>

        <x-filament::section collapsible>
            {{$this->selectTab($activeTab)}}
        </x-filament::section>

        <x-filament::section collapsible>
            {{$this->selectTab($activeTab)}}
        </x-filament::section>

Dennis Koch•17mo ago

Ah. It's about the action toggle. Was wondering where Section allows for an icon.

MatthewOP•17mo ago

        <x-filament::section collapsible position="right">
            {{$this->selectTab($activeTab)}}
        </x-filament::section>

        <x-filament::section collapsible position="right">
            {{$this->selectTab($activeTab)}}
        </x-filament::section>

MatthewOP•17mo ago

ohh

            {{ $headerEnd }}

            @if ($collapsible)
                <x-filament::icon-button
                    color="gray"
                    icon="heroicon-m-chevron-down"
                    icon-alias="section.collapse-button"
                    x-on:click.stop="isCollapsed = ! isCollapsed"
                    x-bind:class="{ 'rotate-180': ! isCollapsed }"
                    class="{{ $position === 'left' ? '-m-2' : '-m-2 ml-auto' }}"
                />
            @endif

            {{ $headerEnd }}

            @if ($collapsible)
                <x-filament::icon-button
                    color="gray"
                    icon="heroicon-m-chevron-down"
                    icon-alias="section.collapse-button"
                    x-on:click.stop="isCollapsed = ! isCollapsed"
                    x-bind:class="{ 'rotate-180': ! isCollapsed }"
                    class="{{ $position === 'left' ? '-m-2' : '-m-2 ml-auto' }}"
                />
            @endif

Dennis Koch•17mo ago

My take on this: I think we don't need an option for this. Shouldn't be too hard to do via CSS. What do you think @Dan Harrin?

Dan Harrin•17mo ago

yeah honestly there is a reason why it was designed like this in the first place, and adding too many methods to change the design in weird ways just makes it unmaintainable and CSS should work

MatthewOP•17mo ago

But then how can I edit it via CSS? is there a specific css file for every blade file? I dont think so

Dennis Koch•17mo ago

No. Just register a new CSS file or custom theme and put your modifications there

MatthewOP•17mo ago

Ok. Then I will do that. Thanks

Gaming

Programming

collapsible section in a blade file