3ch3r46/yii2-bootui

适用于 yii 2 框架的 Bootstrap 3 小部件。

维护者

详细信息

bitbucket.org/3ch3r46/yii2-bootui

主页

源代码

问题

Wiki

安装次数: 34,322

依赖者: 1

建议者: 0

安全: 0

类型:yii2-extension

dev-master 2014-12-16 00:53 UTC

Requires

MIT 7e07934c2719f5d38543cc9d7073399ce2de858b

  • Moh Khoirul Anam <3ch3r46.woop@gmail.com>

cssformbootstrapJSextensionnavigationwidgetnavbarbuttondropdownyii2

This package is auto-updated.

Last update: 2024-08-29 03:47:19 UTC

README

适用于 yii 2 框架的 Bootstrap 3 小部件。

安装

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

运行以下命令之一：

php composer.phar require --prefer-dist 3ch3r46/yii2-bootui "*"

或者

"3ch3r46/yii2-bootui": "*"

将以下内容添加到您的 composer.json 文件的 require 部分中。

使用方法

扩展安装完成后，您可以在代码中简单地通过以下方式使用它：

表单

示例

<?php
$form = bootui\ActiveForm::begin(['type' => 'vertical']);

     echo Html::tag('h1', 'Sign In Form', ['class' => 'page-header']);

     echo $form->field($model, 'username')->textInput()->prepend('Username')->hiddenLabel();

     echo $form->field($model, 'password')->passwordInput()->prepend('Password')->hiddenLabel();

     echo Button::submit('Sign In');

bootui\ActiveForm::end();

属性字段

1. 预加

预加是 Bootstrap 功能输入组附加组件。通过在任意文本输入的两侧添加文本或按钮来扩展表单控件。要使用此选项，请参考以下代码：仅用于文本

<?php
$form->field($model, 'attribute')->prepend('Prepend Text');

用于按钮、ButtonDropdown、ButtonGroup、ButtonLoading 的预加

<?php
$form->field($model, 'attribute')->prepend(ClassName, $buttonConfig);

// Button
$form->field($model, 'attribute')->prepend(Button::className(), ['label' => 'Button']);

// ButtonDropdown
$form->field($model, 'attribute')->prepend(ButtonDropdown::className(), [
	'label' => 'Dropdown', 
	'items' => [
		['label' => 'Index', 'url' => ['index']],
		['label' => 'About', 'url' => ['about']],
		['label' => 'Help', 'url' => ['help']],
	],
]);

// ButtonGroup
$form->field($model, 'attribute')->prepend(ButtonGroup::className(), [
	'buttons' => [
		Button::widget(['label' => 'Index', 'url' => ['index']]),
		Button::widget(['label' => 'About', 'url' => ['about']]),
	],
]);

// ButtonLoading
$form->field($model, 'attribute')->prepend(ButtonLoading::className(), [
	'loadingText' => 'Button is loading . . .',
	'completeText' => 'Button is complete loading . . .',
	'loadingTimeout' => 5, //second
	'completeTimeout' => 2, //second
]);

2. 附加

附加是 Bootstrap 功能输入组附加组件。通过在任意文本输入的两侧添加文本或按钮来扩展表单控件。要使用此选项，请参考以下代码

仅用于文本

<?php
$form->field($model, 'attribute')->append('Append Text');

用于按钮、ButtonDropdown、ButtonGroup、ButtonLoading 的附加

<?php
$form->field($model, 'attribute')->append(ClassName, $buttonConfig);

// Button
$form->field($model, 'attribute')->append(bootui\Button::className(), ['label' => 'Button']);

// ButtonDropdown
$form->field($model, 'attribute')->append(bootui\ButtonDropdown::className(), [
	'label' => 'Dropdown', 
	'items' => [
		['label' => 'Index', 'url' => ['index']],
		['label' => 'About', 'url' => ['about']],
		['label' => 'Help', 'url' => ['help']],
	],
]);

// ButtonGroup
$form->field($model, 'attribute')->append(bootui\ButtonGroup::className(), [
	'buttons' => [
		Button::widget(['label' => 'Index', 'url' => ['index']]),
		Button::widget(['label' => 'About', 'url' => ['about']]),
	],
]);

