Hire Laravel developers with AI expertise at $20/hr. Get started in 48 hours.

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

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
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
Celebian logo

Celebian

Celebian is a social media marketing agency specializing in helping their clients go viral on TikTok. Whether you're looking to reach a bigger audience or gain more Tiktok followers, likes, and views, they've got you covered.

Celebian
LoadForge logo

LoadForge

Scalable load testing for web apps & APIs. Simulate real-world traffic and identify breaking points and performance limits with powerful, scalable load tests designed for Laravel.

LoadForge
CodeKudu logo

CodeKudu

Stand-ups, Retrospectives, and 360° Feedback for the entire team. 50% off with code LARAVELNEWS.

CodeKudu
Lucky Media logo

Lucky Media

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

Lucky Media
DreamzTech logo

DreamzTech

Hire 6-10+ Yrs. experienced skilled Laravel Developers from DreamzTech. We ensure NDA protected, 100% quality delivery. Contact Us & Discuss Your Need.

DreamzTech