标签页字段

标签页字段仅用于展示目的，且仅影响 Admin Panel（除非为标签页命名）。通过使用它，你可以将字段放置在美观的布局组件中，通过标签页界面分隔特定的子字段。

展示在 Payload 管理面板中使用 tabs 字段分隔 Hero 和页面布局的效果
使用 tabs 字段类型将 Hero 字段与页面布局分隔开

要添加 Tabs Field，请在 Field Config 中将 type 设置为 tabs：

import type { Field } from 'payload'

export const MyTabsField: Field = {
  // ...
  // highlight-start
  type: 'tabs',
  tabs: [
    // ...
  ],
  // highlight-end
}

配置选项

选项描述
tabs *要在此 Tabs 字段中渲染的标签页数组。
admin管理员特定配置。更多详情。
custom用于添加自定义数据的扩展点（例如用于插件）

标签页专属配置

每个标签页必须包含 name 或 label 属性以及必需的 fields 数组。你也可以选择性地添加 description 属性，用于在每个标签页内显示描述内容。

选项描述
name将字段数据分组存储为对象形式存入数据库。了解更多
label显示在标签页上的文本标签。当未定义 name 时必填，默认会将 name 转换为可读格式。
fields *该标签页内需要渲染的字段数组。
description可选属性，用于在该标签页内显示描述内容，说明该标签页包含的内容。
interfaceName创建顶层的可复用 Typescript 接口 和 GraphQL 类型。（必须同时存在 name 属性）
virtual设置为 true 可禁用该字段在数据库中的存储，或提供一个字符串路径来将虚拟字段与关系字段关联。详见虚拟字段

* 星号标记表示该属性为必填项。

示例

collections/ExampleCollection.ts

import type { CollectionConfig } from 'payload'

export const ExampleCollection: CollectionConfig = {
  slug: 'example-collection',
  fields: [
    {
      type: 'tabs', // 必填
      tabs: [
        // 必填
        {
          label: '标签页一标题', // 必填
          description: '这段文字会显示在标签页内字段上方。',
          fields: [
            // 必填
            {
              name: 'someTextField',
              type: 'text',
              required: true,
            },
          ],
        },
        {
          name: 'tabTwo',
          label: '标签页二标题', // 必填
          interfaceName: 'TabTwo', // 可选（必须提供 `name`）
          fields: [
            // 必填
            {
              name: 'numberField', // 可通过 tabTwo.numberField 访问
              type: 'number',
              required: true,
            },
          ],
        },
      ],
    },
  ],
}