Yii 2.0: yii2-widgets

Collection of useful widgets for Yii Framework 2 extending functionalities for Bootstrap 3.x.
50 followers

Introduction

This extension enhances or adds functionality to existing Yii Framework 2 Widgets to make available other bundled features available in Bootstrap 3.0, new HTML 5 features, and affiliated Bootstrap extras. This extension works well together with the yii2-helpers extension.

Note: StarRating, SwitchInput, RangeInput, ColorInput, FileInput, TouchSpin, DatePicker, TimePicker, Typeahead, Select2, Affix, and SideNav navigation widgets have been NEWLY ADDED for Bootstrap 3.0.

The widgets currently available are:

Additional Widgets

This extension has now matured to contain the most needed basic widgets for Yii 2 input and navigation controls. In order to support this extension better, any additional input and navigation widgets will be created separately. Listed below are the additional widgets that are related to similar functionality like the yii2-widgets, but have been created as separate extensions (these widgets depend on kartik-v/yii2-widgets).

  • yii2-dropdown-x: Extended Bootstrap 3 dropdown menu for Yii Framework 2.0
  • yii2-nav-x: Extended Bootstrap 3 navigation menu for Yii Framework 2.0
  • yii2-context-menu: Bootstrap 3 context menu for Yii Framework 2.0
  • yii2-slider: Bootstrap 3 Slider control for Yii Framework 2.0

Form / Inputs

ActiveForm

VIEW DEMO

Extends Yii ActiveForm widget. Facilitates all three form layouts available in Bootstrap i.e. vertical, horizontal, and inline. Allows options for offsetting labels and inputs for horizontal form layout. Works closely with the extended ActiveField widget.

ActiveField

VIEW DEMO

Extends Yii ActiveField widget. Allows Bootstrap styled input group addons to be prepended or appended to textInputs. Automatically adjusts checkboxes and radio input offsets for horizontal forms. Allows, flexibility to control the labels and placeholders based on form layout style (e.g. hide labels and show them as placeholder for inline forms). The extended ActiveField functionalities available are:

  • Addons
    • Prepend Addon
    • Append Addon
    • Icon Addon
    • Input Addon
    • Button Addon
    • Button Dropdown Addon
    • Segmented Button Addon
    • Prepend and Append
    • Input Group Settings
  • Inputs
    • Checkbox
    • Radio
    • Checkbox List
    • Radio List
    • Static Input
    • Range Input
    • HTML 5 Input
  • Multi Select
    • Vertical Form
    • Horizontal Form
    • Radio List
    • Display Options

DepDrop

VIEW DEMO

The DepDrop widget is a Yii 2 wrapper for the dependent-dropdown jQuery plugin by Krajee. This plugin allows multi level dependent dropdown with nested dependencies. The plugin thus enables to convert normal select inputs to a dependent input field, whose options are derived based on value selected in another input/or a group of inputs. It works both with normal select options and select with optgroups as well.

Select2

VIEW DEMO

The Select2 widget is a Yii 2 wrapper for the Select2 jQuery plugin. This input widget is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. The widget is specially styled for Bootstrap 3. The widget allows graceful degradation to a normal HTML select or text input, if the browser does not support JQuery. You can setup model validation rules for a model attribute that uses Select2 widget for input like any other field.

Typeahead

VIEW DEMO

The Typeahead widget is a Yii 2 wrapper for for the Twitter Typeahead.js plugin with certain custom enhancements. This input widget is a jQuery based replacement for text inputs providing search and typeahead functionality. It is inspired by twitter.com's autocomplete search functionality and based on Twitter's typeahead.js which the plugin documentation mentions as a fast and fully-featured autocomplete library. The widget is specially styled for Bootstrap 3. The widget allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. You can setup model validation rules for a model attribute that uses Typeahead widget for input like any other field. The widget comes in two variants:

  • TypeaheadBasic: This widget is a basic implementation of the typeahead.js plugin without any suggestion engine. It uses a javascript substring matcher and Regular Expression matching to query and display suggestions. VIEW DEMO

  • Typeahead: This widget is an advanced implementation of the typeahead.js plugin with the BloodHound suggestion engine and the Handlebars template compiler. VIEW DEMO

