下拉菜单
<h1>下拉菜单</h1>
<p>通过<code>Dcat\Admin\Widgets\Dropdown</code>这个类可以快速帮大家构建下拉菜单功能。</p>
<h3>基本用法</h3>
<pre><code class="language-php">&lt;?php
use Dcat\Admin\Widgets\Dropdown;
use Dcat\Admin\Layout\Content;
class MyController
{
public function index(Content $content)
{
$options = [
'名称1',
'名称2',
'名称3',
'名称4',
'名称5',
];
$dropdown = Dropdown::make($options)
-&gt;button('分类导航') // 设置按钮
-&gt;buttonClass('btn btn-white waves-effect') // 设置按钮样式
-&gt;map(function ($label, $key) {
// 格式化菜单选项
$url = admin_url('categories/'.$key);
return &quot;&lt;a href='$url'&gt;{$label}&lt;/a&gt;&quot;;
});
return $content-&gt;body($dropdown);
}
}</code></pre>
<p>效果</p>
<p><a href="{{public}}/assets/img/screenshots/dropdown-1.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/dropdown-1.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="70%" >
</a></p>
<h3>点击菜单更换按钮文本</h3>
<p><code>click</code>方法可以让选中的菜单文本显示在按钮中，做到类似下拉选框的效果。</p>
<pre><code class="language-php">$options = [
...
];
$dropdown = Dropdown::make($options)
-&gt;button('选择') // 设置按钮
-&gt;click();</code></pre>
<h3>设置标题</h3>
<pre><code class="language-php">$options1 = [
'名称1',
'名称2',
];
$options2 = [
'测试1',
'测试2',
];
$dropdown = Dropdown::make()
-&gt;button('使用标题')
-&gt;options($options1, '标题1')
-&gt;options($options2, '标题2');</code></pre>
<p>效果</p>
<p><a href="{{public}}/assets/img/screenshots/dropdown-2.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/dropdown-2.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="70%" >
</a></p>
<h3>增加分割线</h3>
<pre><code class="language-php">$options = [
'名称1',
'名称2',
Dropdown::DIVIDER,
'名称3',
'名称4',
];
$dropdown = Dropdown::make()
-&gt;button('使用分割线')
-&gt;options($options)</code></pre>
<p>效果</p>
<p><a href="{{public}}/assets/img/screenshots/dropdown-3.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/dropdown-3.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="70%" >
</a></p>
<h3>自定义按钮</h3>
<pre><code class="language-php"> public function index(Content $content)
{
$options = [
'名称1',
'名称2',
'名称3',
'名称4',
'名称5',
];
$dropdown = Dropdown::make($options)
-&gt;map(function ($label, $key) {
// 格式化菜单选项
$url = admin_url('categories/'.$key);
return &quot;&lt;a href='$url'&gt;{$label}&lt;/a&gt;&quot;;
});
return $content-&gt;body(
&lt;&lt;&lt;HTML
&lt;div class='dropdown'&gt;
&lt;button class='btn btn-primary dropdown-toggle' data-toggle='dropdown'&gt;
&lt;i class='feather icon-email'&gt;&lt;/i&gt; 自定义按钮
&lt;/button&gt;
{$dropdown-&gt;render()}
&lt;/div&gt;
HTML
);
}</code></pre>
<p>效果</p>
<p><a href="{{public}}/assets/img/screenshots/dropdown-4.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/dropdown-4.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="70%" >
</a></p>