Layout Component

Create flexible layouts with rows, columns, and grids

Layout Component

Overview

The Layout component provides a flexible way to arrange UI elements in rows, columns, or grids. It supports various alignment options, spacing controls, and responsive behaviors.

Usage

To use the Layout component in your tool handler, follow these steps:

  1. Import the LayoutUIBuilder and DainResponse from the @dainprotocol/utils package:
import { LayoutUIBuilder, DainResponse } from "@dainprotocol/utils";
  1. Create a LayoutUIBuilder instance and configure it:
const layoutUI = new LayoutUIBuilder()
  .setLayoutType("row")              // Optional: row | column | grid
  .setGap(16)                        // Optional: spacing between items
  .setJustifyContent("between")      // Optional: alignment on main axis
  .setAlignItems("center")           // Optional: alignment on cross axis
  .build();
  1. Return the LayoutUIBuilder instance in a DainResponse object:
return new DainResponse({
  text: "Generated layout",
  data: { /* Your data */ },
  ui: layoutUI
});

Configuration

Optional Props

  • layoutType (row | column | grid): Layout arrangement type
  • columns (number): Number of columns for grid layout
  • gap (number): Space between items in pixels
  • justifyContent (start | center | end | between | around | evenly): Main axis alignment
  • alignItems (start | center | end | baseline | stretch): Cross axis alignment
  • flexWrap (nowrap | wrap | wrap-reverse): How items wrap in flex layouts
  • margin (string): Outer spacing (e.g., "16px" or "1rem")
  • padding (string): Inner spacing
  • backgroundColor (string): Background color value

Examples

Row Layout

const rowLayout = new LayoutUIBuilder()
  .setLayoutType("row")
  .setGap(16)
  .setJustifyContent("between")
  .setAlignItems("center")
  .setPadding("24px")
  .build();

return new DainResponse({
  text: "Row Layout",
  data: {},
  ui: rowLayout
});

Grid Layout

const gridLayout = new LayoutUIBuilder()
  .setLayoutType("grid")
  .setColumns(3)
  .setGap(24)
  .setMargin("32px")
  .setBackgroundColor("#f5f5f5")
  .build();

return new DainResponse({
  text: "Grid Layout",
  data: {},
  ui: gridLayout
});

Column Layout with Wrapping

const columnLayout = new LayoutUIBuilder()
  .setLayoutType("column")
  .setGap(8)
  .setAlignItems("start")
  .setFlexWrap("wrap")
  .setPadding("16px 24px")
  .build();

return new DainResponse({
  text: "Column Layout",
  data: {},
  ui: columnLayout
});

Complex Layout

const complexLayout = new LayoutUIBuilder()
  .setLayoutType("grid")
  .setColumns(2)
  .setGap(16)
  .setJustifyContent("center")
  .setAlignItems("stretch")
  .setMargin("24px")
  .setPadding("16px")
  .setBackgroundColor("#ffffff")
  .build();

return new DainResponse({
  text: "Complex Layout",
  data: {},
  ui: complexLayout
});