ui:list-cell-layout

Purpose

Defines the list item layout for a specified list view. Refer to the topic entitled List Cell Layout for more information.

Contained by

Styles

This element has no visual appearance of its own. However, it does make use of the styles associated with the ui:list-view::mcs-cell pseudo class. The width and height properties specify the size of the cells in the layout. Percentage values are defined in terms of the size of the containing ui:list-view element. The display property determines the type of layout and supports two values: 'block' and 'inline-block'. The value of 'block' indicates that the cells should be displayed vertically. The value of 'inline-block' means that the cells should flow like normal text. If the width and height properties are both set to specific pixel lengths, then the cells will be aligned vertically and horizontally as if they were in a grid. If the width property of the ui:list-view changes, then the browser will automatically adapt the cell flow to the new width.

Attribute groups

Attributes

Attribute Description Type Default Options Use
max-window-size

The maximum number of items that the list view can display at once.

 xs:integer     required 

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:json="http://www.volantis.com/xmlns/2009/07/json"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
  xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
  xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template">
  <head>
    <title>List View Example</title>
    <style type="text/css">
      #items {
        background-color: blue;
      }
      #items::mcs-cell {
        background-color: green;
        border: 3px solid black;
        width: 100px;
        height: 60px;
        display: inline-block;
      }
      ui|button {
        padding: 1px 2px 1px 2px;
        margin-right: 2px;
        font-weight: bolder;
        color: black;
        border: 0px;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div>
      <ui:list-view id="items" loop="true" layout="custom-layout">
        <ui:list-item-renderer id="native-renderer">
          <div>N:<cst:value path="item.title"/></div>
          <div>A:<cst:value path="item.address"/></div>
          <div>Idx:<cst:value path="index"/></div>
        </ui:list-item-renderer>
        <ui:list-model>
          <json:object>
            <json:property name="title">
              <json:string>Name1</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address1</json:string>
            </json:property>
          </json:object>
          <json:object>
            <json:property name="title">
              <json:string>Name2</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address2</json:string>
            </json:property>
          </json:object>
          <json:object>
            <json:property name="title">
              <json:string>Name3</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address3</json:string>
            </json:property>
          </json:object>
          <json:object>
            <json:property name="title">
              <json:string>Name4</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address4</json:string>
            </json:property>
          </json:object>
          <json:object>
            <json:property name="title">
              <json:string>Name5</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address5</json:string>
            </json:property>
          </json:object>
        </ui:list-model>
      </ui:list-view>
      <ui:list-cell-layout id="custom-layout" max-window-size="3"/>
      <ui:button id="previous" class="button">
        <span>&lt;&lt;</span>
        <cf2:on event="cf2:activate" do="items#previous"/>
      </ui:button>
      <ui:button id="next" class="button">
        <span title="Previous">&gt;&gt;</span>
        <cf2:on event="cf2:activate" do="items#next"/>
      </ui:button>
    </div>
  </body>
</html>

Related topics