WYSIWYG HTML y estilos CSS inline compatibles

Los campos personalizados WYSIWYG de NinjaOne funcionan con una lista de permisos de elementos y estilos en línea compatibles que se pueden utilizar para dichos elementos. NinjaOne también proporciona clases CSS que los técnicos pueden utilizar para aplicar estilos en NinjaOne.

Índice:

Usar el editor WYSIWYG en NinjaOne
Usar HTML y estilos en línea a través de la API y la CLI
Elementos HTML
Opciones de estilos en línea
Gráficos
Clases CSS de NinjaOne

Usar el editor WYSIWYG en NinjaOne:

La aplicación de documentación de NinjaOne ofrece campos WYSIWYG (lo que ves es lo que obtienes) tanto en la base de conocimientos como en forma de campo personalizado para las plantillas de documentos.

Funcionalidad WYSIWYG:

Por defecto, cuando un campo HTML tiene más de 10 000 caracteres, se contrae y el usuario debe hacer clic en el botón de expandir para ver el contenido completo.
El límite máximo de caracteres para los campos WYSIWYG es de 200 000 caracteres.
No puede haber más de 20 campos personalizados WYSIWYG por formulario o plantilla de documento. Una vez alcanzado el límite, la opción WYSIWYG para el tipo de campo quedará bloqueada.

Usar HTML y estilos en línea a través de la API y la CLI:

Los administradores y técnicos del sistema NinjaOne pueden utilizar HTML y estilos en línea al crear campos personalizados de rol/globales y documentos sobre aplicaciones y servicios que utilicen el tipo de campo «WYSIWYG».

Estas opciones de estilo permiten una mayor flexibilidad y personalización a la hora de mostrar datos en NinjaOne. Por ejemplo, la captura de pantalla siguiente muestra cómo se vería si un campo personalizado conteniera widgets con hipervínculos:

Nota importante: Estas opciones de estilo deben aplicarse desde la API o la CLI y, por el momento, no pueden realizarse desde la consola de NinjaOne.

A continuación se incluye una lista completa de los elementos y clases CSS que se pueden usar para crear tu contenido:

Elementos HTML:

Elemento	¿Proporciona soporte para clases de NinjaOne?
a	Sí
blockquote	Sí
leyenda	Sí
código
col	Sí
div	Sí
h1	Sí
h2	Sí
h3	Sí
h4	Sí
h5	Sí
h6	Sí
i	Sí
li	Sí
ol	Sí
p	Sí
pre
span	Sí
Tabla	Sí
tbody	Sí
td	Sí
tfoot	Sí
th	Sí
thead	Sí
tr	Sí
ul	Sí

Opciones de estilo en línea:

Estilo	Valores permitidos
Color	Códigos de color RGB o hexadecimales. (ej.: RGB (240,30,50,.7), #f015ca)
Color de fondo	Códigos de color RGB o códigos Hex. (ej.: RGB (240,30,50,.7), #f015ca)
Pantalla	block, inline, inline-block, flex, inline-flex
justify-content	center, start, end, flex, flex-start, flex-end, left, right, normal, space-between, space-around, space-evenly
align-items	center, start, end, flex, flex-start, flex-end, left, right, normal, stretch
word-break	normal, break-all, keep-all, break-word
tamaño-del-cuadro	border-box, content-box
espacio en blanco	normal, no-wrap, pre, pre-wrap, pre-line, break-spaces
desbordamiento	Normal, break-word, pre, anywhere
text-align	inicio, fin, izquierda, centro, derecha, justificado, justificado-todo, igualar-al-padre
ancho	Valores de unidades CSS válidos (p. ej., 100 %, 400 px, auto, 2 em, etc.)
altura	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2em, etc.)
tamaño de fuente	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2em, etc.)
font-family	serif, sans-serif, monospace, cursive, fantasy, sistema-ui, emoji
margin	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2em, etc.)
margin-top	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2em, etc.)
margin-right	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2em, etc.)
margin-bottom	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
margin-left	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
padding	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2 em, etc.)
padding-top	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
padding-right	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2 em, etc.)
padding-bottom	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2em, etc.)
padding-left	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
border-width	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2em, etc.)
border-style	ninguno, solid, dashed, inset, outset
border-color	Códigos de color RGB o códigos Hex (p. ej.: RGB(240,30,50,.7), #f015ca)
border-top	Valores de unidades CSS válidos (p. ej., 100 %, 400 px, Auto, 2em, etc.)
border-right	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2 em, etc.)
border-bottom	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
border-left	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
border-radius	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, Auto, 2em, etc.)
border-collapse	Colapso, separación

