Filament•12mo 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

Matthew•12mo ago

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

Dennis Koch•12mo ago

How does it look before/after?

Matthew•12mo 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•12mo ago

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

Matthew•12mo 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>

Matthew•12mo 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•12mo 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•12mo 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

Matthew•12mo 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•12mo ago

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

Matthew•12mo ago

Ok. Then I will do that. Thanks

Gaming

Programming

collapsible section in a blade file