hsegura/yii2-widgets

Yii Framework 2.0 的有用小部件集合，扩展了 Bootstrap 的功能

维护者

详细信息

github.com/hsegura/yii2-widgets

主页

源代码

安装: 51

依赖者: 0

建议者: 0

安全性: 0

星标: 0

关注者: 0

分支: 177

类型:yii2-extension

v3.4.2 2019-06-18 12:55 UTC

Requires

BSD-3-Clause 5dcb1a808859480f8d263e5f21feb3de85508d84

formextensionwidgetyii2

This package is auto-updated.

Last update: 2024-09-19 00:36:56 UTC

README

Krajee Logo
yii2-widgets Donate

Stable Version Unstable Version License Total Downloads Monthly Downloads Daily Downloads

此扩展增强了现有 Yii Framework 2 小部件的功能，使 Bootstrap 3.0 中的其他捆绑功能、新的 HTML 5 功能和相关 Bootstrap 扩展功能可用。

注意：此扩展在 2015 年 12 月 5 日的 v3.4.1 版本中得到全面改进。在 v3.4.0 版本中，此扩展包中的每个小部件都被逻辑上重新分组并拆分为单独的子存储库。此更改是为了允许开发人员根据需要单独安装或仅安装特定的小部件（通过 composer）。然而，对于新用户来说，安装此捆绑包应该是访问所有这些重要小部件子存储库的最简单方法。此更改不会影响已使用先前扩展版本的任何用户的向后兼容性。

此捆绑包中可用的小部件

yii2-widgets 捆绑包自动包括以下子存储库中的扩展或小部件，可以通过 \kartik\widgets\ 命名空间访问。

其他相关小部件

此扩展现在已经成熟，包含 Yii 2 输入和导航控制所需的基本小部件。为了更好地支持此扩展，任何额外的输入和导航小部件都将单独创建。以下是与 yii2-widgets 类似功能的相关额外小部件，但已作为单独的扩展创建（这些小部件依赖于 kartik-v/yii2-widgets）。

  • yii2-dropdown-x：扩展 Bootstrap 3 的 Yii 2.0 下拉菜单
  • yii2-nav-x：扩展 Bootstrap 3 的 Yii 2.0 导航菜单
  • yii2-context-menu：Bootstrap 3 的 Yii 2.0 右键菜单
  • yii2-slider：Bootstrap 3 的 Yii 2.0 滑块控件
  • yii2-sortable：通过简单的拖放创建可排序的列表和网格
  • yii2-sortable-input：允许您存储排序顺序的 yii2-sortable 输入小部件
  • yii2-money：为 Yii 2.0 提供屏蔽的货币输入小部件。
  • yii2-checkbox-x：具有 3 个状态和更多样式的 Bootstrap 3 扩展复选框小部件，适用于 Yii 2.0。
  • yii2-date-range：扩展 Bootstrap 3 的 Yii 2.0 日期范围选择器小部件。
  • yii2-editable：将任何显示内容转换为可编辑状态，使用输入、小部件等功能，适用于 Yii 2.0。
  • yii2-label-inplace：为 Yii 框架 2.0 提供的一个表单增强小部件，允许字段内标签支持。

安装

推荐通过 composer 安装此扩展。请记住查阅此扩展的 composer.json 文件以获取此扩展的要求和依赖。

先决条件

注意：请检查此扩展的 composer.json 文件以获取要求和依赖。阅读此 网络提示/wiki 了解如何设置应用程序 composer.json 中的 minimum-stability 设置。

安装

运行以下命令之一：

$ php composer.phar require kartik-v/yii2-widgets "*"

或向你的 composer.json 文件的 require 部分添加：

"kartik-v/yii2-widgets": "*"

。

发布更新

有关各个版本的变更详情，请参阅 变更日志。

目前 yii2-widgets 中的小部件按使用类型分组。

表单/输入

ActiveForm

查看演示

