Block Vueコンポーネント

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

ブロックコンポーネント

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

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

ブロックプロパティ

プロパティ	型	説明
<f7-block> プロパティ
inset	boolean	ブロックをインセットにします。テーマ固有のレイアウトのために`inset-ios`と`inset-md`プロパティを使用できます。
xsmall-inset	boolean	アプリの幅が480px以上のときにブロックをインセットにします。テーマ固有のレイアウトのために`xsmall-inset-ios`と`xsmall-inset-md`プロパティを使用できます。
small-inset	boolean	アプリの幅が568px以上のときにブロックをインセットにします。テーマ固有のレイアウトのために`small-inset-ios`と`small-inset-md`プロパティを使用できます。
medium-inset	boolean	アプリの幅が768px以上のときにブロックをインセットにします。テーマ固有のレイアウトのために`medium-inset-ios`と`medium-inset-md`プロパティを使用できます。
large-inset	boolean	アプリの幅が1024px以上のときにブロックをインセットにします。テーマ固有のレイアウトのために`large-inset-ios`と`large-inset-md`プロパティを使用できます。
xlarge-inset	boolean	アプリの幅が1200px以上のときにブロックをインセットにします。テーマ固有のレイアウトのために`xlarge-inset-ios`と`xlarge-inset-md`プロパティを使用できます。
strong	boolean	ブロックコンテンツに余分なハイライトとパディングを追加します。テーマ固有のレイアウトのために`strong-ios`と`strong-md`プロパティを使用できます。
outline	boolean	ブロックをアウトライン（ボーダー付き）にします。テーマ固有のレイアウトのために`outline-ios`と`outline-md`プロパティを使用できます。
accordion-list	boolean	アコーディオンアイテムのブロックラッパーにします。
tabs	boolean	ブロックをタブのラッパーにするために追加の "tabs" クラスを追加します。
tab	boolean	ブロックがタブとして使用される場合に追加の "tab" クラスを追加します。
tab-active	boolean	タブとして使用され、アクティブなタブになるブロックに追加の "tab-active" クラスを追加します。
<f7-block-title> プロパティ
medium	boolean	ブロックタイトルを中サイズにします。
large	boolean	ブロックタイトルを大サイズにします。

例

content-block.vue

<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-title>Block Title</f7-block-title>
    <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-title>Strong Block</f7-block-title>
    <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>Strong Outline Block</f7-block-title>
    <f7-block strong outline>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates itaque autem qui quaerat
        vero ducimus praesentium quibusdam veniam error ut alias, numquam iste ea quos maxime
        consequatur ullam at a.
      </p>
    </f7-block>

    <f7-block-title>Strong Inset Block</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>Strong Inset Outline Block</f7-block-title>
    <f7-block strong outline 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>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Block,
  f7BlockHeader,
  f7BlockFooter,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Block,
    f7BlockHeader,
    f7BlockFooter,
  },
};
</script>

このドキュメントを改善する

このページについて

ブロックコンポーネント
ブロックプロパティ
例