Interface 1.2+ Layout overview

note

LayoutKit, Slots and Directives are available in Contember Interface version 1.2 and are meant to be used together with Scopes.

Contember comes with built-in components to help you build layouts of your projects easily:

• Layout Kit — components to build your application layout:
  • Frame — your application frame
  • Bars — application bars e.g. headers, footers for tabs, actions of title
  • Content panels — panels to render main content of the page
  • Sidebar panels and toggle buttons — collapsible panels with, e.g. navigation
• Slots — components to render content in predefined places of the layout
• Directives — components to control your app from within any rendered page

admin/pages/example.tsx

import { EditScope, FieldView, PersistButton } from '@contember/admin'
import { Directive } from '../components/Directives'
import { EditOrCreateForm } from '../components/EditOrCreateForm'
import { SlotSources, Title } from '../components/Slots'

export default () => (
  <>
    <Directive name="full-width" content={true} />

    <EditScope entity="Article(id = $id)">
      <FieldView field="title" render={title => (
        <Title>{`Edit ${title.value ? title.value : 'Article'}`}</Title>
      )} />

      <EditOrCreateForm />

      <SlotSources.Actions>
        <PersistButton />
      </SlotSources.Actions>
    </EditScope>
  </>
)