赞助商成为赞助商

Block Vue 组件

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

Block 组件

包括以下组件

Block 属性

属性类型默认值描述
<f7-block> 属性
inset布尔值产生块缩进。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-active布尔值当块用作选项卡并且使其成为活动选项卡时，添加额外的“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>
优化此文档
在此页面