Instruqt Labs (beta)
  • Instruqt
  • Getting started
    • Setting up Version Control
    • Install Instruqt CLI
    • Creating your first lab
    • Configuration basics
    • Exploring the lab configuration
    • Adding your first chapter
    • Configuring sandboxes
    • Adding quizzes
    • Adding tasks and gating content
    • Finishing up
  • Documentation
    • Writing Lab Content
      • Project Structure
      • Markdown and Components
    • Integrations
      • Version Control
    • Lab reference
      • Content
        • Lab
        • Page
        • Activities
          • Task
          • Quiz
            • Multiple Choice
            • Single Choice
            • Text Answer
            • Numeric Answer
        • Layout
        • Tabs
          • Terminal
          • Service
          • Editor
          • External Website
          • Note
      • Sandbox
        • Containers
          • Container
          • Sidecar Container
        • Kubernetes
          • Cluster
          • Config
          • Helm
        • Nomad
          • Cluster
          • Job
        • Networking
          • Network
          • Ingress
        • Cloud Accounts
          • AWS
          • Azure
          • Google Cloud
        • Terraform
        • Template
        • Exec
        • Copy
        • Certificates
          • Root
          • Leaf
        • Random
          • Number
          • ID
          • UUID
          • Password
          • Creature
      • Functions
    • Tools
      • Instruqt CLI
    • Glossary
Powered by GitBook
On this page
  • Layout
  • Column
  • Row
  • Examples
Edit on GitHub
Export as PDF
  1. Documentation
  2. Lab reference
  3. Content

Layout

Layout

The layout resource defines the layout of the lab UI through rows and columns. These "panels" are referenced by id from the available tabs in a lab. This allows us to make layouts reusable.


resource "layout" "name" {
  ...
}

Attributes

Attribute
Description

The vertical columns the layout is divided into.

Computed Attributes

These attributes are computed when the config is parsed and applied, and are therefore only known at parsetime or runtime.

Attribute
Description

Meta ID meta.id string

The full ID of the resource e.g. `resource.type.name`. This is computed from the full resource path:

Meta Type meta.type string

The type of the resource. This taken from the type label of the resource definition.

Meta Name meta.name string

The name of the resource. This taken from the name label of the resource definition.


Column

A column is vertical panel within the layout.


resource "layout" "name" {
  column "name" {
    ...
  }
}

Attributes

Attribute
Description

ID id required type: string

The ID of the panel that will be referenced by the tabs.

Width width type: string

The width of a column can be specified in percentages.

The horizontal rows the column is divided into.

Computed Attributes

These attributes are computed when the config is parsed and applied, and are therefore only known at parsetime or runtime.


Row

A row is horizontal panel within the layout.


resource "layout" "name" {
  column "name" {
    row "name" {
      ...
    }
  }
}

Attributes

Attribute
Description

ID id required type: string

The ID of the panel that will be referenced by the tabs.

Height height type: string

The height of a row can be specified in percentages.

The vertical columns the row is divided into.

Computed Attributes

These attributes are computed when the config is parsed and applied, and are therefore only known at parsetime or runtime.

Examples

Minimal

resource "layout" "minimal" {
  column "terminal" {}

  column "instructions" {}
}
PreviousNumeric AnswerNextTabs

Last updated 1 month ago

Columns column type: []block

Rows row type: []block

Columns column type: []block

column "left_panel" {
  ...
}
// given the following resource
resource "container" "ubuntu" {
  ...
}

// the resulting id will be
resource.container.ubuntu
// given the following resource
resource "container" "ubuntu" {
  ...
}

// the resulting type will be
container
// given the following resource
resource "container" "ubuntu" {
  ...
}

// the resulting name will be
ubuntu
column "id" {
  ...
}
width = "50%"
row "top_left_panel" {
  ...
}
row "id" {
  ...
}
height = "50%"
column "top_left_left_panel" {
  ...
}
Column
Row
Column