DatePicker

VIEW DEMO

The DatePicker widget is a Yii 2 wrapper for the Bootstrap DatePicker plugin. The plugin is a fork of Stefan Petre's DatePicker (of eyecon.ro), with improvements by @eternicode. This widget is specially styled for Yii framework 2.0 and Bootstrap 3. The widget allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. This widget supports these markups:

  • Simple Input Markup
  • Component Markup - Addon Prepended
  • Component Markup - Addon Appended
  • Date Range Markup (from and to dates)
  • Inline / Embedded Markup

TimePicker

VIEW DEMO

The TimePicker widget allows you to easily select a time for a text input using your mouse or keyboards arrow keys. The widget is a wrapper enhancement of the TimePicker plugin by rendom forked from jdewit's TimePicker. This widget as used here has been specially enhanced for Yii framework 2.0 and Bootstrap 3.

DateTimePicker

VIEW DEMO

The DateTimePicker widget is a Yii 2 wrapper for the Bootstrap DateTimePicker plugin. The plugin is a fork of the DateTimePicker plugin by @eternicode and adds the time functionality. The widget is similar to the DatePicker widget in most aspects, except that it adds the time functionality and does not support ranges. The widget is specially styled for Yii framework 2.0 and Bootstrap 3 and allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. The widget supports these markups:

  • Simple Input Markup
  • Component Markup - Addon Prepended
  • Component Markup - Addon Appended
  • Inline / Embedded Markup

TouchSpin

VIEW DEMO

The TouchSpin widget is a Yii 2 wrapper for for the bootstrap-touchspin plugin by István Ujj-Mészáros, with certain additional enhancements. This input widget is a mobile and touch friendly input spinner component for Bootstrap 3. You can use the widget buttons to rapidly increase and decrease numeric and/or decimal values in your input field. The widget can be setup to include model validation rules for the related model attribute.

FileInput

VIEW DEMO

Note: The FileInput plugin has been upgraded to v1.5.0 and with this release, it allows you to set an initial preview and caption of files (for update scenarios). Refer usage demo or plugin docs and plugin demos.

The FileInput widget is a customized file input widget based on HTML5 file input. The widget enhances the default HTML file input with various features including the following:

  • Specially styled for Bootstrap 3.0 with customizable buttons, caption, and preview
  • Ability to select and preview multiple files
  • Includes file browse and optional remove and upload buttons.
  • Ability to format your file picker button styles
  • Ability to preview files before upload - images and/or text (uses HTML5 FileReader API)
  • Ability to preview multiple files of different types (both images and text)
  • Set your upload action/route (defaults to form submit). Customize the Upload and Remove buttons.
  • Internationalization enabled for easy translation to various languages

Future planned enhancements:

  • Drag and drop functionality
  • Realign/Rearrange the items in preview window
  • Better captioning for each file in the preview window
  • Support for previewing content other than image and text (e.g. HTML)

The widget runs on all modern browsers supporting HTML5 File Inputs and File Processing API. For browser versions IE9 and below, this widget will gracefully degrade to normal HTML file input. The widget is vastly inspired by this blog article and Jasny's File Input plugin.

ColorInput

VIEW DEMO

The ColorInput widget is an advanced ColorPicker input styled for Bootstrap. It uses a combination of the HTML5 color input and/or the JQuery Spectrum Plugin for rendering the color picker. You can use the Native HTML5 color input by setting the useNative option to true. Else, the Spectrum plugin polyfills for unsupported browser versions.

  • Specially styled for Bootstrap 3.0 with customizable caption showing the output of the control.
  • Ability to prepend and append addons.
  • Allow the input to be changed both via the control or the text box.
  • The Spectrum plugin automatically polyfills the HTML5 color input for unsupported browser versions.

RangeInput

VIEW DEMO

The RangeInput widget is a customized range slider control widget based on HTML5 range input. The widget enhances the default HTML range input with various features including the following:

  • Specially styled for Bootstrap 3.0 with customizable caption showing the output of the control.
  • Ability to prepend and append addons (very useful to show the min and max ranges, and the slider measurement unit).
  • Allow the input to be changed both via the control or the text box.
  • Automatically degrade to normal text input for unsupported Internet Explorer versions.

