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:
- 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:
- Row Expansion
- Tree Node
- Confirmation Dialog
- Boolean Button
- Masked Input
- Select Button
- Select Checkbox Menu
- Select Item
- Context Menu
- Menu Button
- Menu Item
- Menu Separator
- Split Button
- Feed Reader
- Image Compare
- Growl Message
- Item Template
- Notification Bar
- Safe Html