Note

This documentation describes the BoundText Vue component for native UI views for Xml templates see text.

BoundText

A read-only display component that shows a formatted value from a ViewModel property. Combines property resolution with text formatting.

Import

import { BoundText } from '@neos/app'

Props

Inherits all ViewModelPropertyProps (property binding) and TextProps (typography) plus:

Prop	Type	Default	Description
propertyName	string	—	Required. The ViewModel property name to display
item	Model	undefined	Data item owning the property. Falls back to ViewModel's current record
orientation	'horizontal' \| 'vertical'	'horizontal'	Layout of label and value
tooltip	string	undefined	Tooltip text override
maxLines	number	undefined	Clamp text to this number of lines (adds ellipsis)
size	Size	undefined	Text size
weight	'normal' \| 'strong'	undefined	Font weight
color	string	undefined	Text color

Usage Examples

Simple property display

<BoundText property-name="fullName" />

With label above

<BoundText property-name="email" orientation="vertical" />

Clamped to 2 lines

<BoundText property-name="description" :max-lines="2" />

In a card

<Card>
  <template #body>
    <VerticalLayout space="small">
      <BoundText property-name="customerName" weight="strong" />
      <BoundText property-name="email" orientation="vertical" size="small" />
      <BoundText property-name="phone" orientation="vertical" size="small" />
    </VerticalLayout>
  </template>
</Card>