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, percentage } from '@takumi-rs/helpers';
const logo = image({
src: '/logo.png',
width: 64,
height: 64,
style: {
borderRadius: percentage(50),
// 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({
style: {
width: 400,
height: 200,
backgroundColor: 0xf0f0f0,
padding: 16,
alignItems: "center",
justifyContent: "center",
},
children: [
text("Hello, Takumi!"),
],
});Example: Styling Text
import { text } from "@takumi-rs/helpers";
const heading = text("Hello, Takumi!", {
fontSize: 32,
color: 0x333333,
fontWeight: 700,
textAlign: "center",
});Using Helper Functions
The helpers package provides functions for common value types:
percentage(50)— 50% of parentrem(2)— x2 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({
style: {
width: percentage(100),
height: rem(10),
backgroundColor: rgba(0, 128, 255, 0.1),
},
children: [
text("50% width, 10rem height", { color: 0x222222 })
],
});