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

ブロックコンポーネント
ブロックプロパティ
BlockTitle プロパティ
BlockHeader プロパティ
BlockFooter プロパティ
例

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

ブロックコンポーネント

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

Block - メインのブロック要素
BlockTitle - ブロックタイトル。Block またはリストビューの前に使用できます。
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 テーマでブロックコンテンツに余分なハイライトとパディングを追加します。

BlockTitle プロパティ

名前	型	デフォルト	説明
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	BlockTitle の直後に 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'
component	文字列	'div'	コンポーネントのHTML要素
inset	ブール値	未定義	ブロックヘッダーをインセットにします。`insetIos` と `insetMaterial` を上書きします。
insetIos	ブール値	false	iOS テーマでブロックヘッダーをインセットにします。
insetMaterial	ブール値	false	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'
component	文字列	'div'	コンポーネントのHTML要素
inset	ブール値	未定義	ブロックフッターをインセットにします。`insetIos` と `insetMaterial` を上書きします。
insetIos	ブール値	false	iOS テーマでブロックフッターをインセットにします。
insetMaterial	ブール値	false	Material テーマでブロックフッターをインセットにします。

例

ContentBlock.vue

<template>
  <k-page>
    <k-navbar title="Content Block" />

    <k-block-title>Block Title</k-block-title>
    <k-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>
    </k-block>
    <k-block-title>Strong Block</k-block-title>
    <k-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>
    </k-block>
    <k-block-title>Strong Outline Block</k-block-title>
    <k-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>
    </k-block>

    <k-block-title>Strong Inset Block</k-block-title>
    <k-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>
    </k-block>

    <k-block-title>Strong Inset Outline Block</k-block-title>
    <k-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>
    </k-block>
    <k-block-title>With Header & Footer</k-block-title>
    <k-block-header>Header</k-block-header>
    <k-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>
    </k-block>
    <k-block-footer>Footer</k-block-footer>
    <k-block-title medium>Medium Title</k-block-title>
    <k-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>
    </k-block>
    <k-block-title large>Large Title</k-block-title>
    <k-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>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlock,
    kBlockFooter,
    kBlockHeader,
    kBlockTitle,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlock,
      kBlockFooter,
      kBlockHeader,
      kBlockTitle,
    },

  };
</script>