Twitter-Bootstrap Tools

Panels Component

Ejemplo de panel simple

Ejemplo 1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.

Pie de panel

Código usado para invocar

1. Se establece la cadena $cuerpo asignandole un texto dummie.
2. Se invoca el constructor del panel:

$panel = new \TwBs2l\Component\BsPanel('Ejemplo 1', $cuerpo, 'Pie de panel', 'primary');

3. Se asigna el contenido a la salida a mostrar:

echo $panel->toString();

4. Esposible insertar contenidos y características especiales usando los arrays opcionales, como se indica más abajo.

Clase: \TwBs2l\Component\BsPanel

Constructor: $panel = new \TwBs2l\Component\BsPanel($tit, $cuerpo, $pie, $context, $extra, $tOptns, $cOptns, $pOptns);
Dónde los cuatro primeros parámetros establecen los contenidos "naturales" del panel (como se ilustra en el ejemplo 1 - arriba) y los cuatro finales son arrays de definición del elementos que se emplean para establecer atributos adicionales de los contenedores (principal y sus tres secciones anidadas).

el parámetro $extra admite las claves: 'clases', 'id', 'attributes' y 'unKeyedAttributes'. Las demás las son ignoradas.

Los otros tres, admiten todas las claves. Pero, el cuerpo tiene un comportamiento especial para la clave 'innerHtm' pues no hace inserción estricta y anexa el array de elementos adicionales luego del contenedor del mismo, para aprovechar ciertas características de manejo que ofrece Bootstrap para objetos embebidos en paneles.

Panel con imagen empotrada

Ejemplo 2

Código usado para invocar

$imgdef = [
    'tagName' => 'img',
    'attributes' => [
      'src' => '/img/jXfnfCB6z128i.jpg', 
      'width' => 'auto', 'height'=>'auto' ],
    'unKeyedAttributes' => [],
    'clases' => ['embed-responsive-item'],
    'context' => '',
    'id' => 'img-01',
    'innerHtm' => '',
    'tipoDeElemento' => 'ImagePanel',
    'autoClose' => TRUE,];

$imgembed = [
    'tagName' => 'div',
    'attributes' => [],
    'unKeyedAttributes' => [],
    'clases' => [],
    'context' => '',
    'id' => 'embeder-01',
    'innerHtm' => [$imgdef],
    'tipoDeElemento' => 'objectEmbeder',
    'ratio' => ['x'=>16, 'y'=>9],
    'autoClose' => FALSE,];

$panimagen = new \TwBs2l\Component\BsPanel('Ejemplo 2', '', '', 'success', $imgembed);

  $panimagen->toString();

La definición del componente objectEmbeder incluye claves innecesarias, que por ser nulas podrían no incluirse en la misma. Bastan las tres claves resaltadas para tener una declaración correcta.

Twitter-Bootstrap Tools