Block Vue Component

Block Vue component represents Content Block element designed (mostly) to add extra formatting and required spacing for text content.

Usage example

<!-- Block -->
<f7-block>...</f7-block>
 
<!-- With additional "inner" element for extra highlighting -->
<f7-block inner>...</f7-block>
 
<!-- With block title -->
<f7-block-title>Block Title</f7-block-title>
<f7-block>...</f7-block>
 
<!-- Inset -->
<f7-block inset>...</f7-block>

Renders to:

<!-- Block -->
<div class="content-block">...</div>
 
<!-- With additional "inner" element for extra highlighting -->
<div class="content-block">
  <div class="content-block-inner">...</div>
</div>
 
<!-- With block title -->
<div class="content-block-title">Block Title</div>
<div class="content-block">...</div>
 
<!-- Inset -->
<div class="content-block inset">...</div>

Properties

Prop Type Default Description
inset boolean Makes block inset
tablet-inset boolean Makes block inset on tablets, but not on phones
inner boolean Adds additional "inner" element for content extra highlighting
tabs boolean Adds additional "tabs" class to make the block tabs wrapper
tab boolean Adds additional "tab" class when block should be used as a Tab
active boolean Adds additional "active" class when block used as a Tab and makes it active tab
no-hairlines boolean Removes outer hairlines.