Block / Content Block - 图1

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

PropTypeDefaultDescription
<f7-block> properties
insetbooleanMakes block inset
xsmall-insetbooleanMakes block inset when app width >= 480px
small-insetbooleanMakes block inset when app width >= 568px
medium-insetbooleanMakes block inset when app width >= 768px
large-insetbooleanMakes block inset when app width >= 1024px
xlarge-insetbooleanMakes block inset when app width >= 1200px
strongbooleanAdds extra highlighting and padding block content
accordion-listbooleanMakes block wrapper for accordion items
tabsbooleanAdds additional “tabs” class to make the block tabs wrapper
tabbooleanAdds additional “tab” class when block should be used as a Tab
tab-activebooleanAdds additional “tab-active” class when block used as a Tab and makes it active tab
no-hairlinesbooleanRemoves outer hairlines
no-hairlines-mdbooleanRemoves outer hairlines for MD theme
no-hairlines-iosbooleanRemoves outer hairlines for iOS theme
<f7-block-title> properties
mediumbooleanMakes block title medium size
largebooleanMakes block title large size

Examples

  1. <f7-page>
  2.   <f7-navbar title="Content Block"></f7-navbar>
  3.   <p>This paragraph is outside of content block. Not cool, but useful for any custom elements with custom styling.</p>
  5.   <f7-block>
  6.     <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  7.   </f7-block>
  9.   <f7-block strong>
  10.     <p>Here comes another text block with additional "block-strong" class. Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. Integer blandit varius nisi quis consectetur. </p>
  11.   </f7-block>
  13.   <f7-block-title>Block title</f7-block-title>
  14.   <f7-block>
  15.     <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  16.   </f7-block>
  18.   <f7-block-title>Another ultra long content block title</f7-block-title>
  19.   <f7-block strong>
  20.     <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  21.   </f7-block>
  23.   <f7-block-title>Inset</f7-block-title>
  24.   <f7-block strong inset>
  25.     <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  26.   </f7-block>
  28.   <f7-block-title>Tablet Inset</f7-block-title>
  29.   <f7-block strong medium-inset>
  30.     <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  31.   </f7-block>
  33.   <f7-block-title>With Header & Footer</f7-block-title>
  34.   <f7-block>
  35.     <f7-block-header>Block Header</f7-block-header>
  36.     <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  37.     <f7-block-footer>Block Footer</f7-block-footer>
  38.   </f7-block>
  40.   <f7-block-header>Block Header</f7-block-header>
  41.   <f7-block>
  42.     <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  43.   </f7-block>
  44.   <f7-block-footer>Block Footer</f7-block-footer>
  46.   <f7-block strong>
  47.     <f7-block-header>Block Header</f7-block-header>
  48.     <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  49.     <f7-block-footer>Block Footer</f7-block-footer>
  50.   </f7-block>
  52.   <f7-block-header>Block Header</f7-block-header>
  53.   <f7-block strong>
  54.     <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  55.   </f7-block>
  56.   <f7-block-footer>Block Footer</f7-block-footer>
  58.   <f7-block-title large>Block Title Large</f7-block-title>
  59.   <f7-block strong>
  60.     <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  61.   </f7-block>
  63.   <f7-block-title medium>Block Title Medium</f7-block-title>
  64.   <f7-block strong>
  65.     <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
  66.   </f7-block>
  67. </f7-page>

← Badge

Button →