README

yii2-tabs-x      

基于 Krajee 的 bootstrap-tabs-x jQuery 插件，为 Yii Framework 2 扩展的标签页小部件。此插件包括各种 CSS3 样式增强和各种对核心 Bootstrap Tabs 插件 的调整。扩展支持 Bootstrap 5.x 或 4.x 或 3.x 库版本。它还帮助您以多种方式对齐标签页，添加边框，实现旋转/侧向标题，通过 Ajax 加载标签页内容等。

功能

插件提供以下增强功能

• 支持各种标签页打开方向：above（默认），below，right 和 left。
• 允许您将标签页内容框在新 bordered 样式中。这可以与上述任何标签页方向一起使用。
• 允许您将整个标签页内容对齐到父容器/页面的 left（默认），center 或 right。
• 自动对齐和格式化有边框的标签页的高度和宽度，适用于 right 和 left 位置。
• 允许在 right 和 left 标签页方向中使用旋转 sideways 标签页标题方向。
• 自动检测 sideways 方向的溢出标题标签（带有省略号样式），并在悬停时显示完整标签作为标题。

演示

您可以在使用说明和示例上查看扩展的详细说明。

安装

安装此扩展的首选方式是通过 composer。

注意：请检查此扩展的 composer.json 以获取其要求和依赖项。请阅读有关设置应用程序的 composer.json 中的 minimum-stability 设置的网络提示/wik。

运行以下命令之一：

$ php composer.phar require kartik-v/yii2-tabs-x "@dev"

或将其添加到您的 composer.json 文件的 require 部分：

"kartik-v/yii2-tabs-x": "@dev"

使用方法

tabsX

use kartik\tabs\TabsX;

echo TabsX::widget([
    'position' => TabsX::POS_ABOVE,
    'align' => TabsX::ALIGN_LEFT,
    'items' => [
        [
            'label' => 'One',
            'content' => 'Anim pariatur cliche...',
            'active' => true
        ],
        [
            'label' => 'Two',
            'content' => 'Anim pariatur cliche...',
            'headerOptions' => ['style'=>'font-weight:bold'],
            'options' => ['id' => 'myveryownID'],
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                 [
                     'label' => 'DropdownA',
                     'content' => 'DropdownA, Anim pariatur cliche...',
                 ],
                 [
                     'label' => 'DropdownB',
                     'content' => 'DropdownB, Anim pariatur cliche...',
                 ],
            ],
        ],
    ],
]);

粘性标签页

您可以为 Bootstrap 标签页提供 pushState（支持后退和前进按钮），通过设置 enableStickyTabs 属性启用或禁用粘性标签页行为。这将使用 jquery.stickytabs 插件 来启用粘性标签页的 push state 行为。如果您想更改粘性标签页插件设置，可以设置 stickyTabsOptions 属性。

echo TabsX::widget([
    'enableStickyTabs' => true,
    'stickyTabsOptions' => [
        'selectorAttribute' => 'data-target',
        'backToTop' => true,
    ],
    'items' => [
    // ... items here
    ]
]);

许可证

yii2-tabs-x 根据 BSD-3-Clause 许可证发布。有关详细信息，请参阅附带 LICENSE.md 文件。