README

一个使用Fluent模式的面包屑生成器。这个库受到creitive/breadcrumbs的启发，但已被完全重写，以实现完全可定制。

需求

安装

composer require xety/breadcrumbs

用法

实例

要使用Breadcrumbs类，只需实例化它

use Xety\Breadcrumbs\Breadcrumbs;

$breadcrumbs = new Breadcrumbs;

// Or with breadcrumbs and options:
$breadcrumbs = new Breadcrumbs(
    [
        [
            'name' => 'Home',
            'href' => '/home'
        ],
        [
            'name' => 'Blog',
            'href' => '/blog'
        ]
    ],
    [
        'position' => true
    ]
);

输出

要渲染面包屑，可以调用函数render()或直接"echo"它

echo $breadcrumbs->render();

// Or, since this class implement the magic method `__toString()`,
// you can directly echo the instance :
echo $breadcrumbs;

输出示例

默认情况下，此类配置为使用Bootstrap 4样式渲染。因此，根据上述配置，输出将看起来像这样

<nav class="breadcrumb">
    <a data-position="1" class="breadcrumb-item" href="/home">Home</a>
    <span data-position="2" class="breadcrumb-item active" href="/blog">Blog</span>
</nav>

功能齐全的示例

$breadcrumbs = new Breadcrumbs(
    [
        [
            'name' => 'Home',
            'href' => '/home'
        ],
        [
            'name' => 'Blog',
            'href' => 'blog' // Note there is no `slash` here.
        ],
        [
            'name' => 'Test',
            'href' => 'http://xeta.io/blog/test'
        ],
        [
            'name' => 'Article',
            'href' => '/article'
        ]
    ],
    [
        'position' => true,
        'divider' => '#',
        'dividerElement' => 'li',
        'dividerElementClasses'=> [
            'custom',
            'divider'
        ],
        'listElement' => 'ul',
        'listElementClasses' => [
            'custom',
            'container'
        ],
        'listItemElement' => 'li',
        'listItemElementClasses' => [
            'custom',
            'item'
        ],
        'listActiveElement' => 'li',
        'listActiveElementClasses' => [
            'custom',
            'active'
        ]
    ]
);

输出

<ul class="custom container">
    <li data-position="1" class="custom item" href="/home">Home</li>
    <li class="custom divider">#</li>
    <li data-position="2" class="custom item" href="/blog">Blog</li> <!-- The slash has been automaticaly set by the class -->
    <li class="custom divider">#</li>
    <li data-position="3" class="custom item" href="http://xeta.io/blog/test">Test</li>
    <li class="custom divider">#</li>
    <li data-position="4" class="custom active">Article</li>
</ul>

选项

这是所有可用选项和默认选项的列表

[
    // Whether to enable or not the `data-position` attribute.
    'position' => false,
    // The divider symbol between the crumbs or `null` to disable it.
    'divider' => null,
    // The DOM-Element used to generate the divider element.
    'dividerElement' => 'span',
    // Classes applied to the item `dividerElement` element.
    'dividerElementClasses'=> [
        'divider'
    ],
    // The DOM-Element used to generate the container element.
    'listElement' => 'nav',
    // Classes applied to the main `listElement` container element.
    'listElementClasses' => [
        'breadcrumb'
    ],
    // The DOM-Element used to generate the list item.
    'listItemElement' => 'a',
    // Classes applied to the list item `listItemElement` element.
    'listItemElementClasses' => [
        'breadcrumb-item'
    ],
    // The DOM-Element used to generate the active list item.
    'listActiveElement' => 'span',
    // Classes applied to the active item `listActiveElement` element.
    'listActiveElementClasses' => [
        'breadcrumb-item',
        'active'
    ]
]

文档

您可以在这里找到所有可用方法及其文档。

贡献

如果您想贡献，请遵循此指南。