ui:inline

Purpose

An inline element for the Client Framework 2 user interface. It is used to add extra structure to documents.

See also Box.

Styles

The following styles apply to ui:inline by default.

ui|inline {
  display: inline;
}

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

Examples

<?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>CF2 Folding Item</title>
      <style type="text/css">
        #fi-summary {
          width: 210px;
        }    
        #fi-details {
          width: 210px;
          background-color: blue;    
          overflow: hidden;        
        }    
        #fi-details:mcs-displayed {
          color: white;
        }    
        #fi-details:mcs-change(:mcs-concealed, :mcs-displayed) {
          mcs-effect-style: wipe(top);
          mcs-effect-duration: 0.2s;
          mcs-frame-rate: 9hz;      
        }
        #fi-details:mcs-change(:mcs-displayed, :mcs-concealed) {
          mcs-effect-style: wipe(top);
          mcs-effect-duration: 2s;
        }
        #fi-minus, #fi-plus {
          float: right;  
        }
      </style>
    </head>
  <body>
    <div>
      <a id="mylink"/>
      <ui:box id="fi-summary">
        <ui:button>
          <span style="float: left">Folding Item summary</span>
          <ui:inline id="fi-plus" initial-displayed-state="true">+</ui:inline>
          <ui:inline id="fi-minus" initial-displayed-state="false">-</ui:inline>
          <cf2:on event="cf2:activate">
            <cf2:param name="disp" property="fi-details#displayed"/>
            <cf2:param name="dispM" property="fi-minus#displayed"/>
            <cf2:param name="dispP" property="fi-plus#displayed"/>
            if(!disp.get()) {
              disp.set(true);
              dispM.set(true);
              dispP.set(false);
              window.location.href='#mylink';
            }
            else {
              disp.set(false);
              dispM.set(false);
              dispP.set(true);
            } </cf2:on>
        </ui:button>
        <div style="clear: both"/>
      </ui:box>
      <ui:box id="fi-details" initial-displayed-state="false">
        <p>Folding Item details</p>
        <p>Folding Item details</p>
        <p>Folding Item details</p>
        <p>Folding Item details</p>
      </ui:box>
    </div>
  </body>
</html>

Related topics