如何自定义Filament PHP中createOptionForm创建的模态表单宽度

问题描述 #

我用以下代码创建了一个模态表单，想把它的宽度调小一点，该怎么操作？

->createOptionForm([
    Forms\Components\TextInput::make('name')
        ->required()
        ->maxLength(255)
        ->unique(modifyRuleUsing: function (Unique $rule) {
            return $rule->where('user_id', auth()->id());
        }),
    Forms\Components\TextInput::make('stock')
        ->required()
        ->integer()
        ->minValue(1)
        ->maxLength(255),
])

解决方案 #

方法1：使用Filament内置的模态宽度配置（推荐）

Filament提供了直接设置模态框宽度的预设方法，你只需在createOptionForm之后链式调用configureCreateOptionAction，通过modalWidth()指定宽度即可。支持的预设值包括：sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、7xl，也可传入自定义CSS类名。

示例代码：

->createOptionForm([
    Forms\Components\TextInput::make('name')
        ->required()
        ->maxLength(255)
        ->unique(modifyRuleUsing: function (Unique $rule) {
            return $rule->where('user_id', auth()->id());
        }),
    Forms\Components\TextInput::make('stock')
        ->required()
        ->integer()
        ->minValue(1)
        ->maxLength(255),
])
->configureCreateOptionAction(function (Action $action) {
    $action->modalWidth('md'); // 替换为你需要的宽度值，比如sm或自定义类名
});

方法2：自定义CSS（更灵活的精确控制）

如果预设宽度无法满足需求，可通过自定义CSS精准调整：

1. 在Filament的自定义CSS文件中添加样式：

.filament-modal.custom-small-modal {
    max-width: 450px; /* 自定义最大宽度 */
    width: 85%; /* 适配移动端屏幕 */
}

2. 在Action配置中绑定这个自定义类：

->configureCreateOptionAction(function (Action $action) {
    $action->modalClass('custom-small-modal');
});

内容的提问来源于stack exchange，提问作者Alphy Gacheru