// ButtonLoading
$form->field($model, 'attribute')->append(bootui\ButtonLoading::className(), [
	'loadingText' => 'Button is loading . . .',
	'completeText' => 'Button is complete loading . . .',
	'loadingTimeout' => 5, //second
	'completeTimeout' => 2, //second
]);

3. 大小

大小类型是 Bootstrap 功能输入选项。创建与按钮大小匹配的更高或更短的表单控件。有效值是 'sm'（小）和 'lg'（大）。要使用此选项，请参考以下代码

<?php
$form->field($model, 'attribute')->size('sm');

4. 列包装

列包装表单控件是 Bootstrap 网格系统。将输入和包装标签包裹在网格列中，或任何自定义父元素中，以轻松强制执行所需的宽度。有效值是 string|array 列包装有效选项值有 label 和 input。默认值为标签 col-sm-3 和输入 col-sm-6。要使用此选项，请参考以下代码

数组模式示例

<?php
$form->field($model, 'attribute')->wrap([
	'label' => 'col-sm-3', 
	'input' => 'col-sm-6',
]);

字符串模式示例

<?php
// please look this wrap('label&input') for use the string mode
// Use for label and input
$form->field($model, 'attribute')->wrap('col-sm-3&col-sm-6');

// Use for label only
$form->field($model, 'attribute')->wrap('col-sm-3&');

// Use for input only
$form->field($model, 'attribute')->wrap('&col-sm-6');

5. 隐藏标签

隐藏标签是隐藏表单标签的选项。要使用此选项，请参考以下代码

<?php
$form->field($model, 'attribute')->hiddenLabel();

// OR

$form->field($model, 'attribute')->label(false);

6. 隐藏错误

隐藏错误是隐藏 Yii 错误中默认错误报告的选项。要使用此选项，请参考以下代码

<?php
$form->field($model, 'attribute')->hiddenError();

7. 标签到占位符

标签到占位符是生成表单控件中占位符的选项。要使用此选项，请参考以下代码

<?php
$form->field($model, 'attribute')->labelToPlaceholder();

8. 占位符

占位符是默认 html 输入元素的属性选项。指定一个简短提示，说明 <input> 和 <textarea> 元素预期的值。要使用此选项，请参考以下代码

<?php
$form->field($model, 'attribute')->placeholder('placeholder text . . .');

9. 无组

无组是删除生成字段 from-group 的选项。要使用此选项，请参考以下代码

<?php
$form->field($model, 'attribute')->noGroup();

10. 隐藏

隐藏是隐藏表单字段标签、表单字段控件、表单字段错误、表单字段提示的选项。要使用此选项，请参考以下代码

<?php
$form->field($model, 'attribute')->hidden();

11. 标签

标签是自定义标签文本的选项。要使用此选项，请参考以下代码

<?php
// label($value, $options)
$form->field($model, 'attribute')->label('custom label');

12. 只读

只读是 html 输入元素的默认属性选项。指定输入字段为只读。用于将 input、textarea、dropdownlist 和 listbox 设置为只读。要使用此选项，请参考以下代码

<?php
$form->field($model, 'attribute')->readOnly();

13. 禁用

“禁用”是HTML输入元素的一个默认属性选项。它指定了一个元素应该被禁用。使用此选项来禁用 input、textarea、dropdownlist 或 listbox。要使用此选项，请参考以下代码：

<?php
$form->field($model, 'attribute')->disabled();

14. 长度（最大或最小长度）

长度是HTML输入元素的一个默认属性选项（maxlength 和 minlength）。使用此选项来设置输入的最大或最小长度。max 指定了允许的字符最大数量。min 指定了允许的字符最小数量。在字符串模式中，有两个操作符前缀。操作符减号 - 是 minlength 的选项。操作符加号 + 是 maxlength 的选项。有效值是数字或日期。要使用此选项，请参考以下代码：

<?php
// in array mode
$form->field($model, 'attribute')->length([
		'max' => '255',
		'min' => '10',
]);

// in string mode
$form->field($model, 'attribute')->length('-10&+255');

15. 行内

