README

设计用于多用途使用，也是KanBan板的第二个选项

想看看它是如何工作的吗？让我们通过以下详细信息来了解

安装

您可以通过composer安装此包

composer require rmitesh/card-stack

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="card-stack-config"

您可以使用以下命令发布和运行迁移

php artisan vendor:publish --tag="card-stack-migrations"
php artisan migrate

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

php artisan vendor:publish --tag="card-stack-views"

这是发布配置文件的内容

<?php

return [
	'models' => [
		'card' => Rmitesh\CardStack\Models\Card::class,
	],

	'table_names' => [
		'cards' => 'cards',
	],

	'table_column_names' => [
		/**
		 * "cards" table schema
		 */
		'cards' => [
			'user_id' => 'user_id',

			'name' => 'name',

			'color' => 'color',

			'position' => 'position',
		],

	],

];

用法

注意：请确保您已创建完整资源，而不是--simple资源。

创建自定义资源页面

php artisan make:filament-page ViewPlan --resource=PlanResource

然后，在PlanResource文件中为该页面注册路由，并为重定向创建一个新的Action。

public static function getPages(): array
{
    return [
        'view' => Pages\ViewPlan::route('/{record}/view'),
    ];
}

public static function table(Table $table): Table
{
	return $table
		->actions([
			Tables\Actions\Action::make('View')
			    ->icon('heroicon-o-x-eye')
			    ->color('secondary')
			    ->url(fn (Model $record) => route('filament.resources.plans.view', ['record' => $record])),
		])
}

您可以按照您的规格给出任何路由名称。

您可以使用php artisan route:list找到视图的路由。

在PlanResource/Pages/ViewPlan文件中，使用CardView特质

use Rmitesh\CardStack\Resources\Pages\Concerns\CardView;

class ViewPlan extends Page
{
    use CardView;
}

将位于resources/views/filament/resources/YOUR RESOURCE/pages/的视图文件替换为以下内容

<x-card-stack::card-view :cards="$cards" :record="$record">
</x-card-stack::card-view>

现在，创建一个不带任何资源的自定义小部件PlanListView，并扩展CardViewList

php artisan make:filament-widget PlanListView

<?php

namespace App\Filament\Widgets;

use Rmitesh\CardStack\Pages\Widgets\CardViewList;
use Illuminate\Database\Eloquent\Builder;

class PlanListView extends CardViewList
{
    protected function getTableQuery(): Builder
    {
        // Your eloquest query
    }
}

$tableHeadingId和$tableHeading变量分别存储每个卡片的ID和名称。因此，如果您想根据卡片ID显示项目，则可以在Eloquent条件中使用$tableHeadingId变量。

然后，在您的ViewPlan类中添加getHeaderWidgets()函数。

protected function getHeaderWidgets(): array
{
    return [
        PlanListView::class,
    ];
}

然后我们就可以出发了！... 🚀🚀🚀

扩展和自定义CardViewList页面。

添加表格列

要向卡片中添加列，您可以在自定义小部件类中使用getTableColumns()函数。

protected function getTableColumns(): array
{
    return [
        Tables\Columns\TextColumn::make('name'),
    ];
}

添加表格操作

要向卡片中添加表格操作，您可以在自定义小部件类中使用getTableActions()函数。

protected function getTableActions(): array
{
    return [
    	// 
    ];
}

添加标题操作

要向卡片中添加表格标题操作，您可以在自定义小部件类中使用getTableHeaderActions()函数。

protected function getTableHeaderActions(): array
{
    return [
    	// 
    ];
}

更改空状态文本

要更改空状态表格文本，您可以在自定义小部件类中使用getTableEmptyStateHeading()函数。

protected function getTableEmptyStateHeading(): ?string
{
    // your message
}

更改空状态描述

要更改空状态表格描述，您可以在自定义小部件类中使用getTableEmptyStateDescription()函数。

protected function getTableEmptyStateDescription(): ?string
{
    // your message
}

示例

让我们来看一个典型的示例

• 您正在创建工作月度计划，并希望使用卡片来管理任务列表。

创建了一些卡片

在您的平面视图屏幕上，它将看起来像这样。

测试

composer test

变更日志

请参阅变更日志以了解最近发生了哪些变化。

贡献

请参阅贡献指南以获取详细信息。

安全漏洞

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

鸣谢

• Mitesh Rathod
• 所有贡献者

许可证

MIT许可证（MIT）。请参阅许可证文件获取更多信息。