扩展自 Yii ActiveForm 小部件。简化 Bootstrap 中可用的所有三种表单布局，即 垂直、水平 和 内联。允许为水平表单布局偏移标签和输入。与扩展的 ActiveField 小部件紧密协作。

ActiveField

查看演示

扩展自 Yii ActiveField 小部件。允许将 Bootstrap 风格的 输入组附加组件 前置或后置到文本输入框。自动调整水平表单中的复选框和单选输入框的偏移。允许根据表单布局风格（例如，隐藏标签并将它们显示为内联表单的占位符）控制标签和占位符。扩展的 ActiveField 功能包括

  • 附加组件
    • 前置附加组件
    • 后置附加组件
    • 图标附加组件
    • 输入附加组件
    • 按钮附加组件
    • 按钮下拉附加组件
    • 分段按钮附加组件
    • 前置和后置
    • 输入组设置
  • 输入
    • 复选框
    • 单选按钮
    • 复选框列表
    • 单选按钮列表
    • 静态输入
    • HTML 5 输入
  • 多选选择
    • 垂直表单
    • 水平表单
    • 单选按钮列表
    • 显示选项

DepDrop

查看演示

DepDrop 小部件是 Krajee 的 dependent-dropdown jQuery 插件 的 Yii 2 封装。此插件允许具有嵌套依赖的多级依赖下拉列表。因此，该插件可以将普通选择输入转换为基于另一个输入或一组输入中选择的值而得出的依赖输入字段。它既适用于普通选择选项，也适用于具有 optgroups 的选择。

Select2

查看演示

Select2 小部件是 Select2 jQuery 插件 的 Yii 2 封装。此输入小部件是基于 jQuery 的选择框的替代品。它支持搜索、远程数据集和结果的无尽滚动。小部件专门针对 Bootstrap 3 进行了样式设计。如果浏览器不支持 jQuery，则小部件允许优雅地降级为普通 HTML 选择或文本输入。

Typeahead

查看演示

自动补全小部件是针对Twitter的Typeahead.js插件的Yii 2封装，并增加了某些自定义增强功能。这是一个基于jQuery的文本输入的替代品，提供搜索和自动补全功能。它受到twitter.com自动完成搜索功能的影响，并基于Twitter的typeahead.js，这是一个快速且功能齐全的自动完成库。该小部件特别针对Bootstrap 3进行样式设计。如果浏览器不支持JQuery，则允许优雅地降级为普通的HTML文本输入。您可以像其他字段一样为使用Typeahead小部件输入的模型属性设置模型验证规则。该小部件有两个变体

  • TypeaheadBasic：这是一个没有建议引擎的typeahead.js插件的基本实现。它使用JavaScript子字符串匹配器和正则表达式匹配来查询和显示建议。查看演示

  • Typeahead：这是一个具有BloodHound建议引擎和Handlebars模板编译器的typeahead.js插件的先进实现。查看演示

日期选择器

查看演示

日期选择器小部件是针对Bootstrap DatePicker插件的Yii 2封装。该插件是Stefan Petre的DatePicker（eyecon.ro）的分支，由@eternicode进行了改进。该小部件特别针对Yii框架2.0和Bootstrap 3进行样式设计，如果浏览器不支持JQuery，则允许优雅地降级为普通的HTML文本输入。该小部件支持以下标记

  • 简单输入标记
  • 组件标记 - 预加附件
  • 组件标记 - 后加附件
  • 内联/嵌入式标记
  • 日期范围标记（从和到日期）

时间选择器

查看演示

时间选择器小部件允许您使用鼠标或键盘上的箭头键轻松选择文本输入的时间。该小部件是对rendom从jdewit的时间选择器分叉的TimePicker插件的增强封装。这里使用的小部件特别针对Yii框架2.0和Bootstrap 3进行了增强。

日期时间选择器

查看演示

