I'm working with Flux, but I don't think this is specific to that library.
They provide a component for items in a navlist, and the properties are listed at the top
@props([
'iconVariant' => 'outline',
'iconTrailing' => null,
'badgeColor' => null,
'variant' => null,
'iconDot' => null,
'accent' => true,
'badge' => null,
'icon' => null,
])
Because I need to override the styles, I created by own component that uses theirs
<flux:navlist.item {{ $attributes->merge([
'href' => $href ?? route($route),
'class' => '...',
'iconTrailing' => $attributes['icon-trailing'],
]) }}
>
{{ $slot }}
</flux:navlist.item>
As you can see I have to manually pass down iconTrailing or it won't work. Similarly I cannot use any other properties.
For example, if I want to add a badge, from Flux's documentation I can do this
<flux:navbar.item href="#" badge="Pro" badge-color="lime">Calendar</flux:navbar.item>
But unless I specifically pass down badge and badgeColor in my components, this won't work
<x-navlist.item href="#" badge="Pro" badge-color="lime">Calendar</x-navlist.item>
So, is there a way for me to not having to specifically pass down each property?
not sure, but isnt it caused by the kebab(icon-trailing) to camel (iconTrailing) attribute names conversion? seems like some internal magic. try using it without the merge() (just as an experiment to rule out the case)
<flux:navlist.item
{{ $attributes }}
// href="{{ $href ?? ($route ? route($route) : null) }}"
>
{{ $slot }}
</flux:navlist.item>
I'm sure it's something around the kebab v camel case. As you can see I must manually translate the kebab case icon-trailing to the came case iconTrailing or it will not work.
What I don't understand is that if I use the Flux component directly then I don't use camel case but kebab case, so passing a kebab case attribute from my component to <flux:navlist.item> doesn't work.
I have to merge the attributes because I am setting some classes, and if I don't I would lose them if I pass the class attribute.
I have to merge the attributes because I am setting some classes, and if I don't I would lose them if I pass the class attribute.
i get it, just do it for the sake of test purpose
Please or to participate in this conversation.