Block Vue component represents Content Block element designed (mostly) to add extra formatting and required spacing for text content.
<!-- 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>| 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. |