README

为 Laravel Nova 4 提供颜色/图标编码的状态指示器字段

安装

使用 Composer 将此包安装到使用 Nova 的 Laravel 应用中

composer require malasuerte94/nova-status-indicator

用法

将字段添加到资源中的 fields 方法

use Malasuerte94\Fields\Indicator;

Indicator::make('Status'),

该字段扩展了基础 Laravel\Nova\Fields\Field 字段，因此所有常规方法都可用。

选项

无标签

如果您不需要指定不同的标签，可以直接显示原始字段值

Indicator::make('Status')
    ->withoutLabels()

未知标签

当原始字段值不对应于您定义的标签之一时，指定标签

Indicator::make('Status')
    ->unknown('Unknown')

当然，您可以使用 Laravel 的 trans() 或 __() 函数来翻译未知标签。

如果此设置未设置，则将显示一个破折号。

当使用 withoutLabels() 时，此设置不适用。在这种情况下，未知标签将显示其原始值。

应隐藏

如果字段值等于给定的值或回调，则可以隐藏指示器

Indicator::make('Status')
    ->shouldHide('active')

Indicator::make('Status')
    ->shouldHide(['invited', 'requested'])

Indicator::make('Status')
    ->shouldHide(function($value) {
        return $value == 'inactive';
    })

这很有用，如果您只想在网格中突出显示特定的值并隐藏其他值，例如，您想显示被禁止的用户使用红色指示器和标签，而对于活跃的（未禁止的）用户，您根本不想显示指示器。

如果为否，则隐藏

如果字段值是 PHP 考虑为假值的任何内容，即 false、0、null 或 ''，则可以隐藏指示器

Indicator::make('Status')
    ->shouldHideIfNo()

这是上述 shouldHide() 方法的常见场景的快捷方式。

颜色

命名颜色

添加您期望的状态颜色

Indicator::make('Status')
    ->colors([
        'banned' => 'red',
        'active' => 'green',
        'invited' => 'blue',
        'inactive' => 'grey',
    ])

数组键是原始字段值，数组值是期望的颜色。

如果未指定状态的颜色，则将显示为灰色。

可用颜色是来自 Tailwind 的默认“基本”颜色，并增加了黑色

'black' #22292F
'grey' 或 'gray' #B8C2CC
'red' #E3342F
'orange' #F6993F
'yellow' #FFED4A
'green' #38C172
'teal' #4DC0B5
'blue' #3490DC
'indigo' #6574CD
'purple' #9561E2
'pink' #F66D9B

以及以下 Nova 变量颜色

'success' var(--success)
'warning' var(--warning)
'danger' var(--danger)
'info' var(--info)

颜色类不会与上述列表进行验证，因此如果您输入了无效的颜色，它将回退到灰色。

文字颜色

您还可以使用自己的十六进制、RGB/RGBA 或 HSL/HSLA 文字颜色或变量，如 CSS 中一样使用

Indicator::make('Status')
    ->colors([
        '...' => '#ff0000',
        '...' => 'rgb(0, 255, 0)',
        '...' => 'rgba(0, 0, 0, 0.5)',
        '...' => 'hsl(120, 100%, 50%)',
        '...' => 'hsla(120, 100%, 50%, 0.5)',
        '...' => 'var(--success)',
    ])

文字颜色未经过验证，因此如果您输入了无效的CSS颜色，它将回退为灰色。

额外的颜色类

如果您想将自定义颜色指定为可重用类，可以使用Nova的资产功能提供自己的CSS文件。这些类必须以indicator-为前缀

.indicator-yourcolourname {
    background: #000000;
}

您将在字段定义中使用它，但不使用'indicator-'前缀，如下所示

Indicator::make('Status')
    ->colors([
        'yourstatus' => 'yourcolourname',
    ])

图标

命名图标

添加您想要的图标（图标功能上仅与标签一起使用）

Indicator::make('Status')
        ->labels([
            'true' => 'Expired',
            'false' => 'Active',
            'error' => 'Not Set',
        ])->colors([
            'true' => 'red',
            'false' => 'green',
            'error' => 'blue',
        ])->icons([
            'true' => 'loading',
            'false' => 'success',
            'error' => 'loading',
        ]),

如果没有指定状态图标，我们只会显示标签。

可用的图标有

'error'
'cancel'
'loading'
'minus'
'success'

外观

索引

详情

表单

（与详情相同）

默认情况下，指示器不会在表单上显示。如果您选择使用showOnUpdate()将其显示为表单字段，则指示器不可编辑，且不会写回服务器，因为它打算从只读或派生模型属性中获取。

如果您确实需要一个可编辑的状态字段，您可能需要向资源中添加自己的额外Laravel\Nova\Fields\Select字段，并引用相同的属性名，同时设置onlyOnForms()。

malasuerte94 / nova-status-indicator

维护者

详细信息