Layout properties

Purpose

Controls several layout properties of different objects, including the display of fragments and links.

Controls

Control Description Options Property
Target Container Specifies the container in the Target Layout where the content should be placed. An expression may be used to identify a specific container instance. current, <container_name>, <expression> theme_layout_prop.html#mcs-container
Target Layout Defines the target MCS layout for an element and its content. current, <layout_name> theme_layout_prop.html#mcs-layout
Fragment List Orientation Sets the orientation of the list of links to fragments in the root fragment. horizontal, vertical theme_layout_prop.html#mcs-fragment-list-orientation
Fragment List Position The position of the list of links to fragments in the root fragment. bottom, top theme_layout_prop.html#mcs-fragment-list-position
Link Media Medium the target of a link is intended for. normal, tv, web theme_layout_prop.html#mcs-link-media
Link Style Specifies how links should be displayed. button, default, numeric-shortcut theme_layout_prop.html#mcs-link-style

Properties

mcs-container

Specifies the layout container where the content should be placed. An expression may be used to identify a specific container instance. The default value is 'current'.

Option Description
current The element will use the current container.
<string> Specifies the name of the container to use.
<expression> An expression identifying a container instance.
inherit The value of the property should be inherited from the parent element.
mcs-fragment-list-orientation

Specifies the orientation of the list of links to fragments in the root fragment. The default value is 'horizontal'.

Option Description
horizontal The list is to be generated horizontally with a single space separating each link.
vertical The list is to be generated vertically with one link per line.
inherit The value of the property should be inherited from the parent element.
mcs-fragment-list-position

Specifies the position of the list of links to fragments in the root fragment.

Option Description
bottom The list is to be generated at the top of the canvas.
top The list is to be generated at the bottom of the canvas.
inherit The value of the property should be inherited from the parent element.
mcs-layout

Defines the target MCS layout for an element and its content. The default value is 'current'.

Option Description
current The element will use the current layout.
<string> Specifies the name of the layout policy to use.
inherit The value of the property should be inherited from the parent element.
mcs-link-media

Medium the target of a link is intended for. The default value is 'normal'.

Option Description
normal The same as the current page.
tv A TV page.
web A Web page.
inherit The value of the property should be inherited from the parent element.
mcs-link-style

Specifies how links should be displayed. The default value is 'default'.

Option Description
button The link should be rendered as a button.
default The default style should be used by the target device for links.
numeric-shortcut The menu should be rendered with numeric identifiers for each menu item. These identifiers provide a shortcut key for that menu item.
inherit The value of the property should be inherited from the parent element.

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:si="http://www.volantis.com/xmlns/2006/01/xdime2/si"
  xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>Layout properties</title>
    <xforms:model id="demoAlign">
      <xforms:instance>
        <si:instance>
          <si:item name="input"/>
        </si:instance>
      </xforms:instance>
    </xforms:model>
  </head>
  <body>
    <div style="mcs-layout: '/welcome.mlyt';">
      <xforms:input model="demoAlign" ref="input" style="mcs-container: 'logo'">
        <xforms:label style="mcs-container: 'congratulations'">Enter Your Name:</xforms:label>
      </xforms:input>
    </div>
  </body>
</html>

Related topics