gs01md/dom_builder

Helpers to generate DOM elements or HTML

dom_builder

Generate and manipulate DOM (virtual and real) elements or HTML (Web and Native support).

Usage

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

Here's a simple usage example, that can work in any platform (Web or Native):

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>


  div.select('#s1').remove() ;
  print( div.buildHTML( withIdent: true ) ) ;

  ////////////
  // Output //
  ////////////
  // <div class="container">
  //   <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( type: 'button', classes: 'navbar-toggler', 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 Element (dart:html) with virtual DOMElement:

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.add( SpanElement()..text = 'DOM Builder' ) ;

    return div.buildDOM(domGenerator) ;
  }

}

Example of Bootstrap Cards and Table:

      // ...

      var tableHeads = ['User', 'E-Mail'] ;
      var usersEntries = [ ['Joe' , '[email protected]'] , ['Smith' , '[email protected]'] ] ;

      var content = $div( content: [
        $div( classes: 'card' , content: [
          $div( classes: 'card-header' , content: 'Activity Timeline:') ,
          $div( id: 'timeline-chart' )
        ]) ,

        $hr(),

        $div( classes: 'card' , content: [
          $div( classes: 'card-header' , content: "Users:"),
          $div( classes: 'card-body' , content:
            $table( classes: 'table text-truncate', head: tableHeads, body: usersEntries)
            ..applyWhere( 'td , th' , classes: 'd-inline text-truncate' , style: 'max-width: 50vw')
          )
        ]) ,

      ] );

      // ...

      if (timelineChartSeries != null) {
        content.select( '#timeline-chart' ).add(
            ( parent ) {
              // render Chart inside element parent...
            }
        ) ;
      }
      else {
        content.select( '#timeline-chart' ).add( 'No Timeline Data.' ) ;
      }

      // ...

      return content.buildDOM(domGenerator) ;

See Also

See some related projects:

• Bones_UI: A simple and easy Web User Interface framework for Dart.
• Bones_UI_Bootstrap: Adds Bootstrap Bones_UI.
• Bootstrap: Build fast and responsive sites.

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.