dom_builder 1.0.3

Helpers to generate DOM elements or HTML (Web and Native support).

dom_builder

Helpers to generate DOM elements or HTML.

Usage

You can generate a DOM tree using HTML, Object Orientation or manipulating an already instantiated DOM tree.

A simple usage example:

import 'package:dom_builder/dom_builder.dart';

void main() {

  var div = $divHTML('<div class="container"><span>Builder</span></div>')
      .insertAt( 0, $span( id: 's1', content: 'The ' ) )
      .insertAfter( 's1' , $span( id: 's2', content: 'DOM ', style: 'font-weight: bold' ) )
  ;

  print( div.buildHTML( withIdent: true ) ) ;

  ////////////
  // Output //
  ////////////
  // <div class="container">
  //   <span id="s1">The </span>
  //   <span id="s2" style="font-weight: bold">DOM </span>
  //   <span>Builder</span>
  // </div>
  
}

Generating a real DOM Element (dart:html):

As example let's create a Bootstrap Navbar toggler:

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

class BootstrapNavbarToggler {

  static DOMGenerator domGenerator = DOMGenerator.dartHTML() ;

  Element render() {
    var button = $button( classes: 'navbar-toggler', type: 'button', attributes: {'data-toggle': "collapse", 'data-target': "#navbarCollapse", 'aria-controls': "navbarCollapse", 'aria-expanded':"false", 'aria-label':"Toggle navigation"} ,
        content: $span( classes: 'navbar-toggler-icon')
    );

    return button.buildDOM(domGenerator) ;
  }

}

Mixing real DOM Elements with Builder (dart:html):

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

class TitleComponent {

  static DOMGenerator domGenerator = DOMGenerator.dartHTML() ;

  Element render() {
    var div = $divHTML('<div class="container"><span>The </span></div>') ;

    div.addExternalElement( SpanElement()..text = 'Builder' ) ;

    return div.buildDOM(domGenerator) ;
  }

}

Features and bugs

Please file feature requests and bugs at the issue tracker.

Author

Graciliano M. Passos: gmpassos@GitHub.

License

Dart free & open-source license.