Tabs

Tabs split a long form into sections. They only change the layout in the dashboard: the fields on a tab are stored on the entry as if they were defined without tabs, so moving a field to another tab doesn't change your content or queries.

import {Config, Field} from 'alinea'

export const Product = Config.document('Product', {
  fields: {
    ...Field.tabs(
      Field.tab('Content', {
        fields: {
          intro: Field.text('Intro', {multiline: true}),
          body: Field.richText('Body')
        }
      }),
      Field.tab('Pricing', {
        fields: {
          price: Field.number('Price', {width: 0.5}),
          currency: Field.select('Currency', {
            width: 0.5,
            initialValue: 'eur',
            options: {eur: 'EUR', usd: 'USD'}
          })
        }
      })
    )
  }
})

Usage

Field.tabs(...tabs) groups tabs. Spread its result into fields, because it adds the fields of every tab to the type.
Field.tab(label, {fields, icon}) defines one tab. icon is an optional React component shown before the label.
Fields before or after the tabs are shown above or below them, on every tab.
Field names must be unique across all tabs of a type: they end up side by side in the same entry.
Tabs work in list rows and blocks too, and a tab can contain another set of tabs.

With Config.document, your fields already sit on a "Document" tab next to "Metadata". Tabs you add there appear inside the Document tab.

Reusing tabs

Because Field.tab returns a type, a common set of fields can be shared as a function that creates a new tab each time (fields must be unique, so don't share one instance):

import {Config, Field} from 'alinea'

function settingsTab() {
  return Field.tab('Settings', {
    fields: {
      hideFromNavigation: Field.check('Hide from navigation'),
      noIndex: Field.check('Hide from search engines')
    }
  })
}

export const Page = Config.document('Page', {
  fields: {
    ...Field.tabs(
      Field.tab('Content', {fields: {body: Field.richText('Body')}}),
      settingsTab()
    )
  }
})