Htmler — HTML genereren met Dart

Htmler stelt je in staat HTML programmatisch te bouwen met Dart-code, zonder HTML-strings direct te schrijven.

Wanneer Htmler gebruiken?

Herbruikbare componenten bouwen
Dynamisch HTML genereren in Dart-code
Wanneer Jinja-sjablonen geen geschikte optie zijn

HTML bouwen

import 'package:finch/finch_htmler.dart';

var html = Tag.div(
  classes: ['container', 'mt-4'],
  children: [
    Tag.h1(text: 'Hallo wereld', classes: ['title']),
    Tag.p(
      text: 'Deze tekst is gebouwd met Htmler.',
      classes: ['lead'],
    ),
    Tag.a(
      href: '/about',
      text: 'Meer weten',
      classes: ['btn', 'btn-primary'],
    ),
  ],
);

return rq.renderData(data: html.render(), contentType: 'text/html');

Tag-klasse

Methode	Beschrijving
`Tag.div(...)`	`<div>`-tag
`Tag.span(...)`	`<span>`-tag
`Tag.p(...)`	`<p>`-tag
`Tag.h1()` t/m `Tag.h6()`	Koptaggen
`Tag.a(href, text)`	`<a>`-tag
`Tag.img(src, alt)`	`<img>`-tag
`Tag.ul(children)`	`<ul>`-tag
`Tag.li(...)`	`<li>`-tag
`Tag.table(...)`	`<table>`-tag
`Tag.form(...)`	`<form>`-tag
`Tag.input(...)`	`<input>`-tag
`Tag.button(...)`	`<button>`-tag
`Tag.raw(html)`	Ruwe HTML zonder escaping

Cache-root `\$Cache`

\$Cache slaat vooraf gerenderde inhoud op:

var cached = \$Cache.get('sidebar', () => buildSidebar());

Jinja insluiten met `JJ.\$var()`

Om een Jinja-variabele in Htmler-uitvoer in te sluiten:

Tag.div(
  children: [
    Tag.raw(JJ.\$var('username')),  // {{ username }}
  ],
)

renderTag in een controller

Future<String> sidebar() async {
  var tag = Tag.nav(
    classes: ['sidebar'],
    children: buildNavItems(),
  );
  return rq.renderTag(tag);
}

Op deze pagina