T-DOC
  • Laravel-11
  • Laravel-10
  • Laravel-6X
  • Laravel-5.5
Dcat-Admin
  • Yii2
  • 重构2
  • Laravel-11
  • Laravel-10
  • Laravel-6X
  • Laravel-5.5
Dcat-Admin
  • Yii2
  • 重构2
  • 入门

    • 简介
    • 安装
    • 1.x升级指南
    • 版本升级
    • 快速开始
    • 开发前必读
    • 主题与颜色
    • 静态资源
    • 视图与自定义页面
    • 多应用 (多后台)
    • JS组件
    • 常见问题
    • Laravel Octane
  • 数据表格

    • 基本使用
    • 列的使用和扩展
    • 列的显示和扩展
    • 行的使用和扩展
    • 工具栏
    • 树状表格
    • 组合表头
    • 数据来源以及查询条件
    • 关联关系
    • 查询过滤
    • 列过滤器
    • 快捷搜索
    • 规格筛选器
    • 数据导出
    • 快捷创建
    • 行内编辑
    • 事件
    • 字段翻译
    • 数据软删除
    • 头部和脚部
    • 异步渲染
  • 数据表单

    • 基本使用
    • 图片/文件上传
    • 字段的使用
    • 字段扩展
    • 数据源
    • 表单弹窗
    • 关联关系
    • JSON表单
    • 分步表单
    • 表单验证
    • 工具表单
    • 事件以及表单响应
    • 初始化
    • 表单布局
    • 字段翻译
    • 字段动态显示
  • 数据详情

    • 基本使用
    • 字段显示
    • 关联关系
    • 字段显示扩展
    • 初始化
    • 字段翻译
  • 模型树

    • 基本使用
  • 数据仓库

    • 基本使用
  • 动作

    • 基本使用
    • 数据表格
    • 数据表单
    • 数据详情
    • 模型树
  • 多语言

    • 基本使用
  • 开发扩展

    • 扩展基本使用
    • 开发扩展
  • 页面组件

    • 异步加载
    • 图表
    • 数据统计卡片
    • 模态窗 (Modal)
    • 工具表单
    • 下拉菜单
    • 单/复选框
    • 选项卡
    • 警告框
    • 提示窗
    • Markdown
    • 卡片
  • 区块 (section)

    • 区块基本使用
  • 动作以及表单响应

    • 动作以及表单响应
  • 权限控制

    • 权限控制
  • 菜单

    • 菜单基本使用
  • 帮助函数

    • 帮助函数
  • 开发工具

    • 基本使用
  • 自定义登陆认证

    • 自定义登录
  • 自定义头部导航

    • 自定义头部导航条
  • 更新日志

    • BETA版本更新日志
    • 更新日志

下拉菜单

Dcat Admin 中文文档 /

下拉菜单

通过Dcat\Admin\Widgets\Dropdown这个类可以快速帮大家构建下拉菜单功能。

基本用法

<?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)
            ->button('分类导航') // 设置按钮
            ->buttonClass('btn btn-white  waves-effect') // 设置按钮样式
            ->map(function ($label, $key) {
                // 格式化菜单选项
                $url = admin_url('categories/'.$key);

                return "<a href='$url'>{$label}</a>";
            });

        return $content->body($dropdown);
    }
}

效果

点击菜单更换按钮文本

click方法可以让选中的菜单文本显示在按钮中,做到类似下拉选框的效果。

$options = [
    ...
];

$dropdown = Dropdown::make($options)
    ->button('选择') // 设置按钮
    ->click();

设置标题

$options1 = [
    '名称1',
    '名称2',
];

$options2 = [
    '测试1',
    '测试2',
];

$dropdown = Dropdown::make()
    ->button('使用标题')
    ->options($options1, '标题1')
    ->options($options2, '标题2');

效果

增加分割线

$options = [
    '名称1',
    '名称2',
    Dropdown::DIVIDER,
    '名称3',
    '名称4',
];

$dropdown = Dropdown::make()
    ->button('使用分割线')
    ->options($options)

效果

自定义按钮

    public function index(Content $content)
    {
        $options = [
            '名称1',
            '名称2',
            '名称3',
            '名称4',
            '名称5',
        ];

        $dropdown = Dropdown::make($options)
            ->map(function ($label, $key) {
                // 格式化菜单选项
                $url = admin_url('categories/'.$key);

                return "<a href='$url'>{$label}</a>";
            });

        return $content->body(
            <<<HTML
<div class='dropdown'>
     <button class='btn btn-primary dropdown-toggle' data-toggle='dropdown'>
        <i class='feather icon-email'></i> 自定义按钮 
     </button>
     {$dropdown->render()}
</div>            
HTML            
        );
    }

效果

Last Updated:
Contributors: Hans
Prev
工具表单
Next
单/复选框