Explorar por categoría
GrapesJS Componentes
Las librerías de componentes de GrapesJS añaden elementos de interfaz reutilizables y configurables directamente al panel de componentes del editor. Botones, campos de formulario, tarjetas, modales y barras de navegación: los paquetes de componentes ofrecen a tus usuarios un conjunto pulido de piezas sin necesidad de desarrollar cada elemento a medida. Explora colecciones de componentes GrapesJS gratuitas y premium, todas con documentación e información de compatibilidad de versiones.
Sobre GrapesJS Componentes
Los componentes de GrapesJS son los objetos del modelo interno que representan cada elemento del lienzo, desde un simple div hasta un widget interactivo complejo. Los plugins de componentes amplían el sistema de tipos de GrapesJS registrando nuevas definiciones: estructuras HTML propias con sus estilos, traits y comportamientos de interacción. Un plugin de componentes puede añadir un acordeón completamente configurado, un panel de pestañas, una tabla de datos, un widget de gráficas o un mapa incrustado; cada uno se comporta como una unidad seleccionable dentro del editor, con sus propias entradas en el panel de estilos y propiedades editables expuestas mediante la interfaz de traits de GrapesJS. Las librerías de componentes de GJS.Market resultan especialmente útiles para constructores de aplicaciones y editores de paneles, donde los usuarios necesitan colocar elementos interactivos complejos sin escribir código. A diferencia de los bloques, que son instantáneas HTML estáticas, los componentes mantienen su estructura: redimensionar un componente de rejilla reorganiza correctamente sus columnas hijas y editar la etiqueta de una pestaña actualiza todas las referencias automáticamente. Al elegir una librería de componentes, comprueba que las definiciones incluyan controles de traits responsivos y que coincidan con el framework CSS que carga tu vista previa del lienzo.
GrapesJS Componentes — Preguntas frecuentes
- ¿Qué es un componente de GrapesJS?
- Un componente es el objeto del modelo que GrapesJS mantiene para cada elemento del lienzo. Guarda la etiqueta, los atributos, los estilos, los componentes hijos y las reglas sobre qué admite ese elemento, no solo su HTML. Como el editor trabaja sobre ese modelo y no sobre el marcado en bruto, un componente puede imponer su propia estructura, exponer propiedades editables y reaccionar al moverse o redimensionarse.
- ¿Cuál es la diferencia entre un componente y un bloque?
- Un bloque es una entrada del panel de bloques que inserta marcado al arrastrarlo al lienzo; un componente es en lo que se convierte ese marcado una vez está en el modelo. Los bloques son instantáneas estáticas, los componentes conservan comportamiento. La mayoría de librerías incluyen ambos: un tipo de componente que define cómo funciona un acordeón y un bloque para que el usuario lo arrastre.
- ¿Qué son los traits en GrapesJS?
- Los traits son las propiedades editables que un componente expone en el panel de ajustes: el destino de un enlace, un placeholder, un endpoint de API, el número de columnas. Permiten a usuarios sin perfil técnico configurar un componente sin tocar código ni estilos. Una buena librería define traits con sentido para cada componente, incluidos traits responsivos cuando la maquetación depende del breakpoint.
- ¿Cómo creo un tipo de componente personalizado?
- Regístralo mediante la API DomComponents con un model y una view: el model declara los valores por defecto, los traits y el matcher isComponent que reconoce el elemento en HTML existente; la view controla cómo se renderiza y se comporta en el lienzo. Envuelve el registro en un plugin y pasa a ser reutilizable entre proyectos: así están construidas exactamente las librerías de esta categoría.
- ¿Qué librerías de componentes encajan en constructores de apps y paneles?
- Busca librerías cuyos componentes sean realmente interactivos —tablas de datos, paneles de pestañas, gráficas, mapas incrustados— y no simple marcado con estilos. Esos conservan su estructura al editarlos, así que redimensionar una rejilla reorganiza sus columnas en lugar de romper el diseño. Comprueba que los traits cubran los ajustes que tus usuarios necesitan y que los componentes coincidan con el framework CSS cargado en tu lienzo.
Explorar por etiqueta