html_components 0.3.0

  • Installing
  • Versions
  • 56

HTML Components


Build Status

HTML Components is a reusable component library containing 47 components written in HTML and Dart based on the functionality of the Primefaces JSF component library.


If you want to try HTML Components, include this fragment in your pubspec.yaml file:

  html_components: any

The library can be used in HTML and Dart.

The most basic example that uses one of the components:

<!DOCTYPE html>
    <title>Utility - Clock</title>
    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
    <link rel="import" href="packages/html_components/utility/clock.html">
    <h-clock size="500"></h-clock>
    <script type="application/dart">export 'package:polymer/init.dart';</script>

If you want to interact with the components in Dart, you must import the component class like this:

import 'package:html_components/utility/clock.dart';

Alternatively, you can import the whole library that includes every class you might need:

import 'package:html_components/html_components.dart';

It is recommended to create your custom elements if you want to listen for component events or bind HTML attributes to your Dart objects, because Polymer Expressions don't work outside of custom elements.


For more examples and code samples, please visit this page:

Here you can find most of the use cases of the components.

The examples were tested in the following browsers:

  • Dartium (SDK 1.5.1)
  • Chrome Stable 35
  • Chrome Canary 38
  • Opera 22

Most of the components should work in the following browsers, but there are some style issues:

  • Firefox 30
  • Safari 7

For those examples that require a server side, use services.dart.

Components in the Library

Here is the list of components:

  • Data Components

    • Carousel
    • Column
    • Datagrid
    • Datatable
    • Listbox
    • Paginator
    • Picklist
    • Row Expansion
    • Tag
    • Tagcloud
    • Tree
    • Tree Node
    • Treetable
  • Dialog Components

    • Confirmation Dialog
    • Dialog
  • Input Components

    • Autocomplete
    • Boolean Button
    • Masked Input
    • Rating
    • Select Button
    • Select Checkbox Menu
    • Select Item
  • Menu Components

    • Breadcrumb
    • Context Menu
    • Menubar
    • Menu Button
    • Menu Item
    • Menu Separator
    • Split Button
    • Submenu
  • Multimedia Components

    • Feed Reader
    • Gallery
    • Image Compare
    • Lightbox
    • Photocam
  • Panel Components

    • Accordion
    • Panel
    • Tab
    • Tabview
  • Utility Components

    • Clock
    • Draggable
    • Growl
    • Growl Message
    • Item Template
    • Notification Bar
    • Resizable
    • Safe Html



  • Updated to latest SDK (1.5.1) and polymer (0.11.0) version
  • Renamed the web folder to example
  • Updated Bootstrap CSS to use /deep/ selectors
  • Added the packages/polymer/polymer.html import to every Polymer element definition page.
  • packages/web_components/platform.js and packages/web_components/dart_support.js added to the example pages instead of the packages/polymer/polymer.html HTML import
  • packages/browser/dart.js removed from the example pages
  • enteredView and leftView lifecycle methods replaced with attached and detached respectively
  • @host CSS rules changed to :host
  • Removed the dependency to the animation package
  • An old pagination bug reintroduced by Polymer.dart was fixed in the library
  • For the h-image-compare component, now the before and after CSS classes are required as the :first-child and :last-child pseudo selectors got out of the spec
  • Fixed the animation bug in h-accordion
  • Refactored the example CSS files, some of them could be removed
  • Removed applyAuthorStyles from everywhere
  • Removed some example dart files and modified those components to be noscript
  • Fixed some warning messages in pub build
  • Fixed the undefined function error in h-paginator
  • Fixed h-datatable issues outside of Dartium
  • The components can be used in Dartium (SDK 1.5.1), Chrome Stable 35, Chrome Canary 38, Opera 22, Firefox 30, Safari 7


  • Updated to latest SDK (1.4.2) and polymer (0.10.1+1) version


  • Updated to latest SDK (1.3) and polymer version
  • Some bug fixes
  • example directory renamed to web until the pages can be compiled without an error
  • unittest is now a dev dependency


  • tree: animate property renamed to animating to fix the naming collision with the Element class
  • menu button: positioning bug fixed


  • confirmation dialog is centered before shown, fix in CSS
  • CSS fixes: confirmation dialog, dialog, boolean button, masked input, select item, select button, select checkbox menu
  • breadcrumb fixed


  • carousel's select button is now a span, initialization is async
  • datatable now fires columnresized and rowtoggled events instead of columnResized and rowToggled
  • treetable now fires columnresized instead of columnResized
  • confirmation dialog now fires the buttonclicked event when a button is clicked
  • autocomplete, boolean button, masked input and rating now fires valuechanged instead of valueChanged
  • masked input is now a block component and can be resized horizontally
  • context menu now has a disabled attribute
  • select button and select checkbox menu now fires selectionchanged instead of selectionChanged
  • orientation of menubar can now be changed dynamically
  • menu button closes if a menu item is clicked
  • submenu label does not fire click event
  • feed reader does not fire the refreshed event on the first time
  • gallery and image compare are now initialized 100 milliseconds after enteredView
  • image compare is now a block component
  • accordion is initialized in a function instead of scheduleMicrotask
  • panel now has two public methods: open() and collapse() to open and collapse the panel dynamically
  • a tab cannot be closed in a tabview if the tab is disabled
  • new property in NotificationBarComponent: z (z-index for the notification bar)
  • draggable is now a block component
  • growl messages animate when closed automatically after lifetime milliseconds
  • initialization of the resizable component is now async
  • examples updated


  • item template renamed to safe html
  • new item template component created
  • the functionality of orderlist is merged into select listbox
  • select listbox renamed to listbox
  • feed reader, autocomplete, carousel, listbox, picklist, datagrid, paginator, tree, tree node, datatable, column, row expansion, treetable migrated to Polymer.dart
  • examples added for the item template and safe html components


  • draggable, resizable, panel, accordion, photocam, lightbox, image compare, gallery, boolean button, masked input, rating, select item, select button, select checkbox menu, tag, tagcloud, dialog, confirmation dialog, breadcrumb, context menu, menubar, menu button, menu item, menu separator, split button, submenu migrated to Polymer.dart


  • tab, tabview migrated to Polymer.dart
  • added examples for the migrated components
  • added Github pages for live demo
  • readme updated


  • clock, growl, growl message, notification bar migrated to Polymer.dart

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  html_components: "^0.3.0"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

      import 'package:html_components/html_components.dart';
