0
224
VisualizaçõesAgregar estilo en línea a los componentes
Estoy intentando actualizar algunos componentes en AEM para permitir estilos en línea. Por ejemplo, tengo un componente con el nombre Row-Dual Column y no sé cómo permitir el estilo en línea para este componente. Fila-Columna dual html consiste en:
El código en texto:
<table class="ac_dualColumn" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100% !important;"> <tr> <td valign="top" id="ac-column-left-cell" class="ac-content-cell ac-column-cell" width="50%" style="width: 50%; padding-right: 10px;"> <div style="margin-bottom: 20px;"> <div data-sly-resource="${'parLeft' @ resourceType='mcm/campaign/components/parsys'}" data-sly-unwrap></div> </div> </td> <td> <td valign="top" id="ac-column-right-cell" class="ac-content-cell ac-column-cell" width="50%" style="width: 50%; padding-left: 10px;"> <div style="margin-bottom: 20px;"> <div data-sly-resource="${'parRight' @ resourceType='mcm/campaign/components/parsys'}" data-sly-unwrap></div> </div> </td> </tr> </table> 
Si este problema es demasiado para escribir, me encantaría comunicarme por teléfono o correo electrónico. Gracias
2 Respostas
Responde à pergunta0
Así es como lo abordaría:
Caso-1: Si solo necesito ciertos estilos creados
<div class="custom-inline-styles" style="width='${properties.width @context='styleToken'}'; display='${properties.display @context='styleToken'}'>y así..
Propiedades es cómo accedemos a los valores creados a simple vista .
Caso 2: si necesito que se cree todo el estilo en línea
<div class="custom-inline-styles" style="${properties.inlineStyleString @context='styleString'}"0
¿Puede proporcionar más detalles sobre el componente? ¿De dónde vendrían las definiciones de estilo? ¿Qué aspecto tiene el jcr del cuadro de diálogo del componente? Como se mencionó en una respuesta anterior, acceder a la propiedad "inlineStyle" (o como se llame) de su componente se vería así:
<div style="${properties.inlineStyle @ context='styleString'}">content content</div> Sin embargo, casi siempre desaconsejaría los estilos en línea a menos que sea absolutamente necesario. Establecen una condición que es propensa a conflictos, especialmente si los autores no técnicos están definiendo los estilos agregados al componente. En su lugar, definiría un conjunto de opciones de diseño en el componente (p. ej., ./backgroundColor: 'fondo rojo, fondo azul, fondo verde') que están asociadas con classNames que puede aplicar al marcado y control con una hoja de estilo CSS. De esa manera, no obtendrá anulaciones de estilo accidentales que requieren reglas !important y muchos dolores de cabeza.
Componente:
./backgroundColor -- granite/ui/components/coral/foundation/form/select - items - ./backgroundRed -- text: 'Background Red'; value: 'background-red' - ./backgroundBlue -- text: 'Background Blue'; value: 'background-blue' - ./backgroundGreen -- text: 'Background Green'; value: 'background-green'HTL:
<div class="${properties.backgroundColor}">content content content</div>CSS:
.background-red { background-color: red; } .background-blue { background-color: blue; } .background-green { background-color: green; }