ui:box

Purpose

The box component for the Client Framework 2 user interface.

It is a structural element enclosing content. It can contain arbitrary markup. Please note that elements are allowed to be hidden in the page sent to the device, i.e. have the display property set to 'none', and therefore they can be shown dynamically in response to some event, or contain the data to be used by other components. For example, ui:box can be used to create a popup, i.e. it may include hidden content that is displayed when the user clicks a button.

Refer to Box for further information.

Styles

The following styles apply to ui:box by default.

ui|box {
  display: block;
}

Attributes

Attribute	Description	Type	Default	Options	Use
initial-displayed-state	Specifies the initial displayed state of the element. Setting the value of the attribute to 'true' has no effect as that is the default initial state. Setting the value of the attribute to 'false' will prevent the element from being displayed when the page is initially loaded. Refer to Dynamic properties for further information.	xs:boolean	true	true, false	optional

Attribute groups

Core attributes

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:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
  xmlns:event="http://www.w3.org/2001/xml-events">
  <head>
    <title>ui:box</title>
  </head>
  <body>
    <div>
      <ui:box id="about_box" initial-displayed-state="true">
        <span>I'm a box</span>
        <ul>
          <li>111</li>
          <li>222</li>
        </ul>
        <div style="text-align: center; background-color: red">
          <ui:button>
            <span>Close</span>
            <cf2:on event="cf2:activate" set="about_box#displayed" boolean="false"/>
          </ui:button>
        </div>
      </ui:box>
    </div>
  </body>
</html>