Skip to content

Tabs

When your blueprints get more complex, tabs help to keep them organized.

Defining tabs

A tab definition has three options:

  • label
  • columns
  • icon

The icon is optional. Please check out the list of available icons. You can also use an emoji by pasting it directly into the blueprint.

title: My blueprint

tabs:
  content:
    label: Content
    icon: text
    columns:
      # layout
  seo:
    label: SEO
    icon: search
    columns:
      # layout

Full example

title: My blueprint

tabs:

  # content tab
  content:
    label: Content
    icon: text
    columns:

      # main
      left:
        width: 2/3
        sections:

          # a simple form
          content:
            type: fields
            fields:
              headline:
                label: Headline
                type: text
              text:
                label: Text
                type: textarea

      # sidebar
      right:
        width: 1/3
        sections:

          # a list of subpages
          pages:
            type: pages
            headline: Subpages

          # a list of files
          files:
            type: files
            headline: Files

  # seo tab
  seo:
    label: SEO
    icon: search
    fields:
      seoTitle:
        label: SEO Title
        type: text
      seoDescription:
        label: SEO Description
        type: text

Presets in tabs

Instead of writing out full layouts within each tab, you can make use of blueprint presets. This will drastically reduce the amount of code you have to write and maintain.

Please read our article on presets first if you are not familiar with them yet.

title: My blueprint

tabs:

  # content tab
  content:
    label: Content
    icon: text
    preset: page
    fields:
      headline:
        label: Headline
        type: text
      text:
        label: Text
        type: textarea

  # seo tab
  seo:
    label: SEO
    icon: search
    fields:
      seoTitle:
        label: SEO Title
        type: text
      seoDescription:
        label: SEO Description
        type: text