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)

基础用法

GroupBlock

示例即将加载...

<template>
  <TxGroupBlock
    name="通用设置"
    default-icon="i-ri-settings-3-line"
    active-icon="i-ri-settings-3-fill"
    description="配置基本选项"
  >
    <TxBlockSwitch
      v-model="notifications"
      title="通知"
      description="启用推送通知"
      default-icon="i-ri-notification-line"
      active-icon="i-ri-notification-fill"
    />
    <TxBlockSlot title="语言" description="选择显示语言" default-icon="i-carbon-translate">
      <select v-model="language">
        <option value="en">English</option>
        <option value="zh">中文</option>
      </select>
    </TxBlockSlot>
  </TxGroupBlock>
</template>

初始折叠

使用 default-expand 或 collapsed 控制初始展开状态。

GroupBlock (collapsed)

示例即将加载...

<template>
  <TxGroupBlock
    name="高级设置"
    description="折叠展示内容"
    default-icon="i-ri-folder-line"
    active-icon="i-ri-folder-open-line"
    :default-expand="false"
  >
    <p>高级内容</p>
  </TxGroupBlock>
</template>

记忆展开状态

为 memory-name 指定唯一键，组件会持久化展开状态。

GroupBlock (memory)

示例即将加载...

<template>
  <TxGroupBlock
    name="更新策略"
    description="记忆展开状态"
    default-icon="i-ri-refresh-line"
    active-icon="i-ri-refresh-line"
    memory-name="tx-group-block-demo"
  >
    <TxBlockSwitch
      v-model="autoUpdate"
      title="自动更新"
      description="后台自动检查更新"
      default-icon="i-ri-refresh-line"
      active-icon="i-ri-refresh-line"
    />
  </TxGroupBlock>
</template>

头部扩展

使用 header-extra 插槽放置操作区。

GroupBlock (header-extra)

示例即将加载...

<template>
  <TxGroupBlock
    name="同步"
    description="手动触发同步"
    default-icon="i-ri-loop-left-line"
    :collapsible="false"
  >
    <template #header-extra>
      <button>立即同步</button>
    </template>
    <TxBlockLine title="上次同步" description="刚刚" />
  </TxGroupBlock>
</template>

BlockLine 块行

用于显示标题和描述的简单行项目。

基础用法

<template>
  <TxBlockLine title="版本" description="1.0.0" />
  <TxBlockLine title="构建日期" description="2024.01.15" />
</template>

链接样式

显示为可点击的链接。

<template>
  <TxBlockLine title="查看文档" link @click="openDocs" />
</template>

BlockSlot 块插槽

带有图标、标题、描述和自定义控件插槽的块容器。

基础用法

<template>
  <TxBlockSlot
    title="主题"
    description="选择您偏好的主题"
    default-icon="i-ri-palette-line"
  >
    <select v-model="theme">
      <option value="light">浅色</option>
      <option value="dark">深色</option>
      <option value="auto">自动</option>
    </select>
  </TxBlockSlot>
</template>

激活态与标签

<template>
  <TxBlockSlot
    title="常用设置"
    description="已启用"
    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);">推荐</span>
    </template>
  </TxBlockSlot>
</template>

自定义标签

<template>
  <TxBlockSlot>
    <template #label>
      <h3>自定义标题 <span style="color: red">*</span></h3>
      <p>必填字段</p>
    </template>
    <input type="text" />
  </TxBlockSlot>
</template>

BlockSwitch 块开关

带有集成开关控件的块容器。

基础用法

BlockSwitch

示例即将加载...

<template>
  <TxBlockSwitch
    v-model="autoUpdate"
    title="自动更新"
    description="启用后台更新"
    default-icon="i-ri-refresh-line"
    active-icon="i-ri-refresh-line"
  />
</template>

加载状态

BlockSwitch (loading)

示例即将加载...

<template>
  <TxBlockSwitch
    v-model="loading"
    title="正在同步"
    description="同步过程中暂不可用"
    default-icon="i-ri-loader-4-line"
    active-icon="i-ri-loader-4-line"
    :loading="true"
  />
</template>

禁用状态

<template>
  <TxBlockSwitch
    v-model="value"
    title="高级功能"
    description="需要订阅"
    default-icon="i-ri-lock-line"
    active-icon="i-ri-lock-fill"
    disabled
  />
</template>

引导模式

显示为导航项而非开关。

BlockSwitch (guidance)

示例即将加载...

<template>
  <TxBlockSwitch
    v-model="dummy"
    title="隐私设置"
    description="管理您的隐私选项"
    default-icon="i-ri-shield-keyhole-line"
    guidance
    @click="handleClick"
  />
</template>

API

TxGroupBlock 属性

属性名	类型	默认值	说明
`name`	`string`	必填	分组标题
`description`	`string`	`''`	描述文本
`defaultIcon`	`TxIconSource \| string`	-	默认图标
`activeIcon`	`TxIconSource \| string`	-	展开时图标
`iconSize`	`number`	`22`	图标尺寸
`collapsible`	`boolean`	`true`	是否可折叠
`collapsed`	`boolean`	`false`	外部折叠状态
`defaultExpand`	`boolean`	`true`	初始展开
`memoryName`	`string`	-	展开状态持久化键

TxGroupBlock 事件

事件名	参数	说明
`update:expanded`	`expanded: boolean`	展开状态变化时触发
`toggle`	`expanded: boolean`	点击头部时触发

TxBlockLine 属性

属性名	类型	默认值	说明
`title`	`string`	`''`	标题文本
`description`	`string`	`''`	描述文本
`link`	`boolean`	`false`	显示为链接样式

TxBlockSlot 属性

属性名	类型	默认值	说明
`title`	`string`	`''`	标题文本
`description`	`string`	`''`	描述文本
`defaultIcon`	`TxIconSource \| string`	-	默认图标
`activeIcon`	`TxIconSource \| string`	-	激活图标
`iconSize`	`number`	`20`	图标尺寸
`active`	`boolean`	`false`	激活状态
`disabled`	`boolean`	`false`	禁用交互

TxBlockSwitch 属性

属性名	类型	默认值	说明
`modelValue`	`boolean`	必填	开关值 (v-model)
`title`	`string`	必填	标题文本
`description`	`string`	必填	描述文本
`defaultIcon`	`TxIconSource \| string`	-	默认图标
`activeIcon`	`TxIconSource \| string`	-	激活图标
`disabled`	`boolean`	`false`	禁用开关
`guidance`	`boolean`	`false`	显示为导航项
`loading`	`boolean`	`false`	加载状态

TxBlockSwitch 事件

事件名	参数	说明
`update:modelValue`	`value: boolean`	值变化时触发
`change`	`value: boolean`	值变化时触发
`click`	`event: MouseEvent`	引导模式点击时触发