在一系列复选框或单选按钮上使用行内，用于同一行显示的控制。仅对 radioList 和 checkboxList 使用行内选项。要使用此选项，请参考以下代码：

<?php
$form->field($model, 'attribute')->checkboxList([
       'first' => 'First List',
       'second' => 'Second List',
       'Third' => 'Third List'
])->inline();

$form->field($model, 'attribute')->radioList([
       'first' => 'First List',
       'second' => 'Second List',
       'Third' => 'Third List'
])->inline();

16. 按钮

使用按钮为 checkboxList 或 radioList 分组，使其看起来像按钮组，并切换选中列表的样式。仅对 checkboxList 和 radioList 使用此选项。要使用此选项，请参考以下代码：

<?php
$form->field($model, 'attribute')->checkboxList([
       'first' => 'First List',
       'second' => 'Second List',
       'Third' => 'Third List'
])->button();

$form->field($model, 'attribute')->radioList([
       'first' => 'First List',
       'second' => 'Second List',
       'Third' => 'Third List'
])->button();

17. 垂直按钮

使用按钮为 checkboxList 或 radioList 分组，使其看起来像垂直按钮组，并切换选中列表的样式。仅对 checkboxList 和 radioList 使用此选项。要使用此选项，请参考以下代码：

<?php
$form->field($model, 'attribute')->checkboxList([
       'first' => 'First List',
       'second' => 'Second List',
       'Third' => 'Third List'
])->buttonVertical();

$form->field($model, 'attribute')->radioList([
       'first' => 'First List',
       'second' => 'Second List',
       'Third' => 'Third List'
])->buttonVertical();

18. 模板

模板是yii输入元素默认字段的一个选项。这是一个自定义模板的功能。要使用此选项，请参考以下代码：

<?php
//in string mode
$form->field($model, 'attribute')->template('{label} {input} {error} {hint}');

//in array mode
$form->field($model, 'attribute')->template(['{input}' => '<div class="well">{input}</div>']);

按钮

按钮小部件渲染bootstrap按钮。

按钮渲染更多的 buttonType： default、button、submit、buttonInput 和 submitInput。

并且有更多的 type bootstrap按钮

  • default 或 bootui\Button::TYPE_DEFAULT 是标准按钮。

  • primary 或 bootui\Button::TYPE_PRIMARY 是提供额外视觉重量并识别按钮集中的主要操作的按钮。

  • success 或 bootui\Button::TYPE_SUCCESS 是表示成功或积极操作的按钮。

  • info 或 bootui\Button::TYPE_INFO 是上下文按钮，用于信息警告消息。

  • warning 或 bootui\Button::TYPE_WARNING 是表示应该对此操作保持谨慎的按钮。

  • danger 或 bootui\Button::TYPE_DANGER 是表示危险或可能具有负面影响的按钮。

  • link 或 bootui\Button::TYPE_LINK 是通过使其看起来像链接来淡化按钮，同时保持按钮行为。

在选项 size 中调整按钮大小，有3种大小：xs（额外小型）、sm（小型）和 lg（大型）。如果你使用默认大小，不要使用大小选项。

使用选项 block 将按钮阻塞，使其占满父元素的整个宽度。

使用选项 active 和有效的布尔值 true 或 false 激活按钮状态按钮，当激活时按钮将显示为按下状态（带有较深的背景、较深的边框和嵌入阴影）。

使用选项 disable 和有效的布尔值 true 或 false 激活禁用状态，使按钮看起来不可点击，通过将它们变暗50%。

按钮小部件默认模式下的示例

<?php
// default format bootui\Button::widget($config).

// for button mode.

echo bootui\Button::widget([
    'label' => 'Button Action',
    'type' => bootui\Button::TYPE_PRIMARY,
    'buttonType' => 'button',
]);

// for link mode.

echo bootui\Button::widget([
    'label' => 'Button Action',
    'type' => bootui\Button::TYPE_PRIMARY,
    'url' => 'http:://bitbucket.org/3ch3r46',
]);

其他模式下的示例

按钮链接

默认数组配置下的链接模式。

<?php
echo bootui\Button::link([
    'label' => 'My Home Page Link',
    'url' => 'http:://bitbucket.org/3ch3r46',
    'type' => bootui\Button::TYPE_SUCCESS
]);

