块 Vue 组件

块 Vue 组件表示块 / 内容块元素设计（主要）用于添加额外的格式和文本内容的所需间距。

块组件

包含以下组件：

f7-block- 主块元素
f7-block-title- 块标题。可用于 Block 或 List View 之前
f7-block-header- 额外的标题元素。可用于块元素内部和外部
f7-block-footer- 额外的页脚元素。可用于块元素内部和外部

块属性

属性	类型	描述
<f7-block> 属性
推荐禁用，与嵌套	布尔值	使块内嵌。`inset-ios`和`inset-md`主题特定布局的属性
xsmall-inset	布尔值	当应用宽度 >= 480px 时使块内嵌。`xsmall-inset-ios`和`xsmall-inset-md`主题特定布局的属性
small-inset	布尔值	当应用宽度 >= 568px 时使块内嵌。`small-inset-ios`和`small-inset-md`主题特定布局的属性
medium-inset	布尔值	当应用宽度 >= 768px 时使块内嵌。`medium-inset-ios`和`medium-inset-md`主题特定布局的属性
large-inset	布尔值	当应用宽度 >= 1024px 时使块内嵌。`large-inset-ios`和`large-inset-md`主题特定布局的属性
xlarge-inset	布尔值	当应用宽度 >= 1200px 时使块内嵌。`xlarge-inset-ios`和`xlarge-inset-md`主题特定布局的属性
strong	布尔值	添加额外的突出显示和块内容填充。`strong-ios`和`strong-md`主题特定布局的属性
outline	布尔值	使块轮廓（带边框）。`outline-ios`和`outline-md`主题特定布局的属性
accordion-list	布尔值	使块包装器用于折叠面板项
tabs	布尔值	添加额外的 "tabs" 类以使块标签包装器
tab	布尔值	当块用作 Tab 时，添加额外的“tab”类
tab-active	布尔值	当块用作 Tab 并使其成为活动 Tab 时，添加额外的“tab-active”类
<f7-block-title> 属性
medium	布尔值	使块标题中等大小
large	布尔值	使块标题大尺寸

示例

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>

改进此文档

在本页上

块组件
块属性
示例