Version Uploaded Documentation Archive
0.3.0 Jun 28, 2014 Go to the documentation of html_components 0.3.0 Download html_components 0.3.0 archive
0.1.6 Jan 30, 2014 Go to the documentation of html_components 0.1.6 Download html_components 0.1.6 archive
0.1.5 Jan 12, 2014 Go to the documentation of html_components 0.1.5 Download html_components 0.1.5 archive
0.1.4 Jan 4, 2014 Go to the documentation of html_components 0.1.4 Download html_components 0.1.4 archive
0.1.3 Dec 27, 2013 Go to the documentation of html_components 0.1.3 Download html_components 0.1.3 archive
0.1.2 Dec 18, 2013 Go to the documentation of html_components 0.1.2 Download html_components 0.1.2 archive
0.1.1 Dec 18, 2013 Go to the documentation of html_components 0.1.1 Download html_components 0.1.1 archive
0.1.0 Dec 8, 2013 Go to the documentation of html_components 0.1.0 Download html_components 0.1.0 archive
0.0.1 Jul 31, 2013 Go to the documentation of html_components 0.0.1 Download html_components 0.0.1 archive


We analyzed this package on Jun 22, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.63.0
  • pana: 0.11.3


Describes how popular the package is relative to other packages. [more]
58 / 100
Code health derived from static analysis. [more]
89 / 100
Reflects how tidy and up-to-date the package is. [more]
0 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: web

