跳转到内容
Docs Prototypes Whitepaper

Tabs

标签页组件

这是 wc 的 tabs 组件

<wc-shadcn-tabs-root default-value="account">
  <wc-shadcn-tabs-list>
    <wc-shadcn-tabs-trigger value="account">Account</wc-shadcn-tabs-trigger>
    <wc-shadcn-tabs-trigger value="password">Password</wc-shadcn-tabs-trigger>
    <wc-shadcn-tabs-trigger value="billing" disabled>Billing</wc-shadcn-tabs-trigger>
  </wc-shadcn-tabs-list>
  <wc-shadcn-tabs-content value="account">Make changes to your account here.</wc-shadcn-tabs-content>
  <wc-shadcn-tabs-content value="password">Change your password here.</wc-shadcn-tabs-content>
  <wc-shadcn-tabs-content value="billing">Billing tab is disabled in this preview.</wc-shadcn-tabs-content>
</wc-shadcn-tabs-root>

这是 react 的 tabs 组件

import {
  ShadcnTabsContent,
  ShadcnTabsList,
  ShadcnTabsRoot,
  ShadcnTabsTrigger,
} from '@prototype-libs/shadcn';

export function DemoShadcnTabsDemo() {
  return (
    <ShadcnTabsRoot defaultValue="account">
      <ShadcnTabsList>
        <ShadcnTabsTrigger value="account">Account</ShadcnTabsTrigger>
        <ShadcnTabsTrigger value="password">Password</ShadcnTabsTrigger>
        <ShadcnTabsTrigger value="billing" disabled>
          Billing
        </ShadcnTabsTrigger>
      </ShadcnTabsList>
      <ShadcnTabsContent value="account">Make changes to your account here.</ShadcnTabsContent>
      <ShadcnTabsContent value="password">Change your password here.</ShadcnTabsContent>
      <ShadcnTabsContent value="billing">
        Billing tab is disabled in this preview.
      </ShadcnTabsContent>
    </ShadcnTabsRoot>
  );
}

这是 vue 的 tabs 组件

<script setup lang="ts">
import {
  ShadcnTabsContent,
  ShadcnTabsList,
  ShadcnTabsRoot,
  ShadcnTabsTrigger,
} from '@prototype-libs/shadcn';
</script>

<template>
  <ShadcnTabsRoot defaultValue="account">
    <ShadcnTabsList>
      <ShadcnTabsTrigger value="account">Account</ShadcnTabsTrigger>
      <ShadcnTabsTrigger value="password">Password</ShadcnTabsTrigger>
      <ShadcnTabsTrigger value="billing" disabled>Billing</ShadcnTabsTrigger>
    </ShadcnTabsList>
    <ShadcnTabsContent value="account">Make changes to your account here.</ShadcnTabsContent>
    <ShadcnTabsContent value="password">Change your password here.</ShadcnTabsContent>
    <ShadcnTabsContent value="billing">Billing tab is disabled in this preview.</ShadcnTabsContent>
  </ShadcnTabsRoot>
</template>

Content mount 策略

Section titled “Content mount 策略”

TabsContent 默认采用 lazy L1 view：

  • 只有当前 panel 会物化 host view。
  • panel 失活时会 detach view，但保留 Proto instance、状态与 exposes。
  • keepMounted={true} 是唯一的 view retention 选项，会让 inactive panel 继续保留完整 view。

Web Component 会保留 custom element 作为 owner，并在 internal view detached 时隐藏该 owner；重新激活后，同一个 Proto instance 会在该 owner 内物化新的 view。