區塊 Svelte 元件

區塊 Svelte 元件表示區塊 / 內容區塊元素，其設計（大部分）用於為文字內容新增額外格式和必要的間距。

區塊元件

包含下列元件

區塊 - 主要區塊元素
區塊標題 - 區塊標題。可在區塊或清單檢視之前使用
區塊標頭 - 額外標頭元素。可在區塊元素內外使用
區塊頁尾 - 額外頁尾元素。可在區塊元素內外使用

區塊屬性

屬性	類型	說明
<區塊> 屬性
內嵌	布林值	將區塊設為內嵌。`insetIos` 和 `insetMd` 屬性可供特定主題版面使用
超小內嵌	布林值	當應用程式寬度 >= 480px 時，將區塊設為內嵌。`xsmallInsetIos` 和 `xsmallInsetMd` 屬性可供特定主題版面使用
小內嵌	布林值	當應用程式寬度 >= 568px 時，將區塊設為內嵌。`smallInsetIos` 和 `smallInsetMd` 屬性可供特定主題版面使用
中內嵌	布林值	當應用程式寬度 >= 768px 時，將區塊設為內嵌。`mediumInsetIos` 和 `mediumInsetMd` 屬性可供特定主題版面使用
大內嵌	布林值	當應用程式寬度 >= 1024px 時，將區塊設為內嵌。`largeInsetIos` 和 `largeInsetMd` 屬性可供特定主題版面使用
超大內嵌	布林值	當應用程式寬度 >= 1200px 時，將區塊設為內嵌。`xlargeInsetIos` 和 `xlargeInsetMd` 屬性可供特定主題版面使用
粗體	布林值	新增額外醒目和區塊內容內距。`strongIos` 和 `strongMd` 屬性可供特定主題版面使用
外框	布林值	將區塊設為外框（帶有邊框）。`outlineIos` 和 `outlineMd` 屬性可供特定主題版面使用
手風琴清單	布林值	將區塊設為手風琴項目包裝器
標籤	布林值	新增額外的「標籤」類別，以將區塊設為標籤包裝器
標籤	布林值	當區塊應當標籤使用時，新增額外的「標籤」類別
標籤活動	布林值	當區塊用作標籤時，新增額外的「tab-active」類別，並使其成為活動標籤
<BlockTitle> 屬性
medium	布林值	使區塊標題為中等大小
large	布林值	使區塊標題為大尺寸

範例

content-block.svelte

<script>
  import { Page, Navbar, BlockTitle, BlockHeader, BlockFooter, Block } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Content Block" />

  <p>
    This paragraph is outside of content block. Not cool, but useful for any custom elements with
    custom styling.
  </p>

  <BlockTitle>Block Title</BlockTitle>
  <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>
  </Block>

  <BlockTitle>Strong Block</BlockTitle>
  <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>
  </Block>

  <BlockTitle>Strong Outline Block</BlockTitle>
  <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>
  </Block>

  <BlockTitle>Strong Inset Block</BlockTitle>
  <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>
  </Block>

  <BlockTitle>Strong Inset Outline Block</BlockTitle>
  <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>
  </Block>

  <BlockTitle>Tablet Inset</BlockTitle>
  <Block strong mediumInset>
    <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>
  </Block>

  <BlockTitle>With Header & Footer</BlockTitle>
  <Block>
    <BlockHeader>Block Header</BlockHeader>
    <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>
    <BlockFooter>Block Footer</BlockFooter>
  </Block>

  <BlockHeader>Block Header</BlockHeader>
  <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>
  </Block>
  <BlockFooter>Block Footer</BlockFooter>

  <Block strong>
    <BlockHeader>Block Header</BlockHeader>
    <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>
    <BlockFooter>Block Footer</BlockFooter>
  </Block>

  <BlockHeader>Block Header</BlockHeader>
  <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>
  </Block>
  <BlockFooter>Block Footer</BlockFooter>

  <BlockTitle large>Block Title Large</BlockTitle>
  <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>
  </Block>

  <BlockTitle medium>Block Title Medium</BlockTitle>
  <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>
  </Block>
</Page>

改善此文件

在此頁面上

區塊元件
區塊屬性
範例