Widgets en documentos

Widgets

Un bloque de código cuyo lenguaje es widget se dibuja como una pequeña página: HTML, estilos y, si quieres, algo de script. Así un documento puede tener un panel, un contador o una calculadora chica, algo más que texto.

```widget title="Rina este mes"
<div class="grid">
  <div class="stat"><small>Paseos</small><b>42</b><em class="up">+6 frente a agosto</em></div>
  <div class="stat"><small>Kilómetros</small><b>61</b></div>
  <div class="stat"><small>Próxima vacuna</small><b>12 nov</b><span class="badge warn">pendiente</span></div>
</div>
```

Note

GitHub no ejecuta widgets, así que esta página muestra el código. En Tisty, el bloque de arriba se dibuja como tres tarjetas de cifras con los colores de Tisty.

Aislado

• Un widget corre en un marco que no tiene red: no puede descargar nada, cargar una imagen desde una dirección ni enviar a ninguna parte lo que muestra.
• No puede alcanzar la ventana que lo rodea ni tus otros documentos.
• Un enlace dentro de él abre tu navegador solo cuando haces clic.

Clases listas

Trae los colores de Tisty y algunas clases, así que con HTML sencillo ya se ve bien: grid, stat, card y badge, entre otras (badge warn, em.up…). No hace falta escribir CSS para que quede presentable.

Ver el código

El código del widget queda plegado bajo el dibujo. Ábrelo con Ver código.

Cuando crece: adjunta un .html

Si el widget se vuelve grande, adjúntalo: un archivo .html adjunto a un documento se dibuja igual, igual de aislado, y desde su barra puedes volver a verlo como adjunto con Ver como adjunto.