Helpers

Los helpers de botones facilitan la implementación de acciones comunes en la plataforma, tales como Eliminar, Cerrar, Guardar, entre otros. Explora las opciones en el select del Playground a continuación, para visualizar el bloque de código correspondiente.

Playground

CrearCerrarGuardarGenerar reporteArchivarAceptarEnviarEditarCancelarEliminarVerAgregarFiltrarSubirVer DetallesVer más

Ruby

<%= create_button "Label Adicional",  href: "#" %>

HTML

<button class="btn btn-primary btn-md  text-capitalize" href="#">
    <span class="btn-label">Crear</span>
</button>

JavaScript

  import $ from 'jquery';

  export default function (element) {
    const $self = $(element);

    const txt = $self.find('.more-content-wrapper');
    txt.ready(function () { checkContentVisibility (); });

    // Las imágenes por ckeditor no tienen alto en el dom,
    // su tamaño se establece cuando la imagen es mostrada en el HTML
    txt.find('img').on('load', function () { checkContentVisibility (); });

    const forceActivation = $self.data('force-collapse');

    // Cuando se termina de cargar el contenido podemos ver si necesita ser escondido
    function checkContentVisibility() {
      // El maxHeigthCollapsed indica la altura máxima que debe tener el contenido cuando
      // está en estado colapsado
      let maxHeightCollapsed;
      const hasMaxHeightCollapsed = typeof $self.data('max-height-collapsed') === 'number';
      if (hasMaxHeightCollapsed) {
        maxHeightCollapsed = toogleParent.data('max-height-collapsed') + 'px';
      }

      if (hasMaxHeightCollapsed) {
        txt.css('maxHeight', maxHeightCollapsed);
      }

      const fullHeigth = txt.prop('scrollHeight');
      const currentHeigth = txt.height();

      // El fullHeigth dicta un tamaño superior mayor por redondeo.
      // Apartamos 2px para evitar cargar este componente para abrir 2px de contenido.
      const pxErrorRange = 2;

      // Verificamos si el contenido es mayor el ancho por defecto.
      if (fullHeigth > currentHeigth + pxErrorRange || forceActivation) {
        $self.addClass('content-collapse');

        $self.find('.toogle-more-link').on('click', function () {
          const toogleLink = $(this);
          const toogleParent = toogleLink.closest('[data-show-hide-more-content="true"]');
          const toogleWrapper = toogleParent.find('.more-content-wrapper');
          const toogleMaxHeightCollapsed = toogleParent.data('max-height-collapsed') + 'px';
          const toggleButtonLabel = toogleLink.find('.btn-label');
          const toogleExpanded = toogleParent.data('expanded');

          // Si expand == false, no se expandirá el contenido al presionar 'ver más'
          let expand = true;
          const hasExpand = typeof toogleParent.data('expand') === 'boolean';
          if (hasExpand) {
            expand = toogleParent.data('expand');
          }

          if (toogleExpanded === true) {
            toogleWrapper.css('minHeight', 'auto');
            toogleParent.removeClass('content-expanded');
            toogleParent.addClass('content-collapse');

            if (hasMaxHeightCollapsed) {
              toogleWrapper.css('maxHeight', toogleMaxHeightCollapsed);
            }

            if (toogleLink.text() === 'Ver menos' || toggleButtonLabel.text() === 'Ver menos') {
              toogleLink.text('Ver más');
            }

            toogleParent.data('expanded', false);
          }
          else {
            if (expand) {
              toogleParent.addClass('content-expanded');
              toogleParent.removeClass('content-collapse');

              if (hasMaxHeightCollapsed) {
                toogleWrapper.css('maxHeight', 'none');
              }

              if (toogleLink.text() === 'Ver más' || toggleButtonLabel.text() === 'Ver más') {
                toogleLink.text('Ver menos');
              }

              toogleParent.data('expanded', true);
            }
          }
        });
      }
    }
  }
  

Lista de parámetros

Parámetro

Tipo

Detalle

label	String	texto adicional del botón, aplica para el helper Crear y Ver Detalles
type	:button, :submit, :reset	define el tipo de botón
icon	Symbol	viene predefinido en el botón cuando es necesario
responsive	Boolean	define si el btn será responsive es decir ocultara el texto y será un btn icon en pantalla sm
data	Hash	Información extra que se puede utilizar en el botón
href (url para el caso de btn_load_more)	URL	ruta o path para generar el link_to
mode	String	solo aplica para el helper btn_load_more, define si es botón para ver o cargar más, por defecto load (show para ver más)
ic	Hash	atributos de intercooler para el botón