Layout overview

Contember comes with flexible and declarative layout controls to render content in any layout you want. And control layout from within any rendered page — introducing Slots and Directives.

Slots and Directives are available in Contember Interface version 1.2.

admin/pages/example.tsx

import * as React from 'react'
import { Button } from '@contember/admin'
import { Directive } from '../components/Directives'
import { Actions, Content, Sidebar } from '../components/Slots'

const { Actions, Content } = CommonSlots

export default () => (
    <>
        <Directive name="title" content="Example Page" />

        <Actions>
            <Button>Done</Button>
        </Actions>

        <Content>
            <p>Some content</p>
        </Content>

        <Sidebar>
            <p>Some sidebar content</p>
        </Sidebar>
    </>
)

Slots

Slots are components built upon the React portals and they let you render content in predefined places of the layout.

Learn about Slots

Directives

Directives are components that let you pass even rendered values to the upper context giving you the ability to control your app.

Learn about Directives