Block Vue Component

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

Block Components

There are following components included:

f7-block - main block element
f7-block-title - block title. Can be used before Block or List View
f7-block-header - extra header element. Can be used both inside and outside of block elements
f7-block-footer - extra footer element. Can be used both inside and outside of block elements

Block Properties

Prop	Type	Description
<f7-block> properties
inset	boolean	Makes block inset
tablet-inset	boolean	Makes block inset on tablets, but not on phones
strong	boolean	Adds extra highlighting and padding block content
accordion-list	boolean	Makes block wrapper for accordion items
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
tab-active	boolean	Adds additional "tab-active" class when block used as a Tab and makes it active tab
no-hairlines	boolean	Removes outer hairlines
no-hairlines-md	boolean	Removes outer hairlines for MD theme
no-hairlines-ios	boolean	Removes outer hairlines for iOS theme

Examples

<!-- Block -->
<f7-block>...</f7-block>

<!-- With extran highlighting and padding, additional "strong" prop -->
<f7-block strong>...</f7-block>

<!-- With block title -->
<f7-block-title>Block Title</f7-block-title>
<f7-block>...</f7-block>

<!-- Inset -->
<f7-block inset>...</f7-block>

<!-- With header and footer -->
<f7-block>
  <f7-block-header>Block Header</f7-block-header>
  ...
  <f7-block-footer>Block Footer</f7-block-footer>
</f7-block>

<!-- With header and footer outside -->
<f7-block-header>Block Header</f7-block-header>
<f7-block>
  ...
</f7-block>
<f7-block-footer>Block Footer</f7-block-footer>

<!-- With header after block title and footer outside-->
<f7-block-title>Block Title</f7-block-title>
<f7-block-header>Block Header</f7-block-header>
<f7-block>
  ...
</f7-block>

Renders to:

<!-- Block -->
<div class="block">...</div>

<!-- With extran highlighting and padding, additional "strong" prop -->
<div class="block block-strong">...</div>

<!-- With block title -->
<div class="block-title">Block Title</div>
<div class="block">...</div>

<!-- Inset -->
<div class="block inset">...</div>

<!-- With header and footer -->
<div class="block">
  <div class="block-header">Block Header</div>
  ...
  <div class="block-footer">Block Footer</div>
</div>

<!-- With header and footer outside -->
<div class="block-header">Block Header</div>
<div class="block">
  ...
</div>
<div class="block-footer">Block Footer</div>

<!-- With header after block title and footer outside-->
<div class="block-title">Block Title Here</div>
<div class="block-header">Block Header</div>
<div class="block">
  ...
</div>