字符串配置下的链接模式。

<?php
echo bootui\Button::link('label:My Home Page Link;url:bitbucket.org/3ch3r46;type:primary');

或没有键配置的链接，仅适用于第一个配置中的 label 和第二个配置中的 url。

<?php
echo bootui\Button::link('My Home Page Link;bitbucket.org/3ch3r46;type:primary');

按钮操作。

使用数组配置的按钮。

<?php
echo bootui\Button::button([
    'label' => 'Action',
    'type' => bootui\Button::TYPE_SUCCESS
]);

字符串配置的按钮。

<?php
echo bootui\Button::button('label:Action;type:primary');

提交按钮。

使用数组配置的提交按钮。

<?php
echo bootui\Button::submit([
    'label' => 'Action',
    'type' => bootui\Button::TYPE_INFO
]);

字符串配置的提交按钮。

<?php
echo bootui\Button::submit('label:Action;type:primary');

按钮下拉菜单

按钮下拉菜单渲染bootstrap下拉按钮。

按钮下拉菜单的配置选项

  • type 是按钮类型，有效值为 default、primary、success、info、warning、danger。

  • item 是按钮下拉列表。

  • size 是按钮尺寸，有效值为 lg（大）sm（小）xs（特小）。

  • split 表示是否显示分割样式的按钮组。

示例

单按钮下拉列表。

<?php
// default
echo bootui\ButtonDropdown::widget([
    'type'=>bootui\Button::TYPE_SUCCESS,
    'label'=>'button dropdown',
    'size'=>'lg',
    'items'=>[
        ['label'=>'bootstrap','url'=>'https://bootstrap.ac.cn'],
        '---',
        'Dropdown Header One',
        ['label' => 'menu one','url'=>'#'],
        ['label' => 'menu two','url'=>'#'],
        ['label' => 'menu three','url'=>'#'],
        'Dropdown Header Two',
        ['label' => 'menu four','url'=>'#'],
        ['label' => 'menu five','url'=>'#']
    ],
]);

// with button object
echo bootui\Button::dropdown([
    'type'=>bootui\Button::TYPE_INFO,
    'label'=>'button dropdown',
    'size'=>'lg',
    'items'=>[
        ['label'=>'bootstrap','url'=>'https://bootstrap.ac.cn'],
        '---',
        'Dropdown Header One',
        ['label' => 'menu one','url'=>'#'],
        ['label' => 'menu two','url'=>'#'],
        ['label' => 'menu three','url'=>'#'],
        'Dropdown Header Two',
        ['label' => 'menu four','url'=>'#'],
        ['label' => 'menu five','url'=>'#']
    ],
]);

分割按钮下拉列表。

<?php
// default
echo bootui\ButtonDropdown::widget([
    'type'=>'success',
    'label'=>'button dropdown',
    'size'=>'lg',
    'split' => true,
    'items'=>[
        ['label'=>'bootstrap','url'=>'https://bootstrap.ac.cn'],
        '---',
        'Dropdown Header One',
        ['label' => 'menu one','url'=>'#'],
        ['label' => 'menu two','url'=>'#'],
        ['label' => 'menu three','url'=>'#'],
        'Dropdown Header Two',
        ['label' => 'menu four','url'=>'#'],
        ['label' => 'menu five','url'=>'#']
    ],
]);

// with button object
echo bootui\Button::dropdown([
    'type'=>bootui\Button::TYPE_WARNING,
    'label'=>'button dropdown',
    'size'=>'lg',
    'split' => true,
    'items'=>[
        ['label'=>'bootstrap','url'=>'https://bootstrap.ac.cn'],
        '---',
        'Dropdown Header One',
        ['label' => 'menu one','url'=>'#'],
        ['label' => 'menu two','url'=>'#'],
        ['label' => 'menu three','url'=>'#'],
        'Dropdown Header Two',
        ['label' => 'menu four','url'=>'#'],
        ['label' => 'menu five','url'=>'#']
    ],
]);

按钮组

使用按钮组将一系列按钮组合成单行。

按钮组有更多选项

