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

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

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

ブロックコンポーネント

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

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'
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 Props

名前	タイプ	デフォルト	説明
colors	オブジェクト		Tailwind CSSカラークラスを持つオブジェクト
colors.textIos	文字列	''
colors.textMaterial	文字列	'text-md-light-primary dark:text-md-dark-primary'
large	真偽値	偽	大きなブロックタイトル
medium	真偽値	偽	中くらいのブロックタイトル
withBlock	真偽値	真	ブロックタイトルの直後にブロックまたはリストコンポーネントがない場合に無効にするのに役立ちます

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'
inset	真偽値	未定義	ブロックヘッダーをインセットにします。 `insetIos` および `insetMaterial` を上書きします
insetIos	真偽値	偽	iOSテーマでブロックヘッダーをインセットにします
insetMaterial	真偽値	偽	Materialテーマでブロックヘッダーをインセットにします

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'
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>