GroupBlock

Use GroupBlock to organize settings, account options, and compact preference rows with a consistent icon, label, and control layout.

import { ref } from 'vue' const notifications = ref(true) const language = ref<'en' | 'zh'>('en') const autoUpdate = ref(true) const loading = ref(true) const dummy = ref(false)

Basic Usage

GroupBlock

Demo will load when visible.

<template>
  <TxGroupBlock
    name="Preferences"
    default-icon="i-ri-settings-3-line"
    active-icon="i-ri-settings-3-fill"
    description="Application options"
  >
    <TxBlockSwitch
      v-model="notifications"
      title="Notifications"
      description="Enable desktop notifications"
      default-icon="i-ri-notification-line"
      active-icon="i-ri-notification-fill"
    />
    <TxBlockSlot title="Language" description="Display language" default-icon="i-carbon-translate">
      <select v-model="language">
        <option value="en">English</option>
        <option value="zh">Chinese</option>
      </select>
    </TxBlockSlot>
  </TxGroupBlock>
</template>

Initially Collapsed

Use default-expand or collapsed to control initial expansion.

GroupBlock (collapsed)

Demo will load when visible.

<template>
  <TxGroupBlock
    name="Project files"
    description="Collapsed by default"
    default-icon="i-ri-folder-line"
    active-icon="i-ri-folder-open-line"
    :default-expand="false"
  >
    <p>Hidden content is still mounted, but the group body starts collapsed.</p>
  </TxGroupBlock>
</template>

Remember Expanded State

Provide a unique key for memory-name to persist expansion state.

GroupBlock (memory)

Demo will load when visible.

<template>
  <TxGroupBlock
    name="Updates"
    description="Remember the expanded state"
    default-icon="i-ri-refresh-line"
    active-icon="i-ri-refresh-line"
    memory-name="tx-group-block-demo"
  >
    <TxBlockSwitch
      v-model="autoUpdate"
      title="Auto update"
      description="Install updates when the app restarts"
      default-icon="i-ri-refresh-line"
      active-icon="i-ri-refresh-line"
    />
  </TxGroupBlock>
</template>

Header Extension

Use the header-extra slot for actions.

GroupBlock (header-extra)

Demo will load when visible.

<template>
  <TxGroupBlock
    name="Sync"
    description="Header actions stay visible"
    default-icon="i-ri-loop-left-line"
    :collapsible="false"
  >
    <template #header-extra>
      <button>Run now</button>
    </template>
    <TxBlockLine title="Status" description="Ready" />
  </TxGroupBlock>
</template>

BlockLine

A simple row item for displaying title and description.

Basic Usage

<template>
  <TxBlockLine title="Version" description="1.0.0" />
  <TxBlockLine title="Updated" description="2026.05.07" />
</template>

Link Styles

Displayed as a clickable link.

<template>
  <TxBlockLine title="Documentation" link @click="openDocs">
    <template #description>
      Open developer docs
    </template>
  </TxBlockLine>
</template>

BlockSlot

A block container with icon, title, description, and a custom control slot.

Basic Usage

<template>
  <TxBlockSlot
    title="Theme"
    description="Choose the interface appearance"
    default-icon="i-ri-palette-line"
  >
    <select v-model="theme">
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="auto">System</option>
    </select>
  </TxBlockSlot>
</template>

Active State and Labels

<template>
  <TxBlockSlot
    title="Pinned workspace"
    description="Show this workspace first"
    default-icon="i-ri-star-line"
    active-icon="i-ri-star-fill"
    :active="true"
  >
    <template #tags>
      <span style="font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--tx-fill-color);">Active</span>
    </template>
  </TxBlockSlot>
</template>

Custom Labels

<template>
  <TxBlockSlot>
    <template #label>
      <h3>Profile name <span style="color: red">*</span></h3>
      <p>Shown in shared workspaces.</p>
    </template>
    <input type="text" />
  </TxBlockSlot>
</template>

BlockSwitch

A block container with an integrated switch control.

Basic Usage

BlockSwitch

Demo will load when visible.

