Skip to main content

Nodes

All nodes extend Node, so they share children, IDs, visibility, request callbacks, response callbacks, class names and custom properties.

Use this page as a practical map of the built-in nodes. If you are building a page from scratch, start with PageNode, organize it with FlexNode and CardNode, then add forms, tables, actions and smaller display nodes where they belong.

Nodes exist because many Qore screens are easier to define next to the backend model, permissions and validation. PHP returns the structure; React renders the registered component for each node.

Layout​

PageNode​

A PageNode is the root of a full backend-rendered screen. Resource pages and custom pages usually return one.

Use it when the response represents a browser page rather than a small embedded widget.

  • __construct(string $title)
  • addDefaultPadding(): static
  • setTitle(string $title): static

FlexNode​

Use FlexNode for most layout composition. It maps to a frontend flex container and keeps spacing, alignment and wrapping close to the nodes it arranges.

  • setFlex(?string $flex): static
  • setIsVertical(bool $isVertical = true): static
  • setGap(SizeType|int|null $gap): static
  • setAlign(?FlexAlignType $align): static
  • setJustify(?FlexJustifyType $justify): static
  • setWrap(bool|string $wrap): static

DivNode​

Use DivNode as a plain wrapper when no semantic node fits. It is best for small class-name wrappers, not for building an entire layout when FlexNode would express the intent more clearly.

CardNode​

Use CardNode to group a form, detail block, table or workflow section. Cards are useful when the content should feel framed and titled.

  • __construct(string $title = '')
  • setTitle(string $title): static
  • setSize(SizeType $size): static
  • setExtra(Node $node): static

Text and Display​

TextNode​

Use TextNode for simple text. It is intentionally small; use TitleNode, AlertNode or ResultNode when the text has a stronger UI role.

  • __construct(string $title)
  • setTitle(string $title): static

TitleNode and PageTitleNode​

Use TitleNode for headings inside a page. PageTitleNode is a convenience node for page-level headings and defaults to level 3.

  • TitleNode::__construct(string $title, int $level = 5)
  • setTitle(string $title): static
  • setLevel(int $level): static

IconNode​

Use IconNode when a backend definition needs to render a registered Lucide icon. Make sure the icon is available in the frontend icon registry.

  • __construct(string $name, int $size = 18)

ImageNode​

Use ImageNode for images whose URL or dimensions are known from the backend.

  • __construct(string $src, string $alt = '', ?int $width = null, ?int $height = null)
  • setTitle(string $title): static
  • setWidth(?int $width): static
  • setHeight(?int $height): static
  • setSrc(string $src): static
  • setAlt(string $alt): static

AvatarNode​

Use AvatarNode for users, owners or other entities where a compact identity marker is clearer than text alone. The constructor accepts image/source, title, size and shape options.

CopyTextNode​

Use CopyTextNode for secrets, generated tokens and other values the user should copy exactly. It is often updated from a form success callback.

  • __construct(?string $text = null, ?string $label = null)
  • setText(?string $text): static
  • setLabel(?string $label): static

DividerNode​

Use DividerNode to separate groups inside cards, menus or compact layouts.

  • __construct(?SizeType $size = null)
  • setTitle(?string $title): static
  • setSize(?SizeType $size): static
  • setIsVertical(bool $isVertical = true): static

Use breadcrumbs on create, edit and detail pages where the user needs a clear path back to an index or parent model.

  • __construct(array $items)

Items are Breadcrumb objects.

Feedback​

AlertNode​

Use AlertNode for contextual warnings, success notes or important state above the content it affects.

  • __construct(string $title, ?AlertType $type = null)
  • setType(AlertType $type): static
  • setTitle(string $title): static
  • setDescription(string $description): static

ResultNode​

Use ResultNode for empty states and final states, such as a completed import or unavailable workflow.

  • __construct(?string $title = null, ?string $subtitle = null, ?ResultStatus $status = null)
  • setTitle(string $title): static

ProgressNode​

Use ProgressNode for percentages, stepped progress or status indicators.

  • __construct(float|int $percent = 0)
  • setPercent(float|int $percent): static
  • setStrokeColor(?ColorType $color): static
  • setSteps(int $steps): static
  • setType(ProgressType $type): static
  • setStatus(ProgressStatus $status): static
  • setRailColor(ColorType $color): static
  • setSize(SizeType $size): static

TagNode​

Use TagNode for short status labels, categories and compact metadata.

  • __construct(?string $title = null, ?ColorType $color = null)
  • setTitle(?string $title): static
  • setColor(ColorType $color): static
  • setIcon(string $icon): static
  • setVariant(TagVariant $variant): static

TooltipNode​

Use TooltipNode to label icon-only controls or explain compact UI. Add the interactive node as its child.

  • __construct(string $title)
  • setTitle(string $title): static

Actions​

ButtonNode​

Use ButtonNode for backend-handled clicks, overlay triggers and normal actions. A button can run an onClick() callback during the node request lifecycle.

  • __construct(?string $title = null, ?string $id = null)
  • onClick(Closure(ClickEvent): void $listener): static