Gráficos:

NinjaOne es compatible con Charts.css, un nuevo marco de código abierto para la visualización de datos. Para obtener más información, consulta Introducción | Charts.css (chartscss.org).

NinjaOne recomienda utilizar los comandos Piped para configurar HTML en campos personalizados a través de la CLI.

$HTML | Ninja-Property-Set-Piped nombre_campo

Ejemplo:




































































<DIV>
<DIV class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">
<TABLE class="charts-css column show-heading">


<TBODY>
<TR>
<TD style="--size: 0.4"> <SPAN class="data"> 40 % </[email protected] </DIV>

<div class="col-xl-4 [email protected] <TABLE class="charts-css column show-data-on-hover show-heading"> [email protected] <TBODY> [email protected] <TR> [email protected] <TD style="--size: 0.4"> <SPAN class="data"> 40 % </SPAN> </TD> [email protected] </TR> [email protected] <TR> [email protected] <td style="--size:
<DIV> <SPAN class="data"> 90 % </SPAN> </TD>
</TR>
<TR>
<TD style="--size: 1"> <SPAN class="data"> 100 % </SPAN> </TD>
</TR>
</TBODY>

</TABLE>

</DIV>

<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">

<TABLE class="charts-css bar show-heading">
<TBODY>
<TR>
<TD style="--size: 0.4"> <SPAN class="data"> 40 % </SPAN> </TD>
</TR>
<TR>
<TD style="--size: 0.6"> <SPAN class="data"> 60 % </span> </td>
</tr>
<tr>
<td style="--size: 0.75"> <span class="data"> 75 % </span> </td>
</tr>
<tr>
<td style="--size: 0.9"> <span class="data"> 90 % </span> </td>
</tr>
<tr>
<td style="--size:
>
<table
class="charts-css line multiple show-data-on-hover show-labels show-primary-axis show-10-secondary-axes show-heading">
<tbody>
<tr>
<th scope="row"> 21-03 </th>
<td style="--start: 0.1; --end: 0.3;"><SPAN class="data"> 30 </SPAN></TD>
<td style="--start: 0.6; --end: 0.4;"><SPAN class="data"> 40 </SPAN></TD>
<TD style="--start: 0.8; --end: 0.7;"><SPAN class="data"> 70 </SPAN></TD>
<td style="--start: 0.7; --end: 0.9;"<DIV><SPAN class="data"> 100 </SPAN></TD>
</TR>
<TR>
<TH scope="row"> 20-03 </TH>
<TD style="--start: 0.3; --end: 0.1;"><SPAN class="data"> 10 </SPAN></TD>
<td style="--start: 0.4;
<LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI><LI> --end: 0.3;"><SPAN class="data"> 30 </SPAN></TD>
<td style="--start: 0.6; --end: 0.4;"><SPAN class="data"> 40 </SPAN></TD>
<TD style="--start: 0.9; --end: 0.8;"><SPAN class="data"> 80 </SPAN></TD>
<td style="--start: 0.7;
<TH scope="row"> 18-03 </TH>
<td style="--start: 0,3; --end: 0.1;"><SPAN class="data"> 10 </SPAN></TD>
<TD style="--start: 0.4; --end: 0.6;"><SPAN class="data"> 60 </SPAN></TD>
<td style="--start: 0.8; <DIV><SPAN class="data"> 80 </SPAN></TD>
<TD style="--start: 0.9; --end: 0.9;"><SPAN class="data"> 90 </SPAN></TD>
</TR>
<TR>
<TH scope="row"> 17-03 </TH>
<td style="--start: 0.1; --end: 0.3;"><SPAN class="data"> 30 </SPAN></TD>
<TD style="--start: 0.6; --end: 0.4;"><SPAN class="data"> 40 </SPAN></TD>
<td style="--start: 0.8; --end: 1,0;"><SPAN class="data"> 100 </SPAN></TD>
<td style="--start: 0,9; <DIV><SPAN class="data"> 70 </SPAN></TD>
</TR>
</TBODY>
</TABLE>

