kartik-v / yii2-popover-x
一个扩展的Bootstrap 3.0 popover小部件,它结合了Bootstrap popover和modal功能,并包含各种新的样式增强。
Requires
- kartik-v/bootstrap-popover-x: >=1.4
- kartik-v/yii2-krajee-base: >=2.0
README
yii2-popover-x
基于Krajee的bootstrap-popover-x jQuery插件的Yii Framework 2扩展的popover小部件。该插件是一个扩展的popover jQuery插件,它结合了popover和Bootstrap modal功能,并包含各种新的样式增强。此小部件可以像内置的yii\bootstrap\Modal
一样设置,并有一些额外的增强。
注意:有关各种版本更改的详细信息,请参阅更改日志。
功能
该插件提供以下增强功能
- 扩展的popover可以像Bootstrap modal对话框一样渲染,并具有Bootstrap popover样式。由于该插件扩展了Bootstrap modal,因此Bootstrap modal及其所有方法的功能也都可以使用。
- 添加了popover页脚,包括页眉。配置popover的HTML内容与Bootstrap modal一样简单。
- 特别为popover页脚中添加的Bootstrap按钮进行了样式设计和空间布局。
- 向popover窗口添加关闭图标/按钮。
- 配置各种预建样式/模板。除了默认的(灰色)之外,还可以使用Bootstrap 3的上下文颜色样式
primary
、info
、success
、danger
和warning
。 - 根据目标元素控制popover的位置。该插件支持19种不同的位置选项
- auto
- auto-left
- auto-right
- auto-top
- auto-bottom
- horizontal
- vertical
- right
- left
- top
- bottom
- top top-left
- top top-right
- bottom bottom-left
- bottom bottom-right
- left left-top
- left left-bottom
- right right-top
- right right-bottom
- 特别样式化popover箭头,以确保每个上下文颜色和popover位置的统一。
- 为控制popover的外观和尺寸提供预建CSS样式。
注意:此扩展依赖于kartik-v/yii2-widgets扩展,该扩展又依赖于yiisoft/yii2-bootstrap扩展。请检查composer.json,了解此扩展的要求和依赖关系。注意:Yii 2框架仍在积极开发中,在完全稳定的Yii2版本发布之前,您的核心yii2-bootstrap包(及其依赖项)在安装或更新此扩展时可能会更新。如果您不希望自动更新依赖项,您可能需要锁定特定应用程序的composer包版本,并测试扩展中断。
演示
您可以在使用说明和示例中查看扩展的详细信息。
安装
安装此扩展的首选方法是使用composer。
注意:检查此扩展的依赖和要求,请查看composer.json文件。阅读有关为您的应用程序的composer.json设置
minimum-stability
设置的网络提示/wiki。
运行以下命令之一:
$ php composer.phar require kartik-v/yii2-popover-x "dev-master"
或将以下内容添加到您的composer.json
文件的require
部分:
"kartik-v/yii2-popover-x": "dev-master"
用法
PopoverX
use kartik\popover\PopoverX; PopoverX::begin([ 'header' => 'Hello world', 'footer' => Html::button('View', ['class'=>'btn btn-primary']), 'toggleButton' => ['class'=>'btn btn-primary'], ]); echo '<p class="text-justify">' . 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.' . '</p>'; PopoverX::end();
许可证
yii2-popover-x是在BSD 3-Clause许可证下发布的。有关详细信息,请参阅捆绑的LICENSE.md
文件。