tags 0.1.9

Build html elements by tag name.

Tags

Build html elements by tag name in Dart.

Documentation

Please consult the API documentation.

Build Html Fluently

Tags makes it easy to build trees of html elements in code. Consider an example:

import 'dart:html';
import 'package:tags/html.dart';

main() {
  document.body.append(
    ul(() {
      li()..text = 'Coffee';
      li()..text = 'Tea';
      li()..text = 'Milk';
    }));
}

Build Your Custom Elements

Tags allows you to define your own custom tags that build with the standard html tags seamlessly. Consider an example:

import 'dart:html';
import 'package:tags/custom.dart';
import 'package:tags/html.dart';

main() {
  document.body.append(
    div(() {
      toggleButton(() {
          span()..text = 'up'..classes = ['up'];
          span()..text = 'down'..classes = ['down'];
        });
    }));
}    

By defining a custom tag such as toggleButton you may build trees of elements that contain not only the standard html elements but also your own (and other people's) custom elements.

You decide how your custom element is constructed when you define your custom tag. We provide building blocks that you are encouraged to use, but ultimately it is up to you. If you use existing widgets in an existing framework, you should be able to define custom tags for them and build them with tags. If you cannot, please do open an issue report.

NOTE: We are watching closely the development of the custom elements specification, and our pre-built custom tags will become imperative custom elements as soon as that is possible in dart:html.

Tags uses the MIT license as described in the LICENSE file, and follows semantic versioning.