abordage/nova-html-card

A Laravel Nova card that displays any html content, e.g. lists, notifications, small custom reports

0.3.1 2024-03-23 18:22 UTC

README

A Laravel Nova card that displays any html content, e.g. lists, notifications, small custom reports.

Laravel Nova HTML Card

Packagist Version GitHub Code Style Status Laravel Nova Version PHP Version Support License

Requirements

  • PHP 7.4 - 8.3
  • Laravel 8.x - 11.x
  • Nova 4

Installation

You can install the package via composer:

composer require abordage/nova-html-card

Usage

To create a cards use the artisan command:

php artisan nova-html-card MyHtmlCard

By default, all new cards will be placed in the app/Nova/Cards directory. Once your html card class has been generated, you're ready to customize it:

<?php

namespace App\Nova\Cards;

use Abordage\HtmlCard\HtmlCard;

class MyHtmlCard extends HtmlCard
{
    /**
     * Name of the card (optional)
     */
    public string $title = '';

    /**
     * The width of the card (1/2, 1/3, 1/4 or full).
     */
    public $width = '1/3';

    /**
     * The height strategy of the card (fixed or dynamic).
     */
    public $height = 'fixed';

    /**
     * Align content to the center of the card.
     */
    public bool $center = true;

    /**
     * Html content
     */
    public function content(): string
     {
        return '<h1 class="text-4xl">Some content</h1>';
     }
}

If set $height = 'fixed' content will scroll:

Laravel Nova HTML Card

If set $height = 'dynamic' content is shown in full:

Laravel Nova HTML Card

Once you have defined a card, you are ready to attach it to a dashboard or resource. You should simply add it to the array of metrics / cards.

Feedback

If you have any feedback, comments or suggestions, please feel free to open an issue within this repository.

Credits

License

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