Add class merging for ui components
This commit is contained in:
parent
3ea0682b7c
commit
a573cea7c0
|
@ -19,9 +19,7 @@ class Action extends Component
|
|||
public function render()
|
||||
{
|
||||
return <<<'HTML'
|
||||
<a x-tooltip.raw="{{$slot}}" href="#" {{ $attributes }} class="inline-flex
|
||||
w-6 h-5 flex items-center justify-center rounded {{ $allColors($variant) }}
|
||||
">
|
||||
<a x-tooltip.raw="{{$slot}}" href="#" {{ $attributes->merge(['class' => 'inline-flex w-6 h-5 flex items-center justify-center rounded '.$allColors($variant)]) }}>
|
||||
<x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
|
||||
</a>
|
||||
HTML;
|
||||
|
|
|
@ -19,7 +19,7 @@ class Badge extends Component
|
|||
public function render()
|
||||
{
|
||||
return <<<'HTML'
|
||||
<button type="button" href="#" {{ $attributes }} class="h-6 px-3 space-x-2 items-center rounded-full {{ $allColors($variant) }} hidden lg:flex">
|
||||
<button type="button" href="#" {{ $attributes->merge(['class' => 'h-6 px-3 space-x-2 items-center rounded-full hidden lg:flex '.$allColors($variant)]) }}>
|
||||
<x-ui::sprite class="w-3 h-3 flex-none" :src="$icon"></x-ui::sprite>
|
||||
<span class="text-sm">
|
||||
{{$slot}}
|
||||
|
|
|
@ -24,7 +24,7 @@ class BooleanDisplay extends Component
|
|||
public function render()
|
||||
{
|
||||
return <<<'HTML'
|
||||
<div x-tooltip.raw="{{$hint}}" class="flex space-x-2 items-center group @if($dark) dark @endif">
|
||||
<div x-tooltip.raw="{{$hint}}" {{ $attributes->merge(['class' => 'flex space-x-2 items-center group '.($dark ? 'dark' : '')]) }}">
|
||||
<div class="border-2 rounded-full w-5 h-5 flex items-center justify-center
|
||||
@if ($value) border-green-700 group-[.dark]:border-green-500
|
||||
@else border-red-700 group-[.dark]:border-red-500
|
||||
|
|
|
@ -14,7 +14,7 @@ class Button extends Component
|
|||
public function render()
|
||||
{
|
||||
return <<<'HTML'
|
||||
<button type="{{$type}}" class="px-3 py-2 uppercase no-underline text-sm items-center justify-center bg-primary-700 rounded text-primary-300">
|
||||
<button type="{{$type}}" {{ $attributes->merge(['class' => 'px-3 py-2 uppercase no-underline text-sm items-center justify-center bg-primary-700 rounded text-primary-300']) }}>
|
||||
{{$slot}}
|
||||
</button>
|
||||
HTML;
|
||||
|
|
|
@ -19,7 +19,7 @@ class Menulist extends Component
|
|||
public function render()
|
||||
{
|
||||
return <<<'HTML'
|
||||
<div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
|
||||
<div {{$attributes->merge(['class' => 'p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between']) }}">
|
||||
<div class="grid gap-1">
|
||||
@foreach($entries as $entry)
|
||||
<a href="{{$entry['url']}}" class="rounded py-1 px-3 text-gray-400 duration-200 hover:bg-gray-600 {{$activeClass($entry)}}" @if($entry['is_active']) data-active @endif>
|
||||
|
|
Loading…
Reference in New Issue