timothyasp/nova-badge-field

Simple badge field for Laravel Nova

Laravel Nova Badge Field

Works with Nova 4!

---

This is a simple Laravel Nova Badge field. It extends the Select field and allows a simple mapping of colors to values to display a "Badge" on the index and details pages. Can be customized with tailwind classes

Details Page

Index

Installation

You can install the package in to a Laravel app that uses Nova via composer:

composer require timothyasp/nova-badge-field

For Nova v1 - v3 support, use "timothyasp/nova-badge-field": "^1.04" in your composer.json

Usage

In addition to any of the Select field options and presentation methods, here are a few Badge specific customizations this package provides.

To customize the text color of the badge, set the color attribute on the option. If there isn't an option set, it defaults to setting the background color and the text color is set to a contrasting white/black color based on the brightness of the background.

use Timothyasp\Badge\Badge;

$options = [
    'option1' => 'Option 1',
    'option2' => 'Option 2'
];

Badge::make('Field')
   ->options($options)
   ->colors([
      'option1' => '#ffffff',
      'option2' => '#000000'
   ]);

If you prefer to use the label as the display text on the index and detail pages, you can use the ->displayUsingLabels() option.

use Timothyasp\Badge\Badge;

$options = [
  'Option 1' => 1,
  'Option 2' => 2
];

Badge::make('Field')
   ->options($options)
   ->colors([
      'Option 1' => '#ffffff',
      'Option 2' => '#000000'
   ])->displayUsingLabels();

Finally, if you need even more customization on the badge display, use the extraClasses method to pass along any additional Tailwind classes to customize the appearance of the Badge.

This is useful if you'd like to customize the badges to be stacking instead of inline, when using the Stack field.

use Timothyasp\Badge\Badge;

$options = [
    'option1' => 'Option 1',
    'option2' => 'Option 2'
];

Badge::make('Field')
    ->options($options)
    ->extraClasses('mr-2 text-4xl flex');

Credits

• Timothy Asp
• @timcv
• @batFormat
• @ShaneShipston

Built for QuizGriz - the #1 online trivia and quiz game site

License

The MIT License (MIT). Please see License File for more information.

nova-badge-field's Issues

Disable specific options

Hi @timothyasp,

Thank you for this package!

I am using this package to display/update the state of orders by administrators.

Consider the following states for an order:
cart -> pending_payment -> processing -> completed

I want to disable options cart and pending_paymentwhen an order state is `processing.

Is there any way to disable some displayed options?

Field value documentation

Hey Tim,

I can't seem to replace the displayed value, with a label

Here's a snippet:

Badge::make('Tier', 'tier')
->options(['1' => 'T1', '2' => 'T2'])
->colors([
   "1" => [
      "background" => '#333,
      "color" => '#fff',
   ],
   "2" => [
      "background" => '#fff',
      "color" => '#333',
   ]
]),

I, for the life of me, can't seem to get T1/T2 to display over the colors key.

I'll write up a block for your README once we get this cleared up ;)

Badges not Stackable in Nova 3.7+

Thanks so much for this package!

Noticed that it does not work as expected when combined with Nova's new Stack field (https://nova.laravel.com/docs/3.0/resources/fields.html#stack-field).

Instead of stacked, badges are shown side-by-side like as follows.

We are building a custom "ticket" system into an application, and stacked fields allow a greater visual density of information horizontally.

How can i set the font colour?

Laravel Nova 4.16
Laravel 9.36

How do i set the text colour?
Is there an option to set the text colour and not rely on the contrast black/white?
Thanks.

This Badge field doesn't seem to work in Nova 3.0

I've tried implementing this in a project in L7 + Nova 3.0 and it doesn't render any badges no matter how I set it up.

Is it possible it needs an update for nova 3.0?

Change color of Text

Hi,

is it possible to make the text of the badge alway white?

Badge not found

Hello,

I get the following error, when I try to use your Badge.

Badge not found.

Outline style

Would be great if you could add the option to define the border / border-color:

   ->colors([
      'option1' => [
          'background' => '#ffffff',
          'color' => '#ffa500',
          'border-color' => '#ffa500' // default: 1px solid
          'border' => '1px solid #ffa500', // full controll
      ],

or full style control:

   ->colors([
      'option1' => [
          'style' => 'color: #ffa500; border: 1px solid #ffa500'
      ],

or outline option, which uses color and background:

->outline()

e.g. to get an outline style like this

what is the name to use?

in the docs dont specify the name to use on de nova resource.

don't show in index

hi, i have this code

in edit and the view i can see my select

but in index no

Set color and background for all values except defined

Hi!
I'm looking for a next thing.
I set color and background for 2 values, that I know they could be there.
And third value is a datetime, which could have any value, so I cant predict its value and add it to options array.
How to define common color for all these values that were not defined as known options?

Allow using displayUsingLabels

I'm using this component to display a boolean field with green or red, but want to show a custom label (Active / Disabled). This component extends from select, should be easy to use displayUsingLabels feature. Thanks!

Badges Don't Respect Nova's Text Alignment Methods

For smaller badges that may not take up the entire column space, I tried adding Nova's built in methods:

->textAlign('center') and ->withMeta(['textAlign' => 'center'])

However because the badges are using spans, they do not center inside the column correctly.

I imagine there is some custom css needed when text alignment changes are detected

Error installing