表单布局

多列布局 (column)

类似于上图的左右两列布局方式，可以参考下面的代码来实现

// 第一列占据1/2的页面宽度
$form->column(6, function (Form $form) {
    $form->text('name')->required();
    $form->date('born')->required();
    $form->select('education')->options([...])->required();
    $form->text('nation')->required();
    $form->text('native')->required();
    $form->text('job')->required();
    $form->text('code')->required();
    $form->text('phone')->required();
    $form->text('work')->required();
    $form->text('census')->required();
});

// 第二列占据1/2的页面宽度
$form->column(6, function (Form $form) {
    $form->image('avatar');
    $form->decimal('wages');
    $form->decimal('fund');
    $form->decimal('pension');
    $form->decimal('fee');
    $form->decimal('business');
    $form->decimal('other');
    $form->text('area')->default(0);
    $form->textarea('illness');
    $form->textarea('comment');
});

// 调整所有表单的宽度
$form->width(9, 2);

以上布局功能使用了bootstrap的栅格布局系统，所有列的宽度总和不得超出12 ，并且也支持在hasMany和array表单中使用

$form->hasMany('jobs', function ($form) {
     $form->column(6, function (Form $form) {
         $form->text('name')->required();
         $form->date('born')->required();
     });
     
     $form->column(6, function (Form $form) {
         $form->image('avatar');
         $form->decimal('wages');
     });
});

多行布局 (row)

使用

$form->row(function (Form\Row $form) {
    $form->width(4)->text('username')->required();
	$form->width(3)->text('title');
	...
});

$form->row(function (Form\Row $form) {
	...
});

...

效果

并且也支持在hasMany和array表单中使用

$form->hasMany('jobs', function ($form) {
     $form->row(function (Form\Row $form) {
     	...
     });
     
     $form->row(function (Form\Row $form) {
     	...
     });
});

选项卡表单 (tab)

如果表单元素太多,会导致表单页面太长, 这种情况下可以使用tab方法来分隔表单:

$form->tab('Basic info', function (Form $form) {
    
    $form->text('username');
    $form->email('email');
    
})->tab('Profile', function (Form $form) {
                       
   $form->image('avatar');
   $form->text('address');
   $form->mobile('phone');
   
})->tab('Jobs', function (Form $form) {
                         
     $form->hasMany('jobs', function ($form) {
         $form->text('company');
         $form->date('start_date');
         $form->date('end_date');
     });

})

同时， tab 布局中也允许嵌套使用column和row布局

$form->tab('Basic info', function (Form $form) {
    $form->column(6, function (Form\BlockForm $form) {
		$form->display('id');
		$form->text('name');
	});

	$form->column(6, function (Form\BlockForm $form) {
		$form->text('username');
	});
})

设置默认显示的 Tab

// 默认显示标题为 标题2 的 Tab
$form->getTab()->active('标题2');
// 也可以指定偏移量
$form->getTab()->activeByIndex(1);

$form->tab('标题1', function ($form) {
    ...
});

$form->tab('标题2', function ($form) {
    ...
});

Fieldset布局

$form->fieldset('分组', function (Form $form) {
    $form->text('company');
    $form->date('start_date');
    $form->date('end_date');
});

如果想要默认收起

$form->fieldset('分组', function (Form $form) {
    ...
})->collapsed();

效果

分块布局 (block)

如果你的表单中字段非常多，那么可以通过以下方式让你的表单分块布局，并且允许嵌套使用column和row布局

$form->block(8, function (Form\BlockForm $form) {
	// 设置标题
    $form->title('基本设置');
    
    // 显示底部提交按钮
    $form->showFooter();
    
    // 设置字段宽度
    $form->width(9, 2);

    $form->column(6, function (Form\BlockForm $form) {
        $form->display('id');
        $form->text('name');
        $form->email('email');
        $form->image('avatar');
        $form->password('password');
    });

    $form->column(6, function (Form\BlockForm $form) {
        $form->text('username');
        $form->email('mobile');
        $form->textarea('description');
    });
});
$form->block(4, function (Form\BlockForm $form) {
    $form->title('分块2');

    $form->text('nickname');
    $form->number('age');
    $form->radio('status')->options(['1' => '默认', 2 => '冻结'])->default(1);

    $form->next(function (Form\BlockForm $form) {
        $form->title('分块3');

        $form->date('birthday');
        $form->date('created_at');
    });
});

效果

Last modified: 30 八月 2024