块 / 内容块

内容块设计（主要是）为了添加额外的格式和文本内容的所需间距：

块

要添加内容块元素，只需添加<div>包裹block class:

<div class="block">
  <!-- block content -->
</div>

要为块元素添加额外的突出显示，我们需要额外的block-strong类

<div class="block block-strong">
  <!-- block content -->
</div>

要在块周围添加轮廓（边框），我们需要额外的block-outline类

<div class="block block-strong block-outline">
  <!-- block content -->
</div>

要使块内缩，我们需要额外的inset类

<div class="block block-strong inset">
  <!-- inset block content -->
</div>

来使区块仅在大型屏幕上内嵌我们需要使用medium-inset（>= 768px）类而不是：

<div class="block block-strong medium-inset">
  <!-- inset block content -->
</div>

对于这样的响应式类的完整集检查网格文档。它们是xsmall-inset, small-inset, medium-inset, large-inset, xlarge-inset.

块标题

要在块之前添加块标题或列表视图我们需要带有block-title class:

<div class="block-title">Here comes block title</div>
<div class="block">
  <!-- block content -->
</div>

<div class="block-title">Here comes the list</div>
<div class="list">
  <!-- list content -->
</div>

<!-- Medium size Block Title -->
<div class="block-title block-title-medium">Medium Title</div>
<div class="block">
  <!-- block content -->
</div>

<!-- Large size Block Title -->
<div class="block-title block-title-large">Large Title</div>
<div class="block">
  <!-- block content -->
</div>

如果我们需要额外的标题和页脚文本，我们可以使用块头部元素。它可以在块元素（块，列表视图）内部和外部使用

<!-- Inside of block -->
<div class="block">
  <!-- Block header -->
  <div class="block-header">Block Header</div>
  ...
  <!-- Block footer -->
  <div class="block-footer">Block Footer</div>
</div>

<!-- Outside of block -->
<div class="block-header">Block Header</div>
<div class="block">
  ...
</div>
<div class="block-footer">Block Footer</div>

<!-- After Block Title -->
<div class="block-title">Block Title Here</div>
<div class="block-header">Block Header</div>
<div class="block">
  ...
</div>
<div class="block-footer">Block Footer</div>

CSS 变量

以下是相关CSS 变量(CSS 自定义属性) 的列表。

:root {
  --f7-block-padding-horizontal: 16px;
  --f7-block-padding-vertical: 16px;
  --f7-block-font-size: inherit;
  --f7-block-header-margin: 10px;
  --f7-block-footer-margin: 10px;
  --f7-block-header-font-size: 14px;
  --f7-block-footer-font-size: 14px;
  --f7-block-title-text-transform: none;
  --f7-block-title-white-space: nowrap;
  --f7-block-title-medium-text-transform: none;
  --f7-block-title-large-text-transform: none;
  --f7-block-inset-side-margin: 16px;
}
:root .dark,
:root.dark {
  --f7-block-outline-border-color: rgba(255, 255, 255, 0.15);
}
.ios {
  --f7-block-text-color: inherit;
  --f7-block-margin-vertical: 35px;
  --f7-block-outline-border-color: rgba(0, 0, 0, 0.22);
  --f7-block-title-font-size: 16px;
  --f7-block-title-font-weight: 600;
  --f7-block-title-line-height: 20px;
  --f7-block-title-margin-bottom: 10px;
  --f7-block-title-medium-font-size: 22px;
  --f7-block-title-medium-font-weight: bold;
  --f7-block-title-medium-line-height: 1.4;
  --f7-block-title-large-font-size: 30px;
  --f7-block-title-large-font-weight: bold;
  --f7-block-title-large-line-height: 1.3;
  --f7-block-inset-border-radius: 8px;
  --f7-block-title-text-color: #000;
  --f7-block-strong-text-color: #000;
  --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
  --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
  --f7-block-strong-bg-color: #fff;
  --f7-block-title-medium-text-color: #000;
  --f7-block-title-large-text-color: #000;
}
.ios .dark,
.ios.dark {
  --f7-block-title-text-color: #fff;
  --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
  --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
  --f7-block-strong-text-color: #fff;
  --f7-block-strong-bg-color: #1c1c1d;
  --f7-block-title-medium-text-color: #fff;
  --f7-block-title-large-text-color: #fff;
}
.md {
  --f7-block-margin-vertical: 32px;
  --f7-block-title-font-size: inherit;
  --f7-block-title-font-weight: 500;
  --f7-block-title-line-height: 16px;
  --f7-block-title-margin-bottom: 16px;
  --f7-block-title-medium-font-size: 16px;
  --f7-block-title-medium-font-weight: 500;
  --f7-block-title-medium-line-height: 1.3;
  --f7-block-title-large-font-size: 22px;
  --f7-block-title-large-font-weight: 500;
  --f7-block-title-large-line-height: 1.2;
  --f7-block-inset-border-radius: 16px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-block-text-color: var(--f7-md-on-surface);
  --f7-block-strong-text-color: var(--f7-md-on-surface);
  --f7-block-outline-border-color: var(--f7-md-outline);
  --f7-block-title-text-color: var(--f7-theme-color);
  --f7-block-title-medium-text-color: var(--f7-theme-color);
  --f7-block-title-large-text-color: var(--f7-theme-color);
  --f7-block-strong-bg-color: var(--f7-md-surface-1);
  --f7-block-header-text-color: var(--f7-md-on-surface-variant);
  --f7-block-footer-text-color: var(--f7-md-on-surface-variant);
}

示例

content-block.html
<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Content Block</div>
    </div>
  </div>
  <div class="page-content">
    <p>This paragraph is outside of content block. Not cool, but useful for any custom elements with custom styling.</p>

    <div class="block-title">Block Title</div>
    <div class="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>
    </div>

    <div class="block-title">Strong Block</div>
    <div class="block 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>
    </div>

    <div class="block-title">Strong Outline Block</div>
    <div class="block block-strong block-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>
    </div>

    <div class="block-title">Strong Inset Block</div>
    <div class="block 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>
    </div>

    <div class="block-title">Strong Inset Outline Block</div>
    <div class="block block-strong block-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>
    </div>

    <div class="block-title">Tablet Inset</div>
    <div class="block 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>
    </div>

    <div class="block-title">With Header & Footer</div>
    <div class="block">
      <div class="block-header">Block Header</div>
      <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>
      <div class="block-footer">Block Footer</div>
    </div>

    <div class="block-header">Block Header</div>
    <div class="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>
    </div>
    <div class="block-footer">Block Footer</div>

    <div class="block block-strong">
      <div class="block-header">Block Header</div>
      <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>
      <div class="block-footer">Block Footer</div>
    </div>

    <div class="block-header">Block Header</div>
    <div class="block 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>
    </div>
    <div class="block-footer">Block Footer</div>

    <div class="block-title block-title-large">Block Title Large</div>
    <div class="block 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>
    </div>

    <div class="block-title block-title-medium">Block Title Medium</div>
    <div class="block 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>
    </div>
  </div>
</div>
改进此文档
在本页上