lotltd/yii2-widgets

为 Yii Framework 2.0 提供的实用小部件集合，扩展了 Bootstrap 的功能

维护者

详细信息

github.com/lotltd/yii2-widgets

主页

源代码

资助包维护！
开放集体

安装: 42

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 177

类型:yii2-extension

3.4.2 2020-09-01 19:00 UTC

Requires

BSD-3-Clause 377a11b972edcbebd1de03cfc3d81d2185deb16f

formextensionwidgetyii2

This package is not auto-updated.

Last update: 2024-09-26 13:40:40 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以获取其要求和依赖项。阅读有关在您的应用的composer.json中设置minimum-stability设置的网络提示/wiki。

安装

运行以下命令之一：

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

或添加以下内容到您的composer.json文件的require部分：

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

to the require section of your composer.json file.

版本更新

有关各种版本变更的详细信息，请参阅变更日志。

当前在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的select框的替代品。它支持搜索、远程数据集和结果的无穷滚动。小部件专门为Bootstrap 3进行样式设计。如果浏览器不支持jQuery，则允许优雅降级为常规HTML选择或文本输入。

Typeahead

查看演示

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

  • TypeaheadBasic：此小部件是typeahead.js插件的简单实现，没有任何建议引擎。它使用javascript子字符串匹配器和正则表达式匹配来查询和显示建议。查看演示

  • Typeahead：此小部件是typeahead.js插件的先进实现，包括BloodHound建议引擎和Handlebars模板编译器。查看演示

日期选择器

查看演示

日期选择器小部件是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的移动和触摸友好输入旋转组件。您可以使用小部件按钮快速增加和减少输入字段中的数值和/或小数值。可以将小部件设置为包括相关模型属性的模型验证规则。

文件输入

查看演示

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

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

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

ColorInput

查看演示

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

  • 特别为Bootstrap 3.0设计，具有可自定义的标题，显示控件输出。
  • 可以预先添加和附加附加组件。
  • 允许通过控件或文本框更改输入。
  • Spectrum插件自动为不支持的浏览器版本polyfillHTML5颜色输入。

RangeInput

查看演示

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

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

SwitchInput

查看演示

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

StarRating

查看演示

StarRating小部件是Krajee设计的Bootstrap星评级插件的包装器 jQuery 插件。这是一个简单但功能强大的jQuery星评级插件，专为Bootstrap开发。它侧重于利用纯CSS-3样式来渲染控件。

进度

Spinner

查看演示

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

导航

Affix

查看演示

扩展了 Yii 菜单小部件。此小部件提供了一种增强的导航功能，包括 滚动定位 和 固定定位（最多2级），以突出显示每页的章节和二级章节。固定定位小部件可用于生成以下内容：

  • 侧边栏菜单：将滚动定位/固定定位导航菜单显示为侧边栏，以及/或者
  • 主体内容：根据传递的章节和子章节标题及内容显示主要部分。

需要传递的参数有

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

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

SideNav

查看演示

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

通知

警报

查看演示

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

Growl

查看演示

一个将标准的 Bootstrap 警报转换为 "Growl-like" 通知的小部件。此小部件是 remabledesigns 的 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'
]);

SideNav

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 文件。