crusherrl/nova-info-card

一个 Laravel Nova 信息卡。

1.1.1 2023-11-20 12:52 UTC

This package is auto-updated.

Last update: 2024-09-20 14:55:47 UTC


README

本项目是一个与 Nova 4 兼容的分支。此外,此包提供了一种简单的方法,可以将通知卡添加到 Laravel Nova 资源中。

安装

composer require crusherrl/nova-info-card

用法

use CrusherRL\NovaCards\Info;

//...

public function cards()
{
    return [
        (new Info())
            ->info('Some info message')
    ];
}

主题

此包包含 4 种预定义样式 - infosuccesswarningdanger。要选择主题,只需将其用作方法名。

如果您需要动态生成卡片主题,可以使用接受两个参数 - $message$levelmessage() 方法。

->info($message)
->success($message)
->warning($message)
->danger($message)
->message($message, $level) // accepted values for $level: 'info', 'success' , 'warning', 'danger'

Example

定义标题

您还可以使用 heading() 方法为消息定义标题

(new Info())
    ->heading('Info heading')
    ->info('Some info message')

Heading screenshot

渲染 HTML

如果您想将消息以原始 HTML 的方式渲染,就像 Nova 允许您在资源字段中那样,只需链式调用 asHtml() 方法

(new Info())
    ->info('Be sure to checkout the original Project 
    <a href="https://github.com/pdmfc/nova-info-card/" class="underline font-bold text-blue-800">pdmfc/nova-info-card</a>!')
    ->asHtml(),

Rendering raw Html

使用颜色自定义

目前,最新功能是着色卡片 HTML 的特定部分或所有部分。

着色整个组件的示例

(new Info())
    ->info('Be sure to checkout the original Project <a href="https://github.com/pdmfc/nova-info-card/" class="underline font-bold text-blue-800">pdmfc/nova-info-card</a>!')
    ->setColors([
        'border' => 'rgb(48 107 203)',
        'background' => 'hsl(217.09deg 88.71% 75.69%)',
        'text' => '#4f4f4f',
        'icon' => 'black'
    ])
    ->asHtml(),

Rendering Colorized raw Html

您还可以仅设置特定部分,例如仅图标或仅边框。

(new Info())
    ->info('Be sure to checkout the original Project<a href="https://github.com/pdmfc/nova-info-card/" class="underline font-bold text-blue-800">pdmfc/nova-info-card</a>!')
    ->setBorderColor('rgb(48 107 203)')
    ->setBackgroundColor('blue-200')
    ->setTextColor('#4f4f4f')
    ->setIconColor('black')
    ->asHtml(),

如您所见,有一个名为 'blue-200' 的颜色。这是因为它是一个预定义的颜色,您可以在以下位置看到它

{
  "blue-200": "rgb(191 219 254)",
  "green-200": "rgb(187 247 208)",
  "yellow-200": "rgb(254 240 138)",
  "red-200": "rgb(254 202 202)",
  "blue-600": "rgb(37 99 235)",
  "green-600": "rgb(22 163 74)",
  "yellow-600": "rgb(202 138 4)",
  "red-600": "rgb(220 38 38)"
}

如何贡献

  • 克隆仓库
  • 在 Laravel Nova 应用的 composer.json 中添加以下内容
{
    //...

    "require" {
        "crusherrl/nova-info-card: "*"
    },

    //...
    "repositories": [
        {
            "type": "path",
            "url": "../path_to_your_package_folder"
        }
    ],
}
  • 运行 composer update crusherrl/nova-info-card

您现在可以开始贡献了!