Layout Schema#

This page documents the layout schema, including details about each tag, its attributes, and allowed child elements.

The layout definition is used to define the visual composition of the Custom Page section of the NucleI software. It is meant to provide a simplified yet flexible toolset to define custom-tailored interfaces.

button#

Represents a clickable button that triggers a Python function when pressed.

Attributes#

Attribute	Required	Description	Allowed Values
action	Yes	Calls the same-named function in the Python code when pressed.	Any
label	No	Specifies the text label displayed on the button. Can also be provided as inline text content.	Any
solid	No	Determines if the button has a solid background. Optional.	Any
color	No	Sets the button color. Optional. Valid values are 'primary', 'secondary', 'success', 'error', 'info', 'warning'.	primary, secondary, success, error, info, warning

Allowed Children: None

Inline Text: This element supports inline text content as an alternative to the label or value attribute.

Example#

<button action="abc" label="abc" solid="abc" color="primary">Label text</button>

checkbox#

Represents a checkbox input that can be checked or unchecked.

Attributes#

Attribute	Required	Description	Allowed Values
id	Yes	Unique identifier for the checkbox, accessible via UI.get in code.	Any
label	Yes	Label text displayed next to the checkbox.	Any
defaultChecked	No	Specifies if the checkbox is checked by default. Optional.	Any

Allowed Children: None

Example#

<checkbox id="abc" label="abc" defaultChecked="abc" />

input#

Defines an input field where users can enter data, with specific data type constraints.

Attributes#

Attribute	Required	Description	Allowed Values
id	Yes	Unique identifier for the input field, accessible via UI.get in code.	Any
label	Yes	Label text displayed alongside the input field.	Any
dtype	Yes	Specifies the data type of the input. Valid values are 'text', 'int', 'float'.	text, int, float
min	No	Minimum value for numeric inputs. Optional.	Any
max	No	Maximum value for numeric inputs. Optional.	Any
step	No	Step value for numeric inputs. Optional.	Any
default	No	Default value for the input field. Optional.	Any

Allowed Children: None

Example#

<input id="abc" label="abc" dtype="text" min="abc" max="abc" step="abc" default="abc" />

plot#

Defines a plot area for displaying graphical data.

Attributes#

Attribute	Required	Description	Allowed Values
id	Yes	Unique identifier for the plot, accessible via UI.plot in code.	Any
title	Yes	Title displayed above the plot.	Any
xLabel	Yes	Label for the x-axis.	Any
yLabel	Yes	Label for the y-axis.	Any

Allowed Children: None

Example#

<plot id="abc" title="abc" xLabel="abc" yLabel="abc" />

select#

Represents a dropdown selection box, allowing the user to choose from predefined options.

Attributes#

Attribute	Required	Description	Allowed Values
id	Yes	Unique identifier for the select box, accessible via UI.get in code.	Any
label	Yes	Label text displayed above the selection box.	Any

Allowed Children: option

Example#

<select id="abc" label="abc">
  <option ... />
</select>

option#

Defines an individual selectable option within a select box.

Attributes#

Attribute	Required	Description	Allowed Values
value	No	The value assigned to this option, used when selected. Can also be provided as inline text content.	Any
label	No	Display text for this option. Defaults to value if not provided. Can also be provided as inline text content.	Any

Allowed Children: None

Inline Text: This element supports inline text content as an alternative to the label or value attribute.

Example#

<option value="abc" label="abc">Label text</option>

horizontal-layout#

Represents a horizontal layout container that can hold multiple child elements.

Attributes#

Attribute	Required	Description	Allowed Values
stretchX	No	Indicates if the layout should stretch horizontally. Optional.	Any
stretchY	No	Indicates if the layout should stretch vertically. Optional.	Any
gap	No	Spacing between child elements in MUI spacing units. Optional. Defaults to 1.5.	Any
align	No	Vertical alignment of children. Optional. Defaults to 'start'.	start, center, end, stretch

Allowed Children: button, checkbox, input, plot, select, text, horizontal-layout, vertical-layout

Example#

<horizontal-layout stretchX="abc" stretchY="abc" gap="abc" align="start">
  <button ... />
</horizontal-layout>

vertical-layout#

Represents a vertical layout container that can hold multiple child elements.

Attributes#

Attribute	Required	Description	Allowed Values
stretchX	No	Indicates if the layout should stretch horizontally. Optional.	Any
stretchY	No	Indicates if the layout should stretch vertically. Optional.	Any
gap	No	Spacing between child elements in MUI spacing units. Optional. Defaults to 1.5.	Any
align	No	Horizontal alignment of children. Optional. Defaults to 'start'.	start, center, end, stretch

Allowed Children: button, checkbox, input, plot, select, text, horizontal-layout, vertical-layout

Example#

<vertical-layout stretchX="abc" stretchY="abc" gap="abc" align="start">
  <button ... />
</vertical-layout>

text#

Displays static text, typically used for labels and headers.

Attributes#

Attribute	Required	Description	Allowed Values
label	No	Text content to be displayed. Can also be provided as inline text content.	Any
color	No	Color of the text. Optional. Valid values are 'info', 'error', 'success'.	info, error, success
variant	No	Typography variant controlling text size and style. Optional. Defaults to 'body1'.	h1, h2, h3, h4, h5, h6, body1, body2, caption, subtitle1, subtitle2

Allowed Children: None

Inline Text: This element supports inline text content as an alternative to the label or value attribute.

Example#

<text label="abc" color="info" variant="h1">Label text</text>