{"id":20144159,"url":"https://github.com/quansitech/qscmf-adminlte-widgets","last_synced_at":"2026-02-14T04:42:24.187Z","repository":{"id":42507874,"uuid":"278581743","full_name":"quansitech/qscmf-adminlte-widgets","owner":"quansitech","description":"adminlte组件","archived":false,"fork":false,"pushed_at":"2024-10-22T09:01:45.000Z","size":151,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T20:51:17.986Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quansitech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-10T08:33:19.000Z","updated_at":"2024-10-22T09:01:00.000Z","dependencies_parsed_at":"2022-09-21T19:42:16.844Z","dependency_job_id":null,"html_url":"https://github.com/quansitech/qscmf-adminlte-widgets","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqscmf-adminlte-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqscmf-adminlte-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqscmf-adminlte-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2Fqscmf-adminlte-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quansitech","download_url":"https://codeload.github.com/quansitech/qscmf-adminlte-widgets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248093669,"owners_count":21046723,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T22:09:00.844Z","updated_at":"2026-02-14T04:42:19.156Z","avatar_url":"https://github.com/quansitech.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# qscmf-adminlte-widgets\n\nadminlte 组件\n\n## 安装\n\n```php\ncomposer require quansitech/qscmf-adminlte-widgets\n```\n\n## 控件列表\n\n+ [Content](https://github.com/quansitech/qscmf-adminlte-widgets#Content)\n+ [Row](https://github.com/quansitech/qscmf-adminlte-widgets#Row)\n+ [Column](https://github.com/quansitech/qscmf-adminlte-widgets#Column)\n+ [Card](https://github.com/quansitech/qscmf-adminlte-widgets#Card)\n+ [InfoBox](https://github.com/quansitech/qscmf-adminlte-widgets#InfoBox)\n+ [Tab](https://github.com/quansitech/qscmf-adminlte-widgets#Tab)\n+ [ListBox](https://github.com/quansitech/qscmf-adminlte-widgets#ListBox)\n+ [Gap](https://github.com/quansitech/qscmf-adminlte-widgets#Gap)\n\n### Content\n\n面板组件，所有的子组件都必须添加到Content组件\n\n面板是表格结构，所有的组件都将基于行列结构嵌入\n\n用法:\n\n```php\n//$view 是 Think\\View 对象\n$content = new Content($view);\n//设置面板标题\n$content-\u003etitle('网站概况');\n//设置高亮的节点\n$content-\u003esetNIDByNode('admin','dashboard', 'index');\n\n//设置行组件\n$row = new \\AdminLTE\\Row(new InfoBox('日活', 100, 'info', ['icon' =\u003e 'users']));\n//\\AdminLTE\\Row 作为参数\n$content-\u003eaddRow($row);\n//HTML字符串作为参数\n$box = \u003c\u003c\u003chtml\n\u003cdiv style=\"width:100%;height:100px;background-color: red;\"\u003e\u003c/div\u003e\nhtml;\n//当非Row组件作为参数时，可设置第二个参数来设定行所占宽度（总共12）\n$content-\u003eaddRow($box, 6);\n\n//渲染html页面\n$content-\u003edisplay();\n```\n\n函数说明\n\n+ addRow\n  \n  设置行内容\n  \n  | 参数        | 说明                       | 类型              | 必填  | 默认值 |\n  |:--------- |:------------------------ | --------------- | --- |:--- |\n  | row       | \\AdminLTE\\Row组件或者html字符串 | object I string | 是   |     |\n  | width     | 行宽度，最大12，row为object时失效   | string          | 否   |     |\n  | auth_node | 行权限点，格式为 模块.控制器.方法名      | string I array  | 否   |     |\n  \n  若auth_node存在多个值，支持配置不同逻辑（logic值为and或者or）判断是否显示，默认为and：\n  \n  and：用户拥有全部权限则显示，格式为：\n  ['node' =\u003e ['模块.控制器.方法名','模块.控制器.方法名'], 'logic' =\u003e 'and']\n  \n  or：用户一个权限都没有则隐藏，格式为：\n  ['node' =\u003e ['模块.控制器.方法名','模块.控制器.方法名'], 'logic' =\u003e 'or']\n\n### Row\n\n行组件，行是面板表格的基础结构\n\n用法：\n\n```php\n//实例化row\n$row = new Row();\n//也可以传入Column类型对象\n$row = new Row(new Column(new InfoBox('日活', 100, 'info', 'users')));\n//或者是html字符串, 此时可传入第二个参数来设定所占宽度(总共12)\n$box = \u003c\u003c\u003chtml\n\u003cdiv style=\"width:100%;height:100px;background-color: red;\"\u003e\u003c/div\u003e\nhtml;\n$row = new Row($box, 6);\n\n//实例化后，给已有row添加列内容\n//例子中的column可以是Html字符串，或者Column对象\n//Column对象无须传递第二个参数，传了也无效\n$row-\u003eaddColumn($column, 4);\n```\n\n函数说明\n\n+ addColumn\n  \n  设置行内容\n  \n  | 参数        | 说明                          | 类型              | 必填  | 默认值 |\n  |:--------- |:--------------------------- | --------------- | --- |:--- |\n  | column    | \\AdminLTE\\Column组件或者html字符串 | object I string | 是   |     |\n  | width     | 列宽度，最大12，column为object时失效   | string          | 否   |     |\n  | auth_node | 行权限点，格式为 模块.控制器.方法名         | string I array  | 否   |     |\n  \n  若auth_node存在多个值，支持配置不同逻辑（logic值为and或者or）判断是否显示，默认为and：\n  \n  and：用户拥有全部权限则显示，格式为：\n  ['node' =\u003e ['模块.控制器.方法名','模块.控制器.方法名'], 'logic' =\u003e 'and']\n  \n  or：用户一个权限都没有则隐藏，格式为：\n  ['node' =\u003e ['模块.控制器.方法名','模块.控制器.方法名'], 'logic' =\u003e 'or']\n\n### Column\n\n列组件，列是面板表格的基础结构，一般都会嵌入行组件中使用\n\n用法：\n\n```php\n$box = \u003c\u003c\u003chtml\n\u003cdiv style=\"width:100%;height:100px;background-color: red;\"\u003e\u003c/div\u003e\nhtml;\n//实例化column组件\n//第一个参数为html字符串，或者是实现了__toString魔术函数的对象\n//第二个参数为宽度，默认是12\n$column = new Column($box, 12);\n$box2 = \u003c\u003c\u003chtml\n\u003cdiv style=\"width:100%;height:100px;background-color: yellow;\"\u003e\u003c/div\u003e\nhtml;\n//向Column追加内容\n//接受html字符串，或者实现了__toString魔术函数的对象\n$column-\u003eappend($box2);\n```\n\n### Card\n\n可折叠关闭的容器组件\n\n用法:\n\n```php\n//第一个参数，设定card body部分的html内容，或者是实现了__toString魔术函数的对象\n//第二个参数，card的标题\n//第三个参数，card header的背景色，见主题颜色说明\n//第四个参数，是否启动折叠功能\n//第五个参数，是否启动关闭功能\n$card = new Card($card_row, '统计', 'danger', true, true);\n\n//设置body内容\n//参数类型，html字符串或者实现了__toString魔术函数的对象\n$card-\u003esetBody($body);\n\n//是否开启折叠功能\n$card-\u003esetCollapse(true);\n\n//是否开启关闭功能\n$card-\u003esetRemove(true);\n\n//设置标题\n$card-\u003esetTitle('趋势图');\n\n//设置header背景颜色\n//参数是主题颜色，见主题颜色说明\n$card-\u003esetBg($bg);\n```\n\n函数说明\n\n+ addFooterMore\n  \n  添加底部跳转链接\n  \n  | 参数    | 说明  | 类型     | 必填  | 默认值  |\n  |:----- |:--- | ------ | --- |:---- |\n  | url   | 链接  | string | 是   |      |\n  | title | 标题  | string | 否   | 查看更多 |\n\n+ setFooter\n  \n  设置底部html\n  \n  | 参数     | 说明   | 类型     | 必填  | 默认值 |\n  |:------ |:---- | ------ | --- |:--- |\n  | footer | html | string | 是   |     |\n\n+ setFooterExtraClass\n  \n  指定底部html样式\n  \n  | 参数                 | 说明    | 类型     | 必填  | 默认值 |\n  |:------------------ |:----- | ------ | --- |:--- |\n  | footer_extra_class | css类名 | string | 是   |     |\n\n### InfoBox\n\n可设置图标，说明文字，数字，提示的数据展示组件\n\n用法：\n\n```php\n//实例化\n//第一个参数，数据描述\n//第二个参数，数据\n//第三个参数，背景主题色，见主题颜色说明\n//第四个参数，icon\n$box = new InfoBox('参与人', 200, 'info', 'users');\n\n//设置说明提示\n$box-\u003esetTips('报名人数');\n\n//设置icon\n$box-\u003esetIcon('users');\n\n//设置背景主题色\n$box-\u003esetBg('info');\n\n//设置点击跳转页面\n//第一个参数，页面路径\n//第二个参数，是否在新页面打开，默认为 false\n$box-\u003ejumpTo($url,$is_blank);\n```\n\n### Tab\n\n可设置多个标签页的组件\n\n用法:\n\n```php\n// 参数为背景主题色，默认为primary，见主题颜色说明\n$tab = new Tab('success');\n\n// 第一个参数为tab项目的标题\n// 第二个参数为tab项目的html内容，或者是实现了__toString魔术函数的对象\n// 第三个参数为tab项目标题的提示，默认为空\n$tab-\u003eaddTab('title', 'body', 'tips');\n\n// 多个tab则实现多个addTab方法\n$tab-\u003eaddTab('divider', new DividerBuilder('222'));\n```\n\n### ListBox\n\n设置列表组件\n\n示例:\n\n```php\n$list_box = new \\AdminLTE\\Widgets\\ListBox\\ListBox();\n\n// 获取需要展示的数据\n$list = [[\"id\" =\u003e 1,\"title\" =\u003e \"title\",\"amount\" =\u003e 100,\"summary\"=\u003e\"summary\",\"date\"=\u003edate(\"Y-m-d\", time())]];\n\nforeach ($list as $v){\n    $item = new \\AdminLTE\\Widgets\\ListBox\\ListItem();\n    // 设置标题及字体颜色\n    $item-\u003esetTitle($v['title'],\"primary\");\n    // 设置标题右边标签项及其背景颜色\n    $item-\u003eaddRightTag(\"$\".$v['amount'],\"success\");\n    // 设置描述项    \n    $item-\u003eaddColumn($v['summary']);\n    $item-\u003eaddColumn($v['date']);\n    // 设置点击标题跳转链接    \n    $item-\u003esetUrl(U(\"admin/review/detail\",['id'=\u003e$v['id']]));\n    // 添加列表项，为\\AdminLTE\\Widgets\\UlListCard\\LiItem 对象\n    $list_box-\u003eaddListItem($item);\n}\n\necho (new \\AdminLTE\\Widgets\\Card($list_box,\"待处理数据\",\"danger\"))-\u003eaddFooterMore(U(\"admin/review/index\"));\n```\n\n效果图\n\n![image](https://user-images.githubusercontent.com/35066497/134834656-30d472d0-39df-4074-b830-a5c351b3df99.png)\n\n函数说明\n\n+ addListItem\n  \n  添加列表项，为\\AdminLTE\\Widgets\\ListBox\\ListItem 对象\n  \n  | 参数   | 说明                                    | 类型     | 必填  | 默认值 |\n  |:---- |:------------------------------------- | ------ | --- |:--- |\n  | item | \\AdminLTE\\Widgets\\ListBox\\ListItem 对象 | object | 是   |     |\n\n### ListItem\n\n列表项，与 \\AdminLTE\\Widgets\\ListBox\\ListBox 搭配使用\n\n函数说明\n\n+ setTitle\n  \n  设置标题及其字体颜色，默认为primary，见主题颜色说明\n  \n  | 参数          | 说明   | 类型     | 必填  | 默认值     |\n  |:----------- |:---- | ------ | --- |:------- |\n  | title       | 标题   | string | 是   |         |\n  | title_color | 字体颜色 | string | 否   | primary |\n\n+ setUrl\n  \n  指定点击标题跳转链接\n  \n  | 参数  | 说明   | 类型     | 必填  | 默认值 |\n  |:--- |:---- | ------ | --- |:--- |\n  | url | 跳转链接 | string | 是   |     |\n\n+ addRightTag\n  \n  设置标题右边标签项及其背景颜色，默认为primary\n  \n  bg可选值：primary，secondary，success， info， warning， danger， light， dark\n  \n  | 参数    | 说明   | 类型     | 必填  | 默认值     |\n  |:----- |:---- | ------ | --- |:------- |\n  | value | 标签名称 | string | 是   |         |\n  | bg    | 背景颜色 | string | 否   | primary |\n\n+ addColumn\n  \n  添加描述项\n  \n  | 参数     | 说明   | 类型     | 必填  | 默认值 |\n  |:------ |:---- | ------ | --- |:--- |\n  | column | 描述内容 | string | 是   |     |\n\n## \n\n### Gap\n\n间隔栏\n\n```php\n//构造函数，20指间隔的高度，单位px\n$gap = new Gap(20);\n\n\n//或者\n$gap = new Gap();\n$gap-\u003esetHeight(20);\n\n```\n\n\n\n## 背景主题色\n\n\u003cfont color='#17a2b8'\u003einfo #17a2b8\u003c/font\u003e\n\n\u003cfont color='#28a745'\u003esuccess #28a745\u003c/font\u003e\n\n\u003cfont color='#ffc107'\u003ewarning #ffc107\u003c/font\u003e\n\n\u003cfont color='#dc3545'\u003edanger #dc3545\u003c/font\u003e\n\n\u003cfont color='#6c757d'\u003esecondary #6c757d\u003c/font\u003e\n\n\u003cfont color='#007bff'\u003eprimary #007bff\u003c/font\u003e\n\n\u003cfont color='#000000'\u003eblack #000000\u003c/font\u003e\n\n\u003cfont color='#343a40'\u003egraydark #343a40\u003c/font\u003e\n\n\u003cfont color='#6c757d'\u003egray #6c757d\u003c/font\u003e\n\n\u003cfont color='#f8f9fa'\u003elight #f8f9fa\u003c/font\u003e\n\n\u003cfont color='#6610f2'\u003eindigo #6610f2\u003c/font\u003e\n\n\u003cfont color='#3c8dbc'\u003elightblue #3c8dbc\u003c/font\u003e\n\n\u003cfont color='#001f3f'\u003enavy #001f3f\u003c/font\u003e\n\n\u003cfont color='#605ca8'\u003epurple #605ca8\u003c/font\u003e\n\n\u003cfont color='#f012be'\u003efuchsia #f012be\u003c/font\u003e\n\n\u003cfont color='#e83e8c'\u003epink #e83e8c\u003c/font\u003e\n\n\u003cfont color='#d81b60'\u003emaroon #d81b60\u003c/font\u003e\n\n\u003cfont color='#01ff70'\u003elime #01ff70\u003c/font\u003e\n\n\u003cfont color='#ff851b'\u003eorange #ff851b\u003c/font\u003e\n\n\u003cfont color='#20c997'\u003eteal #20c997\u003c/font\u003e\n\n\u003cfont color='#3d9970'\u003eolive #3d9970\u003c/font\u003e\n\n#### 效果图\n\n![image](https://user-images.githubusercontent.com/35066497/90729026-7d4a2780-e2f8-11ea-9fa7-a77735e0eb33.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Fqscmf-adminlte-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquansitech%2Fqscmf-adminlte-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Fqscmf-adminlte-widgets/lists"}