Build HTML AST's and render them to HTML.
This can be used as an internal DSL, i.e. for a templating engine.
In your pubspec.yaml
:
dependencies:
html_builder: ^1.0.0
import 'package:html_builder/html_builder.dart';
main() {
// Akin to React.createElement(...);
var $el = h('my-element', {}, []);
// Attributes can be plain Strings.
h('foo', {
'bar': 'baz'
});
// Null attributes do not appear.
h('foo', {
'does-not-appear': null
});
// If an attribute is a bool, then it will only appear if its value is true.
h('foo', {
'appears': true,
'does-not-appear': false
});
// Or, a String or Map.
h('foo', {
'style': 'background-color: white; color: red;'
});
h('foo', {
'style': {
'background-color': 'white',
'color': 'red'
}
});
// Or, a String or Iterable.
h('foo', {
'class': 'a b'
});
h('foo', {
'class': ['a', 'b']
});
}
Standard HTML5 elements:
import 'package:html_builder/elements.dart';
main() {
var $dom = html(lang: 'en', children: [
head(children: [
title('Hello, world!')
]),
body(children: [
h1('Hello, world!'),
p([text('Ok')])
])
]);
}
Rendering to HTML:
String html = new StringRenderer().render($dom);
Example with the Angel server-side framework:
import 'dart:io';
import 'package:angel_framework/angel_framework.dart';
import 'package:html_builder/elements.dart';
configureViews(Angel app) async {
app.get('/foo', (req, res) async {
var foo = await app.service('foo').read(req.params['id']);
var $dom = html(children: [
head(children: [
title(foo.name)
]),
body(children: [
h1(children: [text(foo.name)])
])
]);
res
..contentType = ContentType.HTML
..write(new StringRenderer().render($dom))
..end();
});
}
Changed h
and the Node
constructor to take Iterable
s of children,
instead of just List
s.
Add this to your package's pubspec.yaml file:
dependencies:
html_builder: "^1.0.2"
You can install packages from the command line:
with pub:
$ pub get
with Flutter:
$ flutter packages get
Alternatively, your editor might support pub get
or packages get
.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:html_builder/html_builder.dart';
Version | Uploaded | Documentation | Archive |
---|---|---|---|
1.0.2 | Jul 23, 2017 |
|
|
1.0.1 | Jun 6, 2017 |
|
|
1.0.0+1 | Apr 11, 2017 |
|
|
1.0.0 | Apr 11, 2017 |
|
|
We analyzed this package on Apr 23, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
43 | / 100 |
Health:
Code health derived from static analysis.
[more]
|
100 | / 100 |
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
100 | / 100 |
Overall score:
Weighted score of the above.
[more]
|
72 |
Detected platforms: Flutter, web, other
No platform restriction found in primary library
package:html_builder/html_builder.dart
.
The description is too short.
Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.
Maintain an example.
Create a short demo in the
example/
directory to show how to use this package. Common file name patterns include:main.dart
,example.dart
or you could also usehtml_builder.dart
.