Skip to content

Tab 组件

tab 组件布局表单,这个组件很简单,有一些注意点

案例

php
return Form::make(function (Form $form){
        // 使用 tab 组件
        $form->tab('tab', 1)
            // panes 包裹
            ->panes(function (Form $form){
                // tab1
                $form->tabPane('tab1', 1)
                    ->class('gap-y-5 flex flex-col w-full md:w-1/2')
                    ->body(function (Form $form){
                        // 这里输入表单组件
                    });
                // tab2
                $form->tabPane('tab2', 2)
                    ->class('gap-y-5 flex flex-col w-full md:w-1/2')
                    ->body(function (Form $form){
                        // 这里输入表单组件
                    });

                // tab3
                $form->tabPane('tab3', 3)
                    ->class('gap-y-5 flex flex-col w-full md:w-1/2')
                    ->body(function (Form $form){
                        // 这里输入表单组件
                    });
            });
});

如果你需要控制底部的表单的提交按钮样式

vue
<style scoped>
:deep(.fc-form-footer) {
  @apply flex justify-center !important;
}
</style>