日期时间选择器小部件是针对Bootstrap DateTimePicker插件的Yii 2封装。该插件是@eternicode的DateTimePicker插件的分支，并增加了时间功能。该小部件在大多数方面与DatePicker小部件类似，除了它增加了时间功能且不支持范围。该小部件特别针对Yii框架2.0和Bootstrap 3进行样式设计，如果浏览器不支持JQuery，则允许优雅地降级为普通的HTML文本输入。该小部件支持以下标记

  • 简单输入标记
  • 组件标记 - 预加附件
  • 组件标记 - 后加附件
  • 内联/嵌入式标记

TouchSpin

查看演示

TouchSpin小部件是针对István Ujj-Mészáros的bootstrap-touchspin插件的Yii 2封装，并增加了某些附加增强功能。这是一个针对Bootstrap 3的移动和触摸友好型输入旋转器组件。您可以使用小部件按钮快速增加和减少输入字段中的数值和/或小数值。可以将小部件设置为包括与相关模型属性关联的模型验证规则。

文件输入

查看演示

文件输入小部件是基于Krajee的Bootstrap FileInput JQuery插件的自定义文件输入小部件。该小部件增强了默认的HTML文件输入，包括以下功能：

  • 特别针对Bootstrap 3.0设计，具有可定制的按钮、标题和预览
  • 能够选择和预览多个文件
  • 包括文件浏览和可选的移除和上传按钮。
  • 能够格式化文件选择器按钮样式
  • 上传前预览文件的功能 - 图片和/或文本（使用HTML5 FileReader API）
  • 预览多种不同类型的多个文件（包括图片和文本）
  • 设置您的上传操作/路由（默认为表单提交）。自定义上传和删除按钮。
  • 支持国际化，便于翻译成各种语言
未来计划的功能增强
  • 拖放功能
  • 重新排列预览窗口中的项目
  • 在预览窗口中对每个文件进行更好的标题说明
  • 支持预览图片和文本之外的内容（例如HTML）

该小部件适用于所有支持HTML5文件输入和文件处理API的现代浏览器。对于IE9及以下版本的浏览器，该小部件将优雅地降级为正常的HTML文件输入。该小部件受到以下博客文章和Jasny的文件输入插件的极大启发：博客文章 和 Jasny的文件输入插件。

ColorInput

查看演示

ColorInput小部件是一个针对Bootstrap设计的先进颜色选择器输入。它使用HTML5颜色输入和/或JQuery Spectrum插件的组合来渲染颜色选择器。您可以通过设置useNative选项为true来使用原生的HTML5颜色输入。否则，Spectrum插件将针对不支持浏览器版本进行polyfill。

  • 特别为Bootstrap 3.0设计，具有可自定义的标题，显示控制器的输出。
  • 支持添加前缀和后缀。
  • 允许通过控件或文本框更改输入。
  • Spectrum插件自动为不支持浏览器版本的HTML5颜色输入进行polyfill。

RangeInput

查看演示

RangeInput小部件是基于HTML5范围输入的定制范围滑动控件。该小部件通过以下功能增强了默认的HTML范围输入：

  • 特别为Bootstrap 3.0设计，具有可自定义的标题，显示控制器的输出。
  • 支持添加前缀和后缀（非常有用，用于显示最小和最大范围以及滑动测量单位）。
  • 允许通过控件或文本框更改输入。
  • 自动降级为正常的文本输入，以支持不支持的Internet Explorer版本。

SwitchInput

查看演示

SwitchInput小部件将复选框和单选按钮转换为切换开关。该插件是Bootstrap Switch插件的包装器，并特别为Bootstrap 3设计。

StarRating

查看演示

StarRating小部件是Krajee设计的Bootstrap Star Rating插件 jQuery插件的包装器。这是一个简单而强大的jQuery星级评分插件，专为Bootstrap开发。该插件注重利用纯CSS-3样式来渲染控件。

Progress

Spinner

查看演示

Spinner小部件是spin.js的包装器。它允许您添加一个动画CSS3加载旋转器，允许IE使用VML回退。由于其不是基于图像的，因此您可以配置旋转器的样式、大小、颜色和其他CSS属性。使用基于CSS3的旋转器的主要优势是，动画可以在非Ajax场景中显示给用户，例如在window.load或window.unload等事件上（因此，您可以在不使用Ajax的情况下显示页面加载进度）。

