Column

The Column components are structural elements designed to create grid layouts when used in conjunction with the Row component. Each Column component represents a fraction of the row’s width, ranging from Column.One (1/12th of the row’s width) to Column.Twelve (the entire row’s width).

These components leverage a flexbox-based grid system, making it easy to create responsive layouts.

Installation

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

npx gameface-cli add Column

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

Usage

The primary use case for the Column components is to define the width of content within a Row component. If you don’t specify a size, <Column> equals <Column.Twelve>.

index.tsx

import Row from '@components/Layout/Row/Row';
import Column from "@components/Layout/Column/Column";

<>
    <Row>
        <Column.Two style={{'background-color': '#505f49'}}>I take 2/12 of the row</Column.Two>
        <Column.Ten>I take 10/12 of the row (the rest of the row)</Column.Ten>
    </Row>
    <Row>
        <Column.Twelve >I take the full row</Column.Twelve>
    </Row>
    <Row>
        <Column>I also take the full row</Column>
    </Row>
</>

You can also nest rows and columns to create more complex layouts.

import Row from '@components/Layout/Row/Row';
import Column from "@components/Layout/Column/Column";

const App = () => {
    return (
        <Row>
            <Column.Six>
                <Row>
                    <Column>Nested column</Column>
                </Row>
            </Column.Six>
        </Row>
    );
};

export default App;

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.

Guide

Creating a Grid Layout

The Column components define the width of their content within a Row. The predefined components (Column.One to Column.Twelve) correspond to fractions of the row’s total width. For example:

• Column.One: 1/12th of the row’s width (8.33333%).
• Column.Six: Half of the row’s width (50%).
• Column.Twelve or just Column: Full row width (100%).

Example

import Row from '@components/Layout/Row/Row';
import Column from "@components/Layout/Column/Column";

const App = () => {
    return (
        <Row>
            <Column.One>I take 8.33333% of the row</Column.One>
            <Column.One>I take 8.33333% of the row</Column.One>
            <Column.One>I take 8.33333% of the row</Column.One>
            <Column.One>I take 8.33333% of the row</Column.One>
            <Column.One>I take 8.33333% of the row</Column.One>
            <Column.One>I take 8.33333% of the row</Column.One>
            <Column.Six>I take 50% of the row</Column.Six>
        </Row>
        <Row>
            <Column.Twelve>I take 100% of the row</Column.Twelve>
        </Row>
    );
};

export default App;

Accessing the HTML element

To access the HTML DOM element of the Column 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 Column component.

Example

import Row from '@components/Layout/Row/Row';
import Column from "@components/Layout/Column/Column";

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

    return (
        <Row>
            <Column.Two ref={columnRef}>I take 2/12 of the row</Column.Two>
        </Row>
    );
};

export default App;

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