ブロック React コンポーネント

ブロックコンポーネント
ブロック Props
BlockTitle Props
BlockHeader Props
BlockFooter Props
例

ブロック React コンポーネントは、（主に）テキストコンテンツに追加のフォーマットと必要なスペースを追加するために設計されたコンテンツブロック要素を表します。

ブロックコンポーネント

以下のコンポーネントが含まれています

Block - メインブロック要素
BlockTitle - ブロックタイトル。ブロックまたはリストビューの前に使用できます
BlockHeader - 追加のヘッダー要素。ブロック要素の内部と外部の両方で使用できます
BlockFooter - 追加のフッター要素。ブロック要素の内部と外部の両方で使用できます

ブロック Props

名前	タイプ	デフォルト	説明
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` props を上書きします
insetIos	真偽値	false	iOSテーマでブロックをインセットにします
insetMaterial	真偽値	false	マテリアルテーマでブロックをインセットにします
margin	文字列	'my-8'	Tailwind CSS マージンクラス
nested	真偽値	false	ヘアラインとマージンを削除します。他のブロック内にブロックをネストする場合に便利です
outline	真偽値	未定義	ブロックをアウトラインにします。 `outlineIos` と `outlineMaterial` props を上書きします
outlineIos	真偽値	false	iOSテーマでブロックをアウトラインにします
outlineMaterial	真偽値	false	マテリアルテーマでブロックをアウトラインにします
padding	文字列	'py-4'	Tailwind CSS パディングクラス
strong	真偽値	未定義	ブロックコンテンツのハイライトとパディングを追加します。 `strongIos` と `strongMaterial` props を上書きします
strongIos	真偽値	false	iOSテーマでブロックコンテンツのハイライトとパディングを追加します
strongMaterial	真偽値	false	マテリアルテーマでブロックコンテンツのハイライトとパディングを追加します

BlockTitle Props

名前	タイプ	デフォルト	説明
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	ブロックタイトルの直後にブロックまたはリストコンポーネントがない場合に無効にするのに便利です

BlockHeader Props

名前	タイプ	デフォルト	説明
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	マテリアルテーマでブロックヘッダーをインセットにします

BlockFooter Props

名前	タイプ	デフォルト	説明
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	マテリアルテーマでブロックフッターをインセットにします

例

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>
  );
}