buttons 是数组中的每个元素代表一个单按钮，可以是字符串或数组或按钮对象或以下结构的按钮下拉对象

  • label: 字符串，必需，按钮标签。

  • options: 数组，可选，按钮的HTML属性。

size 是按钮尺寸，有3种：xs（特小）sm（小）和lg（大）。如果你使用默认尺寸，不要使用尺寸选项。

vertical 使一组按钮垂直堆叠而不是水平排列。

justified 使一组按钮等宽以填充其父元素的整个宽度。也适用于按钮组内的按钮下拉列表。

block 是填充父元素全宽的按钮。

示例

<?php
// default
echo bootui\ButtonGroup::widget([
    'justified'=>true,
    'size' => 'lg',
    'buttons'=>[
        bootui\Button::widget(['label'=>'No One']),
        bootui\Button::widget(['label'=>'No Two']),
        [
            'label'=>'No Three',
            'items' => [
                ['label' => 'dropone'],
                ['label' => 'droptwo'],
            ]
        ]
    ]
]);

// with button object
echo bootui\Button::group([
    'justified'=>true,
    'size' => 'lg',
    'buttons'=>[
        bootui\Button::widget(['label'=>'No One']),
        bootui\Button::widget(['label'=>'No Two']),
        [
            'label'=>'No Three',
            'items' => [
                ['label' => 'dropone'],
                ['label' => 'droptwo'],
            ]
        ]
    ]
]);

按钮加载

将按钮状态设置为加载 - 禁用按钮并更改文本为加载文本。加载文本应在按钮元素中定义。按钮加载的配置选项

  • loadingText 是按钮加载时的文本。

  • completeText 是按钮加载完成时的文本。

  • loadingTimeOut 是按钮加载的秒数。

  • completeTimeOut 是按钮加载完成的秒数。

  • ajaxEvent 是按钮运行ajax的javascript事件。

使用数组配置加载按钮。

<?php
// default
echo bootui\ButtonLoading::widget([
    'loadingText' => 'I am in loading now',
    'completeText' => 'I am complete now',
    'type' => bootui\Button::TYPE_SUCCESS,
    'loadingTimeOut' => 5, // second.
    'completeTimeOut' => 3, // second.
]);

// with button object
echo bootui\Button::loading([
    'loadingText' => 'I am in loading now',
    'completeText' => 'I am complete now',
    'type' => bootui\Button::TYPE_SUCCESS,
    'loadingTimeOut' => 5, // second.
    'completeTimeOut' => 3, // second.
]);

使用字符串配置加载按钮。

<?php
echo bootui\Button::loading('loadingText:I am in loading now;completeText:I am complete now;type:primary;loadingTimeOut:5;completeTimeOut:3');

导航栏

NavBar 渲染bootstrap导航栏。导航栏是响应式元组件，用作应用程序或站点的导航标题。在移动视图中开始折叠（可切换）并随着可用视口宽度的增加而变为水平。

配置选项

  • brandLabel 是品牌文本的字符串。

  • hiddenBrand 设置此选项为数组以隐藏品牌标签，设备宽度与隐藏品牌类相同。有效值为 sm（在窄宽度上隐藏）、xs（在特窄宽度上隐藏）、md（在中宽度上隐藏）和 lg（在宽宽度上隐藏）。

  • brandUrl 是品牌超链接标签的URL，可以是数组或字符串。默认为网站根目录。

  • brandOptions 是品牌链接的HTML属性。

  • padded 是布尔值，表示是否将导航栏内容包含在添加左右填充的 container div 中。设置为 false 以获得 100% 宽度的导航栏。

  • paddedFluid 是布尔值，表示是否将导航栏内容包含在添加左右填充的 fluid-container div 中。

  • type 是bootstrap导航栏类型。查看类型选项。

  • fixed 将导航栏设置为固定在顶部或底部。设置为 false 以获得静态导航栏。

  • items 是菜单项数组。

Bootstrap选项类型

  • default 或 bootui\NavBar::TYPE_DEFAULT 是白色灰色背景颜色。

  • primary 或 bootui\NavBar::TYPE_PRIMARY 是蓝色背景颜色。

  • success 或 bootui\NavBar::TYPE_SUCCESS 是绿色背景颜色。

  • info 或 bootui\NavBar::TYPE_INFO 是中蓝色背景颜色。

  • warning 或 bootui\NavBar::TYPE_WARNING 是黄色背景颜色

  • danger 或 bootui\NavBar::TYPE_DANGER 是红色背景颜色。

  • inverse 或 bootui\NavBar::TYPE_INVERSE 是黑色背景颜色。