</DIV>
<DIV class="col-12">

<UL class="charts-css legend legend-inline legend-rectangle">
<LI> C: </LI>
<LI> D: <LI> CPU </LI>
<LI> Memoria </LI>
</UL>

</DIV>
</DIV>
</DIV>




<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">

<TABLE class="charts-css area show-heading">
<TBODY>
<TR>
<TH scope="row"> 21-03 </TH>
<td style="--start: 0.1; --end: 0.3;"><SPAN class="data"> 30 </SPAN></TD>
<TD style="--start: 0.6; --end: 0.4;"><SPAN class="data"> 40 </SPAN></TD>
<td style="--start: 0.8; --end: 0,7;"><SPAN class="data"> 70 </SPAN></TD>
<td style="--start: 0,7;
--end: 0.1;"><SPAN class="data"> 10 </SPAN></TD>
<TD style="--start: 0.4; --end: 0.6;"><SPAN class="data"> 60 </SPAN></TD>
<td style="--start: 0.7;
--end: 0.3;"><SPAN class="data"> 30 </SPAN></TD>
<TD style="--start: 0.6; --end: 0.4;"><SPAN class="data"> 40 </SPAN></TD>
<td style="--start: 0.9;
--end: 0.1;"><SPAN class="data"> 10 </SPAN></TD>
<TD style="--start: 0.4; --end: 0.6;"><SPAN class="data"> 60 </SPAN></TD>
<td style="--start: 0.8; --end: 0.8;"
--end: 0.3;"><SPAN class="data"> 30 </SPAN></TD>
<TD style="--start: 0.6; --end: 0.4;"><SPAN class="data"> 40 </SPAN></TD>
<td style="--start: 0.8; --end: 1,0;"><SPAN class="data"> 100 </SPAN></TD>
<td style="--start: 0,9; --end: 0.7;"><SPAN class="data"> 70 </SPAN></TD>
</TR>
</TBODY>
</TABLE>
</DIV>




<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex" style="height:300px; <DIV>width: 300px;</DIV> <TABLE class="charts-css pie show-heading"> <TBODY>
<TD style="--start: 0;"> 21-03 </TD>
<TD style="--start: 0;"> 21-03 </TD>
<TD style="--start: 0;"> 21-03 </TD> </TBODY> </TABLE> <TD style="--start: 0;">

<TD style="--start: 0;"> 21-03 </TD>
<TD style="--start: 0;"> 21-03 </TD> <TD style="--start: 0;"> 21-03 </TD> </TBODY> </TABLE> <TD style="--start: 0;"> <TD style="--start: 0;"> 21-03 </TD> <TD style="--start: 0;"> 21-03 </TD> <TD style="--start: 0;"> 21-03 </TD> </TBODY> </TABLE> <TD style="--start: 0;">xml-ph-0159@deepl.
<td style="--start: 0.2; --end: 0.3;"><SPAN class="data"> 10 </SPAN></TD>
</TR>
<TR>
<TH scope="row"> 19-03 </TH>
<td style="--start: 0.3; --end: 0.55;"><SPAN class="data"> 30 </SPAN></TD>
</TR>
<TR>
<TH scope="row"> 18-03 </TH>
<td style="--start: 0.55; <DIV><SPAN class="data"> 10 </SPAN></TD>
</TR>
<TR>
<TH scope="row"> 17-03 </TH>
<td style="--start: 0.75; --end: 1;"><SPAN class="data"> 30 </SPAN></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</DIV>

Clases CSS de NinjaOne:

