diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..257221d --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +# editorconfig.org + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +indent_style = space +indent_size = 4 +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitattributes b/.gitattributes index 59ea3d7..08476fa 100644 --- a/.gitattributes +++ b/.gitattributes @@ -1,8 +1,9 @@ # Ignore all test and documentation for archive +/.editorconfig export-ignore /.gitattributes export-ignore /.gitignore export-ignore /.scrutinizer.yml export-ignore /.travis.yml export-ignore /phpunit.xml.dist export-ignore /tests export-ignore -/docs export-ignore \ No newline at end of file +/docs export-ignore diff --git a/.travis.yml b/.travis.yml index a94ff31..f4123cf 100644 --- a/.travis.yml +++ b/.travis.yml @@ -6,15 +6,6 @@ php: - 5.6 - 7.0 - hhvm - - hhvm-nightly - -# run build against hhvm but allow them to fail -# http://docs.travis-ci.com/user/build-configuration/#Rows-That-are-Allowed-To-Fail -matrix: - fast_finish: true - allow_failures: - - php: hhvm-nightly - - php: 7.0 # faster builds on new travis setup not using sudo sudo: false @@ -26,7 +17,7 @@ cache: install: - travis_retry composer self-update && composer --version - - travis_retry composer global require "fxp/composer-asset-plugin:~1.0.0" + - travis_retry composer global require "fxp/composer-asset-plugin:~1.1.1" - export PATH="$HOME/.composer/vendor/bin:$PATH" - travis_retry composer install --prefer-dist --no-interaction diff --git a/ActiveField.php b/ActiveField.php index 55d24e0..5dccf27 100644 --- a/ActiveField.php +++ b/ActiveField.php @@ -254,7 +254,7 @@ class ActiveField extends \yii\widgets\ActiveField 'labelOptions' => ['class' => 'checkbox-inline'], ]; } - } elseif (!isset($options['item'])) { + } elseif (!isset($options['item'])) { $options['item'] = function ($index, $label, $name, $checked, $value) { return '
' . Html::checkbox($name, $checked, ['label' => $label, 'value' => $value]) . '
'; }; @@ -280,7 +280,7 @@ class ActiveField extends \yii\widgets\ActiveField 'labelOptions' => ['class' => 'radio-inline'], ]; } - } elseif (!isset($options['item'])) { + } elseif (!isset($options['item'])) { $options['item'] = function ($index, $label, $name, $checked, $value) { return '
' . Html::radio($name, $checked, ['label' => $label, 'value' => $value]) . '
'; }; @@ -298,6 +298,7 @@ class ActiveField extends \yii\widgets\ActiveField * * @return $this the field object itself * @since 2.0.5 + * @see http://getbootstrap.com/css/#forms-controls-static */ public function staticControl($options = []) { @@ -326,7 +327,7 @@ class ActiveField extends \yii\widgets\ActiveField /** * @param boolean $value whether to render a inline list - * @return static the field object itself + * @return $this the field object itself * Make sure you call this method before [[checkboxList()]] or [[radioList()]] to have any effect. */ public function inline($value = true) diff --git a/ActiveForm.php b/ActiveForm.php index a574fbf..164c613 100644 --- a/ActiveForm.php +++ b/ActiveForm.php @@ -22,10 +22,10 @@ use yii\base\InvalidConfigException; * $form = ActiveForm::begin(['layout' => 'horizontal']) * ``` * - * This will set default values for the [[yii\bootstrap\ActiveField|ActiveField]] - * to render horizontal form fields. In particular the [[yii\bootstrap\ActiveField::template|template]] + * This will set default values for the [[ActiveField]] + * to render horizontal form fields. In particular the [[ActiveField::template|template]] * is set to `{label} {beginWrapper} {input} {error} {endWrapper} {hint}` and the - * [[yii\bootstrap\ActiveField::horizontalCssClasses|horizontalCssClasses]] are set to: + * [[ActiveField::horizontalCssClasses|horizontalCssClasses]] are set to: * * ```php * [ @@ -56,7 +56,7 @@ use yii\base\InvalidConfigException; * ]); * ``` * - * @see \yii\bootstrap\ActiveField for details on the [[fieldConfig]] options + * @see ActiveField for details on the [[fieldConfig]] options * @see http://getbootstrap.com/css/#forms * * @author Michael Härtl diff --git a/Alert.php b/Alert.php index e5755c1..18f3960 100644 --- a/Alert.php +++ b/Alert.php @@ -135,9 +135,7 @@ class Alert extends Widget */ protected function initOptions() { - Html::addCssClass($this->options, 'alert'); - Html::addCssClass($this->options, 'fade'); - Html::addCssClass($this->options, 'in'); + Html::addCssClass($this->options, ['alert', 'fade', 'in']); if ($this->closeButton !== false) { $this->closeButton = array_merge([ diff --git a/BaseHtml.php b/BaseHtml.php index 3b97ed2..7096797 100644 --- a/BaseHtml.php +++ b/BaseHtml.php @@ -20,8 +20,7 @@ use yii\helpers\ArrayHelper; class BaseHtml extends \yii\helpers\Html { /** - * Composes icon HTML. - * @see http://getbootstrap.com/components/#glyphicons + * Composes icon HTML for bootstrap Glyphicons. * @param string $name icon short name, for example: 'star' * @param array $options the tag options in terms of name-value pairs. These will be rendered as * the attributes of the resulting tag. There are also a special options: @@ -30,6 +29,7 @@ class BaseHtml extends \yii\helpers\Html * - prefix: string, prefix which should be used to compose tag class, by default 'glyphicon glyphicon-' is used. * * @return string icon HTML. + * @see http://getbootstrap.com/components/#glyphicons */ public static function icon($name, $options = []) { @@ -41,7 +41,7 @@ class BaseHtml extends \yii\helpers\Html /** * Renders Bootstrap static form control. - * @see http://getbootstrap.com/css/#forms-controls-static + * * By default value will be HTML-encoded using [[encode()]], you may control this behavior * via 'encode' option. * @param string $value static control value. @@ -51,6 +51,7 @@ class BaseHtml extends \yii\helpers\Html * - encode: boolean, whether value should be HTML-encoded or not. * * @return string generated HTML + * @see http://getbootstrap.com/css/#forms-controls-static */ public static function staticControl($value, $options = []) { @@ -72,6 +73,7 @@ class BaseHtml extends \yii\helpers\Html * about attribute expression. * @param array $options the tag options in terms of name-value pairs. See [[staticControl()]] for details. * @return string generated HTML + * @see staticControl() */ public static function activeStaticControl($model, $attribute, $options = []) { @@ -83,4 +85,4 @@ class BaseHtml extends \yii\helpers\Html } return static::staticControl($value, $options); } -} \ No newline at end of file +} diff --git a/Button.php b/Button.php index eedcc46..985279a 100644 --- a/Button.php +++ b/Button.php @@ -46,7 +46,7 @@ class Button extends Widget { parent::init(); $this->clientOptions = false; - Html::addCssClass($this->options, 'btn'); + Html::addCssClass($this->options, ['widget' => 'btn']); } /** diff --git a/ButtonDropdown.php b/ButtonDropdown.php index 0d10b6f..5993217 100644 --- a/ButtonDropdown.php +++ b/ButtonDropdown.php @@ -75,7 +75,7 @@ class ButtonDropdown extends Widget public function run() { // @todo use [[options]] instead of [[containerOptions]] and introduce [[buttonOptions]] before 2.1 release - Html::addCssClass($this->containerOptions, 'btn-group'); + Html::addCssClass($this->containerOptions, ['widget' => 'btn-group']); $options = $this->containerOptions; $tag = ArrayHelper::remove($options, 'tag', 'div'); @@ -94,7 +94,7 @@ class ButtonDropdown extends Widget */ protected function renderButton() { - Html::addCssClass($this->options, 'btn'); + Html::addCssClass($this->options, ['widget' => 'btn']); $label = $this->label; if ($this->encodeLabel) { $label = Html::encode($label); @@ -102,7 +102,7 @@ class ButtonDropdown extends Widget if ($this->split) { $options = $this->options; $this->options['data-toggle'] = 'dropdown'; - Html::addCssClass($this->options, 'dropdown-toggle'); + Html::addCssClass($this->options, ['toggle' => 'dropdown-toggle']); unset($this->options['id']); $splitButton = Button::widget([ 'label' => '', @@ -113,10 +113,10 @@ class ButtonDropdown extends Widget } else { $label .= ' '; $options = $this->options; - if (!isset($options['href'])) { + if (!isset($options['href']) && $this->tagName === 'a') { $options['href'] = '#'; } - Html::addCssClass($options, 'dropdown-toggle'); + Html::addCssClass($options, ['toggle' => 'dropdown-toggle']); $options['data-toggle'] = 'dropdown'; $splitButton = ''; } diff --git a/ButtonGroup.php b/ButtonGroup.php index 4bf47ef..a0c3ec2 100644 --- a/ButtonGroup.php +++ b/ButtonGroup.php @@ -65,7 +65,7 @@ class ButtonGroup extends Widget public function init() { parent::init(); - Html::addCssClass($this->options, 'btn-group'); + Html::addCssClass($this->options, ['widget' => 'btn-group']); } /** diff --git a/CHANGELOG.md b/CHANGELOG.md index 07887e0..902d877 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,16 +1,23 @@ Yii Framework 2 bootstrap extension Change Log ============================================== -2.0.5 under development +2.0.6 under development ----------------------- +- Bug #98: Fixed `yii\bootstrap\ButtonDropdown` setting `href` attribute for non `a` tags (13nightevil) + +2.0.5 September 23, 2015 +------------------------ + +- Enh #15: Allowed overriding default Bootstrap CSS classes added by widgets (klimov-paul) - Enh #38: Added object support for `content` option in `Collapse` class (pana1990, ItsReddi) - Enh #40: Added `visible` option to `yii\bootstrap\Tab` widget items (klimov-paul) - Enh #41: Added `submenuOptions` support at `yii\bootstrap\Dropdown` (spikyjt, klimov-paul) - Enh #42: Added support for the glyphicons via `yii\bootstrap\Html::icon()` (klimov-paul) - Enh #43: Added support for the static form controls via `yii\bootstrap\Html` (klimov-paul) -- Enh #44: Fixed `yii\bootstrap\ButtonDropdown` renders two buttons have same with id if 'split' is enabled (klimov-paul) -- Enh #45: Added support for Bootstrap checkbox/radio toggle buttons (RomeroMsk, klimov-paul) +- Enh #44: Fixed `yii\bootstrap\ButtonDropdown` renders two buttons with the same id, if 'split' is enabled (klimov-paul) +- Enh #50: Added `dropDownOptions` that is passed to `yii\bootstrap\Nav` dropdown items (fbau123) +- Enh #92: Allow overriding `data-toggle` in `yii\bootstrap\Tabs` (machour) 2.0.4 May 10, 2015 diff --git a/Carousel.php b/Carousel.php index f212619..d932a66 100644 --- a/Carousel.php +++ b/Carousel.php @@ -72,7 +72,7 @@ class Carousel extends Widget public function init() { parent::init(); - Html::addCssClass($this->options, 'carousel'); + Html::addCssClass($this->options, ['widget' => 'carousel']); } /** @@ -149,7 +149,7 @@ class Carousel extends Widget throw new InvalidConfigException('The "content" option is required.'); } - Html::addCssClass($options, 'item'); + Html::addCssClass($options, ['widget' => 'item']); if ($index === 0) { Html::addCssClass($options, 'active'); } diff --git a/Collapse.php b/Collapse.php index 0b33cd5..09335b7 100644 --- a/Collapse.php +++ b/Collapse.php @@ -65,7 +65,6 @@ class Collapse extends Widget * - contentOptions: optional, the HTML attributes of the group's content */ public $items = []; - /** * @var boolean whether the labels for header items should be HTML-encoded. */ @@ -78,7 +77,7 @@ class Collapse extends Widget public function init() { parent::init(); - Html::addCssClass($this->options, 'panel-group'); + Html::addCssClass($this->options, ['widget' => 'panel-group']); } /** @@ -109,7 +108,7 @@ class Collapse extends Widget } $header = $item['label']; $options = ArrayHelper::getValue($item, 'options', []); - Html::addCssClass($options, 'panel panel-default'); + Html::addCssClass($options, ['panel' => 'panel', 'widget' => 'panel-default']); $items[] = Html::tag('div', $this->renderItem($header, $item, ++$index), $options); } @@ -130,7 +129,7 @@ class Collapse extends Widget $id = $this->options['id'] . '-collapse' . $index; $options = ArrayHelper::getValue($item, 'contentOptions', []); $options['id'] = $id; - Html::addCssClass($options, 'panel-collapse collapse'); + Html::addCssClass($options, ['widget' => 'panel-collapse', 'collapse' => 'collapse']); $encodeLabel = isset($item['encode']) ? $item['encode'] : $this->encodeLabels; if ($encodeLabel) { diff --git a/Dropdown.php b/Dropdown.php index 1c28f01..b68ac11 100644 --- a/Dropdown.php +++ b/Dropdown.php @@ -77,7 +77,7 @@ class Dropdown extends Widget unset($this->submenuOptions['id']); } parent::init(); - Html::addCssClass($this->options, 'dropdown-menu'); + Html::addCssClass($this->options, ['widget' => 'dropdown-menu']); } /** @@ -120,7 +120,7 @@ class Dropdown extends Widget if (empty($item['items'])) { if ($url === null) { $content = $label; - Html::addCssClass($itemOptions, 'dropdown-header'); + Html::addCssClass($itemOptions, ['widget' => 'dropdown-header']); } else { $content = Html::a($label, $url, $linkOptions); } @@ -131,7 +131,7 @@ class Dropdown extends Widget } $content = Html::a($label, $url === null ? '#' : $url, $linkOptions) . $this->renderItems($item['items'], $submenuOptions); - Html::addCssClass($itemOptions, 'dropdown-submenu'); + Html::addCssClass($itemOptions, ['widget' => 'dropdown-submenu']); } $lines[] = Html::tag('li', $content, $itemOptions); diff --git a/Html.php b/Html.php index a2c87e6..1941106 100644 --- a/Html.php +++ b/Html.php @@ -8,7 +8,7 @@ namespace yii\bootstrap; /** - * Html is an enhanced version of [[\yii\helpers\Html]] helper class dedicated to Bootstrap needs. + * Html is an enhanced version of [[\yii\helpers\Html]] helper class dedicated to the Bootstrap needs. * This class inherits all functionality available at [[\yii\helpers\Html]] and can be used as substitute. * * Attention: do not confuse [[\yii\bootstrap\Html]] and [[\yii\helpers\Html]], be careful in which class @@ -19,4 +19,4 @@ namespace yii\bootstrap; */ class Html extends BaseHtml { -} \ No newline at end of file +} diff --git a/Modal.php b/Modal.php index c138f30..6555135 100644 --- a/Modal.php +++ b/Modal.php @@ -136,7 +136,7 @@ class Modal extends Widget $this->header = $button . "\n" . $this->header; } if ($this->header !== null) { - Html::addCssClass($this->headerOptions, 'modal-header'); + Html::addCssClass($this->headerOptions, ['widget' => 'modal-header']); return Html::tag('div', "\n" . $this->header . "\n", $this->headerOptions); } else { return null; @@ -168,7 +168,7 @@ class Modal extends Widget protected function renderFooter() { if ($this->footer !== null) { - Html::addCssClass($this->footerOptions, 'modal-footer'); + Html::addCssClass($this->footerOptions, ['widget' => 'modal-footer']); return Html::tag('div', "\n" . $this->footer . "\n", $this->footerOptions); } else { return null; @@ -224,7 +224,7 @@ class Modal extends Widget 'role' => 'dialog', 'tabindex' => -1, ], $this->options); - Html::addCssClass($this->options, 'modal'); + Html::addCssClass($this->options, ['widget' => 'modal']); if ($this->clientOptions !== false) { $this->clientOptions = array_merge(['show' => false], $this->clientOptions); diff --git a/Nav.php b/Nav.php index 0e8e0ac..a003d41 100644 --- a/Nav.php +++ b/Nav.php @@ -63,8 +63,10 @@ class Nav extends Widget * - linkOptions: array, optional, the HTML attributes of the item's link. * - options: array, optional, the HTML attributes of the item container (LI). * - active: boolean, optional, whether the item should be on active state or not. + * - dropDownOptions: array, optional, the HTML options that will passed to the [[Dropdown]] widget. * - items: array|string, optional, the configuration array for creating a [[Dropdown]] widget, * or a string representing the dropdown menu. Note that Bootstrap does not support sub-dropdown menus. + * - encode: boolean, optional, whether the label will be HTML-encoded. If set, supersedes the $encodeLabels option for only this item. * * If a menu item is a string, it will be rendered directly without HTML encoding. */ @@ -120,7 +122,7 @@ class Nav extends Widget if ($this->dropDownCaret === null) { $this->dropDownCaret = Html::tag('b', '', ['class' => 'caret']); } - Html::addCssClass($this->options, 'nav'); + Html::addCssClass($this->options, ['widget' => 'nav']); } /** @@ -177,8 +179,8 @@ class Nav extends Widget if ($items !== null) { $linkOptions['data-toggle'] = 'dropdown'; - Html::addCssClass($options, 'dropdown'); - Html::addCssClass($linkOptions, 'dropdown-toggle'); + Html::addCssClass($options, ['widget' => 'dropdown']); + Html::addCssClass($linkOptions, ['widget' => 'dropdown-toggle']); if ($this->dropDownCaret !== '') { $label .= ' ' . $this->dropDownCaret; } @@ -208,6 +210,7 @@ class Nav extends Widget protected function renderDropdown($items, $parentItem) { return Dropdown::widget([ + 'options' => ArrayHelper::getValue($parentItem, 'dropDownOptions', []), 'items' => $items, 'encodeLabels' => $this->encodeLabels, 'clientOptions' => false, diff --git a/NavBar.php b/NavBar.php index aa6db21..acaebf8 100644 --- a/NavBar.php +++ b/NavBar.php @@ -19,7 +19,7 @@ use yii\helpers\ArrayHelper; * * ```php * use yii\bootstrap\NavBar; - * use yii\widgets\Menu; + * use yii\bootstrap\Nav; * * NavBar::begin(['brandLabel' => 'NavBar Test']); * echo Nav::widget([ @@ -27,6 +27,7 @@ use yii\helpers\ArrayHelper; * ['label' => 'Home', 'url' => ['/site/index']], * ['label' => 'About', 'url' => ['/site/about']], * ], + * 'options' => ['class' => 'navbar-nav'], * ]); * NavBar::end(); * ``` @@ -55,14 +56,15 @@ class NavBar extends Widget */ public $containerOptions = []; /** - * @var string|boolean the text of the brand of false if it's not used. Note that this is not HTML-encoded. + * @var string|boolean the text of the brand or false if it's not used. Note that this is not HTML-encoded. * @see http://getbootstrap.com/components/#navbar */ public $brandLabel = false; /** - * @param array|string|boolean $url the URL for the brand's hyperlink tag. This parameter will be processed by [[Url::to()]] + * @var array|string|boolean $url the URL for the brand's hyperlink tag. This parameter will be processed by [[\yii\helpers\Url::to()]] * and will be used for the "href" attribute of the brand link. Default value is false that means * [[\yii\web\Application::homeUrl]] will be used. + * You may set it to `null` if you want to have no link at all. */ public $brandUrl = false; /** @@ -93,11 +95,11 @@ class NavBar extends Widget { parent::init(); $this->clientOptions = false; - Html::addCssClass($this->options, 'navbar'); - if ($this->options['class'] === 'navbar') { - Html::addCssClass($this->options, 'navbar-default'); + if (empty($this->options['class'])) { + Html::addCssClass($this->options, ['navbar', 'navbar-default']); + } else { + Html::addCssClass($this->options, ['widget' => 'navbar']); } - Html::addCssClass($this->brandOptions, 'navbar-brand'); if (empty($this->options['role'])) { $this->options['role'] = 'navigation'; } @@ -116,12 +118,11 @@ class NavBar extends Widget } echo $this->renderToggleButton(); if ($this->brandLabel !== false) { - Html::addCssClass($this->brandOptions, 'navbar-brand'); + Html::addCssClass($this->brandOptions, ['widget' => 'navbar-brand']); echo Html::a($this->brandLabel, $this->brandUrl === false ? Yii::$app->homeUrl : $this->brandUrl, $this->brandOptions); } echo Html::endTag('div'); - Html::addCssClass($this->containerOptions, 'collapse'); - Html::addCssClass($this->containerOptions, 'navbar-collapse'); + Html::addCssClass($this->containerOptions, ['collapse' => 'collapse', 'widget' => 'navbar-collapse']); $options = $this->containerOptions; $tag = ArrayHelper::remove($options, 'tag', 'div'); echo Html::beginTag($tag, $options); diff --git a/Progress.php b/Progress.php index d80bd6b..14c7122 100644 --- a/Progress.php +++ b/Progress.php @@ -96,7 +96,7 @@ class Progress extends Widget public function init() { parent::init(); - Html::addCssClass($this->options, 'progress'); + Html::addCssClass($this->options, ['widget' => 'progress']); } /** @@ -152,7 +152,7 @@ class Progress extends Widget 'style' => "width:{$percent}%", ]; $options = array_merge($defaultOptions, $options); - Html::addCssClass($options, 'progress-bar'); + Html::addCssClass($options, ['widget' => 'progress-bar']); $out = Html::beginTag('div', $options); $out .= $label; diff --git a/README.md b/README.md index d647349..0d72d49 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ in Yii applications extremely easy. For license information check the [LICENSE](LICENSE.md)-file. +Documentation is at [docs/guide/README.md](docs/guide/README.md). + [![Latest Stable Version](https://poser.pugx.org/yiisoft/yii2-bootstrap/v/stable.png)](https://packagist.org/packages/yiisoft/yii2-bootstrap) [![Total Downloads](https://poser.pugx.org/yiisoft/yii2-bootstrap/downloads.png)](https://packagist.org/packages/yiisoft/yii2-bootstrap) [![Build Status](https://travis-ci.org/yiisoft/yii2-bootstrap.svg?branch=master)](https://travis-ci.org/yiisoft/yii2-bootstrap) diff --git a/Tabs.php b/Tabs.php index ff5293a..c6bc35f 100644 --- a/Tabs.php +++ b/Tabs.php @@ -122,7 +122,7 @@ class Tabs extends Widget public function init() { parent::init(); - Html::addCssClass($this->options, 'nav ' . $this->navType); + Html::addCssClass($this->options, ['widget' => 'nav', $this->navType]); } /** @@ -162,21 +162,23 @@ class Tabs extends Widget if (isset($item['items'])) { $label .= ' '; - Html::addCssClass($headerOptions, 'dropdown'); + Html::addCssClass($headerOptions, ['widget' => 'dropdown']); if ($this->renderDropdown($n, $item['items'], $panes)) { Html::addCssClass($headerOptions, 'active'); } - Html::addCssClass($linkOptions, 'dropdown-toggle'); - $linkOptions['data-toggle'] = 'dropdown'; + Html::addCssClass($linkOptions, ['widget' => 'dropdown-toggle']); + if (!isset($linkOptions['data-toggle'])) { + $linkOptions['data-toggle'] = 'dropdown'; + } $header = Html::a($label, "#", $linkOptions) . "\n" . Dropdown::widget(['items' => $item['items'], 'clientOptions' => false, 'view' => $this->getView()]); } else { $options = array_merge($this->itemOptions, ArrayHelper::getValue($item, 'options', [])); $options['id'] = ArrayHelper::getValue($options, 'id', $this->options['id'] . '-tab' . $n); - Html::addCssClass($options, 'tab-pane'); + Html::addCssClass($options, ['widget' => 'tab-pane']); if (ArrayHelper::remove($item, 'active')) { Html::addCssClass($options, 'active'); Html::addCssClass($headerOptions, 'active'); @@ -185,7 +187,9 @@ class Tabs extends Widget if (isset($item['url'])) { $header = Html::a($label, $item['url'], $linkOptions); } else { - $linkOptions['data-toggle'] = 'tab'; + if (!isset($linkOptions['data-toggle'])) { + $linkOptions['data-toggle'] = 'tab'; + } $header = Html::a($label, '#' . $options['id'], $linkOptions); } @@ -241,7 +245,7 @@ class Tabs extends Widget $content = ArrayHelper::remove($item, 'content'); $options = ArrayHelper::remove($item, 'contentOptions', []); - Html::addCssClass($options, 'tab-pane'); + Html::addCssClass($options, ['widget' => 'tab-pane']); if (ArrayHelper::remove($item, 'active')) { Html::addCssClass($options, 'active'); Html::addCssClass($item['options'], 'active'); @@ -250,8 +254,9 @@ class Tabs extends Widget $options['id'] = ArrayHelper::getValue($options, 'id', $this->options['id'] . '-dd' . $itemNumber . '-tab' . $n); $item['url'] = '#' . $options['id']; - $item['linkOptions']['data-toggle'] = 'tab'; - + if (!isset($item['linkOptions']['data-toggle'])) { + $item['linkOptions']['data-toggle'] = 'tab'; + } $panes[] = Html::tag('div', $content, $options); unset($item); diff --git a/composer.json b/composer.json index b3ff507..5faca27 100644 --- a/composer.json +++ b/composer.json @@ -18,7 +18,7 @@ } ], "require": { - "yiisoft/yii2": ">=2.0.4", + "yiisoft/yii2": ">=2.0.6", "bower-asset/bootstrap": "3.3.* | 3.2.* | 3.1.*" }, "autoload": { diff --git a/docs/guide-es/README.md b/docs/guide-es/README.md new file mode 100644 index 0000000..74997be --- /dev/null +++ b/docs/guide-es/README.md @@ -0,0 +1,29 @@ +Extensión Twitter Bootstrap para Yii 2 +====================================== + +La extensión incluye soporte para el marcado de [Bootstrap 3](http://getbootstrap.com/) y los componentes del framework +(también conocido como "Twitter Bootstrap"). Bootstrap es un excelente framework responsivo que puede acelerar +enormemente el proceso de desarrollo del lado del cliente. + +El núcleo de Boostrap está representado por dos partes: + +- Bases de CSS, tales como un sistema de cuadriculas, tipografía, clases de ayuda, y utilidades responsivas. +- Componentes listos para usar, tales como formularios, menús, paginación, cajas modales, tabs, etc. + +Pasos Iniciales +--------------- + +* [Instalación](installation.md) +* [Uso Básico](basic-usage.md) + +Uso +--- + +* [Yii widgets](usage-widgets.md) +* [Html helper](helper-html.md) +* [Asset Bundles](asset-bundles.md) + +Temas Adicionales +----------------- + +* [Usando directamente los ficheros .less de Bootstrap](topics-less.md) diff --git a/docs/guide-es/asset-bundles.md b/docs/guide-es/asset-bundles.md new file mode 100644 index 0000000..f27f800 --- /dev/null +++ b/docs/guide-es/asset-bundles.md @@ -0,0 +1,17 @@ +Asset Bundles +============= + +Bootstrap es una completa solución front-end, que incluye CSS, JavaScript, fuentes y mucho más. +Con el fin de permitir un control más flexible sobre los componentes de Bootstrap, esta extensión proporciona +varios asset bundles. +Ellos son: + +- [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - contiene unicamente los ficheros CSS principales. +- [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - depende de [[yii\bootstrap\BootstrapAsset]], contiene ficheros javascript. +- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - depende de [[yii\bootstrap\BootstrapAsset]], contiene el tema CSS por defecto de Bootstrap. + +Particularmente las aplicaciones pueden necesitar requerir diferentes usos de bundle (o combinación de bundle). +Si necesitas unicamente estilos CSS, [[yii\bootstrap\BootstrapAsset]] será suficiente para ti. Sin embargo, si +quieres usar el JavaScript de Bootstrap, necesitas registrar [[yii\bootstrap\BootstrapPluginAsset]]. + +> Consejo: la mayoría de los widgets registran automaticamente [[yii\bootstrap\BootstrapPluginAsset]]. diff --git a/docs/guide-es/basic-usage.md b/docs/guide-es/basic-usage.md new file mode 100644 index 0000000..05bc862 --- /dev/null +++ b/docs/guide-es/basic-usage.md @@ -0,0 +1,16 @@ +Uso Básico +========== + +Yii no se ajusta a los conceptos básicos de bootstrap dentro del código PHP, desde el HTML es muy simple en si mismo +en este caso. Puedes encontrar los detalles sobre el uso de los conceptos básicos en la [web de bootstrap](http://getbootstrap.com/css/). Yii proporciona una manera de incluir los assets de bootstrap en tus páginas añadiendo una única linea a `AppAsset.php` localizado en tu +directorio `@app/assets`: + +```php +public $depends = [ + 'yii\web\YiiAsset', + 'yii\bootstrap\BootstrapAsset', // esta linea +]; +``` + +Usando bootstrap a través de Yii asset manager permite que minimices los recursos y combinarlos con tus propios recursos +cuando lo necesites. diff --git a/docs/guide-es/helper-html.md b/docs/guide-es/helper-html.md new file mode 100644 index 0000000..4cb067f --- /dev/null +++ b/docs/guide-es/helper-html.md @@ -0,0 +1,29 @@ +Html helper +=========== + +Bootstrap introduce muchas construcciones y esqueletos consistentes de HTML, que permiten crear diferentes efectos visuales. +Unicamente lo más complejo está cubierto por los widgets proporcionados en esta extensión. El resto debería ser +compuesto manualmente usando HTML directamente. +Sin embargo, algunas marcas especiales de Bootstrap son cubiertas por el helper [[\yii\bootstrap\Html]]. +[[\yii\bootstrap\Html]] es una versión mejorada de la regular [[\yii\helpers\Html]] dedicada a las necesidades de Bootstrap. +Proporciona varios métodos útiles: + + - `icon()` - permite renderizar iconos de Glyphicon + - `staticControl()` - permite renderizar formularios "static controls" + +[[\yii\bootstrap\Html]] hereda todas las funcionalidades disponibles en [[\yii\helpers\Html]] y puede usarse como sustituto, +así que no es necesario incluir ambos dentro de los archivos de tus vistas. +Por ejemplo: + +```php + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> Atención: no confundas [[\yii\bootstrap\Html]] con [[\yii\helpers\Html]], ten cuidado que clases estás usando dentro de tus vistas. diff --git a/docs/guide-es/installation.md b/docs/guide-es/installation.md new file mode 100644 index 0000000..13d8882 --- /dev/null +++ b/docs/guide-es/installation.md @@ -0,0 +1,20 @@ +Instalación +=========== + +## Obteniendo el Paquete de Composer + +La mejor manera para instalar esta extensión es a través de [composer](http://getcomposer.org/download/). + +Ejecuta + +``` +php composer.phar require --prefer-dist yiisoft/yii2-bootstrap +``` + +o añade + +``` +"yiisoft/yii2-bootstrap": "~2.0.0" +``` + +en la sección require de tu fichero `composer.json`. diff --git a/docs/guide-es/topics-less.md b/docs/guide-es/topics-less.md new file mode 100644 index 0000000..910f9a7 --- /dev/null +++ b/docs/guide-es/topics-less.md @@ -0,0 +1,17 @@ +Usando directamente los ficheros .less de Bootstrap +=================================================== + +Si deseas incluir el [css de Bootstrap directamente en tus ficheros less](http://getbootstrap.com/getting-started/#customizing) puedes necesitar deshabilitar los ficheros css de bootstrap originales para ser cargados. +Puedes hacer esto mediante la configuración de la propiedad css de [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] asignando +un array vacio. +Para esto necesitas configurar el `assetManager` [componente de aplicación](https://github.com/yiisoft/yii2/blob/master/docs/guide-es/structure-application-components.md) como se muestra a continuación: + +```php + 'assetManager' => [ + 'bundles' => [ + 'yii\bootstrap\BootstrapAsset' => [ + 'css' => [], + ] + ] + ] +``` diff --git a/docs/guide-es/usage-widgets.md b/docs/guide-es/usage-widgets.md new file mode 100644 index 0000000..75189b2 --- /dev/null +++ b/docs/guide-es/usage-widgets.md @@ -0,0 +1,58 @@ +Yii widgets +=========== + +La mayoría de los componentes de bootstrap están encapsulados dentro de Yii widgets lo que permite una sintaxis +más robusta y poder integrarse con las características del framework. Todos los widgets pertenecen +al namespace `\yii\bootstrap`: + +- [[yii\bootstrap\ActiveForm|ActiveForm]] +- [[yii\bootstrap\Alert|Alert]] +- [[yii\bootstrap\Button|Button]] +- [[yii\bootstrap\ButtonDropdown|ButtonDropdown]] +- [[yii\bootstrap\ButtonGroup|ButtonGroup]] +- [[yii\bootstrap\Carousel|Carousel]] +- [[yii\bootstrap\Collapse|Collapse]] +- [[yii\bootstrap\Dropdown|Dropdown]] +- [[yii\bootstrap\Modal|Modal]] +- [[yii\bootstrap\Nav|Nav]] +- [[yii\bootstrap\NavBar|NavBar]] +- [[yii\bootstrap\Progress|Progress]] +- [[yii\bootstrap\Tabs|Tabs]] + + +## Personalización de las clases css para los widget + +Los widgets permiten una rápida composición del HTML para los componentes de bootstrap que requieren las clases +CSS de bootstrap. +Las clases por defecto para un componente en particular serán añadidas automáticamente por los widgets, y las clases +opcionales que quieres personalizar son frecuentemente soportadas a través de las propiedades de los widgets. + +Por ejemplo, puedas usar [[yii\bootstrap\Button::options]] para personalizar la apariencia de un botón. +La clase 'btn' que se requiere para un botón será añadida automáticamente, por lo que no necesitas preocuparte +por ello. +Todo lo que necesitas es especificar una clase de botón en particular: + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // produce la clase "btn btn-primary" +]); +``` + +Sin embargo, a veces puede que tengas que remplazar las clases por defecto por las alternativas. +Por ejemplo, el widget [[yii\bootstrap\ButtonGroup]] utiliza por defecto la clase 'btn-group' para el contenido del div, pero necesitas usar 'btn-group-vertical' en lugar de alinear los botones verticalmente. +El uso directo de la opción 'class' simplemente añade 'btn-group-vertical' a 'btn-group, el cual producirá un resultado incorrecto. +Con el fin de sobrescribir las clases por defecto de un widget, necesitas especificar la opción 'class' como un +array que contiene la definición de la clase personalizada bajo la clave 'widget': + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // remplaza 'btn-group' con 'btn-group-vertical' + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` diff --git a/docs/guide-ja/README.md b/docs/guide-ja/README.md index 2b8ae37..c567ad1 100644 --- a/docs/guide-ja/README.md +++ b/docs/guide-ja/README.md @@ -20,6 +20,8 @@ Bootstrap のコアは二つの部分によって表されます。 -------- * [Yii ウィジェット](usage-widgets.md) +* [Html ヘルパ](helper-html.md) +* [アセットバンドル](asset-bundles.md) 追加のトピック -------------- diff --git a/docs/guide-ja/asset-bundles.md b/docs/guide-ja/asset-bundles.md new file mode 100644 index 0000000..ccfbe93 --- /dev/null +++ b/docs/guide-ja/asset-bundles.md @@ -0,0 +1,16 @@ +アセットバンドル +================ + +Bootstrap は、CSS、JavaScript、フォントなどを含む複雑なフロントエンドソリューションです。 +Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションはアセットバンドルをいくつかに分けて提供しています。 +すなわち、 + +- [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - メインの CSS ファイルのみを含みます。 +- [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - [[yii\bootstrap\BootstrapAsset]] に依存し、javascript ファイルを含みます。 +- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - [[yii\bootstrap\BootstrapAsset]] に依存し、Bootstrap のデフォルトテーマの CSS を含みます。 + +個々のアプリケーションは、その要求に応じて、異なるバンドル (またはバンドルの組み合わせ) を必要とするでしょう。 +CSS のスタイルだけが必要なのであれば、[[yii\bootstrap\BootstrapAsset]] だけで十分です。 +しかし、Bootstrap の JavaScript を必要とする場合は、[[yii\bootstrap\BootstrapPluginAsset]] を登録しなければなりません。 + +> Tip: ほとんどのウィジェットは [[yii\bootstrap\BootstrapPluginAsset]] を自動的に登録します。 diff --git a/docs/guide-ja/helper-html.md b/docs/guide-ja/helper-html.md new file mode 100644 index 0000000..9ba2997 --- /dev/null +++ b/docs/guide-ja/helper-html.md @@ -0,0 +1,28 @@ +Html ヘルパ +=========== + +Bootstrap は、一貫性の高い多数の HTML 構文ないしはスケルトンを導入して、さまざまな視覚的効果の生成を可能にしています。 +このエクステンションによって提供されるウィジェットがカバーしているのは、その中の最も複雑なものだけです。 +残りのものは、直接に HTML 構文を使って、手作業で構築しなければなりません。 +ただし、いくつかの特別な Bootstrap マークアップについては、[[\yii\bootstrap\Html]] によってカバーされています。 +[[\yii\bootstrap\Html]] は通常の [[\yii\helpers\Html]] の拡張版であり、Bootstrap の要求に特化して、いくつかの便利なメソッドを提供するものです。 + + - `icon()` - Glyphicon のアイコンのレンダリングを可能にする + - `staticControl()` - フォームの "static controls" のレンダリングを可能にする + +[[\yii\bootstrap\Html]] は [[\yii\helpers\Html]] で利用できる全ての機能を継承しており、その代替物として使うことが出来ますので、ビューファイルの中で両方を使う必要はありません。 +例えば、 + +```php + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> 注意: [[\yii\bootstrap\Html]] と [[\yii\helpers\Html]] を混同してはいけません。 + ビューの中でどちらのクラスを使っているのかに注意してください。 diff --git a/docs/guide-ja/usage-widgets.md b/docs/guide-ja/usage-widgets.md index 1817349..d74ca56 100644 --- a/docs/guide-ja/usage-widgets.md +++ b/docs/guide-ja/usage-widgets.md @@ -17,3 +17,38 @@ Yii ウィジェット - [[yii\bootstrap\NavBar|NavBar]] - [[yii\bootstrap\Progress|Progress]] - [[yii\bootstrap\Tabs|Tabs]] + + +## ウィジェットの CSS クラスをカスタマイズする + +これらのウィジェットを使うと、bootstrap CSS クラスの使用を要求する bootstrap コンポーネントのための HTML を素速く構成することが出来ます。 +特定のコンポーネントのデフォルトの CSS クラスはウィジェットによって自動的に追加されます。 +そして、あなたがカスタマイズしたいであろうオプションの CSS クラスは、通常は、ウィジェットのプロパティによってサポートされています。 + +例えば、[[yii\bootstrap\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。 +このとき、ボタンに要求される 'btn' クラスは自動的に追加されますので、あなたが心配をする必要はありません。 +特定のボタンクラスを指定するだけで十分です。 + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // "btn btn-primary" というクラスを生成 +]); +``` + +しかしながら、時として、デフォルトのクラスを別のクラスで置き換える必要がある場合があります。 +例えば、[[yii\bootstrap\ButtonGroup]] は、コンテナの div に 'btn-group' をデフォルトで使用しますが、ボタンを垂直に並べるために 'btn-group-vertical' を代りに使いたいことがあるでしょう。 +単純に 'class' オプションを使うと、'btn-group-vertical' が 'btn-group' に追加されるだけで、正しくない結果が生成されることになります。 +ウィジェットのデフォルトのクラスをオーバーライドするためには、'class' オプションに配列形式を使用して、'widget' キーの下にカスタマイズしたクラスの定義を指定しなければなりません。 + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // 'btn-group' を 'btn-group-vertical' で置き換え + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` diff --git a/docs/guide-pt-BR/README.md b/docs/guide-pt-BR/README.md index f48ce62..2fd0340 100644 --- a/docs/guide-pt-BR/README.md +++ b/docs/guide-pt-BR/README.md @@ -1,14 +1,14 @@ Extenção Twitter Bootstrap para Yii 2 ===================================== -A extensão inclui suporte para ao framework [Bootstrap 3](http://getbootstrap.com/) marcação e componentes +A extensão inclui suporte para marcação e componentes ao framework [Bootstrap 3](http://getbootstrap.com/) (também conhecido como "Bootstrap Twitter"). Bootstrap é um excelente framework ágil, que pode acelerar bastante o do lado do cliente do seu processo de desenvolvimento. O núcleo de bootstrap é representado por duas partes: - Noções básicas de estilo CSS, tais como um sistema de rede layout, tipografia, classes auxiliares, e os utilitários de resposta. -- Pronto para usar componentes, tais como formulários, menus, paginação, caixas de modais, guias, etc. +- Componentes prontos para usar, tais como formulários, menus, paginação, caixas de modais, guias, etc. Iniciando --------------- @@ -20,6 +20,8 @@ Uso ----- * [Yii widgets](usage-widgets.md) +* [Html helper](helper-html.md) +* [Asset Bundles](asset-bundles.md) Tópicos Adicionais ----------------- diff --git a/docs/guide-pt-BR/asset-bundles.md b/docs/guide-pt-BR/asset-bundles.md new file mode 100644 index 0000000..154b4e6 --- /dev/null +++ b/docs/guide-pt-BR/asset-bundles.md @@ -0,0 +1,15 @@ +Asset Bundles +============= + +Bootstrap é uma solução complexa para front-end, o qual inclue CSS, JavaScript, fontes e assim por diante. +A fim de permitir que você tenha controle mais flexível sobre componentes Bootstrap , esta extensão fornece vários asset bundles. Eles são: + +- [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - Contém apenas arquivos CSS. +- [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - Depende de [[yii\bootstrap\BootstrapAsset]], contem os arquivos JavaScript. +- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - depende de [[yii\bootstrap\BootstrapAsset]], contém o tema padrão do Bootstrap. + +Necessidades de aplicações específicas podem exigir utilização de pacotes diferentes ( ou a combinação bundle). +Se você precisa apenas de estilos CSS, [[yii\bootstrap\BootstrapAsset]] será o suficiente para você. No entanto , se +você quiser usar Bootstrap JavaScript, você precisa se registrar [[yii\bootstrap\BootstrapPluginAsset]]. + +> Tip: a maioria dos widgets [[yii\bootstrap\BootstrapPluginAsset]] registram automaticamente. diff --git a/docs/guide-pt-BR/helper-html.md b/docs/guide-pt-BR/helper-html.md new file mode 100644 index 0000000..27ccdd1 --- /dev/null +++ b/docs/guide-pt-BR/helper-html.md @@ -0,0 +1,18 @@ +Bootstrap introduz construções HTML mais consistentes e esqueletos, que permitem a criação de diferentes efeitos visuais. Apenas o mais complexos deles são cobertos por os widgets fornecidos com esta extensão . O restante deverá ser escrito manualmente usando escrita HTML direta. No entanto, vários casos especiais de marcação Bootstrap são cobertos pelo helper [[\yii\bootstrap\Html]]. [[\yii\bootstrap\Html]] é uma versão melhorada de [[\yii\helpers\Html]] dedicada à quem precisa do Bootstrap. Ele fornece vários métodos úteis : + + icon() - allows rendering of Glyphicon icons + staticControl() - allows rendering of form "static controls" + +[[\yii\bootstrap\Html]] herda toda funcionalidade disponível em [[\yii\helpers\Html]] e pode ser usado como um substituto , para que você não precisa de ambos dentro de seus arquivos de views . Por exemplo: + + + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> + + Atenção: Não confunda [[\yii\bootstrap\Html]] e [[\yii\helpers\Html]], tenha o cuidado de que classe você está usando dentro de seus arquivos de views. diff --git a/docs/guide/README.md b/docs/guide/README.md index b6b25a2..db62c99 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -20,6 +20,8 @@ Usage ----- * [Yii widgets](usage-widgets.md) +* [Html helper](helper-html.md) +* [Asset Bundles](asset-bundles.md) Additional topics ----------------- diff --git a/docs/guide/asset-bundles.md b/docs/guide/asset-bundles.md new file mode 100644 index 0000000..6d7bd38 --- /dev/null +++ b/docs/guide/asset-bundles.md @@ -0,0 +1,16 @@ +Asset Bundles +============= + +Bootstrap is a complex front-end solution, which includes CSS, JavaScript, fonts and so on. +In order to allow you the most flexible control over Bootstrap components, this extension provides several asset bundles. +They are: + +- [[yii\bootstrap\BootstrapAsset|BootstrapAsset]] - contains only the main CSS files. +- [[yii\bootstrap\BootstrapPluginAsset|BootstrapPluginAsset]] - depends on [[yii\bootstrap\BootstrapAsset]], contains the javascript files. +- [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] - depends on [[yii\bootstrap\BootstrapAsset]], contains the Bootstrap default theme CSS. + +Particular application needs may require different bundle (or bundle combination) usage. +If you need only CSS styles, [[yii\bootstrap\BootstrapAsset]] will be enough for you. However, if +you want to use Bootstrap JavaScript, you need to register [[yii\bootstrap\BootstrapPluginAsset]]. + +> Tip: most of the widgets register [[yii\bootstrap\BootstrapPluginAsset]] automatically. diff --git a/docs/guide/helper-html.md b/docs/guide/helper-html.md new file mode 100644 index 0000000..ed7fe27 --- /dev/null +++ b/docs/guide/helper-html.md @@ -0,0 +1,30 @@ +Html helper +=========== + +Bootstrap introduces many consistent HTML constructions and skeletons, which allow creating different visual effects. +Only the most complex of them are covered by the widgets provided with this extension. The rest should be composed manually +using direct HTML composition. +However, several special Bootstrap markup cases are covered by [[\yii\bootstrap\Html]] helper. +[[\yii\bootstrap\Html]] is an enhanced version of the regular [[\yii\helpers\Html]] dedicated to the Bootstrap needs. +It provides several useful methods: + + - `icon()` - allows rendering of Glyphicon icons + - `staticControl()` - allows rendering of form "static controls" + +[[\yii\bootstrap\Html]] inherits all functionality available at [[\yii\helpers\Html]] and can be used as a substitute, +so you don't need them both inside your view files. +For example: + +```php + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> Attention: do not confuse [[\yii\bootstrap\Html]] and [[\yii\helpers\Html]], be careful of which class + you are using inside your views. diff --git a/docs/guide/usage-widgets.md b/docs/guide/usage-widgets.md index 004a949..8adcfec 100644 --- a/docs/guide/usage-widgets.md +++ b/docs/guide/usage-widgets.md @@ -17,3 +17,38 @@ framework features. All widgets belong to `\yii\bootstrap` namespace: - [[yii\bootstrap\NavBar|NavBar]] - [[yii\bootstrap\Progress|Progress]] - [[yii\bootstrap\Tabs|Tabs]] + + +## Customizing widget CSS classes + +The widgets allow quick composition of the HTML for the bootstrap components that require the bootstrap CSS classes. +The default classes for a particular component will be added automatically by the widget, and the optional classes that you may want to customize are usually supported through the properties of the widget. + +For example, you may use [[yii\bootstrap\Button::options]] to customize the appearance of a button. +The class 'btn' which is required for a button will be added automatically, so you don't need to worry about it. +All you need is specify a particular button class: + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // produces class "btn btn-primary" +]); +``` + +However, sometimes you may need to replace the default classes with the alternative ones. +For example, the widget [[yii\bootstrap\ButtonGroup]] uses 'btn-group' class for the container div by default, +but you may need to use 'btn-group-vertical' instead to align the buttons vertically. +Using a plain 'class' option simply adds 'btn-group-vertical' to 'btn-group', which will produce an incorrect result. +In order to override the default classes of a widget, you need to specify the 'class' option as an array that contains the customized class definition under the 'widget' key: + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical' + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` diff --git a/tests/NavTest.php b/tests/NavTest.php index 3fad720..3510af4 100644 --- a/tests/NavTest.php +++ b/tests/NavTest.php @@ -47,4 +47,43 @@ EXPECTED; $this->assertEqualsWithoutLE($expected, $out); } + + public function testRenderDropDownWithDropDownOptions() + { + Nav::$counter = 0; + $out = Nav::widget( + [ + 'items' => [ + [ + 'label' => 'Page1', + 'content' => 'Page1', + ], + [ + 'label' => 'Dropdown1', + 'dropDownOptions' => ['class' => 'test', 'data-id' => 't1', 'id' => 'test1'], + 'items' => [ + ['label' => 'Page2', 'content' => 'Page2'], + ['label' => 'Page3', 'content' => 'Page3'], + ] + ], + [ + 'label' => 'Dropdown2', + 'visible' => false, + 'items' => [ + ['label' => 'Page4', 'content' => 'Page4'], + ['label' => 'Page5', 'content' => 'Page5'], + ] + ] + ] + ] + ); + + $expected = <<
  • Page1
  • + +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } }