277448d9c0
Payload is designed with performance in mind, but its customizability means that there are many ways to configure your app that can impact performance. While Payload provides several features and best practices to help you optimize your app's specific performance needs, these are not currently well surfaced and can be obscure. Now: - A high-level performance doc now exists at `/docs/performance` - There's a new section on performance within the `/docs/queries` doc - There's a new section on performance within the `/docs/hooks` doc - There's a new section on performance within the `/docs/custom-components` doc This PR also: - Restructures and elaborates on the `/docs/queries/pagination` docs - Adds a new `/docs/database/indexing` doc - More --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1210743577153856
101 lines
5.3 KiB
Plaintext
101 lines
5.3 KiB
Plaintext
---
|
|
title: Tabs Field
|
|
label: Tabs
|
|
order: 170
|
|
desc: The Tabs field is a great way to organize complex editing experiences into specific tab-based areas.
|
|
keywords: tabs, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
|
|
---
|
|
|
|
The Tabs Field is presentational-only and only affects the [Admin Panel](../admin/overview) (unless a tab is named). By using it, you can place fields within a nice layout component that separates certain sub-fields by a tabbed interface.
|
|
|
|
<LightDarkImage
|
|
srcLight="https://payloadcms.com/images/docs/fields/tabs.png"
|
|
srcDark="https://payloadcms.com/images/docs/fields/tabs-dark.png"
|
|
alt="Shows a tabs field used to separate Hero and Page layout in the Payload Admin Panel"
|
|
caption="Tabs field type used to separate Hero fields from Page Layout"
|
|
/>
|
|
|
|
To add a Tabs Field, set the `type` to `tabs` in your [Field Config](./overview):
|
|
|
|
```ts
|
|
import type { Field } from 'payload'
|
|
|
|
export const MyTabsField: Field = {
|
|
// ...
|
|
// highlight-start
|
|
type: 'tabs',
|
|
tabs: [
|
|
// ...
|
|
],
|
|
// highlight-end
|
|
}
|
|
```
|
|
|
|
## Config Options
|
|
|
|
| Option | Description |
|
|
| ------------- | ----------------------------------------------------------------------- |
|
|
| **`tabs`** \* | Array of tabs to render within this Tabs field. |
|
|
| **`admin`** | Admin-specific configuration. [More details](./overview#admin-options). |
|
|
| **`custom`** | Extension point for adding custom data (e.g. for plugins) |
|
|
|
|
### Tab-specific Config
|
|
|
|
Each tab must have either a `name` or `label` and the required `fields` array. You can also optionally pass a `description` to render within each individual tab.
|
|
|
|
| Option | Description |
|
|
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| **`name`** | Groups field data into an object when stored and retrieved from the database. [More details](/docs/fields/overview#field-names). |
|
|
| **`label`** | The label to render on the tab itself. Required when name is undefined, defaults to name converted to words. |
|
|
| **`fields`** \* | The fields to render within this tab. |
|
|
| **`description`** | Optionally render a description within this tab to describe the contents of the tab itself. |
|
|
| **`interfaceName`** | Create a top level, reusable [Typescript interface](/docs/typescript/generating-types#custom-field-interfaces) & [GraphQL type](/docs/graphql/graphql-schema#custom-field-schemas). (`name` must be present) |
|
|
| **`virtual`** | Provide `true` to disable field in the database, or provide a string path to [link the field with a relationship](/docs/fields/relationship#linking-virtual-fields-with-relationships). See [Virtual Fields](https://payloadcms.com/blog/learn-how-virtual-fields-can-help-solve-common-cms-challenges) |
|
|
|
|
_\* An asterisk denotes that a property is required._
|
|
|
|
## Example
|
|
|
|
`collections/ExampleCollection.ts`
|
|
|
|
```ts
|
|
import type { CollectionConfig } from 'payload'
|
|
|
|
export const ExampleCollection: CollectionConfig = {
|
|
slug: 'example-collection',
|
|
fields: [
|
|
{
|
|
type: 'tabs', // required
|
|
tabs: [
|
|
// required
|
|
{
|
|
label: 'Tab One Label', // required
|
|
description: 'This will appear within the tab above the fields.',
|
|
fields: [
|
|
// required
|
|
{
|
|
name: 'someTextField',
|
|
type: 'text',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'tabTwo',
|
|
label: 'Tab Two Label', // required
|
|
interfaceName: 'TabTwo', // optional (`name` must be present)
|
|
fields: [
|
|
// required
|
|
{
|
|
name: 'numberField', // accessible via tabTwo.numberField
|
|
type: 'number',
|
|
required: true,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
```
|