Block Svelte 组件

Block Svelte 组件代表区块 / 内容区块元素，主要用于为文本内容添加额外的格式和必要的间距。

Block 组件

包含以下组件：

Block - 主区块元素
BlockTitle - 区块标题。可用于 Block 或列表视图之前
BlockHeader - 额外的标题元素。可用于区块元素内部和外部
BlockFooter - 额外的页脚元素。可用于区块元素内部和外部

Block 属性

属性	类型	描述
<Block> 属性
inset	布尔值	使区块内嵌。`insetIos` 和 `insetMd` 属性可用于主题特定的布局
xsmallInset	布尔值	当应用程序宽度 >= 480px 时使区块内嵌。`xsmallInsetIos` 和 `xsmallInsetMd` 属性可用于主题特定的布局
smallInset	布尔值	当应用程序宽度 >= 568px 时使区块内嵌。`smallInsetIos` 和 `smallInsetMd` 属性可用于主题特定的布局
mediumInset	布尔值	当应用程序宽度 >= 768px 时使区块内嵌。`mediumInsetIos` 和 `mediumInsetMd` 属性可用于主题特定的布局
largeInset	布尔值	当应用程序宽度 >= 1024px 时使区块内嵌。`largeInsetIos` 和 `largeInsetMd` 属性可用于主题特定的布局
xlargeInset	布尔值	当应用程序宽度 >= 1200px 时使区块内嵌。`xlargeInsetIos` 和 `xlargeInsetMd` 属性可用于主题特定的布局
strong	布尔值	为区块内容添加额外的突出显示和填充。`strongIos` 和 `strongMd` 属性可用于主题特定的布局
outline	布尔值	使区块带边框。`outlineIos` 和 `outlineMd` 属性可用于主题特定的布局
accordionList	布尔值	使区块成为手风琴项目的包装器
tabs	布尔值	添加额外的 "tabs" 类以使区块成为选项卡包装器
tab	布尔值	当区块用作选项卡时添加额外的 "tab" 类
tabActive	布尔值	当区块用作选项卡时添加额外的 "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>

改进本页文档

在本页

Block 组件
Block 属性
示例