<template>
  <TxBlockSwitch
    v-model="autoUpdate"
    title="Auto update"
    description="Install updates when the app restarts"
    default-icon="i-ri-refresh-line"
    active-icon="i-ri-refresh-line"
  />
</template>

Loading State

BlockSwitch (loading)

Demo will load when visible.

<template>
  <TxBlockSwitch
    v-model="loading"
    title="Sync status"
    description="Waiting for the latest state"
    default-icon="i-ri-loader-4-line"
    active-icon="i-ri-loader-4-line"
    :loading="true"
  />
</template>

Disabled State

<template>
  <TxBlockSwitch
    v-model="value"
    title="Locked setting"
    description="Managed by your organization"
    default-icon="i-ri-lock-line"
    active-icon="i-ri-lock-fill"
    disabled
  />
</template>

Guided Mode

Displayed as a navigation item instead of a switch.

BlockSwitch (guidance)

Demo will load when visible.

<template>
  <TxBlockSwitch
    v-model="dummy"
    title="Security settings"
    description="Open the security preferences page"
    default-icon="i-ri-shield-keyhole-line"
    guidance
    @click="handleClick"
  />
</template>

API

TxGroupBlock Props

Prop	Type	Default	Description
`name`	`string`	-	Header title for the group.
`description`	`string`	`''`	Supporting text displayed below the group title.
`defaultIcon`	`TxIconSource \| string`	-	Icon shown when the group is collapsed or when no active icon is provided.
`activeIcon`	`TxIconSource \| string`	-	Icon shown while the group is expanded; falls back to `defaultIcon`.
`iconSize`	`number`	`22`	Header icon size in pixels.
`collapsible`	`boolean`	`true`	Allow the header to toggle the group body.
`collapsed`	`boolean`	`false`	External initial collapsed state, ignored after stored state or user interaction takes over.
`defaultExpand`	`boolean`	`true`	Initial expanded state used when no stored state is available.
`memoryName`	`string`	-	Persist expanded state in `localStorage` under the `tuff-block-storage-` prefix.

TxGroupBlock Events

Event	Params	Description
`update:expanded`	`expanded: boolean`	Emitted after a collapsible group changes expansion state.
`toggle`	`expanded: boolean`	Emitted with the same state when the header toggles the group.

TxBlockLine Props

Prop	Type	Default	Description
`title`	`string`	`''`	Row label.
`description`	`string`	`''`	Row value text when `link=false`; can be replaced with the `description` slot.
`link`	`boolean`	`false`	Use link styling and emit click/Enter activation events.

TxBlockSlot Props

Prop	Type	Default	Description
`title`	`string`	`''`	Default label title, replaced when the `label` slot is provided.
`description`	`string`	`''`	Default label description, replaced when the `label` slot is provided.
`defaultIcon`	`TxIconSource \| string`	-	Icon shown when `active=false` or when no active icon is provided.
`activeIcon`	`TxIconSource \| string`	-	Icon shown when `active=true`; falls back to `defaultIcon`.
`iconSize`	`number`	`20`	Icon size in pixels.
`active`	`boolean`	`false`	Switch the slot row into active visual/icon state.
`disabled`	`boolean`	`false`	Apply disabled styling and block row click emits.

TxBlockSwitch Props

Prop	Type	Default	Description
`modelValue`	`boolean`	-	Current switch value for `v-model`.
`title`	`string`	-	Switch row title.
`description`	`string`	-	Switch row description.
`defaultIcon`	`TxIconSource \| string`	-	Icon shown when the switch is off or when no active icon is provided.
`activeIcon`	`TxIconSource \| string`	-	Icon shown when the switch is on; falls back to `defaultIcon`.
`disabled`	`boolean`	`false`	Disable the row and underlying switch.
`guidance`	`boolean`	`false`	Render as a navigation row with a chevron instead of a switch.
`loading`	`boolean`	`false`	Show a loader and temporarily disable switch interaction.

TxBlockSwitch Events

Event	Params	Description
`update:modelValue`	`value: boolean`	Emitted by the underlying switch when the value changes.
`change`	`value: boolean`	Mirrors the switch `change` event after user interaction.
`click`	`event: MouseEvent`	Emitted only in `guidance` mode.