How to add extraAttributes (class) to Section container?
My form schema looks like this:
The output on the frontend is below (excerpt from the section). Now I want to add an extra CSS class to the column that contains the last section. Is that possible, and if so - how?
public static function form( Form $form ): Form {
return $form
->schema( [
Forms\Components\Group::make()->schema( [
Forms\Components\Section::make()
->schema( static::getDetailsFormSchema() )
->columns( 2 ),
Forms\Components\Section::make()
->schema( [ static::getItemsRepeater() ] )
->columns( 1 ),
Forms\Components\Section::make()
->schema( static::getQuoteGrandTotalsSchema() )
->columns( 1 ),
] )
] )
->columns( null );
}public static function form( Form $form ): Form {
return $form
->schema( [
Forms\Components\Group::make()->schema( [
Forms\Components\Section::make()
->schema( static::getDetailsFormSchema() )
->columns( 2 ),
Forms\Components\Section::make()
->schema( [ static::getItemsRepeater() ] )
->columns( 1 ),
Forms\Components\Section::make()
->schema( static::getQuoteGrandTotalsSchema() )
->columns( 1 ),
] )
] )
->columns( null );
}The output on the frontend is below (excerpt from the section). Now I want to add an extra CSS class to the column that contains the last section. Is that possible, and if so - how?
[For every Section the same div appears like this. I want to add the css class on the last section container as it were]
<div style="--col-span-default: 1 / -1;" class="col-[--col-span-default]"> <-- WANT TO ADD EXTRA CLASS HERE
<!--[if BLOCK]><![endif]-->
<section x-data="{
isCollapsed: false ,
}" class="fi-section rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
<!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->
<div class="fi-section-content-ctn">
<div class="fi-section-content p-6">
[my GrandTotalsComponent here]
</div>
</div>
</section>
<!--[if ENDBLOCK]><![endif]-->
</div>[For every Section the same div appears like this. I want to add the css class on the last section container as it were]
<div style="--col-span-default: 1 / -1;" class="col-[--col-span-default]"> <-- WANT TO ADD EXTRA CLASS HERE
<!--[if BLOCK]><![endif]-->
<section x-data="{
isCollapsed: false ,
}" class="fi-section rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
<!--[if BLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->
<div class="fi-section-content-ctn">
<div class="fi-section-content p-6">
[my GrandTotalsComponent here]
</div>
</div>
</section>
<!--[if ENDBLOCK]><![endif]-->
</div>