示例

<?php
// Normal Mode
bootui\NavBar::begin([
    'brandLabel' => 'My Company',
    'brandUrl' => Yii::$app->homeUrl,
    'type' => bootui\NavBar::TYPE_INFO
]);
echo bootui\Nav::widget([
    'items' => [
        ['label' => 'Home', 'url' => '#'],
        ['label' => 'About', 'url' => '#'],
        ['label' => 'Contact', 'url' => '#'],
        ['label' => 'Profile', 'url' => '#'],
        ['label' => 'Content', 'items' => [
            ['label' => 'News', 'url' => '#'],
            ['label' => 'Pages', 'url' => '#'],
            ['label' => 'Files', 'url' => '#'],
        ]],
    ],
    'isNavbar' => true,
]);
bootui\NavBar::end();

// in widget mode
echo bootui\NavBar::widget([
    'brandLabel' => 'My Company',
    'brandUrl' => Yii::$app->homeUrl,
    'type' => bootui\NavBar::TYPE_INFO,
    'items' => [
    [
        ['label' => 'Home', 'url' => '#'],
        ['label' => 'About', 'url' => '#'],
        ['label' => 'Contact', 'url' => '#'],
        ['label' => 'Profile', 'url' => '#'],
        ['label' => 'Content', 'items' => [
            ['label' => 'News', 'url' => '#'],
            ['label' => 'Pages', 'url' => '#'],
            ['label' => 'Files', 'url' => '#'],
        ]],
    ],
]]);

导航

Nav renderer 使用 Bootstrap 导航。

配置选项

  • items 是导航小部件中项目的一个数组列表。查看项目配置选项。

  • activeParent 如果子项目的父项目处于活动状态且父项目将变为活动状态，则设置为 true。

  • isNavbar 如果此导航用于导航栏，则设置为 true。查看 bootui\NavBar 示例。

  • type 设置导航类型。有效值是 pills 或 bootui\Nav::TYPE_PILLS 和 tabs 或 bootui\Nav::TYPE_TABS。

  • justified 设置为 true 以轻松使标签或药丸在屏幕宽度大于 768px 时具有与父元素相等的宽度。在较小屏幕上，导航链接堆叠。

  • stacked 设置为 true 以使 pills 或 tabs 也可垂直堆叠。

  • collapse 设置为 true 以使导航也折叠下拉菜单。

项目配置选项

  • label 导航项目标签的字符串。

  • url 设置绝对 URL 或使用数组设置项目的 URL。默认为 "#"。

  • visible 设置为 true 则此菜单项可见。默认为 true。

  • linkOptions 是项目链接的 HTML 属性数组。

  • options 是项目容器的 HTML 属性数组（LI）。

  • active 设置为 true 则项目处于活动状态或设置为 false 以不处于活动状态。

  • items 是数组或字符串，用于渲染 Bootstrap 下拉菜单。

示例

<?php
echo bootui\Nav::widget([
    'items' => [
        ['label' => 'Home', 'url' => '#'],
        ['label' => 'About', 'url' => '#'],
        ['label' => 'Contact', 'url' => '#'],
        ['label' => 'Profile', 'url' => '#'],
        ['label' => 'Content', 'items' => [
            ['label' => 'News', 'url' => '#'],
            ['label' => 'Pages', 'url' => '#'],
            ['label' => 'Files', 'url' => '#'],
        ]],
    ],
    'type' => bootui\Nav::TYPE_PILLS,
]);

列表组

ListGroup renderer 使用 Bootstrap 列表组。列表组是一个灵活且功能强大的组件，用于显示不仅仅是简单的元素列表，还有自定义内容的复杂列表。最基本的列表组只是一个带有列表项的无序列表，并使用适当的类

此小部件的配置选项

  • items 是列表项数组。查看选项。

  • type 是 Bootstrap 列表组类型 success、info、warning 和 danger。

  • icon 是 Bootstrap glyphicon，应用于所有列表组项目。