Navigation

Affix

查看演示

扩展Yii Menu小部件。此小部件提供增强的scrollspy和affix导航（最多2级），以突出显示每个页面中的部分和次级部分。Affix小部件可用于生成以下内容：

  • 侧边栏菜单：显示scrollspy/affix导航菜单作为侧边栏，和/或
  • 正文：根据传递的章节和子章节标题及内容显示正文部分。

要传递的参数有：

  • type 附加内容类型。必须是 menu 或 body。默认为 menu
  • items：附加内容项数组。请查看 附加内容组合使用示例 以获取详细信息。

注意：如果您将 header 章节固定在顶部，您必须在页眉容器中添加 CSS 类 kv-header。类似地，对于固定的页脚，您必须在页脚容器中添加类 kv-footer。这将确保附加小部件在页面上的正确定位。

侧边导航

查看演示

此小部件是一个可折叠的侧边导航菜单，旨在无缝与 Bootstrap 框架一起工作。它是基于 Bootstrap 堆叠导航 组件构建的。此小部件类扩展了 Yii 菜单小部件。默认支持 CSS 样式的 3 级子菜单，以平衡性能和可用性。您可以选择通过自定义 CSS 来扩展或减少菜单级别。

通知

警报

查看演示

扩展了 \yii\bootstrap\Alert 小部件，提供了更简单的样式和自动淡出选项。

Growl

查看演示

一个小部件，将标准的 Bootstrap 警报转换为类似“Growl”的通知。此小部件是 Bootstrap Growl 插件 的包装器。

AlertBlock

查看演示

一个警报块小部件，将多个 \kartik\widget\Alert 或 kartik\widget\Growl 小部件组合在一个单独的块中，并在当前页面上垂直堆叠渲染。您可以为您的通知选择 TYPE_ALERT 样式或 TYPE_GROWL 样式。您还可以将小部件设置为自动读取和显示会话闪存消息（这是默认设置）。或者，您可以设置和配置您自己的自定义警报块。

演示

您可以在这里看到这些小部件的用法、文档和示例。

用法

如何调用？

	// add this in your view
	use kartik\widgets\ActiveForm;
	$form = ActiveForm::begin();

ActiveForm

	// Vertical Form
	$form = ActiveForm::begin([
		'id' => 'form-signup',
		'type' => ActiveForm::TYPE_VERTICAL
	]);
  
	// Inline Form
	$form = ActiveForm::begin([
		'id' => 'form-login', 
		'type' => ActiveForm::TYPE_INLINE,
		'fieldConfig' => ['autoPlaceholder'=>true]
	]);

  	// Horizontal Form Configuration
  	$form = ActiveForm::begin([
  		'id' => 'form-signup', 
  		'type' => ActiveForm::TYPE_HORIZONTAL,
		'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
	]);

ActiveField

	// Prepend an addon text
   	echo $form->field($model, 'email', ['addon' => ['prepend' => ['content'=>'@']]]);
   	
   	// Append an addon text
	echo $form->field($model, 'amount_paid', [
  		'addon' => ['append' => ['content'=>'.00']]
	]);
	
	// Formatted addons (like icons)
	echo $form->field($model, 'phone', [
		'addon' => [
			'prepend' => [
				'content' => '<i class="glyphicon glyphicon-phone"></i>'
			]
		]
	]);
	
	// Formatted addons (inputs)
	echo $form->field($model, 'phone', [
		'addon' => [
			'prepend' => [
				'content' => '<input type="radio">'
			]
		]
	]);
	
	// Formatted addons (buttons)
	echo $form->field($model, 'phone', [
		'addon' => [
			'prepend' => [
				'content' => Html::button('Go', ['class'=>'btn btn-primary'])
			]
			'asButton' => true
		]
	]);