Primary library: package:html_components/html_components.dart with components: html, mirrors.


  • Running dartdoc failed.

    Make sure dartdoc runs without any issues.

  • Use constrained dependencies.

    The pubspec.yaml contains 1 dependency without version constraints. Specify version ranges for the following dependencies: polymer.

  • Package is too old.

    The package was released more than two years ago.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 18 errors 145 hints.

    Strong-mode analysis of lib/data/paginator.dart failed with the following error:

    line: 19 col: 3
    Undefined class 'Stream'.

    Strong-mode analysis of lib/data/picklist.dart failed with the following error:

    line: 130 col: 56
    The argument type '(ButtonElement) → Null' can't be assigned to the parameter type '(Element) → void'.

    Similar analysis of the following files failed:

    • lib/data/treetable.dart (error)
    • lib/input/autocomplete/data.dart (error)
    • lib/menu/breadcrumb.dart (error)
    • lib/multimedia/photocam.dart (error)
    • lib/panel/accordion.dart (error)
    • lib/panel/tab/model.dart (error)
    • lib/panel/tabview.dart (error)
    • lib/utility/growl.dart (error)
    • lib/common/image_model.dart (hint)
    • lib/common/null_tree_sanitizer.dart (hint)
    • lib/common/reflection.dart (hint)
    • lib/data/carousel.dart (hint)
    • lib/data/carousel/data.dart (hint)
    • lib/data/column.dart (hint)
    • lib/data/column/model.dart (hint)
    • lib/data/datagrid.dart (hint)
    • lib/data/datagrid/data.dart (hint)
    • lib/data/datatable.dart (hint)
    • lib/data/datatable/data.dart (hint)
    • lib/data/datatable/editor.dart (hint)
    • lib/data/datatable/filter.dart (hint)
    • lib/data/datatable/resizer.dart (hint)
    • lib/data/datatable/sort.dart (hint)
    • lib/data/listbox.dart (hint)
    • lib/data/row_expansion.dart (hint)
    • lib/data/tag.dart (hint)
    • lib/data/tag/model.dart (hint)
    • lib/data/tagcloud.dart (hint)
    • lib/data/tree.dart (hint)
    • lib/data/tree/data.dart (hint)
    • lib/data/tree/template.dart (hint)
    • lib/data/tree/tree_node.dart (hint)
    • lib/data/tree_node.dart (hint)
    • lib/data/tree_node/model.dart (hint)
    • lib/data/treetable/data.dart (hint)
    • lib/data/treetable/template.dart (hint)
    • lib/dialog/confirmation_dialog.dart (hint)
    • lib/dialog/dialog.dart (hint)
    • lib/html_components.dart (hint)
    • lib/input/autocomplete.dart (hint)
    • lib/input/boolean_button.dart (hint)
    • lib/input/masked_input.dart (hint)
    • lib/input/rating.dart (hint)
    • lib/input/select_button.dart (hint)
    • lib/input/select_checkbox_menu.dart (hint)
    • lib/input/select_item.dart (hint)
    • lib/input/select_item/model.dart (hint)
    • lib/menu/context_menu.dart (hint)
    • lib/menu/menu_button.dart (hint)
    • lib/menu/menu_item.dart (hint)
    • lib/menu/menubar.dart (hint)
    • lib/menu/split_button.dart (hint)
    • lib/menu/submenu.dart (hint)
    • lib/multimedia/feed_reader.dart (hint)
    • lib/multimedia/feed_reader/feed.dart (hint)
    • lib/multimedia/feed_reader/feed_item.dart (hint)
    • lib/multimedia/feed_reader/reader.dart (hint)
    • lib/multimedia/gallery.dart (hint)
    • lib/multimedia/image_compare.dart (hint)
    • lib/multimedia/lightbox.dart (hint)
    • lib/panel/panel.dart (hint)
    • lib/panel/tab.dart (hint)
    • lib/utility/clock.dart (hint)
    • lib/utility/draggable.dart (hint)
    • lib/utility/growl_message.dart (hint)
    • lib/utility/growl_message/model.dart (hint)
    • lib/utility/item_template.dart (hint)
    • lib/utility/notification_bar.dart (hint)
    • lib/utility/resizable.dart (hint)
    • lib/utility/safe_html.dart (hint)
  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    None of the files in your example/ directory matches a known example patterns. Common file name patterns include: main.dart, example.dart or you could also use html_components.dart.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.5.1
polymer >=0.11.0 0.16.4+4 1.0.0-rc.19
Transitive dependencies
analyzer 0.27.6 0.32.1
args 0.13.7 1.4.3
async 2.0.7
barback 0.15.2+16
browser 0.10.0+3
charcode 1.1.1
cli_util 0.0.1+2 0.1.3
code_transformers 0.4.2+3 0.5.1+5
collection 1.14.10
convert 2.0.1
crypto 2.0.5
csslib 0.13.7+1 0.14.4
dart_style 0.2.11+1 1.1.0
func 0.1.1 1.0.0
glob 1.1.6
html 0.12.2+2 0.13.3+1
initialize 0.6.2+7
isolate 0.2.3 2.0.1
logging 0.11.3+1
meta 1.1.5
observable 0.14.0+1 0.22.1+3
observe 0.14.0 0.15.1
package_config 1.0.3
path 1.6.1
plugin 0.2.0+2
polymer_expressions 0.13.1+1
polymer_interop 0.1.2+1 1.0.0-rc.10
pool 1.3.5
smoke 0.3.6+3
source_maps 0.10.5
source_span 1.4.0
stack_trace 1.9.2
string_scanner 1.0.2
template_binding 0.14.0+6
typed_data 1.1.5
utf 0.9.0+4
watcher 0.9.7+8
web_components 0.12.5
when 0.2.0
which 0.1.3
yaml 2.1.14
Dev dependencies
unittest 0.10.1+2