README

# Yii2 的 Awesome Bootstrap 复选框

在 Yii2 中实现 Awesome Bootstrap Checkbox。

此扩展覆盖了 checkbox、radio、checkboxList 和 radioList 的 ActiveField 函数。

此外，还包括 CheckboxColumn，以在 GridView 小部件中实现相同的出色复选框。

## 安装

### 安装扩展

安装此扩展的首选方式是通过 composer。

运行以下命令之一

php composer.phar require --prefer-dist justinvoelker/yii2-awesomebootstrapcheckbox "*"

或在您的 composer.json 文件的 require 部分

"justinvoelker/yii2-awesomebootstrapcheckbox": "*"

添加

样式

按照以下说明之一使用必要的样式以使用出色的 Bootstrap 复选框

选项 1：手动合并样式表

打开您的 vendors\justinvoelker\yii2-awesomebootstrapcheckbox\css 目录，并将适当的样式添加到您自己的样式表或包含到您的 less/scss 文件中。

选项 2：包含提供的资产包

将 justinvoelker\awesomebootstrapcheckbox\Asset 添加为 assets\AppAsset 文件中的依赖项。它应该看起来像以下内容

public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
    'justinvoelker\awesomebootstrapcheckbox\Asset',
];

## 使用方法

### ActiveField

要在您的 ActiveForm 中使用出色的 Bootstrap 复选框，只需指定 ActiveForm 的 fieldClass 属性，如下所示

$form = ActiveForm::begin([
    'fieldClass' => 'justinvoelker\awesomebootstrapcheckbox\ActiveField',
]);

指定 fieldClass 后，根据需要简单地使用 checkbox、radio、checkboxList 或 radioList。以下是一些使用示例。

// Disabled checkbox with a customized label
$form->field($model, 'attribute')->checkbox(['label' => 'You cannot check this checkbox', 'disabled'=>true])

// Radio with the bootstrap primary color
$form->field($model, 'attribute')->radio(['divOptions' => ['class' => 'checkbox-primary']])

// List of disabled checkboxes 
$form->field($model, 'attribute')->checkboxList([1 => 'First', 2 => 'Second', 3 => 'Third'], ['itemOptions' => ['disabled' => true]])

// Inline list of enabled radio buttons with the bootstrap danger color
$form->field($model, 'attribute')->inline()->radioList([1 => 'First', 2 => 'Second', 3 => 'Third'], ['itemOptions' => ['disabled' => false, 'divOptions' => ['class' => 'radio-danger']]])

请注意，有时对于给定的输入实际上有两个标签：一个用于整个字段，一个用于该特定的复选框或单选按钮。指定 label() 将设置整个字段的标签，指定 label itemOption 将更改单个 checkbox() 或 radio() 按钮的标签。

### CheckboxColumn

要创建一个键值对的 PHP 数组（其中键是标签，值是该标签的频率），请使用 TaggingQuery。

'columns' => [
    // ...
    [
        'class' => 'justinvoelker\awesomebootstrapcheckbox\CheckboxColumn',
        // you may configure additional properties here
    ],
]

额外的属性示例可以是限制复选框列的宽度：'contentOptions' => ['style' => 'width: 25px;'],

## 致谢 Awesome Bootstrap Checkbox