Nova Badge Field

timothyasp/nova-badge-field image

Nova Badge Field stats

Downloads
338.9K
Stars
58
Open Issues
1
Forks
8

View on GitHub →

A Laravel Nova field.

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

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

License

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

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.


Timothyasp Nova Badge Field Related Articles

Version-Controlled Documentation Inside Your Laravel App with Laradocs image

Version-Controlled Documentation Inside Your Laravel App with Laradocs

Read article
AI-Driven Development Insiders Launch: 500 Seats. 24 Hours. 50% Off image

AI-Driven Development Insiders Launch: 500 Seats. 24 Hours. 50% Off

Read article
Curotec logo

Curotec

World class Laravel experts with GenAI dev skills. LATAM-based, embedded engineers that ship fast, communicate clearly, and elevate your product. No bloat, no BS.

Curotec
Lucky Media logo

Lucky Media

Get Lucky Now - the ideal choice for Laravel Development, with over a decade of experience!

Lucky Media
PhpStorm logo

PhpStorm

The go-to PHP IDE with extensive out-of-the-box support for Laravel and its ecosystem.

PhpStorm
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Kirschbaum logo

Kirschbaum

Providing innovation and stability to ensure your web application succeeds.

Kirschbaum
Securing Laravel logo

Securing Laravel

The essential security resource for Laravel devs, covering everything you need to keep your apps secure. Sign up to receive weekly security tips and monthly in depth articles, diving deep into security concepts you need to know!

Securing Laravel