README

一个基于 Boostrap 5 CSS 框架构建菜单和标签导航工具的 Laravel 库。包演示可在这里找到。

安装

安装包

composer require seblhaire/menuandtabutils

Composer 会自动将包与 Laravel 链接。但您仍然可以显式地将提供者和外观添加到您的 config/app.php 文件中。

'providers' => [
	Seblhaire\MenuAndTabUtils\MenuServiceProvider::class,
]

JavaScript 和样式表

在一个网页上，每个 JS 库和 CSS 样式表都可以单独链接。如果您选择这种方式，首先下载并安装 Bootstrap。然后按照上述说明发布包文件，并将以下标签放入您的模板中

网站通常使用许多库和样式表，浏览器必须在网站正确渲染之前下载许多文件。现代网站包含一个单个压缩的 JavaScript 文件，该文件连接必要的脚本；样式表也有同样的原则。使用 Laravel，您可以使用 Laravel Mix 来编译文件。

使用 NPM 包管理器：npm install bootstrap

然后您的 js 源文件应该像这样

require('bootstrap');

对于您的样式表

@import '~bootstrap/scss/bootstrap';

配置文件

可通过以下方式访问

config('menuutils')
config('tabutils')

这些默认值在下一节中的工具中使用。如果您需要更改默认值，请使用命令 php artisan vendor:publish 并在列表中选择合适的包。然后配置文件将在 config/vendor/seblhaire/ 文件中可用。

MenuUtils

MenuUtils::init(string $id, array $data)

这个简单的助手将一个 <ul class="nav"> 菜单分配给一个变量。

参数

id：主导航的 id
data：数组参数。内容
- menu：必须构建菜单项的值数组。见下文。
  - current：活动的菜单元素 id，即突出显示的元素。不应为下拉菜单项。
  - ulclass：主 <ul> 元素的类。对于垂直菜单：nav flex-column。默认：nav。
  - ulattr：必须添加到主 <ul> 的属性数组。默认：空数组。
  - liclass：菜单元素的 <li> 类。默认：nav-item。
  - liattr：必须添加到菜单 <li> 元素的属性数组。默认：空数组。
  - aclass：菜单元素链接 <a> 的类：默认：nav-link。
  - lidropdwn：包含下拉菜单的菜单元素 <li> 的类。默认：nav-item dropdown。
  - adroptoggle：打开下拉菜单的菜单元素链接 <a> 的类，默认：nav-link dropdown-toggle。
  - dropdwnmenuclass：包含下拉菜单项的 <ul> 的类。默认：dropdown-menu。
  - dropitem：下拉菜单的元素 <li> 的类。默认：dropdown-item。
  - dropdivider：下拉菜单分隔符（<hr> 元素）的类。默认：dropdown-divider。
  - active：当前项的类。默认："active"

定义菜单元素

以下是构建您的导航菜单的 menu 参数的详细信息。

$element = MenuUtils::init('simple-nav',
[
  'current' => 'link1',
  'menu' => [ // defines the menu content
    'link1' => [
      'title' => 'Link 1',
      'target' => route('menuutils'),
    ],
    ...
		'link3' => [
			'icon' => '<i class="fa-solid fa-screwdriver-wrench"></i>',
			'title' => 'Tools',
			'target' => route('menuutils'),
		],
    'link4' => [
      'title' => 'Link 4',
      'dropdown' => [ // dropdown menu replaces default target
        'link4-1' => [ // drowpdown items are defined same way as level one items
          'title' =>'Link 4.1',
          'target' => route('menuutils'),
        ],
        ...
        'sep' => null, // a separator is drawn if array value is null
      ]
    ],
  ]
]);

数组键用于菜单元素 id。值位于子数组中。

icon：菜单项中显示的图像或图标。HTML代码。默认：未设置或为空。
title：必需元素文本。如果设置了图标，则在鼠标悬停时显示标题。
target：链接目标，例如路由。如果设置了dropdown，则不使用。默认为空。
attributes：用于<a>的额外参数的键值对数组。
liattr：用于<li>的额外参数的键值对数组。
dropdown：值数组。在这个数组中，如果某个键的值为null，则绘制菜单分隔符。参数与顶级菜单项相同，除了dropdown。

用法

在您的控制器中，将结果传递给一个变量

$menu = MenuUtils::init('myid', [...]);

如果参数中未定义current参数，您可以使用此方法

$menu->setCurrent('myid')

请注意，项目不应该是下拉菜单元素。然后将此变量传递给视图

return view('mybladetemplate', [
		'menu' => $menu
]);

然后在您的Blade模板中，在适当的行插入您的变量

{!! $menu !!}

一个页面可以有多个菜单。在这种情况下，将每个菜单分配给不同的变量。

BreadcrumbUtils

