戏里戏外

Filament 悬停时显示提示操作

2024-11-19#Laravel#Filament

在 Filament 表单开发中,有时我们希望某些动作按钮只在用户将鼠标悬停在特定组件上时才显示,这样可以让界面保持整洁。

这个效果可以通过 Tailwind 的 group 功能结合 Filament 的 extraAttributes 来实现。

以下是具体的实现代码:

use Filament\Forms\Components\Grid;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Actions\Action;

Grid::make()
    ->extraAttributes([
        'class' => 'group', // 为整个网格添加 group 类
    ])
    ->schema([
        TextInput::make('name')
            ->hintAction(
                Action::make('copy')
                    ->extraAttributes([
                        'class' => 'hidden group-hover:block', // 默认隐藏,悬停时显示
                    ]),
            ),
    ]),

代码说明:

  1. 首先,我们在 Grid 组件上添加 group 类,这是使用 Tailwind 的 group 功能的前提
  2. 在提示动作中,使用了以下 Tailwind 类:
    • hidden: 默认隐藏该动作
    • group-hover:block: 当父元素被悬停时显示该动作