Skip to content
Color picker widget for Yii2 framework
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
IroAsset.php
IroTransparencyAsset.php
IroWidget.php
LICENSE
README.md
composer.json

README.md

yii2-iro

Color picker widget for Yii2

yii2-iro is a widget to choose a color. You can use it in an ActiveForm like any other InputWidget in the Yii 2.0 PHP Framework.

yii2-iro is a wrapper around the excellent iro.js JavaScript color picker, created by James Daniel.

yii2-iro can appear in two modes: inline (directly in the page) or in a popup-dialog that opens when a colored button is clicked.

A demonstration of Yii2-iro is here.

Installation

Install yii2-iro in the usual way with Composer. Add the following to the require section of your composer.json file:

"sjaakp/yii2-iro": "*"

or run:

composer require sjaakp/yii2-iro

You can manually install yii2-iro by downloading the source in ZIP-format.

Using yii2-iro

Use yii2-iro just like you would use any other a InputWidget. For instance, in an ActiveForm you might have something like:

<?php
    use sjaakp\iro\IroWidget;
?>
...
<?php $form = ActiveForm::begin([
    // ...options...
]); ?>

    <?= $form->field($model, 'name') ?>
    
    <?= $form->field($model, 'favourite_color')->widget() ?>
    ?>
    ...

<?php $form = ActiveForm::end(); ?>
...

To render yii2-iro outside of an ActiveForm we could use something like:

<?php
use sjaakp\iro\IroWidget;
?>
...
<?= IroWidget::widget([
    'name' => 'iro',
    'value' => '#00ff00',
    'popup' => false
    // ...
]) ?>;
...

Options

The yii2-iro widget has all the options of a InputWidget, plus the following:

clientOptions

array Options for the underlying iro.js color picker. Default: [].

popup

boolean Determines the appearance of the yii2-iro widget.

  • false The widget appears inline, directly on the page.

  • true The widget appears as a colored button. Clicking it shows the color button in a modal dialog.

Default: true.

colorFormat

string One of the color formats available to the iro.js color picker. Default: 'hexString'.

You can’t perform that action at this time.