GroupBlock

Component documentation for GroupBlock.

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 loads on client.

Initially Collapsed

Use default-expand or collapsed to control initial expansion.

GroupBlock (collapsed)

Demo loads on client.

Remember Expanded State

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

GroupBlock (memory)

Demo loads on client.

Header Extension

Use the header-extra slot for actions.

GroupBlock (header-extra)

Demo loads on client.

BlockLine

A simple row item for displaying title and description.

Basic Usage

<template>
  <TxBlockLine title="Text" description="1.0.0" />
  <TxBlockLine title="Text" description="2024.01.15" />
</template>

Link Styles

Displayed as a clickable link.

<template>
  <TxBlockLine title="Text" link @click="openDocs" />
</template>

BlockSlot

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

Basic Usage

<template>
  <TxBlockSlot
    title="Text"
    description="Text"
    default-icon="i-ri-palette-line"
  >
    <select v-model="theme">
      <option value="light">Text</option>
      <option value="dark">Text</option>
      <option value="auto">Text</option>
    </select>
  </TxBlockSlot>
</template>

Active State and Labels

<template>
  <TxBlockSlot
    title="Text"
    description="Text"
    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);">Text</span>
    </template>
  </TxBlockSlot>
</template>

Custom Labels

<template>
  <TxBlockSlot>
    <template #label>
      <h3>CustomTitle <span style="color: red">*</span></h3>
      <p>Text</p>
    </template>
    <input type="text" />
  </TxBlockSlot>
</template>

BlockSwitch

A block container with an integrated switch control.

Basic Usage

BlockSwitch

Demo loads on client.

Loading State

BlockSwitch (loading)

Demo loads on client.

Disabled State

<template>
  <TxBlockSwitch
    v-model="value"
    title="Text"
    description="Text"
    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 loads on client.

API

TxGroupBlock Props

Prop	Type	Default	Description
`name`	`string`	Text	Description for name.
`description`	`string`	`''`	Description for description.
`defaultIcon`	`TxIconSource \| string`	-	DefaultIcon
`activeIcon`	`TxIconSource \| string`	-	TextIcon
`iconSize`	`number`	`22`	Description for iconSize.
`collapsible`	`boolean`	`true`	Description for collapsible.
`collapsed`	`boolean`	`false`	Description for collapsed.
`defaultExpand`	`boolean`	`true`	Description for defaultExpand.
`memoryName`	`string`	-	Description for memoryName.

TxGroupBlock Events

Event	Params	Description
`update:expanded`	`expanded: boolean`	Description for update:expanded.
`toggle`	`expanded: boolean`	Description for toggle.

TxBlockLine Props

Prop	Type	Default	Description
`title`	`string`	`''`	Description for title.
`description`	`string`	`''`	Description for description.
`link`	`boolean`	`false`	Description for link.

TxBlockSlot Props

Prop	Type	Default	Description
`title`	`string`	`''`	Description for title.
`description`	`string`	`''`	Description for description.
`defaultIcon`	`TxIconSource \| string`	-	DefaultIcon
`activeIcon`	`TxIconSource \| string`	-	TextIcon
`iconSize`	`number`	`20`	Description for iconSize.
`active`	`boolean`	`false`	Description for active.
`disabled`	`boolean`	`false`	Description for disabled.

TxBlockSwitch Props

Prop	Type	Default	Description
`modelValue`	`boolean`	Text	Description for modelValue.
`title`	`string`	Text	Description for title.
`description`	`string`	Text	Description for description.
`defaultIcon`	`TxIconSource \| string`	-	DefaultIcon
`activeIcon`	`TxIconSource \| string`	-	TextIcon
`disabled`	`boolean`	`false`	Description for disabled.
`guidance`	`boolean`	`false`	Description for guidance.
`loading`	`boolean`	`false`	Description for loading.

TxBlockSwitch Events

Event	Params	Description
`update:modelValue`	`value: boolean`	Description for update:modelValue.
`change`	`value: boolean`	Description for change.
`click`	`event: MouseEvent`	Description for click.