區塊 Svelte 組件

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

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

區塊組件

包含以下組件

Block - 主要區塊元素
BlockTitle - 區塊標題。可用於區塊或列表視圖之前
BlockHeader - 額外的標頭元素。可在區塊元素的內部和外部使用
BlockFooter - 額外的頁尾元素。可在區塊元素的內部和外部使用

區塊屬性

名稱	類型	預設值	描述
colors	object		包含 Tailwind CSS 顏色類別的物件
colors.outlineIos	string	'border-black border-opacity-20 dark:border-white dark:border-opacity-15'
colors.outlineMaterial	string	'border-md-light-outline border-md-dark-outline'
colors.strongBgIos	string	`bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterial	string	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.textIos	string	'''
colors.textMaterial	string	'text-md-light-on-surface dark:text-md-dark-on-surface'
inset	boolean	undefined	使區塊內縮。覆寫 `insetIos` 和 `insetMaterial` 屬性
insetIos	boolean	false	在 iOS 主題中使區塊內縮
insetMaterial	boolean	false	在 Material 主題中使區塊內縮
margin	string	'my-8'	Tailwind CSS 邊距類別
nested	boolean	false	移除細線和邊距，適用於在其他區塊內巢狀區塊的情況
outline	boolean	undefined	使區塊具有輪廓。覆寫 `outlineIos` 和 `outlineMaterial` 屬性
outlineIos	boolean	false	在 iOS 主題中使區塊具有輪廓
outlineMaterial	boolean	false	在 Material 主題中使區塊具有輪廓
padding	string	'py-4'	Tailwind CSS 內距類別
strong	boolean	undefined	為區塊內容添加額外的強調和內距。覆寫 `strongIos` 和 `strongMaterial` 屬性
strongIos	boolean	false	在 iOS 主題中為區塊內容添加額外的強調和內距
strongMaterial	boolean	false	在 Material 主題中為區塊內容添加額外的強調和內距

區塊標題屬性

名稱	類型	預設值	描述
colors	object		包含 Tailwind CSS 顏色類別的物件
colors.textIos	string	''
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
large	boolean	false	大型區塊標題
medium	boolean	false	中型區塊標題
withBlock	boolean	true	當區塊標題後沒有區塊或列表組件時，可停用此選項

區塊標頭屬性

名稱	類型	預設值	描述
colors	object		包含 Tailwind CSS 顏色類別的物件
colors.textIos	string	'text-black dark:text-white'
colors.textMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
inset	boolean	undefined	使區塊標頭內縮，覆寫 `insetIos` 和 `insetMaterial`
insetIos	boolean	false	在 iOS 主題中使區塊標頭內縮
insetMaterial	boolean	false	在 Material 主題中使區塊標頭內縮

區塊頁尾屬性

名稱	類型	預設值	描述
colors	object		包含 Tailwind CSS 顏色類別的物件
colors.textIos	string	'text-black text-opacity-75 dark:text-white dark:text-opacity-75'
colors.textMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
inset	boolean	undefined	使區塊頁尾內縮，覆寫 `insetIos` 和 `insetMaterial`
insetIos	boolean	false	在 iOS 主題中使區塊頁尾內縮
insetMaterial	boolean	false	在 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>