This application demonstrates the behavior and usability of the web components based project called HTML Components.
The application was tested in Google Chrome browser, with the exception of the feed reader component that only works in Dartium right now.
The name Web Components refers to a family of new W3C standard working drafts that aim to introduce object oriented concepts into HTML.
With them we can create custom elements and reusable HTML fragments.
Component Name | Description |
---|---|
Carousel | Displays arbitrary data coming from either client or server side, also supporting tab components and image galleries. |
Datagrid | Displays arbitrary data coming from either client or server side in a grid layout. |
Datatable | Provides high level features including column resizing, data ordering, filtering, pagination, lazy loading, cell editing, row expansion, etc. |
Listbox | Listbox with single or multiple selection mode and arbitrary objects. The component also supports reordering. |
Picklist | Supports picking items from a list of arbitrary objects displaying two listboxes. |
Tagcloud | Holds tags with different URLs and strengths. |
Tree | Displays a tree hierarchy with data coming from the server or client side. |
Treetable | Combination of the datatable and the tree components. |
Component Name | Description |
---|---|
Confirmation Dialog | Component for displaying confirmation dialogs. |
Dialog | Component for displaying dialogs with arbitrary content. |
Component Name | Description |
---|---|
Autocomplete | Gives suggestions when the user types in the text input. |
Boolean Button | Acts like a toggle button with two states: on and off. |
Masked Input | Text input that restricts the permitted values with a mask string. |
Rating | Provides a star based rating input. |
Select Button | Button set that acts as a single component. The user can select one or more options according to the settings. |
Select Checkbox Menu | A menu of selectable and filterable checkboxes. |
Component Name | Description |
---|---|
Breadcrumb | Provides contextual information about the page hierarchy. |
Context Menu | Provides easily accessable actions attached to another component or the page itself. |
Menu Button | Drop-down menu with arbitrary menu items in it. |
Menubar | A vertical or horizontal menu that can have arbitrary number of submenus. |
Split Button | Provides a default action and a drop-down list of secondary actions. |
Component Name | Description |
---|---|
Feed Reader | A simple RSS feed reader component. |
Gallery | Image gallery with fade effect. |
Image Compare | Provides a nice user interface for comparing two images. |
Lightbox | Alternative image gallery displayed in a centered popup. |
Photocam | Provides access to the web camera and the microphone, supporting effects and taking snapshots. |
Component Name | Description |
---|---|
Accordion | Accordion component that can also be used with model objects. |
Panel | Toggleable, closable panel component with arbitrary header, content and footer. |
Tabview | Tabview component that can also be used with model objects. |
Component Name | Description |
---|---|
Clock | An SVG-based, resizable analog clock. |
Draggable | Provides drag and drop features to any HTML element automatically. |
Growl | Displays messages sent from the application. |
Item Template | Displays an arbitrary HTML content that contains the property values of an arbitrary model object. |
Notification Bar | A notification bar whose content can be shown on the top of the page or hidden. |
Resizable | Makes it possible to resize any HTML element automatically. |
Safe Html | Supports displaying an arbitrary HTML content from a Dart string without escaping the tags. |