Filament•12mo ago

Placeholder badge color not working

I have made a badge which color is based on the condition. My problem is the class color is not reflected EXCEPT for gray color. Yellow and green does not reflect. Although I checked it in browser dev view the class (e.g bg-yellow-100) is there but the actual style is not applied.

Placeholder::make('Status')->content(function ($record){
                            $color = match ($record->status) {
                                'pending' => 'gray',
                                'delivered' => 'yellow',
                                'completed' => 'green',
                            };

                            $string = '<span class="inline-flex items-center gap-x-1.5 rounded-md bg-'.$color.'-100 px-2 py-1 text-xs font-medium text-'.$color.'-600">
                            <svg class="h-1.5 w-1.5 fill-'.$color.'-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3" />
                            </svg>'.$record->status.'</span>';
                            
                            return new HtmlString($string);
                        })

Placeholder::make('Status')->content(function ($record){
                            $color = match ($record->status) {
                                'pending' => 'gray',
                                'delivered' => 'yellow',
                                'completed' => 'green',
                            };

                            $string = '<span class="inline-flex items-center gap-x-1.5 rounded-md bg-'.$color.'-100 px-2 py-1 text-xs font-medium text-'.$color.'-600">
                            <svg class="h-1.5 w-1.5 fill-'.$color.'-400" viewBox="0 0 6 6" aria-hidden="true"><circle cx="3" cy="3" r="3" />
                            </svg>'.$record->status.'</span>';
                            
                            return new HtmlString($string);
                        })

Solution:

You can try something like this if you want. ```php Placeholder::make('Status')->content(function ($record) { $color = match ($record->status) {...

Jump to solution

4 Replies

neverender24OP•12mo ago

/* pending / .bg-yellow-c-100 { background-color: rgb(254 249 195) !important; } .fill-yellow-c-400 { background-color: rgb(250 204 21) !important; } .text-yellow-c-600 { background-color: rgb(202 138 4) !important; } / completed / .bg-green-c-100 { background-color: rgb(220 252 231) !important; } .fill-green-c-400 { background-color: rgb(74 222 128) !important; } .text-green-c-600 { background-color: rgb(22 163 74) !important; } / pending */ .bg-gray-c-100 { background-color: rgb(243 244 246) !important; } .fill-gray-c-400 { background-color: rgb(156 163 175) !important; } .text-gray-c-600 { background-color: rgb(75 85 99) !important; } To make it work I just make some custom in theme

Solution

Andrew Wallo•12mo ago

You can try something like this if you want.

Placeholder::make('Status')->content(function ($record) {
    $color = match ($record->status) {
        'pending' => Color::Gray,
        'delivered' => Color::Yellow,
        'completed' => Color::Green,
    };

    $string = "<span class='inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium' style='background:rgb(" . $color[100] . "); color:rgb(" . $color[600] . ")'>"
              . "<svg class='h-1.5 w-1.5' viewBox=\"0 0 6 6\" aria-hidden=\"true\" style='fill:rgb(" . $color[400] . ")'>"
              . "<circle cx=\"3\" cy=\"3\" r=\"3\" /></svg>"
              . htmlspecialchars($record->status) . "</span>";

    return new HtmlString($string);
});

Placeholder::make('Status')->content(function ($record) {
    $color = match ($record->status) {
        'pending' => Color::Gray,
        'delivered' => Color::Yellow,
        'completed' => Color::Green,
    };

    $string = "<span class='inline-flex items-center gap-x-1.5 rounded-md px-2 py-1 text-xs font-medium' style='background:rgb(" . $color[100] . "); color:rgb(" . $color[600] . ")'>"
              . "<svg class='h-1.5 w-1.5' viewBox=\"0 0 6 6\" aria-hidden=\"true\" style='fill:rgb(" . $color[400] . ")'>"
              . "<circle cx=\"3\" cy=\"3\" r=\"3\" /></svg>"
              . htmlspecialchars($record->status) . "</span>";

    return new HtmlString($string);
});

neverender24OP•12mo ago

Hi thanks, I will have to go with your solution as I don't want to have more custom css.

Andrew Wallo•12mo ago

Your welcome

Gaming

Programming

Placeholder badge color not working