scouser03/nova4-multicolumn

Laravel Nova 字段。

1.2 2022-11-18 10:21 UTC

This package is auto-updated.

Last update: 2024-09-18 14:07:50 UTC


README

注意:请,此包是克隆 https://github.com/fourstacks/nova-repeatable-fields,因为此包可能已被弃用,并增加了对 nova 4 的支持

此包包含一个 Laravel Nova 字段,允许创建可重复的 '子' 字段集。Nova 用户可以自由创建、重新排序和删除多行数据,这些数据通过您定义的子字段保存。数据以 JSON 格式保存到数据库中。

安装

您可以通过 composer 将此包安装到使用 Nova 的 Laravel 应用中

composer require scouser03/nova4-multicolumn

使用方法

namespace App\Nova;

use Scouser03\Nova4Multicolumn\Nova4Multicolumn;

// ...

class Post extends Resource
{
    // ...

    public function fields(Request $request)
    {
        return [
            // ...

            Nova4Nova4Multicolumn::make('attributes'),

            // ...
        ];
    }
}

为了使用此包,您还应确保您的 Nova 资源所代表的 Eloquent 模型正在将您希望用作多列字段的属性转换为数组

namespace App;

// ...

class Post extends Model
{
    protected $casts = [
        'attributes' => 'array'
    ]
}

底层数据库字段应该是 stringtext 类型字段。

配置

此包提供了各种选项,您可以使用这些选项定义 MultiColumn 中的子字段

addField

参数:array

您创建的每个 MultiColumn 字段都应该包含至少一个通过 addField 添加的子字段。addField 方法接受一个子字段配置选项数组

Nova4Multicolumn::make('attributes')
    ->addField([
        // configuation options
    ])

配置选项包括

label
[
    'label' => 'field label',
    //...
]

所有子字段至少必须定义一个 'label'。这是一个可读的字符串,将在 Nova UI 中显示。

name
[
    'name' => 'field_name',
    //...
]

默认情况下,子字段的 name(用于将数据保存到数据库中)将自动生成,使用子字段 label 的蛇形版本。或者,您可以选择覆盖此约定并定义一个自定义名称来使用。

type
[
    'type' => 'text',
    //...
]

默认情况下,子字段的输入类型将是一个标准的文本字段。如果您愿意,可以定义不同的字段类型。目前支持的子字段类型有:'text'、'number'、'select'、'textarea'。

placeholder
[
    'placeholder' => 'Placheholder',
    //...
]

默认情况下,输入的 placeholder 将与子字段的 label 相同。但是,您可以使用此选项定义一个自定义占位符,该占位符将显示。

width

[
    'width' => 'w-1/2',
    //...
]

如果您选择以行的方式显示您的子字段(而不是堆叠 - 如下文的 displayStackedForm 选项所示),您可以定义字段的宽度,使用 Tailwind 的分数宽度类。除非您想这样做,否则您不需要为所有字段定义宽度。如果没有为任何子字段输入宽度,则所有子字段将具有相同的宽度。

请注意,您可以混合和匹配宽度。例如,您可能希望将前两个字段的宽度设置为 50%,使用 w-1/2,然后将最后一个字段设置为全宽度,通过 w-full

如果您以堆叠布局显示子字段,则宽度选项将不起作用。

options
[
    'options' => [
        'first' => 'First',
        'second' => 'Second',
    ],
    //...
]

如果您定义的子字段的 type 是 'select',您需要为选择字段定义一个选项数组。这些使用键值对数组定义。

attributes
[
    'attributes' => [
        'min' => 1,
        'max' => '20',
        'style' => 'color: red'
    ],
    //...
]

通过attributes键,您可以自由地定义您希望通过关联数组添加到输入中的任何自定义属性。这些属性将通过v-bind添加。例如,您可能想为数字字段添加最小或最大步长,或者为文本字段添加样式属性。

addButtonText

Nova4Multicolumn::make('attributes')
    ->addButtonText('Add new dog');

您可以为在Nova UI中用于添加新子字段的按钮配置文本。默认情况下,此按钮标签为'添加行',但您可以使用addButtonText选项来覆盖此标签。

summaryLabel

Nova4Multicolumn::make('attributes')
    ->summaryLabel('Dogs');

displayStackedForm

Nova4Multicolumn::make('attributes')
    ->displayStackedForm();

initialRows

Nova4Multicolumn::make('attributes')
    ->initialRows(4);

设置在表单初始化时预添加的行数。对于具有现有行的表单,它将添加到设定的行数。

maximumRows

Nova4Multicolumn::make('attributes')
    ->maximumRows(4);

设置行的最大数量为上限。达到此限制后,您将无法添加新行。

heading

Nova4Multicolumn::make('attributes')
    ->heading('attributes');

变更日志

有关最近更改的更多信息,请参阅变更日志

许可

MIT许可(MIT)。有关更多信息,请参阅许可文件