html_components 0.3.0

# 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

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:

$ pub get

Alternatively, your editor might support pub. 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';


A reusable component library written in HTML and Dart using Polymer.dart.


Email Gabor Szabo