BreadcrumbUtils::init(string $id, array $data)

这个简单的辅助工具将一个<nav aria-label="breadcrumb">菜单分配给一个变量。

参数

id：主导航的 id
data：数组参数。内容
- menu：必须构建菜单项的值数组。见下文。
  - navclass：导航元素<nav>的类。默认：''。
  - navattr：用于<nav>的键-属性值数组。默认：['aria-label' => "breadcrumb"]。
  - olclass：列表<ol>的类。默认：breadcrumb。
  - olattr：用于<ol>元素的键值对数组。默认：空数组。
  - liclass：列表元素<li>的类。默认：breadcrumb-item。
  - liattr：用于<li>元素的键值对数组。默认：空数组。
  - active：当前项的类。默认："active"。

定义菜单元素

以下是构建您的导航菜单的 menu 参数的详细信息。

$element = BreadcrumbUtils::init('breadcrumb-nav', //main nav id
[
  'menu' => [
    'link-9' => [
      'icon' => '&lt;i class="fas fa-home fa-lg"&gt;&lt;/i&gt;',
      'title' => 'Home',
      'target' => route('menuutils', ['type' => 'breadcrumbnav'])
    ],
    'link-10' => [
      'title' => 'Second breadcrumb',
      'target' => route('menuutils', ['type' => 'breadcrumbnav'])
    ],
    'link-11' => [
      'title' => 'Third breadcrumb'
    ],
  ]
]);

数组键用于菜单元素 id。值位于子数组中。

icon：菜单项中显示的图像或图标。HTML代码。默认：未设置或为空。
title：必需元素文本。如果设置了图标，则在鼠标悬停时显示标题。
target：链接目标，例如路由。如果设置了dropdown，则不使用。默认为空。
attributes：用于<a>的额外参数的键值对数组。

用法

在您的控制器中，将结果传递给一个变量

$breadcrumb = BreadcrumbUtils::init('myid', [...]);

当前元素始终是最后一个。<然后将此变量传递给视图

return view('mybladetemplate', [
		'breadcrumb' => $breadcrumb
]);

然后在您的Blade模板中，在适当的行插入您的变量

{!! $breadcrumb !!}

一个页面可以有多个面包屑。在这种情况下，将每个面包屑分配给不同的变量。

TabUtils

TabUtils::init(string $id, array $data)

这个辅助工具构建标签和标签内容的代码。

参数

id：标签导航的id。
data：数组参数。内容
- tabs：必需用于构建标签项的值数组。见下文。
- current：活动菜单元素的id，即突出显示并打开。
- ulclass：导航标签的类。默认：nav nav-tabs。
- ulattr：必须添加到主 <ul> 的属性数组。默认：空数组。
- liclass：导航元素<li>的类。默认：nav-item。
- liattr：必须添加到主<li>的属性数组。默认：空数组。
- btnclass：元素<button>的类。默认：nav-link。
- tabcontentclass：主<div>的标签内容类。默认：tab-content。
- maindivattr：必须添加到主<div>的属性数组。默认：空数组。
- tabdivclass：标签元素内容的类。默认：tab-pane fade。
- tabcontentattr：必须添加到内容<div>的属性数组。默认：空数组。
- activetab：当前标签元素内容的类。默认：show active。
- active：当前项的类。默认："active"

定义标签元素

以下是在tabs参数中构建您标签的详细信息。

$element = TabUtils::init('tabs-1', // main tab id
[
	'current' => 'tab1',
	'tabs' => [
		'tab1' => [
			'title' => 'Tabs 1',
			'content' => 'html code...'
		],
		...
	]
]);

数组键用于菜单元素 id。值位于子数组中。

icon：菜单项中显示的图像或图标。HTML代码。默认：未设置或为空。
title：必需元素文本。如果设置了图标，则在鼠标悬停时显示标题。
content：标签内容在HTML中。
view：如果未设置内容，则显示在标签中的blade模板的路径，例如tabs.editors。
viewparams：传递给view参数中设置的blade模板的键值数组。

用法

在您的控制器中，将结果传递给一个变量

$tabs = TabUtils::init('myid', [...]);

如果参数中未定义current参数，您可以使用此方法

$tabs->setCurrent('myid')

然后传递此变量到视图

return view('mybladetemplate', [
		'tabs' => $tabs
]);

然后在您的Blade模板中，在适当的行插入您的变量

{!! $tabs !!}

一个页面可以有多个标签组。在这种情况下，将每个标签组分配给不同的变量。

seblhaire / menuandtabutils

维护者

详细信息

README

安装

JavaScript 和样式表

配置文件

MenuUtils

参数

定义菜单元素

用法

BreadcrumbUtils

参数

定义菜单元素

用法

TabUtils

参数

定义标签元素

用法