Building Layouts
Learn how to construct and style nodes to create complex layouts.
Nodes are the foundation of building layouts with Takumi. The @takumi-rs/helpers package provides convenient functions for constructing and styling different types of nodes: containers, text, and images.
Prerequisites
Make sure you have installed the @takumi-rs/helpers package:
npm install @takumi-rs/helpersConstructing Nodes
Container Nodes
A container node is used to group other nodes and arrange them in a layout. Use the container function:
import { container } from "@takumi-rs/helpers";
const root = container({
// extra styling goes here
children: [
// child nodes go here
],
});Text Nodes
A text node displays text. Use the text function:
import { text } from '@takumi-rs/helpers';
const helloText = text('Hello, Takumi!', {
// extra styling goes here
});Image Nodes
An image node displays an image from a URL or local path. Use the image function:
import { image } from '@takumi-rs/helpers';
const logo = image('/logo.png', {
// extra styling goes here
});Styling Nodes
You can pass a style object as the second argument to text and image, or as properties to container. Style properties are inspired by CSS, but use camelCase or snake_case.
Example: Styling a Container
import { container } from "@takumi-rs/helpers";
const root = container({
width: 400,
height: 200,
background_color: 0xf0f0f0,
padding: 16,
align_items: "center",
justify_content: "center",
});Example: Styling Text
import { text } from "@takumi-rs/helpers";
const heading = text("Hello, Takumi!", {
font_size: 32,
color: 0x333333,
font_weight: 700,
text_align: "center",
});Example: Styling an Image
import { image } from "@takumi-rs/helpers";
const logo = image("/logo.png", {
width: 64,
height: 64,
border_radius: 8,
});Using Helper Functions
The helpers package provides functions for common value types:
percentage(50)— 50% of parentrem(2)— 2× root font sizergb(255, 0, 0)— Redrgba(0, 0, 0, 0.5)— Semi-transparent black
import { container, text, percentage, rem, rgba } from "@takumi-rs/helpers";
const layout = container({
width: percentage(100),
height: rem(10),
background_color: rgba(0, 128, 255, 0.1),
children: [
text("50% width, 10rem height", { color: 0x222222 })
],
});