Layout

The Layout component is a structural element designed to act as a page container in your application. The Layout component is meant to be used as a general top-level wrapper of your page.

Installation

Every component ships with the boilerplate. If you are working in your own project, add Layout with the Gameface CLI:

npx gameface-cli add Layout

The CLI pulls in whatever Layout depends on. To refresh an existing copy, update it instead.

Usage

The default use case for the Layout component is as a container for major sections of your app, such as the main content area or an overall page layout wrapper.

index.tsx

import Layout from '@components/Layout/Layout/Layout';
import Top from '@components/Layout/Top/Top';
import Content from '@components/Layout/Content/Content';
import Bottom from '@components/Layout/Bottom/Bottom';

<Layout style={{ height: '100vh' }}>
    <Top>Top Section</Top>
    <Content>Main Content</Content>
    <Bottom>Bottom Section</Bottom>
</Layout>

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component
ref	HTMLDivElement	undefined	Retrieves the component’s DOM element and assigns it to a variable.
onAction	Record<string, (scope?: string, ...args: any[]) => void>	undefined	Allows you to add custom navigation action handlers to the component. See the Navigation component documentation for details.
anchor	string | HTMLElement	undefined	Links navigation to another element. When the anchor element is focused, this component’s actions will execute. Can be a CSS selector or HTMLElement.

Slots 3.0.0

Top, Content, Bottom

The Top, Content, and Bottom slots structure the internal layout of the Layout component. They clearly define which content belongs in the top, main, and bottom sections of your page or container.

Note on Slot Usage

These slots provide a convenient, dot-notation syntax for the Top, Content, and Bottom components as children of Layout. You can still import and use those components separately if you prefer.

Usage

import Layout from '@components/Layout/Layout/Layout';
import Top from '@components/Layout/Top/Top';
import Content from '@components/Layout/Content/Content';
import Bottom from '@components/Layout/Bottom/Bottom';

const App = () => {
    return (
        <Layout style={{ height: '100vh' }}>
            <Layout.Top>Top Section</Layout.Top>
            <Layout.Content>Main Content</Layout.Content>
            <Layout.Bottom>Bottom Section</Layout.Bottom>
        </Layout>
    );
};

export default App;

Guide

Accessing the HTML element

To access the HTML DOM element of the Layout component.

1. Declare a variable to hold the ref but don’t initialize it with a value
2. The declared value should have a type of HTMLDivElement.
3. Set the declared variable as the value of the ref prop of the Layout component

Example

import Layout from '@components/Layout/Layout/Layout';
import Top from '@components/Layout/Top/Top';
import Content from '@components/Layout/Content/Content';
import Bottom from '@components/Layout/Bottom/Bottom';

const App = () => {
    let layoutRef!: HTMLDivElement

    return (
        <Layout ref={layoutRef}>
            <Top>Top Section</Top>
            <Content>Main Content</Content>
            <Bottom>Bottom Section</Bottom>
        </Layout>
    );
};

Now you can access the HTML element of Layout with layoutRef and make modifications to it if needed.