README

表格布局中的 Filament 组件 Repeater

这是一个 Filament 表单组件的包。从 Repeater 扩展，但以表格布局显示。

安装

您可以通过 composer 安装此包

composer require icetalker/filament-table-repeater

您可以使用以下命令发布视图

php artisan vendor:publish --tag="filament-table-repeater"

使用方法

use Icetalker\FilamentTableRepeater\Forms\Components\TableRepeater;

protected function form(Form $form): Form
{
    return $form->schema([
        ...
        TableRepeater::make('items')
                ->relationship('items')
                ->schema([
                    Forms\Components\TextInput::make('product'),
                    ...
                ])
                ->reorderable()
                ->cloneable()
                ->collapsible()
                ->minItems(3)
                ->maxItems(5)
                ->columnSpan('full'),

    ]);
}

由于该组件扩展自 Filament\Forms\Components\Repeater，您可以使用其大部分方法，但有些方法如 inset()、grid()、columns() 不适用。

其他方法

colStyles

为了为每个单元格自定义样式，您可以将组件名称数组作为键和 CSS 样式作为值传递给 colStyles()。以下是一个示例

use Icetalker\FilamentTableRepeater\Forms\Components\TableRepeater;

protected function form(Form $form): Form
{
    return $form->schema([
        ...
        Forms\Components\Grid::make(1)->schema([

            TableRepeater::make('items')
                ->relationship('items')
                ->schema([
                    Forms\Components\TextInput::make('product'),
                    Forms\Components\TextInput::make('quantity'),
                    ...
                ])
                ->colStyles([
                    'product' => 'color: #0000ff; width: 250px;',
                ]),

        ]),

    ]);
}

此外，您还可以将回调函数传递给 colStyles()。这可能会解锁更多自定义可能性。以下是一个示例

use Icetalker\FilamentTableRepeater\Forms\Components\TableRepeater;

protected function form(Form $form): Form
{
    return $form
        ->schema([
            ...
            Forms\Components\Grid::make(1)->schema([

                TableRepeater::make('items')
                    ->relationship('items')
                    ->schema([
                        Forms\Components\TextInput::make('product'),
                        Forms\Components\TextInput::make('quantity'),
                        ...
                    ])
                    ->colStyles(function(){
                        return [
                            'product' => 'color: #0000ff; width: 250px;',
                        ]
                    }),

            ]),

        ]);
}

样式定制

除了上述提到的 colStyles() 方法外，我们还使用了一些 CSS 类来提供额外的样式定制能力。这些类被称为 CSS "钩子" 类。它们以 it-（代表 icetalker，即供应商名称）为前缀。尽管我们已经在旧版本中有了钩子类，但此处并未进行文档说明。现在，我们将这些钩子名称重命名为新的前缀 it-

it-table-repeater 替代旧版本中的 filament-table-repeater：从类名可以看出，它允许您自定义整个表格的样式。
it-table-repeater-cell-label 替代旧版本中的 filament-table-repeater-header-cell：从类名可以看出，它允许您自定义每个列的标签样式。
it-table-repeater-cell 替代旧版本中的 filament-table-repeater-tbody-cell：从类名可以看出，它允许您自定义每个列的单元格样式。
it-table-repeater-row。这是一个新的钩子类，因此您可以为每一行自定义样式。

您可以在 app.css 文件中添加这些类的 CSS，并填充自己的样式，如下所示

.it-table-repeater-cell-label {
    background-color: #fafafa;
}

测试

composer test

变更日志

请参阅 CHANGELOG 以获取有关最近更改的更多信息。

贡献

请参阅 CONTRIBUTING 以获取详细信息。

安全漏洞

请审查我们的安全策略了解如何报告安全漏洞。

致谢

许可

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

icetalker / filament-table-repeater

维护者

详细信息