Block React 组件

块组件
块属性
BlockTitle 属性
BlockHeader 属性
BlockFooter 属性
示例

Block React 组件表示内容块元素，设计用于（大部分）添加额外的格式和文本内容所需的间距。

块组件

以下组件已包含在内

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

块属性

名称	类型	默认值	描述
颜色	对象		包含 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'
组件	字符串	'div'	组件的 HTML 元素
内嵌	布尔值	未定义	使块内嵌。覆盖 `insetIos` 和 `insetMaterial` 属性
insetIos	布尔值	false	在 iOS 主题中使块内嵌
insetMaterial	布尔值	false	在 Material 主题中使块内嵌
边距	字符串	'my-8'	Tailwind CSS 边距类
嵌套	布尔值	false	删除细线和边距，适用于将块嵌套在其他块中的情况
轮廓	布尔值	未定义	使块轮廓。覆盖 `outlineIos` 和 `outlineMaterial` 属性
outlineIos	布尔值	false	在 iOS 主题中使块轮廓
outlineMaterial	布尔值	false	在 Material 主题中使块轮廓
填充	字符串	'py-4'	Tailwind CSS 填充类
强	布尔值	未定义	添加额外的突出显示和填充块内容。覆盖 `strongIos` 和 `strongMaterial` 属性
strongIos	布尔值	false	在 iOS 主题中添加额外的突出显示和填充块内容
strongMaterial	布尔值	false	在 Material 主题中添加额外的突出显示和填充块内容

BlockTitle 属性

名称	类型	默认值	描述
颜色	对象		包含 Tailwind CSS 颜色类别的对象
colors.textIos	字符串	''
colors.textMaterial	字符串	'text-md-light-primary dark:text-md-dark-primary'
组件	字符串	'div'	组件的 HTML 元素
大	布尔值	false	大尺寸块标题
中	布尔值	false	中等尺寸块标题
withBlock	布尔值	true	当 Block Title 之后没有 Block 或 List 组件时，使用此选项可禁用。

BlockHeader 属性

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

BlockFooter 属性

名称	类型	默认值	描述
颜色	对象		包含 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'
组件	字符串	'div'	组件的 HTML 元素
内嵌	布尔值	未定义	使块页脚内嵌，覆盖 `insetIos` 和 `insetMaterial`
insetIos	布尔值	false	在 iOS 主题中使块页脚内嵌
insetMaterial	布尔值	false	在 Material 主题中使块页脚内嵌

示例

ContentBlock.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  BlockFooter,
  BlockHeader,
  BlockTitle,
} from 'konsta/react';

export default function ContentBlockPage() {
  return (
    <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>
  );
}