Twitter-Bootstrap Tools

Buttons Group component

 TwBs2l\Component\Group

Casi todas las clases que ofrecen grupos, ToolBar Component, NavBar Component, Carrousel, Album Component, ... extienden esta clase, sobreescribiendo algunos de sus métodos para establecer los atributos por defecto que las caracterizan.

Puede ser usada de dos maneras:

Constructor

$grupo = new \TwBs2l\Component\Group($typeName, $groupElements, $groupOptions)
  donde:
    // especificación del tipo de componente 
    $typeName = '' | 'btn-group'
  
    // Array opcional de definiciones de los componentes contenidos
    $groupElements = [],
  
    // Definición sintética del grupo usando un array de definición de componente
    $groupOptions = [],
      
    En caso de ser nulo el array de componentes anidadas debe pasarse en la clave 'innerHtm' de la definición.
    Recíprocamente, si se pasa el array de componentes, tal clave es ignorada.
Ejemplo 1. Grupo básico
  $btn1 = [
    'tagName'           => 'button',
    'tipoDeElemento'    => 'btn',
    'clases'            => ['btn', 'btn-default'],
    'attributes'        => [],
    'unKeyedAttributes' => [],
    'innerHtm'          => 'Botón uno'
  ],
 
  $btn2 = $btn1;
  $btn2['innerHtm']  = 'Botón dos';
  $btn3 = $btn1;
  $btn3['innerHtm']  = 'Botón tres';
  $btn3['clases'] = ['btn', 'btn-primary']
  // Nótese que bastan ligeros cambios 
  // a la definición del primer botón.
 
  $btns = [
    $btn1, $btn2, $btn3
  ];
  $grupo = new Group('btn-group', $btns)
  $salida = $grupo->toString();
  //Ahora pasar la salida a su destino
  echo $salida;
Si ahora fuese necesario asociar comportamientos o acciones a los botones para convertirlos en verdaderos controles de comando basta con asignarles algunos atributos antes de instanciar el grupo. ej: 
  $btn1['attributes']['onclick'] = "llamadojavascript(params ...)", ];
  // observar el uso de comilla doble por si params incluye constantes que deban pasar
  // usando comillas simples.
  $btn2['attributes'] = [
    'form' => 'form_id', 'formaction' => 'url_a_invocar', 'type' => 'submit',
  ];
  $btn3['clases'][] = 'disabled';
  // Nótese que la clase es agregada al array.
Ejemplo 2. Size small
emplea $gbdef=[
    'clases' => ['btn-group-sm'],
  ];
  $gb2 =new Group(
    'btn-group', $gbitems, $gbdef);
  echo $gb2->toString();
Ejemplo 3. Size large
emplea $gbdef=[
    'clases' => ['btn-group-lg'],
  ];
  $gb3 =new Group('btn-group', $gbitems, $gbdef);
  echo $gb3->toString();
Ejemplo 4. Barra az preparada usando el siguiente juego de instrucciones:
  1. Crear una plantilla de definición de componente. (No todas las claves son necesarias) 
    $objpad = [
    'tagName'     => 'button',
    'tipoDeElemento'=> 'btn',
    'clases'   => ['btn', 'btn-default'],
    'attributes'   => [],
    'unKeyedAttributes'   => [],
    'context' => 'primary',
    'innerHtm'   => ''
];
  2. Iterar sobre el alfabeto para tener un array de definiciones de botones: 
    $azinnr = [];
for($i = 65; $i<79; $i++){ $objpad['innerHtm'] = '&#'.$i.';'; $azinnr[] = $objpad; }
$objpad['innerHtm'] = '&Ntilde'; $azinnr[] = $objpad;
for($i = 79; $i<91; $i++){ $objpad['innerHtm'] = '&#'.$i.';'; $azinnr[] = $objpad; }
  3. Crear un array de definición de grupo insertando los botones 
    $azgroup = [
    'tagName'     => 'div',
    'tipoDeElemento'=> 'btn-group',
    'clases'   => [],
    'attributes'   => [],
    'unKeyedAttributes'   => [],
    'innerHtm'   => $azinnr,
];
  4. Crear la instancia y mostrar su contenido con un llamado sintético a Component Factory: 
    echo \TwBs2l\Factory\TwBsFactory::getBsElement($azgroup)
Ejemplo 5. Barra con dropdowns anidados

  Se preparan las listas a mostrar en los dropdowns.
  Para este ejemplo se usa la misma en los tres.
  $lista = [
    'item1' => [
      'text' => 'primer item',
      'link' => '#', 
      'disabled' => 1, // mostrar deshabilitado
      'badge' => 1,
    ],
    '%sep%', // para mostrar un separador
    'item2' => [
      'id' => 'itm-243',
      'text' => 'Item 243, tiene id',
      'badge' => 243,
      'link'  => '/243',
    ],
    [
      'text'=> 'encabezado de sección',
      'isheader' => 1, // para insertar un encabezado
    ],
    [
      'text'=> 'textoa a mostrar 3',
      'link'=> 'uri_a_enlazar1',
      'badge' => 64,
      'context' => '',
      'clase' => ['active']
    ],
  ];
 
  // Se preparan los atributos comunes a 
  // los dropdowns:
  $dddef = [
    'clases' => ['btn-group', 'btn-group-sm'], 
    'attributes' => ['role'=> 'group']
  ];
  // Se instancian asignando context para tener
  // efecto gráfico
  $dropdown = new \TwBs2l\Component\DropDown(
    'Botón normal', 0, $lista, 'default', $dddef);
  $success = new \TwBs2l\Component\DropDown(
    'Success', 0, $lista, 'success', $dddef);
  $dngerup = new \TwBs2l\Component\DropDown(
    'Danger alineado derecha', 3, $lista, 
    'danger', $dddef);
  // Se anexan las instancias al atributo innerHtm del
  // grupo usado en el ejemplo 2.
  $gbitems[] = $dropdown; 
  $gbitems[] = $success; 
  $gbitems[] = $dngerup;
  // Se emplea la plantilla común a los grupos para
  // crear una definición nueva. Y se establece su
  // clave innerHtm
  $grupo5 = $objpad;
  $grupo5['innerHtm'] = $gbitems;
  $grupo5['clases'][] = 'btn-group-sm';
  // Se muestra usando un llamado sintético a 
  // Component factory
  echo \TwBs2l\Factory\TwBsFactory::getBsElement($grupo5);

Twitter-Bootstrap Tools