In this snippet, you will learn how to add a color picker/swatch field to Laravel Nova resource. To accomplish this, we'll be using a package called nova-swatches by ynacorp so let's get started and build something cool with it 🚀 Laravel Nova Color Swatch Field
Step 1: Install Laravel Nova Swatches
Firstly you will have to install nova-swatches using the composer package manager and publish the configuration file.
composer require ynacorp/nova-swatches
The configuration file can be published by running the command below.
For this example imagine you have a Nova resource called "Post" and for each of the posts you have a unique column called "color" that will store the HEX color code. Below is the database column definition.
id
title
body
color
created_at
updated_at
From the Nova post resource now you can call the "Swatches" field available from the package.
<?php // app/Nova/Post.php
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Trix;
use Yna\NovaSwatches\Swatches;
public function fields(Request $request)
{
return [
ID::make(__('ID'), 'id')->sortable(),
Text::make('Title')->rules('required'),
Trix::make('Body'),
Swatches::make('Color', 'color'),
];
}
If you have not created the Nova Resource, you can run the following command to generate it.
By default the swatch field has a basic configuration which only shows the color swatch, this can be updated to add other options from the config file located in "config/nova/swatches.php".
<?php // config/nova/swatches.php
return [
/**
* Props to pass to the vue-swatches component.
*
* See https://saintplay.github.io/vue-swatches/#sub-props
*/
'props' => [
'colors' => 'material-basic',
'show-fallback' => true,
'fallback-type' => 'input',
]
];
For this tutorial, we'll be using the one defined above but if you would like to define the other options you can visit the Vue Swatches documentation since under the hood it's using that library.
Step 4: Create Multiple Post With Different Color Accent and Render to Blade
Once you have created multiple posts with different color accents, now you can render the post from the Laravel blade and customize the post styling. For the code below, we'll be using PostSrc Basic Card Component.
The preview of the card component is like below. Make sure to have Tailwind CSS installed or use the provided CDN to have the styling applied. Tailwind CSS Basic Card Component Now that you have copy the code you can create a new blade partially or just loop your $posts and apply the "color" swatch to make each post unique. For this example let's make each post have a different border color.
border: 2px solid {{ $post->color }}
The full blade code will be below. Do note that you can apply this to any of your resources and you can make use of this color to customize your different types of styling such as "card title", "card body", "card background-color" and etc.
By now you should be able to add a Color picker/swatch to Laravel Nova and if you find this tutorial to be helpful, do make sure to share it with your friends, and cheers happy coding. 🍻
Leave a reply