Skip to main content

Layout Component

Purpose​

Layout Component is a component that display child components in a specific layout.

Example​

component: layout
props:
  orientation: "horizontal" # vertical, horizontal, flex
  cols: 2
  className: "block"
  childClassName: "child"
children:
  - component: text
    props:
      value: "Hello World"
  - component: text
    props:
      value: "Hello World"

Props​

  • orientation (string): The orientation of the layout. It accepts vertical, horizontal, flex. Default is horizontal.
  • cols (number): The number of columns in the layout. Optional.
  • className (string): The class name of the layout.
  • childClassName (string): The class name of the children.

Usage in Dashboard Widgets​

The Layout Component can be effectively used within Dashboard Widget components to organize content. This is particularly useful when you need to display multiple related components within a single dashboard widget.

Example: Layout in Dashboard Widget​

component: dashboard
name: analyticsDashboard
props:
  options:
    rows: 12
    columns: 12
children:
  - component: dashboard-widget
    name: metricsPanel
    props:
      options:
        row: 1
        col: 1
        rowSpan: 6
        colSpan: 12
        title: Performance Metrics
    children:
      - component: layout
        props:
          orientation: horizontal
          cols: 3
          className: metrics-layout
        children:
          - component: summary
            props:
              title: Revenue
              value: "$125,000"
          - component: summary
            props:
              title: Orders
              value: "342"
          - component: summary
            props:
              title: Customers
              value: "1,245"

In this example, the layout component organizes three summary components horizontally within a dashboard widget, creating a clean metrics display.