DepDrop

	// Normal parent select
	echo $form->field($model, 'cat')->dropDownList($catList, ['id'=>'cat-id']);

	// Dependent Dropdown
    echo $form->field($model, 'subcat')->widget(DepDrop::classname(), [
         'options' => ['id'=>'subcat-id'],
         'pluginOptions'=>[
             'depends'=>['cat-id'],
             'placeholder' => 'Select...',
             'url' => Url::to(['/site/subcat'])
         ]
     ]);

Select2

	// Normal select with ActiveForm & model
	echo $form->field($model, 'state_1')->widget(Select2::classname(), [
		'data' => array_merge(["" => ""], $data),
		'language' => 'de',
		'options' => ['placeholder' => 'Select a state ...'],
		'pluginOptions' => [
			'allowClear' => true
		],
	]);

	// Multiple select without model
	echo Select2::widget([
		'name' => 'state_2',
		'value' => '',
		'data' => $data,
		'options' => ['multiple' => true, 'placeholder' => 'Select states ...']
	]);

Typeahead

use kartik\widgets\TypeaheadBasic;

// TypeaheadBasic usage with ActiveForm and model
echo $form->field($model, 'state_3')->widget(Typeahead::classname(), [
	'data' => $data,
    'pluginOptions' => ['highlight' => true],
	'options' => ['placeholder' => 'Filter as you type ...'],
]);

// Typeahead usage with ActiveForm and model
echo $form->field($model, 'state_4')->widget(Typeahead::classname(), [
	'dataset' => [
		[
			'local' => $data,
			'limit' => 10
		]
	],
    'pluginOptions' => ['highlight' => true],
	'options' => ['placeholder' => 'Filter as you type ...'],
]);

日期选择器

use kartik\widgets\DatePicker;

// usage without model
echo '<label>Check Issue Date</label>';
echo DatePicker::widget([
	'name' => 'check_issue_date', 
	'value' => date('d-M-Y', strtotime('+2 days')),
	'options' => ['placeholder' => 'Select issue date ...'],
	'pluginOptions' => [
		'format' => 'dd-M-yyyy',
		'todayHighlight' => true
	]
]);

时间选择器

use kartik\widgets\TimePicker;

// usage without model
echo '<label>Start Time</label>';
echo TimePicker::widget([
	'name' => 'start_time', 
	'value' => '11:24 AM',
	'pluginOptions' => [
		'showSeconds' => true
	]
]);

日期时间选择器

use kartik\widgets\DateTimePicker;

// usage without model
echo '<label>Start Date/Time</label>';
echo DateTimePicker::widget([
    'name' => 'datetime_10',
    'options' => ['placeholder' => 'Select operating time ...'],
    'convertFormat' => true,
    'pluginOptions' => [
        'format' => 'd-M-Y g:i A',
        'startDate' => '01-Mar-2014 12:00 AM',
        'todayHighlight' => true
    ]
]);

TouchSpin

use kartik\widgets\TouchSpin;

echo TouchSpin::widget([
    'name' => 'volume',
    'options' => ['placeholder' => 'Adjust...'],
    'pluginOptions' => ['step' => 1]
]);

文件输入

use kartik\widgets\FileInput;

// Usage with ActiveForm and model
echo $form->field($model, 'avatar')->widget(FileInput::classname(), [
    'options' => ['accept' => 'image/*'],
]);

// With model & without ActiveForm
echo '<label class="control-label">Add Attachments</label>';
echo FileInput::widget([
    'model' => $model,
    'attribute' => 'attachment_1',
    'options' => ['multiple' => true]
]);

ColorInput

use kartik\widgets\ColorInput;

// Usage with ActiveForm and model
echo $form->field($model, 'color')->widget(ColorInput::classname(), [
    'options' => ['placeholder' => 'Select color ...'],
]);

// With model & without ActiveForm
echo '<label class="control-label">Select Color</label>';
echo ColorInput::widget([
    'model' => $model,
    'attribute' => 'saturation',
]);