项目配置选项。

  • label 是字符串或数组，用于在列表项中渲染内容。使用 heading 和 text 自定义内容。

  • url 通过使用锚点标签而不是列表项来链接列表组项目。

  • badge 向此列表组项目添加徽章组件，它将自动定位在右侧。

  • icon 是 Bootstrap glyphicon，应用于此列表组项目。

例如

<?php
echo bootui\ListGroup::widget([
    'items' => [
        'Morbi leo risus', // in string mode will render a label.
        [
            'icon' => 'globe',
            'label' => 'Porta ac consectetur ac',
            'url' => 'http://brother.com',
            'type' => bootui\ListGroup::TYPE_WARNING,
        ],
        'heading=first Heading,text=Cras justo odio', // will render a label with heading and text.
        'label:heading=Second Heading,text=Dapibus ac facilisis in;url:http://brother.com',
        [
            'label' => [
                'heading' => 'Third Heading',
                'text' => 'Vestibulum at eros'
            ],
            'badge' => 46,
        ]
    ],
    'type' => bootui\ListGroup::TYPE_INFO
]);

媒体列表

MediaList renderer 使用 Bootstrap 媒体列表对象。抽象对象样式用于构建各种类型的组件（如博客评论、推文等），这些组件具有左对齐或右对齐的图像和文本内容。默认媒体允许将媒体对象（图像、视频、音频）浮动到内容块的左侧或右侧。

此小部件的配置选项

  • items 是媒体列表项目数组。查看选项。

  • pullImageAll 是图像的对齐方式。有效值是 left 或 right。

项目配置选项

  • images 用于设置带有链接到图像的媒体图像。图像是必需的。

  • heading 用于设置媒体标题或媒体列表项的标题。标题是必需的。

  • content 用于设置媒体内容。内容是必需的。

  • url 使用此功能与绝对 URL 或数组 URL。

示例

<?php
echo bootui\MediaList::widget([
    'items' => [
        [
            'heading' => 'First Media',
            'content' => 'Text content in here . . .',
            'images' => 'http://www.gravatar.com/avatar/' . md5('3ch3r46@gmail.com') . '?d=identicon'
        ],
        [
            'heading' => 'Second Media',
            'content' => 'Text content in here . . .',
            'images' => 'http://www.gravatar.com/avatar/' . md5('3ch3r46@gmail.com') . '?d=identicon',
            'items' => [
                [
                    'heading' => 'First Sub Media',
                    'content' => 'Text content in here . . .',
                    'images' => 'http://www.gravatar.com/avatar/' . md5('3ch3r46@gmail.com') . '?d=identicon'
                ],
                [
                    'heading' => 'Second Sub Media',
                    'content' => 'Text content in here . . .',
                    'images' => 'http://www.gravatar.com/avatar/' . md5('3ch3r46@gmail.com') . '?d=identicon',
                    'items' => [
                        [
                            'heading' => 'First Sub Media',
                            'content' => 'Text content in here . . .',
                            'images' => 'http://www.gravatar.com/avatar/' . md5('3ch3r46@gmail.com') . '?d=identicon'
                        ],
                    ],
                ],
            ],
        ],
        [
            'heading' => 'Third Media',
            'content' => 'Text content in here . . .',
            'images' => 'http://www.gravatar.com/avatar/' . md5('3ch3r46@gmail.com') . '?d=identicon'
        ]
    ],
]);

进度条

进度条 renderer 使用 Bootstrap 进度条。

使用简单灵活的进度条提供工作流程或操作进度的最新反馈。

配置选项

  • animate 设置为 true 以在进度条中使用动画。

  • type 进度条类型。有效值是 success、info、warning 和 danger。

  • striped 设置进度条是否为条纹状，使用布尔值（true | false）。

  • label 进度条标题。

  • percent 整数，表示进度的百分比。

示例

<?php
echo bootui\Progress::widget([
    'label' => 'Progress bar is running with animation',
    'animate' => true, 
    'percent' => 50, 
    'striped' => true, 
    'type' => bootui\Progress::TYPE_SUCCESS,
]);