块状 Svelte 组件

块组件
块道具
BlockTitle 道具
BlockHeader 道具
BlockFooter 道具
示例

Block Svelte 组件表示内容块元素，旨在（主要）为文本内容添加额外的格式和必要的间距。

块组件

以下组件包含在内

Block - 主要块元素
BlockTitle - 块标题。可以在 Block 或 List View 之前使用
BlockHeader - 额外的标题元素。可以在块元素内部和外部使用
BlockFooter - 额外的页脚元素。可以在块元素内部和外部使用

块道具

姓名	类型	默认值	描述
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.outlineIos	字符串	'border-black border-opacity-20 dark:border-white dark:border-opacity-15'
colors.outlineMaterial	字符串	'border-md-light-outline border-md-dark-outline'
colors.strongBgIos	字符串	`bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterial	字符串	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.textIos	字符串	'''
colors.textMaterial	字符串	'text-md-light-on-surface dark:text-md-dark-on-surface'
inset	布尔值	未定义	使块内嵌。覆盖 `insetIos` 和 `insetMaterial` 道具
insetIos	布尔值	错误的	在 iOS 主题中使块内嵌
insetMaterial	布尔值	错误的	在 Material 主题中使块内嵌
margin	字符串	'my-8'	Tailwind CSS 边距类
nested	布尔值	错误的	移除细线和边距，适用于在其他块中嵌套块的情况
outline	布尔值	未定义	使块轮廓。覆盖 `outlineIos` 和 `outlineMaterial` 道具
outlineIos	布尔值	错误的	在 iOS 主题中使块轮廓
outlineMaterial	布尔值	错误的	在 Material 主题中使块轮廓
padding	字符串	'py-4'	Tailwind CSS 填充类
strong	布尔值	未定义	添加额外的突出显示和填充块内容。覆盖 `strongIos` 和 `strongMaterial` 道具
strongIos	布尔值	错误的	在 iOS 主题中添加额外的突出显示和填充块内容
strongMaterial	布尔值	错误的	在 Material 主题中添加额外的突出显示和填充块内容

BlockTitle 道具

姓名	类型	默认值	描述
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.textIos	字符串	''
colors.textMaterial	字符串	'text-md-light-primary dark:text-md-dark-primary'
large	布尔值	错误的	大型块标题
medium	布尔值	错误的	中型块标题
withBlock	布尔值	真的	在 Block Title 之后没有 Block 或 List 组件时禁用很有用

BlockHeader 道具

姓名	类型	默认值	描述
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.textIos	字符串	'text-black dark:text-white'
colors.textMaterial	字符串	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
inset	布尔值	未定义	使块标题内嵌，覆盖 `insetIos` 和 `insetMaterial`
insetIos	布尔值	错误的	在 iOS 主题中使块标题内嵌
insetMaterial	布尔值	错误的	在 Material 主题中使块标题内嵌

BlockFooter 道具

姓名	类型	默认值	描述
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.textIos	字符串	'text-black text-opacity-75 dark:text-white dark:text-opacity-75'
colors.textMaterial	字符串	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
inset	布尔值	未定义	使块页脚内嵌，覆盖 `insetIos` 和 `insetMaterial`
insetIos	布尔值	错误的	在 iOS 主题中使块页脚内嵌
insetMaterial	布尔值	错误的	在 Material 主题中使块页脚内嵌

示例

ContentBlock.svelte

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

</script>

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

  <BlockTitle>Block Title</BlockTitle>
  <Block>
    <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 Block</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>Strong Outline Block</BlockTitle>
  <Block strong outline>
    <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 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 inset outline>
    <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>
  <BlockHeader>Header</BlockHeader>
  <Block strong outline>
    <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>
  <BlockFooter>Footer</BlockFooter>
  <BlockTitle medium>Medium Title</BlockTitle>
  <Block strong outline>
    <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 large>Large Title</BlockTitle>
  <Block strong outline>
    <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>