RangeInput

use kartik\widgets\RangeInput;

// Usage with ActiveForm and model
echo $form->field($model, 'rating')->widget(RangeInput::classname(), [
    'options' => ['placeholder' => 'Select color ...'],
    'html5Options' => ['min'=>0, 'max'=>1, 'step'=>1],
    'addon' => ['append'=>['content'=>'star']]
]);

// With model & without ActiveForm
echo '<label class="control-label">Adjust Contrast</label>';
echo RangeInput::widget([
    'model' => $model,
    'attribute' => 'contrast',
    'addon' => ['append'=>['content'=>'%']]
]);

SwitchInput

use kartik\widgets\SwitchInput;

// Usage with ActiveForm and model
echo $form->field($model, 'status')->widget(SwitchInput::classname(), [
    'type' => SwitchInput::CHECKBOX
]);


// With model & without ActiveForm
echo SwitchInput::widget([
    'name' => 'status_1',
    'type' => SwitchInput::RADIO
]);

StarRating

use kartik\widgets\StarRating;

// Usage with ActiveForm and model
echo $form->field($model, 'rating')->widget(StarRating::classname(), [
    'pluginOptions' => ['size'=>'lg']
]);


// With model & without ActiveForm
echo StarRating::widget([
    'name' => 'rating_1',
    'pluginOptions' => ['disabled'=>true, 'showClear'=>false]
]);

Spinner

use kartik\widgets\Spinner;
<div class="well">
<?= Spinner::widget([
    'preset' => Spinner::LARGE,
    'color' => 'blue',
    'align' => 'left'
])?>
</div>

Affix

$content = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.';
$items = [[
	'url' => '#sec-1',
	'label' => 'Section 1',
	'icon' => 'play-circle',
	'content' => $content,
	'items' => [
		['url' => '#sec-1-1', 'label' => 'Section 1.1', 'content' => $content],
		['url' => '#sec-1-2', 'label' => 'Section 1.2', 'content' => $content],
		['url' => '#sec-1-3', 'label' => 'Section 1.3', 'content' => $content],
		['url' => '#sec-1-4', 'label' => 'Section 1.4', 'content' => $content],
		['url' => '#sec-1-5', 'label' => 'Section 1.5', 'content' => $content],
	],
]];

// Displays sidebar menu
echo Affix::widget([
	'items' => $items, 
	'type' => 'menu'
]);

// Displays body sections
echo Affix::widget([
	'items' => $items, 
	'type' => 'body'
]);

侧边导航

use kartik\widgets\SideNav;
     
echo SideNav::widget([
	'type' => SideNav::TYPE_DEFAULT,
	'heading' => 'Options',
	'items' => [
		[
			'url' => '#',
			'label' => 'Home',
			'icon' => 'home'
		],
		[
			'label' => 'Help',
			'icon' => 'question-sign',
			'items' => [
				['label' => 'About', 'icon'=>'info-sign', 'url'=>'#'],
				['label' => 'Contact', 'icon'=>'phone', 'url'=>'#'],
			],
		],
	],
]);

警报

use kartik\widgets\Alert;

echo Alert::widget([
	'type' => Alert::TYPE_INFO,
	'title' => 'Note',
	'titleOptions' => ['icon' => 'info-sign'],
	'body' => 'This is an informative alert'
]);

Growl

use kartik\widgets\Growl;

echo Growl::widget([
	'type' => Growl::TYPE_SUCCESS,
	'icon' => 'glyphicon glyphicon-ok-sign',
	'title' => 'Note',
	'showSeparator' => true,
	'body' => 'This is a successful growling alert.'
]);

AlertBlock

use kartik\widgets\AlertBlock;

echo AlertBlock::widget([
	'type' => AlertBlock::TYPE_ALERT,
	'useSessionFlash' => true
]);

许可证

yii2-widgets 在 BSD-3-Clause 许可证下发布。有关详细信息，请参阅捆绑的 LICENSE.md 文件。