Nova Color Field

timothyasp/nova-color-field image

Nova Color Field stats

Downloads
1.1M
Stars
71
Open Issues
3
Forks
18

View on GitHub →

A Laravel Nova Color Picker field.

Laravel Nova Color Field

Now works with Laravel Nova v4!


If you still are using Nova v1-v3, use v1.0.4 of this field.

Dead simple Laravel Nova Color field. Includes a color picker from the vue-color component.

Details Page

Index

Installation

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

composer require timothyasp/nova-color-field

Usage

In your resource class, add the following to your fields method:

use Timothyasp\Color\Color;
 
....
 
Color::make("Field");

This will add the color picker to your resource, using vue-color's "slider" component by default. If you'd like to leverage another vue-color component, you can do so by calling that component's name as a method after Color::make():

use Timothyasp\Color\Color;
 
....
 
Color::make('Field')->compact()
// or
Color::make('Field')->slider()

and so on. You can use any one of: chrome, compact, grayscale, material, photoshop, sketch, slider, swatches, twitter.

Palette support for adding custom colors to some of the pickers is also available:

Color::make('Field')->compact()->palette(['#beaf00', '#DEADAF', '#000']);

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 Color Field Related Articles

Laravel Nova 4 - A teaser image

Laravel Nova 4 - A teaser

Read article
Harpoon: Next generation time tracking and invoicing logo

Harpoon: Next generation time tracking and invoicing

The next generation time-tracking and billing software that helps your agency plan and forecast a profitable future.

Harpoon: Next generation time tracking and invoicing
Lucky Media logo

Lucky Media

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

Lucky Media
Laravel Cloud logo

Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Laravel Cloud
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
The Certification of Competence for Laravel logo

The Certification of Competence for Laravel

A community-driven, proctored assessment across 4 levels designed to validate real-world Laravel knowledge, from Junior to mastery-level Artisan. Official Vue.js, Official Nuxt, Angular, React, JS certifications also available.

The Certification of Competence for Laravel
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