Button properties:

  • setType(ButtonType $type): static
  • setVariant(ButtonVariant $variant): static
  • setTitle(?string $title): static
  • setIcon(string $icon): static
  • setIconSize(int $size): static
  • setShape(ButtonShapeType $shape): static
  • setIsDanger(bool $isDanger): static
  • setIconPlacement(ButtonIconPlacement $placement): static
  • setHasConfirm(bool $hasConfirm): static
  • setConfirmMessage(?string $confirmMessage): static
  • setColor(ColorType $color): static
  • setSize(?SizeType $size): static
  • setIsDisabled(bool $isDisabled): static
  • setPayload(array $payload): static
  • setOverlayToOpen(?string $id): static
  • setOverlayToClose(?string $id): static

SubmitButtonNode​

Use SubmitButtonNode inside FormNode footer layouts. Its submit value lets forms distinguish normal submit from alternate submit buttons.

  • __construct(?string $title, bool $isDanger = false, string $submitValue = SubmitButtonNode::SUBMIT_VALUE)

Use dropdowns when several actions compete for the same small space, especially resource detail actions and table bulk actions.

  • DropdownNode::__construct(?string $title, array $items)
  • DropdownNode::setSize(SizeType $size): static
  • DropdownItemNode::onClick(Closure(ClickEvent): void $listener): static

LinkNode​

Use LinkNode for navigation that should stay a normal frontend route change. Put a ButtonNode inside it when the link should look like a button.

  • __construct(string $to, ?string $title = null)
  • setTitle(string $title): static

Forms​

FormNode​

Use FormNode when fields, validation and mutation are backend-owned. Resource create/edit forms are FormNodes, but custom pages can use them too.

FormNode does more than render inputs: it stores field values in node state, validates requests, runs field update callbacks and exposes success/error state through the Form object. See NodeManager and Forms.

  • __construct(string $endpoint, array $fields, RequestMethod $requestMethod = RequestMethod::POST, ?Model $model = null, ?QoreResource $resource = null, ?Closure(): array $defaultFieldValuesCallback = null, ?Node $fieldLayout = null, ?Node $footerLayout = null, bool $isInModal = false)
  • setEndpoint(string $endpoint): FormNode
  • setFormRequestData(array $data): static
  • setSuccessMessage(?string $message): static
  • setErrorMessage(?string $message): static
  • getSubmitButton(): SubmitButtonNode
  • setAutofocus(bool|string $autofocus): static
  • setNavigateUrlOnFormSuccess(?string $url): static
  • onSuccess(Closure(Form): void $callback): static
  • onError(Closure(Form): void $callback): static
  • onFormReady(Closure(Form): void $callback): static
  • setResource(QoreResource $resource): static
  • setParentModel(?Model $parentModel): static
  • setParentResource(?QoreResource $parentResource): static
  • setParentFieldValues(array $fieldValues): static

AreYouSureFormNode​

Use AreYouSureFormNode for destructive confirmation flows. It is a specialized FormNode, commonly rendered in modals for delete actions.

Data​

EloquentTableNode​

Use EloquentTableNode for database-backed tables. It owns table state such as filters, sorting, selected rows, settings and export endpoints.

Use ResourceTable for normal resource indexes. Use EloquentTableNode directly for settings pages or custom workflows.

  • __construct(string $id, Field[] $fields, Builder $query, TableBulkAction[] $bulkActions = [], TableTab[] $tabs = [], ?string $addButtonFormEndpoint = null, ?string $addButtonReloadNodeByIdOnFormSuccess = null)
  • setNavigateUrl(Closure(Model): ?string $closure): static
  • setModalUrl(Closure(Model): ?string $closure): static
  • setSize(SizeType $sizeType): static
  • setHasSettings(bool $hasSettings): static
  • setInitialSort(string $field, TableSortOrder $order): static
  • setAddButtonFormEndpoint(?string $endpoint): static
  • setAddButtonReloadNodeByIdOnFormSuccess(string $endpoint): static
  • setAddFormModalWidth(int $width): static
  • setDefaultColumnScrollWidth(int $width): static
  • setRowSelectionColumnWidth(int $width): static
  • setExportEndpoint(?string $endpoint): static

StaticTableNode​

Use StaticTableNode for detail layouts and small read-only tables where the rows are already known.

  • __construct(array $columns, array $rows, string $className = 'w-full')
  • setIsBordered(bool $isBordered): static

DataTreeNode​

Use DataTreeNode for hierarchical display data such as nested permissions or categories.

  • __construct(array $items, array $defaultExpandedKeys = [], ?string $defaultSelectedKey = null)

Containers and Navigation​

ModalNode​

Use ModalNode for workflows that should stay on the current page: confirmations, resource actions, relation attach forms and generated value displays.

  • __construct(string $id, ?string $title = null, int $width = 600)
  • setTitle(string $title): static
  • setWidth(int $width): static
  • setShouldUnmountWhenHidden(bool $shouldUnmountWhenHidden = true): static

SubNode​

Use SubNode when a section should load or reload independently from the parent page. Relation tables, modal forms and expensive widgets are common examples. See SubNode.

TabsNode​

Use TabsNode for grouped content where all items are peer sections, such as relation tables on a detail page.

  • __construct(array $items)
  • setSize(SizeType $size): static

Items are TabItem objects.

SegmentNode​

Use SegmentNode when switching between compact views inside the same section should feel lighter than full tabs.

  • __construct(array $items)
  • setSize(SizeType $size): static
  • setContentClassName(string $className): static

Items are SegmentItem objects.

Custom​

CustomNode​

Use CustomNode when you already have a registered frontend component and only need to pass component props from PHP.

  • __construct(string $component, array $properties = [])

Use this for simple backend-to-frontend component props. Extend Node for reusable backend behaviour.