From 22b962fb898be4471eb91853a0f5f7601643c58f Mon Sep 17 00:00:00 2001 From: pana1990 Date: Fri, 29 May 2015 14:03:29 +0200 Subject: [PATCH] Update guide-es [skip ci] --- docs/guide-es/usage-widgets.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/docs/guide-es/usage-widgets.md b/docs/guide-es/usage-widgets.md index 1605829..75189b2 100644 --- a/docs/guide-es/usage-widgets.md +++ b/docs/guide-es/usage-widgets.md @@ -18,3 +18,41 @@ al namespace `\yii\bootstrap`: - [[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'], + ] +]); +```