- Components
- Block List
Datadriven Block List
A datadriven list component that can accommodate a variety of styles and controls.
The list can be client side filtered via a call to widgetVar.filter(query)
. The helper tag filterFor
can be used to add filtering capabilities to any text input.
The li
tag takes an optional chrevron
attribute to render a chrevron to the right of the element, a title
to render as a list item header, and also a link
attribute that will wrap the children of the li in an anchor with href to the attribute value.
<h:inputText pt:placeholder="Search" id=search/>
<t:filterFor widget="movies" target="search"/>
<t:list title="Movies" value="#{controller.movies}" widgetVar="movies">
<t:li chevron="true" link="#">#{it.title}</t:li>
</t:list>
A datadriven list component that can accommodate a variety of styles and controls.
Info
Tag name | list |
---|---|
Component type | io.tornadofaces.component.List |
Renderer type | io.tornadofaces.component.ListRenderer |
Attributes
Name | Description | Required |
---|---|---|
styleClass | Styles to apply to the list section. | false |
title | A title to be displayed as the list header. | false |
filterFn | A JavaScript function to filter the list when widget.filter() is called. The function is called with each item in the list | false |
value | The List of elements, as a value expression. | true |
highlightFilter | Highlight text in filtered elements. Default true. | false |
hideEmpty | Hide the section completely if the value is of zero length (empty list). Default false (will render title if empty). | false |
var | The variable that will refer to each element in the list. Defaults to "it" | false |
rendered | Should this component be rendered? | false |
Client Side API
Widget: TornadoFaces.widget.List
Method | Params | Return type | Description |
---|---|---|---|
setFilterFn(filterFn) | filterFn: Function that will be called to filter then list via filter() |
function | Override the default filter function used for client side filtering. The method will be called with the parameters (item, query, index) and should return true or false to indicate that the given item should be rendered. |
filter(query) | query: The query string to filter the list by | String | The default filterFn looks for the query text somewhere within each item. A custom filterFn can be provided via setFilterFn for finer grained control. |
Advanced usage
The markup for the list is very basic, and you can easily replicate the markup with a standard repeater component if necessary. Please refer to the Foundation For Apps Documentation for more information.