La documentación y los campos personalizados de NinjaOne son compatibles con el sistema de cuadrícula de Bootstrap 5 y con la biblioteca gratuita Font Awesome 6 para iconos. Además, proporcionamos varias clases para permitir que los técnicos puedan acceder a los estilos de NinjaOne.

Tarjeta estándar
Tarjeta con acción
Tablas
Párrafos
Encabezados
Botones
Fichas informativas
Etiquetas
Tarjetas estadísticas
Gráfico de líneas

Tarjeta estándar


 <DIV class="card flex-grow-1">
 <DIV class="card-title-box">
   <DIV class="card-title"><I class="fas fa-building"></I>&nbsp;&nbsp;<DIV>Detalles del inquilino</DIV>
 </DIV>
 <DIV class="card-body">
   <P class="card-text"></P>
   <P><B>Nombre del inquilino</B><BR>Cliente de ejemplo</P>
   <P><B>Dominio predeterminado</B><BR>example.onmicrosoft.com</p>
   <P><B>ID del inquilino</B><BR>123456-123432-234324-432463452-123</P>
   <P><B>Fecha de creación</B><BR>18/07/2023 10:51:46</<P><B>Dominios</B><BR>example.onmicrosoft.com
   </P>
   <P><B>Usuarios administradores</B><BR>EXO_App2, Administrador de MOD, Administrador de MOD, Cuenta de servicio de Microsoft, Allan
      Deyoung, Nestor Wilke, Isaiah Langer, Megan Bowen, Lidia Holloway</P>
   <P></P>
 </DIV>
</DIV>

Tarjeta con acción







 <DIV class="card flex-grow-1">
 <DIV class="card-title-box">
   <DIV class="card-title"><I class="fas fa-shield-halved"></I>&nbsp;&nbsp;Normas aplicadas por el CIPP</DIV>
   <DIV class="card-link-box"><a
          href="https://localhost:4280/tenant/standards/list-applied-standards?customerId=1e593540-8f80-4831-87a9-f1f95804a206"
          Color del texto<LI><SPAN>Deshabilitar las licencias de autoservicio (AllTenants)</SPAN></LI>
       <LI><SPAN>Habilitar nombres de usuario en lugar de nombres pseudoanonimizados en los informes
               (example.onmicrosoft.com)</SPAN></LI>
   </UL>
   <P></P>
 </DIV>
</DIV>

Tablas

<table>
 <thead>
   <tr>
      <th>Pruebas</th>
      <th>Pruebas</th>
      <th>Pruebas</th>
      <th>Pruebas</th>
      <th>Pruebas</th>
      <th>Pruebas</th>
      <th>Pruebas</th>
      <th>Pruebas</th>
      <th>Pruebas</th>
   </tr>
 </<DIV>thead>
 <TBODY>
   <TR>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas: este tiene un texto mucho más largo. Pruebas, pruebas, pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</</DIV>td>
      <TD>Pruebas</TD>
   </TR>
   <tr class="danger">
      <TD>Pruebas</TD>
      <TD>Pruebas; este tiene un texto mucho más largo: pruebas, pruebas, pruebas</TD>
      <TD>Pruebas</TD>
      <TD>pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
   </tr>
 <tr class="success">
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba: este tiene un texto mucho más largo. Prueba, prueba, prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
   </tr>
 <tr class="other">
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba: este tiene un texto mucho más largo; prueba, prueba, prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
   </tr>
 <tr class="warning">
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas: este tiene un texto mucho más largo; pruebas, pruebas, pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
   </tr>
 <tr class="unknown">
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas: este tiene un texto mucho más largo; pruebas, pruebas, pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
      <TD>Pruebas</TD>
   </TR>
 </tbody>
</TABLE>

Párrafos

<P>Este es un párrafo de ejemplo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</P>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <STRONG>Texto en negrita</STRONG> Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.</P>

Encabezados

<H1>Encabezados</H1>
<H1>Título 1</H1>
<H2>Título 2</H2>
<H3>Título 3</H3>
<H4>Título 4</H4>
<H5>Título 5</H5>

