區塊 React 組件

區塊組件
區塊屬性
區塊標題屬性
區塊標頭屬性
區塊頁尾屬性
範例

區塊 React 組件代表內容區塊元素，主要設計用於為文字內容添加額外的格式和必要的間距。

區塊組件

包含以下組件

Block - 主要區塊元素
BlockTitle - 區塊標題。可用於區塊或列表視圖之前
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'
component	字串	'div'	組件的 HTML 元素
inset	布林值	未定義	使區塊內嵌。覆寫 `insetIos` 和 `insetMaterial` 屬性
insetIos	布林值	false	使區塊在 iOS 主題中內嵌
insetMaterial	布林值	false	使區塊在 Material 主題中內嵌
margin	字串	'my-8'	Tailwind CSS 邊距類別
nested	布林值	false	移除細線和邊距，對於將區塊巢狀於其他區塊的情況很有用
outline	布林值	未定義	使區塊有外框。覆寫 `outlineIos` 和 `outlineMaterial` 屬性
outlineIos	布林值	false	使區塊在 iOS 主題中有外框
outlineMaterial	布林值	false	使區塊在 Material 主題中有外框
padding	字串	'py-4'	Tailwind CSS 內距類別
strong	布林值	未定義	為區塊內容添加額外高亮和內距。覆寫 `strongIos` 和 `strongMaterial` 屬性
strongIos	布林值	false	在 iOS 主題中為區塊內容添加額外高亮和內距
strongMaterial	布林值	false	在 Material 主題中為區塊內容添加額外高亮和內距

區塊標題屬性

名稱	類型	預設值	描述
colors	物件		具有 Tailwind CSS 顏色類別的物件
colors.textIos	字串	''
colors.textMaterial	字串	'text-md-light-primary dark:text-md-dark-primary'
component	字串	'div'	組件的 HTML 元素
large	布林值	false	大型區塊標題
medium	布林值	false	中型區塊標題
withBlock	布林值	true	當區塊標題後沒有區塊或列表組件時，可停用此功能

區塊標頭屬性

名稱	類型	預設值	描述
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'
component	字串	'div'	組件的 HTML 元素
inset	布林值	未定義	使區塊標頭內嵌，覆寫 `insetIos` 和 `insetMaterial`
insetIos	布林值	false	使區塊標頭在 iOS 主題中內嵌
insetMaterial	布林值	false	使區塊標頭在 Material 主題中內嵌

區塊頁尾屬性

名稱	類型	預設值	描述
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'
component	字串	'div'	組件的 HTML 元素
inset	布林值	未定義	使區塊頁尾內嵌，覆寫 `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>
  );
}