SwitchInput

VIEW DEMO

The SwitchInput widget turns checkboxes and radio buttons into toggle switches. The plugin is a wrapper for the Bootstrap Switch Plugin and is specially styled for Bootstrap 3.

StarRating

VIEW DEMO

The StarRating widget is a wrapper for the Bootstrap Star Rating Plugin JQuery Plugin designed by Krajee. This plugin is a simple yet powerful JQuery star rating plugin for Bootstrap. Developed with a focus on utlizing pure CSS-3 styling to render the control.

Progress

Spinner

VIEW DEMO

The Spinner widget is a wrapper for the spin.js. It enables you to add an animated CSS3 loading spinner which allows VML fallback for IE. Since, its not image based, it allows you to configure the spinner style, size, color, and other CSS attributes. The major advantage of using the CSS3 based spinner, is that the animation can be made visible to user for non-ajax based scenarios. For example on events like window.load or window.unload (thereby enabling you to show a page loading progress without using ajax).

Navigation

Affix

VIEW DEMO

Extends Yii Menu widget. This widget offers a scrollspy and affixed enhanced navigation (upto 2-levels) to highlight sections and secondary sections in each page. The affix widget can be used to generate both the:

  • Sidebar Menu: Displays the scrollspy/affix navigation menu as a sidebar, and/or
  • Main Body: Displays the main body sections based on the section & subsection headings and content passed.

SideNav

VIEW DEMO

This widget is a collapsible side navigation menu built to seamlessly work with Bootstrap framework. It is built over Bootstrap stacked nav component. This widget class extends the Yii Menu widget. Upto 3 levels of submenus are by default supported by the CSS styles to balance performance and useability. You can choose to extend it to more or less levels by customizing the CSS.

Notification

Alert

VIEW DEMO

Extends the \yii\bootstrap\Alert widget with more easy styling and auto fade out options.

Growl

VIEW DEMO

A widget that turns standard Bootstrap alerts into "Growl-like" notifications. This widget is a wrapper for the Bootstrap Growl plugin by remabledesigns.

AlertBlock

VIEW DEMO

Alert block widget that groups multiple \kartik\widget\Alert or kartik\widget\Growl widgets in one single block and renders them stacked vertically on the current page. You can choose the TYPE_ALERT style or the TYPE_GROWL style for your notifications. You can also set the widget to automatically read and display session flash messages (which is the default setting). Alternatively, you can setup and configure your own block of custom alerts.

Requirements

  • Yii 2.0 (dev-master)
  • PHP 5.4
  • Bootstrap 3.0

Note: This extension mandatorily requires Yii Framework 2. The framework is under active development and the first stable release of Yii 2 is expected in early 2014.

Installation

The preferred way to install this extension is through composer.

Note: Before you install, remember to check if the minimum-stability is set to dev in your composer.json file in the application root.

Either run:

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

or add:

"kartik-v/yii2-widgets": "dev-master"

to the require section of your composer.json file.

Usage

ActiveForm

/* 
 * Examples
 */
    // add this in your view
    use kartik\widgets\ActiveForm;
 
    // Vertical Form
    $form = ActiveForm::begin([
        'id' => 'form-signup',
        'type' => ActiveForm::TYPE_VERTICAL
    ]);
 
    // Horizontal Form Configuration
    $form = ActiveForm::begin([
        'id' => 'form-signup', 
        'type' => ActiveForm::TYPE_HORIZONTAL,
        'formConfig' => ['labelSpan' => 2, 'deviceSize' => ActiveForm::SIZE_SMALL]
    ]);
 
    // Inline Form
    $form = ActiveForm::begin([
        'id' => 'form-login', 
        'type' => ActiveForm::TYPE_INLINE
    ]);

ActiveField

/* 
 * Examples
 */
    // 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\Typeahead;
 
// 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 ...'],
]);

DatePicker

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

TimePicker

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

DateTimePicker

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

FileInput

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

Alert

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

Report

License

yii2-widgets is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.

Resources

Total 20 comments

#17964 report it
Kartik V at 2014/08/19 01:26am
Re: Data Table

@paskuale - will check this when I get time.

