ブロックVueコンポーネント

Block Vueコンポーネントは、Block / Content Block要素を表し、テキストコンテンツに追加のフォーマットと必要なスペースを追加するために設計されています。

ブロックコンポーネント

以下のコンポーネントが含まれています。

f7-block - メインのブロック要素
f7-block-title - ブロックのタイトルです。ブロックビューやリストビューの前に使用することができます。
f7-block-header - 追加のヘッダー要素です。ブロック要素の内側と外側の両方で使用できます。
f7-block-footer - 追加のフッター要素です。ブロック要素の内側と外側の両方で使用できます。

ブロックのプロパティ

Prop	Type	Description
<f7-block> properties
inset	boolean	ブロックを挿入します。
xsmall-inset	boolean	アプリの幅が >= 480px のとき、ブロックを挿入します。
small-inset	boolean	ブロックを挿入しますアプリの幅が >= 568px のときにブロックを挿入します
medium-inset	boolean	ブロックを挿入しますアプリの幅が >= 768px の場合
large-inset	boolean	ブロックを挿入しますアプリの幅が >= 1024px のときにブロックを挿入します
xlarge-inset	boolean	ブロックの挿入を、アプリの幅が1200px以上の場合に行います。
strong	boolean	ブロックコンテンツにハイライトとパディングを追加します。
accordion-list	boolean	アコーディオンアイテム用のブロックラッパーの作成
tabs	boolean	追加の "tobs" クラスを追加して、ブロックのタブラッパーとする
tab	boolean	ブロックをタブとして使用する場合に、"tab "クラスを追加します。
tab-active	boolean	ブロックがTabとして使われているときに "tab-active "クラスを追加して、アクティブなタブにする
no-hairlines	boolean	外側の hairlines を削除する
no-hairlines-md	boolean	MDテーマの外側のhairlinesを削除した
no-hairlines-ios	boolean	iOSテーマの外側のhairlinesが削除されました。
no-hairlines-aurora	boolean	Auroraテーマの外側のhairlinesを削除しました。
<f7-block-title> properties
medium	boolean	ブロックタイトルのサイズを中に変更
large	boolean	ブロックタイトルのサイズを大にする

Examples

<template>
<f7-page>
  <f7-navbar title="Content Block"></f7-navbar>
  <p>This paragraph is outside of content block. Not cool, but useful for any custom elements with custom styling.</p>

  <f7-block>
    <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>
  </f7-block>

  <f7-block strong>
    <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>
  </f7-block>

  <f7-block-title>Block title</f7-block-title>
  <f7-block>
    <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>
  </f7-block>

  <f7-block-title>Another ultra long content block title</f7-block-title>
  <f7-block strong>
    <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>
  </f7-block>

  <f7-block-title>Inset</f7-block-title>
  <f7-block strong inset>
    <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>
  </f7-block>

  <f7-block-title>Tablet Inset</f7-block-title>
  <f7-block strong medium-inset>
    <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>
  </f7-block>

  <f7-block-title>With Header & Footer</f7-block-title>
  <f7-block>
    <f7-block-header>Block Header</f7-block-header>
    <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>
    <f7-block-footer>Block Footer</f7-block-footer>
  </f7-block>

  <f7-block-header>Block Header</f7-block-header>
  <f7-block>
    <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>
  </f7-block>
  <f7-block-footer>Block Footer</f7-block-footer>

  <f7-block strong>
    <f7-block-header>Block Header</f7-block-header>
    <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>
    <f7-block-footer>Block Footer</f7-block-footer>
  </f7-block>

  <f7-block-header>Block Header</f7-block-header>
  <f7-block strong>
    <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>
  </f7-block>
  <f7-block-footer>Block Footer</f7-block-footer>

  <f7-block-title large>Block Title Large</f7-block-title>
  <f7-block strong>
    <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>
  </f7-block>

  <f7-block-title medium>Block Title Medium</f7-block-title>
  <f7-block strong>
    <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>
  </f7-block>
</f7-page>
</template>