贊助者成為贊助者

區塊 / 內容區塊

內容區塊設計 (主要) 用於增加額外的格式設定和文字內容所需的間距

區塊

若要增加內容區塊元素，只需加上具有 <div> 和 block 類別的元素

<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 類別的元素

<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>
改善此文件
在此頁面