PREGUNTA: Establecer el estado vacío del componente

Question

Hola @artf,

¿Cómo recomendarías darle un estado vacío a un componente?

Por ejemplo, si tengo un componente de layout (es decir, una columna) que debería contener elementos hijos (por ejemplo, componente de texto o imagen). Cuando ese componente de diseño esté vacío, me gustaría mostrar algo de texto de ayuda dentro, como "Añadir un elemento aquí" y cuando tenga hijos, no debería mostrarse.

Por supuesto, esto solo debería existir en la vista y no renderizarse en el HTML de salida.

Aquí tienes un ejemplo de lo que quiero crear: ! imagen

Si hay otro problema que explique cómo hacerlo, pido disculpas, busqué y no encontré nada al respecto.

¡Gracias de antemano! Josh

Joshmamroud · Accepted Answer

@artf ¡Eres EL HOMBRE! Ni siquiera sabía que existía el selector ':empty'. ¡Tan sencillo, tan increíble! Alucinado. ¡Gracias!

artf · Answer

He hecho algo similar de esta manera usando solo CSS '''js const doc = editor. Canvas.getDocument();

... addType('cc', { modelo: {...}, Vista: { init() { ... const stl = doc.querySelector('style#cc-id');

if (!stl) { doc.body.insertAdjacentHTML('beforeend', ' <estilo id="cc-id"> .cc-class:empty:after { contenido: "Bloque vacío"; text-align: center; pantalla: bloqueo; } </style> `); } } } })

hellocaio · Answer

Hola Josh, me gusta tu idea. No soy experto, pero aquí tienes un par de impresiones: Básicamente, añadiría algún tipo de bandera al propio componente. Idea 1) Si el componente es algún tipo de contenedor (es decir, div), añadir un '

Arrastra un elemento aquí

', y cuando se añada un nuevo componente, podrías usar el evento del editor 'component:add' y comprobar si hay algún hermano con la clase 'empty-message' y eliminarlo. idea 2) Añadir una clase 'empty message' al p...

PREGUNTA: Establecer el estado vacío del componente

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

Aplica cambios en el estilo de mager a una clase

Convertir JSON a HTML lado servidor

[Pregunta]: ¿Cómo insertar una imagen dentro del enlace?

Redimensionamiento de componentes de la cuadrícula El ancho de sus celdas no funciona

Plugins de pago que cumplen con este problema

Explorar categorías de plugins