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
dependencies: html_components: any
The library can be used in HTML and Dart.
The most basic example that uses one of the components:
<!DOCTYPE html> <html> <head> <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"> </head> <body> <h-clock size="500"></h-clock> <script type="application/dart">export 'package:polymer/init.dart';</script> </body> </html>
If you want to interact with the components in Dart, you must import the component class like this:
Alternatively, you can import the whole library that includes every class you might need:
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: http://szgabsz91.github.io/html-components
Here you can find most of the use cases of the components.
The examples were tested in the following browsers:
Most of the components should work in the following browsers, but there are some style issues:
For those examples that require a server side, use services.dart.
Here is the list of components:
packages/polymer/polymer.htmlimport to every Polymer element definition page.
packages/web_components/dart_support.jsadded to the example pages instead of the
packages/browser/dart.jsremoved from the example pages
leftViewlifecycle methods replaced with
@hostCSS rules changed to
h-image-comparecomponent, now the
afterCSS classes are required as the
:last-childpseudo selectors got out of the spec
h-datatableissues outside of Dartium
exampledirectory renamed to
webuntil the pages can be compiled without an error
unittestis now a dev dependency
rowtoggledevents instead of
buttonclickedevent when a button is clicked
refreshedevent on the first time
Timer.runfunction instead of
collapse()to open and collapse the panel dynamically
Add this to your package's pubspec.yaml file:
dependencies: html_components: ">=0.3.0 <0.4.0"
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.
Now in your Dart code, you can use:
|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 04, 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 08, 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|