Blocks
Here are some examples to show blocks available in
smartVISU
A variable set of blocks which are collapsible. Use 'set-1', 'set-2', 'set-3' to define the number of sections in a block. Set the attribute 'data-collapsed="false"' for the open section (only one) and omit the attribute for the others.
You can also define the width of the block by adding a width statement to the first div (see last example).
By adding the widget "lib.supersize('')" to the h3-section of a block, the block receives a button which expands the block to full-screen width.
Blocks are defined with a minimum height of 14.5em. Depending on the devices resolution and font size, the height measured in 'px' is approx. 232px.
Blocks normally change their height with the included content. However, it may make sense to control a blocks height manually in order to perfectly align several blocks:
A box with height 232px, normally
the minimum height.
A box with hight 250px
Examples
A static block<div class="block">
<div class="ui-bar-c ui-li-divider ui-corner-top">Block 1</div>
<div class="ui-fixed ui-body-a ui-corner-bottom">
<p>This is a static block</p>
</div>
</div>
This is a static block
A variable set of blocks which are collapsible. Use 'set-1', 'set-2', 'set-3' to define the number of sections in a block. Set the attribute 'data-collapsed="false"' for the open section (only one) and omit the attribute for the others.
You can also define the width of the block by adding a width statement to the first div (see last example).
By adding the widget "lib.supersize('')" to the h3-section of a block, the block receives a button which expands the block to full-screen width.
<div class="block">
<div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
<h3>{{ lib.supersize('') }}Block 2</h3>
<p>This is a collapsible block which can be supersized clicking the arrow in the top right corner. <br><br>
Vertical scroll position will go to the top in supersize mode and back to the previous position when returning to normal size. </p>
</div>
</div>
</div>
<div class="block">
<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>Set of two collapsible blocks with one being collapsed</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>Collapsed by default if 'data-collapsed="false"' is omitted</p>
</div>
</div>
</div>
Section 1
Set of two blocks with one being collapsed
Section 2
Collapsed by default if 'data-collapsed="false" ' is omitted
Section 1
A set of 3 collapsible blocks
The description 'style="width:100%" ' has been added to the <div class="block"> statement
in order to make the block use the whole available width of the screen.
Section 2
Content 2
Section 3
Content 3
<div class="block">
<div class="ui-bar-c ui-li-divider ui-corner-top">Height 250px</div>
<div class="ui-fixed ui-body-a ui-corner-bottom" style="height:250px">
A box with hight 250px
</div>
</div>
A box with height 232px, normally
the minimum height.
A box with hight 250px