Botones

<A href="https://example.com" target="_blank" class="btn">Botón primario</A>
<A href="https://example.com" target="_blank" class="btn secondary">Botón secundario</A>
<A href="https://example.com" target="_blank" class="btn danger">Botón de peligro</A>

Fichas informativas







<DIV>
 <I class="info-icon fa-solid fa-circle-info"></I>
 <DIV class="info-text">
   <DIV class="info-title">Título informativo</DIV>
   <DIV class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </DIV>   


 <DIV class="info-card error">
 <I class="info-icon fa-solid fa-circle-exclamation"></I>
 <DIV class="info-text">
   <div class="info-title">Título del error</DIV>
   <DIV class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <DIV>
 <DIV class="info-card warning">
 <I class="info-icon fa-solid fa-triangle-exclamation"></I>
 <DIV class="info-text">
 <DIV class="info-title">Advertencia</DIV>
 <div class="info-description<DIV>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </DIV>
 </DIV>
</DIV>


<DIV class="info-card success">
 <I class="info-icon fa-solid fa-circle-check"></I>
 <DIV class="info-text">
   <div class="info-title">Título de éxito</DIV>
   <DIV class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </DIV>
 </DIV>
</DIV>

Etiquetas

<DIV class="tag">Habilitado</DIV>
<DIV class="tag deshabilitado">Deshabilitado</DIV>
<DIV class="tag caducado">Caducado</DIV>

Fichas estadísticas

<DIV class="stat-card">
 <DIV class="stat-value"><A href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"><span
             style="color: #CCCCCC;"><I class="fas fa-circle-xmark"></I></SPAN></A></DIV>
 <DIV class="stat-desc"><A href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"><SPAN
             style="font-size: 18px;"><span style="white-space:nowrap;">ANUNCIO</SPAN>&nbsp;<span
                 style="white-space:nowrap;"<DIV><A href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"
           style="color: #008001;" /></DIV>
</DIV>

<DIV class="stat-card">
 <DIV class="stat-value"><A href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"            style="color: #008001;" /></DIV></DIV>>0</A></DIV>
 <DIV class="stat-desc"><A href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"><SPAN
             style="font-size: 18px;">Remitentes bloqueados</SPAN></A></DIV>
</DIV>

Gráfico de líneas

<DIV class="p-3 linechart">
  <DIV style="width: 33.3333333333%; Color de fondo: #55ACBF;<div></DIV>
  <DIV style="width: 33.3333333333%;</div> color de fondo: #3633B7;"></DIV>
 <DIV style="anchura: 33,3333333333%; color de fondo: #8063BF;"></DIV>
</DIV>
<UL class="unstyled p-3" style="visualización: flex;"></DIV> <DIV style="anchura: 33,3333333333%; color de fondo: #8063BF;"></DIV> </DIV> <UL class="unstyled p-3" style="visualización: flex;"></DIV> <div style="anchura: 33,3333333333%; color de fondo: justify-content: space-between; ">
  <LI><SPAN class="chart-key" style="background-color: #55ACBF;"></SPAN><SPAN>
     Con licencia (20)</SPAN></LI>
  <LI><span class="chart-key" style="background-color: #3633B7;"></SPAN><SPAN>
 Sin licencia (20)</SPAN></LI>
 <LI><SPAN class="chart-key" style="color: #8063BF;"></SPAN><SPAN>
     Invitados (20)</SPAN></LI>
</UL>

Documentación relacionada:

WYSIWYG HTML y estilos CSS inline compatibles

Índice:

Usar el editor WYSIWYG en NinjaOne:

Usar HTML y estilos en línea a través de la API y la CLI:

Elementos HTML:

Opciones de estilo en línea:

Gráficos:

Clases CSS de NinjaOne:

Tarjeta estándar

Tarjeta con acción

Tablas

Párrafos

Encabezados

Botones

Fichas informativas

Etiquetas

Fichas estadísticas

Gráfico de líneas

FAQ

Próximos pasos

Recursos

Empresa

Información de contacto