dcat-admin

dcat-admin


表单布局

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

页面列表

ITEM_HTML