#17888 report it
paskuale at 2014/08/06 09:29am
datatable 1.10.2

jQuery Datatable plugin don't exist yet ? :) would be well and good

#17861 report it
sn4k3 at 2014/07/31 03:36pm
Re: PHP Date Formatter

Yes, it works now. Thanks for all your work, you are amazing fast with reply and updates :)

#17860 report it
Kartik V at 2014/07/31 03:28pm
PHP Date Formatter

@snk4k3 - this is probably because you are using the DateControl extension. So its not ideally here - you may want to be posting this issue in yii2-datecontrol extension.

Anyway, the DateControl been upgraded with the dependency on PHP Date Formatter plugin. You may try to update again via composer after sometime and update.

#17859 report it
sn4k3 at 2014/07/31 03:07pm
Invalid Parameter – yii\base\InvalidParamException

Invalid Parameter – yii\base\InvalidParamException

The file or directory to be published does not exist: D:\wamp\www(...)/vendor/kartik-v/php-date-formatter.

With last composer update im reciving this error

#17507 report it
ThePr0f3550r at 2014/06/24 10:10pm
Please, Create Gii For Your Amazing Extension

I hope you create gii for Your extension.. and gather your extension to be one extension.. so it more easier for newbie... thx

#17115 report it
Kartik V at 2014/05/05 09:18am
Dependent Dropdown Now Supports Select2

Added support for DepDrop widget to support \kartik\widgets\Select2 widget. Refer documentation and demos.

#17094 report it
Kartik V at 2014/05/02 09:21am
New: Dependent Dropdown Widget Added

New DepDrop widget added. This is a Yii 2 wrapper for the dependent-dropdown jQuery plugin by Krajee. This plugin allows multi level dependent dropdown with nested dependencies.

#17028 report it
Kartik V at 2014/04/25 02:30pm
Star Rating Widget Upgraded

Star rating plugin is upgraded to NEW RELEASE 2.0. The plugin is vastly enhanced with various features like Fractional Ratings, Slide to select, css3 animations, RTL input and more.

Refer updated plugin documentation and demos.

This is reflected in the yii2-widgets bundle as well.

#16958 report it
Kartik V at 2014/04/16 10:35am
Typeahead widget upgraded

The Typeahead widget has been upgraded to the latest version of the typeahead.js plugin. The widget comes in 2 variants:

  • TypeaheadBasic: This widget is a basic implementation of the typeahead.js plugin without any suggestion engine. It uses a javascript substring matcher and Regular Expression matching to query and display suggestions. VIEW DEMO

  • Typeahead: This widget is an advanced implementation of the typeahead.js plugin with the BloodHound suggestion engine and the Handlebars template compiler. VIEW DEMO

In addition, a widget still has been kept TypeaheadOld that uses the previous version of the plugin for people to transition slowly.

#16864 report it
Kartik V at 2014/04/04 05:29pm
Notification Widgets Added

Fourth category of widgets added: Notification widgets.

Consists of these new widgets:

  • Alert: Extends the \yii\bootstrap\Alert widget with more styling options and fade out controls. Refer the interactive demo.
  • Growl: Builds upon the bootstrap growl plugin to render growl like notifications - with numerous configuration options.
  • AlertBlock: Group alerts in a block with automatic fade delay dependencies. This is an enhanced version of the Alert widget in advanced app --- you can use this widget typically in your view layout file to read session message flashes and render them using the Alert or Growl widget types. You can also fade out alerts, and use various styling options provided by the 2 widgets.
#16757 report it
Kartik V at 2014/03/25 10:27am
Upgraded to ver 2.1.0

The extension has been updated to version 2.1.0. New changes:

  1. Widgets categorized into groups. Refer details here
    • Input Widgets
    • Progress Widgets
    • Navigation Widgets
  2. Added DateTimePicker widget enhanced for Bootstrap 3.x. Refer details and demo.
  3. Added Spinner widget based on spin.js - an animated CSS3 loading spinner with VML fallback for IE. Refer details and demo.
#16727 report it
Kartik V at 2014/03/23 01:09am
Reset Steps Incorrect

You have not followed the steps exactly as mentioned. Steps 2 and 3 seems to have been missed. Firstly (as mentioned in install instructions), edit your composer.json in your yii app root directory and add "kartik-v/yii2-widgets": "dev-master" to the require section of your composer.json file.

