README

yii2-widgets

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

注意：此扩展已在2015年12月5日发布的v3.4.1版本中得到重写。自v3.4.0版本发布以来，此扩展包中的每个小部件都已按逻辑重新分组并拆分为单独的子存储库。此更改是为了允许开发者在需要时灵活地单独安装或安装特定的小部件（通过composer）。然而，对于新用户来说，安装此包应是最简单的方法之一，一次即可获得所有这些重要的子存储库。此更改不会影响已使用先前扩展版本的用户向后兼容性。

此包中可用的小部件

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

• yii2-krajee-base
• yii2-widget-activeform
• yii2-widget-affix
• yii2-widget-alert
• yii2-widget-colorinput
• yii2-widget-datepicker
• yii2-widget-datetimepicker
• yii2-widget-depdrop
• yii2-widget-fileinput
• yii2-widget-growl
• yii2-widget-rangeinput
• yii2-widget-rating
• yii2-widget-select2
• yii2-widget-sidenav
• yii2-widget-spinner
• yii2-widget-switchinput
• yii2-widget-timepicker
• yii2-widget-touchspin
• yii2-widget-typeahead

其他相关小部件

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

• yii2-dropdown-x：为Yii 2.0扩展Bootstrap 3下拉菜单
• yii2-nav-x：为Yii 2.0扩展Bootstrap 3导航菜单
• yii2-context-menu：为Yii 2.0提供Bootstrap 3上下文菜单
• yii2-slider：为Yii 2.0提供Bootstrap 3滑动控件
• yii2-sortable：使用简单的拖放创建可排序的列表和网格。
• yii2-sortable-input：允许您存储排序顺序的yii2-sortable输入小部件。
• yii2-money：为Yii 2.0提供掩码货币输入小部件。
• yii2-checkbox-x：基于 Bootstrap 3 的扩展复选框小部件，支持三种状态和更多样式，适用于 Yii 2.0。
• yii2-date-range：适用于 Yii 2.0 的扩展 Bootstrap 3 日期范围选择小部件。
• 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小部件是Yii 2对Select2 jQuery插件的封装。这个输入小部件是用于选择框的jQuery替代品，它支持搜索、远程数据集以及结果的无限滚动。该小部件特别为Bootstrap 3进行了样式设计。如果浏览器不支持jQuery，该小部件可以优雅地降级为正常的HTML选择框或文本输入。

自动完成输入

查看演示

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

• 自动完成基本：这个小部件是typeahead.js插件的基本实现，没有任何建议引擎。它使用JavaScript子串匹配器和正则表达式匹配来查询和显示建议。查看演示

• 自动完成：这个小部件是typeahead.js插件的先进实现，具有BloodHound建议引擎和Handlebars模板编译器。查看演示

日期选择器

查看演示

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

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

时间选择器

查看演示

时间选择器小部件允许您使用鼠标或键盘上的箭头键轻松选择文本输入的时间。该小部件是rendom基于TimePicker插件的增强封装，该插件是jdewit的TimePicker的分支。这里使用的小部件已经专门增强以适用于Yii框架2.0和Bootstrap 3。

日期时间选择器

查看演示

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

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

触控旋转

查看演示

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

文件输入

查看演示

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

• 特别为Bootstrap 3.0设计，带有可定制的按钮、标题和预览
• 能够选择和预览多个文件
• 包含文件浏览、可选的移除和上传按钮。
• 能够格式化文件选择按钮样式
• 能够在上传前预览文件 - 图片和/或文本（使用HTML5 FileReader API）
• 能够预览不同类型的多个文件（包括图片和文本）
• 设置上传操作/路由（默认为表单提交）。可自定义上传和移除按钮。
• 支持国际化，便于翻译成各种语言

未来计划的功能增强

• 拖放功能
• 重新排列预览窗口中的项目
• 为预览窗口中的每个文件提供更好的标题
• 支持预览除了图片和文本之外的内容（例如HTML）

该小部件运行在所有支持HTML5文件输入和文件处理API的现代浏览器上。对于IE9及以下版本，此小部件将优雅地降级为正常的HTML文件输入。该小部件深受以下博客文章和Jasny的File Input插件的启发。

颜色输入

查看演示

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

• 特别为Bootstrap 3.0设计，带有可定制的标题，显示控件输出。
• 能够添加和附加附加组件。
• 允许通过控件或文本框更改输入。
• Spectrum插件自动为不支持的浏览器版本提供HTML5颜色输入的polyfill。

范围输入

查看演示

范围输入小部件是基于HTML5范围输入的定制范围滑块控件。该小部件增强了默认的HTML范围输入，包括以下功能：

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

切换输入

查看演示

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

星级评分

查看演示

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

进度条

微调器

查看演示

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

导航

锚点

查看演示

扩展Yii Menu小部件。此小部件提供了一种增强的导航（最多2级），包括scrollspy和affixed，以突出显示每个页面中的部分和次要部分。锚点小部件可以用来生成

• 侧边栏菜单：将scrollspy/affix导航菜单显示为侧边栏，以及/或
• 主体：根据传递的标题和内容显示主要部分。

传递的参数包括

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

注意：如果您将header部分固定在顶部，您必须将CSS类kv-header添加到头部容器中。同样，对于固定的页脚，您必须将类kv-footer添加到您的页脚容器中。这将确保锚点小部件在页面上的正确定位。

侧边导航

查看演示

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

通知

警报

查看演示

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

Growl

查看演示

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

警报块

查看演示

警报块小部件将多个\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 ...']
	]);

自动完成输入

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
    ]
]);

触控旋转

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]
]);

颜色输入

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',
]);

范围输入

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'=>'%']]
]);

切换输入

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
]);

星级评分

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]
]);

微调器

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

锚点

$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.'
]);

警报块

use kartik\widgets\AlertBlock;

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

贡献者

代码贡献者

此项目得益于所有贡献者的贡献。[贡献]。

财务贡献者

成为财务贡献者，帮助我们维持我们的社区。[贡献]

个人

组织

使用您的组织支持此项目。您的标志将在此处显示，并带有指向您网站的链接。[贡献]

许可

yii2-widgets 采用 BSD-3-Clause 许可协议发布。有关详细信息，请参阅附带文件 LICENSE.md。