表单布局
<h1>表单布局</h1>
<h3>多列布局 (column)</h3>
<p><a href="{{public}}/assets/img/screenshots/form-column.png" target="_blank">
<img class="img" src="{{public}}/assets/img/screenshots/form-column.png" />
</a> </p>
<p>类似于上图的左右两列布局方式，可以参考下面的代码来实现</p>
<pre><code class="language-php">// 第一列占据1/2的页面宽度
$form-&gt;column(6, function (Form $form) {
$form-&gt;text('name')-&gt;required();
$form-&gt;date('born')-&gt;required();
$form-&gt;select('education')-&gt;options([...])-&gt;required();
$form-&gt;text('nation')-&gt;required();
$form-&gt;text('native')-&gt;required();
$form-&gt;text('job')-&gt;required();
$form-&gt;text('code')-&gt;required();
$form-&gt;text('phone')-&gt;required();
$form-&gt;text('work')-&gt;required();
$form-&gt;text('census')-&gt;required();
});
// 第二列占据1/2的页面宽度
$form-&gt;column(6, function (Form $form) {
$form-&gt;image('avatar');
$form-&gt;decimal('wages');
$form-&gt;decimal('fund');
$form-&gt;decimal('pension');
$form-&gt;decimal('fee');
$form-&gt;decimal('business');
$form-&gt;decimal('other');
$form-&gt;text('area')-&gt;default(0);
$form-&gt;textarea('illness');
$form-&gt;textarea('comment');
});
// 调整所有表单的宽度
$form-&gt;width(9, 2);</code></pre>
<p>以上布局功能使用了<code>bootstrap</code>的栅格布局系统，所有列的宽度总和不得超出<code>12</code>，并且也支持在<code>hasMany</code>和<code>array</code>表单中使用</p>
<pre><code class="language-php">$form-&gt;hasMany('jobs', function ($form) {
$form-&gt;column(6, function (Form $form) {
$form-&gt;text('name')-&gt;required();
$form-&gt;date('born')-&gt;required();
});
$form-&gt;column(6, function (Form $form) {
$form-&gt;image('avatar');
$form-&gt;decimal('wages');
});
});</code></pre>
<h3>多行布局 (row)</h3>
<p>使用</p>
<pre><code class="language-php">$form-&gt;row(function (Form\Row $form) {
$form-&gt;width(4)-&gt;text('username')-&gt;required();
$form-&gt;width(3)-&gt;text('title');
...
});
$form-&gt;row(function (Form\Row $form) {
...
});
...</code></pre>
<p>效果
<a href="{{public}}/assets/img/screenshots/form-rows.png" target="_blank">
<img class="img img-full" src="{{public}}/assets/img/screenshots/form-rows.png">
</a></p>
<p>并且也支持在<code>hasMany</code>和<code>array</code>表单中使用</p>
<pre><code class="language-php">$form-&gt;hasMany('jobs', function ($form) {
$form-&gt;row(function (Form\Row $form) {
...
});
$form-&gt;row(function (Form\Row $form) {
...
});
});</code></pre>
<p><a name="tab"></a></p>
<h3>选项卡表单 (tab)</h3>
<p>如果表单元素太多,会导致表单页面太长, 这种情况下可以使用<code>tab</code>方法来分隔表单:</p>
<pre><code class="language-php">$form-&gt;tab('Basic info', function (Form $form) {
$form-&gt;text('username');
$form-&gt;email('email');
})-&gt;tab('Profile', function (Form $form) {
$form-&gt;image('avatar');
$form-&gt;text('address');
$form-&gt;mobile('phone');
})-&gt;tab('Jobs', function (Form $form) {
$form-&gt;hasMany('jobs', function ($form) {
$form-&gt;text('company');
$form-&gt;date('start_date');
$form-&gt;date('end_date');
});
})</code></pre>
<p>eg：
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=69020578ae586ea361fa310a55f45510&amp;file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=48d4091c3974ebedc6d06d699687a092&amp;file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=7e874df105ca2be575ee317a7d4df5af&amp;file=file.png" alt="" />
同时，<code>tab</code> 布局中也允许嵌套使用<code>column</code>和<code>row</code>布局</p>
<pre><code class="language-php">$form-&gt;tab('Basic info', function (Form $form) {
$form-&gt;column(6, function (Form\BlockForm $form) {
$form-&gt;display('id');
$form-&gt;text('name');
});
$form-&gt;column(6, function (Form\BlockForm $form) {
$form-&gt;text('username');
});
})</code></pre>
<p>设置默认显示的 <code>Tab</code></p>
<pre><code class="language-php">// 默认显示标题为 标题2 的 Tab
$form-&gt;getTab()-&gt;active('标题2');
// 也可以指定偏移量
$form-&gt;getTab()-&gt;activeByIndex(1);
$form-&gt;tab('标题1', function ($form) {
...
});
$form-&gt;tab('标题2', function ($form) {
...
});</code></pre>
<h4>Fieldset布局</h4>
<pre><code class="language-php">$form-&gt;fieldset('分组', function (Form $form) {
$form-&gt;text('company');
$form-&gt;date('start_date');
$form-&gt;date('end_date');
});</code></pre>
<p>如果想要默认收起</p>
<pre><code class="language-php">$form-&gt;fieldset('分组', function (Form $form) {
...
})-&gt;collapsed();</code></pre>
<p>效果</p>
<p><img src="https://cdn.learnku.com/uploads/images/202005/12/38389/B0tXWUxHDp.png!large" alt="" /></p>
<h3>分块布局 (block)</h3>
<p>如果你的表单中字段非常多，那么可以通过以下方式让你的表单分块布局，并且允许嵌套使用<code>column</code>和<code>row</code>布局</p>
<pre><code class="language-php">$form-&gt;block(8, function (Form\BlockForm $form) {
// 设置标题
$form-&gt;title('基本设置');
// 显示底部提交按钮
$form-&gt;showFooter();
// 设置字段宽度
$form-&gt;width(9, 2);
$form-&gt;column(6, function (Form\BlockForm $form) {
$form-&gt;display('id');
$form-&gt;text('name');
$form-&gt;email('email');
$form-&gt;image('avatar');
$form-&gt;password('password');
});
$form-&gt;column(6, function (Form\BlockForm $form) {
$form-&gt;text('username');
$form-&gt;email('mobile');
$form-&gt;textarea('description');
});
});
$form-&gt;block(4, function (Form\BlockForm $form) {
$form-&gt;title('分块2');
$form-&gt;text('nickname');
$form-&gt;number('age');
$form-&gt;radio('status')-&gt;options(['1' =&gt; '默认', 2 =&gt; '冻结'])-&gt;default(1);
$form-&gt;next(function (Form\BlockForm $form) {
$form-&gt;title('分块3');
$form-&gt;date('birthday');
$form-&gt;date('created_at');
});
});</code></pre>
<p>效果
<a href="<a href="https://cdn.learnku.com/uploads/images/202010/19/38389/AMCtHBcmSQ.jpg!large"">https://cdn.learnku.com/uploads/images/202010/19/38389/AMCtHBcmSQ.jpg!large"</a>; target="_blank">
<img class="img img-full" src="<a href="https://cdn.learnku.com/uploads/images/202010/19/38389/AMCtHBcmSQ.jpg!large">">https://cdn.learnku.com/uploads/images/202010/19/38389/AMCtHBcmSQ.jpg!large"></a>;
</a></p>