Then these 3 steps to reset your packages:

  1. Backup your vendor folder. Then delete all files in this folder except .gitignore.
  2. Delete composer.lock file in your yii app root directory.
  3. Reinstall your packages by issuing this command below:

composer install --prefer-dist

or (if you do not have an alias for composer)... then

php composer.phar install --prefer-dist

If you still face a specific issue... you can raise it on github (with the relevant errors and app settings).

#16723 report it
EmadGh at 2014/03/22 05:02pm
Getting the same error like @nkdos

Hi, What should we do ? :(

#16718 report it
nkdos at 2014/03/22 01:11pm
What am I doing wrong?

@Kartik-V,

Now I just get an error, but I can not fix it.

  1. Delete the entire contents of "vendor" directory
  2. Enter the project directory
  3. curl -s https://getcomposer.org/installer | php
  4. php composer.phar require kartik-v/yii2-widgets "dev-master"

and I get the following:

Your requirements could not be resolved to an installable set of packages.

Problem 1 - Installation request for kartik-v/yii2-widgets dev-master -> satisfiable by kartik-v/yii2-widgets[dev-master]. - kartik-v/yii2-widgets dev-master requires yiisoft/yii2 dev-master -> no matching package found.

Potential causes: - A typo in the package name - The package is not available in a stable-enough version according to your minimum-stability setting see https://groups.google.com/d/topic/composer-dev/_g3ASeIFlrc/discussion for more details.

Read http://getcomposer.org/doc/articles/troubleshooting.md for further common problems.

Installation failed, reverting ./composer.json to its original content.

#16714 report it
Kartik V at 2014/03/22 11:55am
Yii Composer Install Issue

@nkdos, your yii or composer installation looks corrupted. Check the Yii 2 Docs to install yii if you are installing for the first time.

If you have already installed successfully Yii earlier... you may try to reset your composer packages via the following:

  1. Backup your vendor folder. Then delete all files in this folder except .gitignore.
  2. Delete composer.lock file in your yii app root directory.
  3. Reinstall your packages by issuing this command

composer install --prefer-dist

#16713 report it
nkdos at 2014/03/22 11:39am
What am I doing wrong?

When I try to use composer, I get the following message:

Problem 1 - The requested package kartik-v/yii2-widgets 1.0.0 could not be found.

Problem 2 - Installation request for yiisoft/yii2 dev-master -> satisfiable by yiisoft/yii2[dev-master]. - yiisoft/yii2 dev-master requires yiisoft/yii2-composer * -> no matching package found.

Problem 3 - yiisoft/yii2 dev-master requires yiisoft/yii2-composer * -> no matching package found. - yiisoft/yii2-bootstrap dev-master requires yiisoft/yii2 * -> satisfiable by yiisoft/yii2[dev-master]. - Installation request for yiisoft/yii2-bootstrap dev-master -> satisfiable by yiisoft/yii2-bootstrap[dev-master].

I have to download something else? or am I doing something wrong?

#16626 report it
Kartik V at 2014/03/12 09:49am
ColorInput upgraded for all browsers

The ColorInput widget has been upgraded to use the Spectrum JQuery Plugin (which is an advanced color picker using pure CSS and JQuery - no images). You have an option to use the native HTML5 color input (which is not supported in all browsers). The plugin automatically polyfills for input type="color" if browser does not support it.

View details and demo.

#16483 report it
Kartik V at 2014/02/27 10:19am
StarRating added

New widget StarRating added styled for Bootstrap 3. The StarRating widget is a wrapper for the Bootstrap Star Rating Plugin JQuery Plugin designed by Krajee. This plugin is a simple yet powerful JQuery star rating plugin for Twitter Bootstrap. Developed with a focus on utlizing pure CSS-3 styling to render the control.

#16427 report it
Kartik V at 2014/02/22 01:35am
SwitchInput Added

New widget SwitchInput added styled for Bootstrap 3. The SwitchInput widget turns checkboxes and radio buttons list into toggle switches.

Leave a comment

Please to leave your comment.

Create extension
Downloads
No downloadable files yet