Components

DataDetails

Component to display detailed read-only data.

Component

First Name

John

Last Name

Doe

john.doe@example.com

Phone

Not defined

Type

Mobile

Address Information

Address

123 Main St, Springfield

Country

USA

City

Springfield

ZIP Code

12345

Architecture

The DataDetails component provides a clean and consistent layout structure for building data details blocks.

It works with the DataDetailsRow, DataDetailsFieldGroup, and DataField components to help organize fields and actions intuitively.

 <template>
    <DataDetails>
        <DataDetailsRow>
            <DataField 
                id="first-name"
                label="First Name"
                text="John"
            />
            <DataField 
                id="last-name"
                label="Last Name"
                text="Doe"
            />
        </DataDetailsRow>

        <Divider hide-on-mobile />

        <DataDetailsRow>
            <DataField 
                id="email"
                label="Email"
                text="john.doe@example.com"
            />
        </DataDetailsRow>

        <Divider hide-on-mobile />

        <DataDetailsRow>
            <DataField
                id="phone"
                label="Phone"
            />
            <DataField 
                id="type"
                label="Type"
            >
                <Badge 
                    :color="ColorAccent.INFO" 
                    text="Mobile"
                />
            </DataField>
        </DataDetailsRow>

        <DataDetailsFieldGroup 
            title="Address Information"
        >
            <DataDetailsRow>
                <DataField 
                    id="address"
                    label="Address"
                    text="123 Main St, Springfield"
                />
                <DataField 
                    id="country"
                    label="Country"
                    text="USA"
                />
            </DataDetailsRow>

            <DataDetailsRow>
                <DataField 
                    id="city"
                    label="City"
                    text="Springfield"
                />
                <DataField 
                    id="zip"
                    label="ZIP Code"
                    text="12345"
                />
            </DataDetailsRow>
        </DataDetailsFieldGroup>
        <DataDetailsActions class="justify-end">
            <ActionButton 
                text="Edit"
                :iconPosition="IconPosition.LEFT"
                icon="mdi:pencil-outline"
                :styleType="ButtonStyleType.PRIMARY_BRAND_FILLED"
            />
            <ActionButton 
                text="Delete"
                :styleType="ButtonStyleType.DELETE_SOFT"
            />
        </DataDetailsActions>
    </DataDetails>
</template>

Components

This set of components are used to create the layout of a form.

Name	Description
`<DataDetailsRow>`	Wraps data fields in a row, ensuring proper spacing and alignment.
`<DataDetailsFieldGroup>`	Groups related data details fields under a common title.
`<DataField>`	Displays a label and corresponding read-only data value.
`<DataDetailsActions>`	Groups data details action buttons, such as Edit or Delete.

Usage

DataDetailsRow

The DataDetailsRow component is used to wrap data field components, ensuring proper spacing and alignment.

 <template>
    <DataDetailsRow>
        <DataField 
            id="first-name"
            label="Full name"
            text="John Doe"
        />
    </DataDetailsRow>
    <DataDetailsRow>
        <DataField 
            id="full-name"
            label="Full name"
            text="John Doe"
        />
    </FormRow>
</template>

Props	Default	Type
`spaced`	`false`	`boolean`

spaced

Adds some extra vertifcal padding to the row.

 <template>
    <FormRow spaced>
        ...
    </FormRow>
</template>

Type: boolean
Default: false

DataDetailsFieldGroup

The DataDetailsFieldGroup component groups related data details fields under a common title.

 <template>
    <DataDetailsFieldGroup title="Personal Information">
        <DataDetailsRow>
            <DataField 
                id="first-name"
                label="First Name"
                text="John"
            />
            <DataField 
                id="last-name"
                label="Last Name"
                text="Doe"
            />
        </DataDetailsRow>
    </DataDetailsFieldGroup>
</template>

Props	Default	Type
`title`	`'Group title'`	`string`
`titleClass`	—	`string`
`headingTag`	`'h3'`	`HeadingTag`

title

The title of the field group.

 <template>
    <DataDetailsFieldGroup title="Personal Information">
        ...
    </DataDetailsFieldGroup>
</template>

DataDetailsActions

The DataDetailsActions component groups data details action buttons, such as Edit or Delete. On mobile devices, buttons stack vertically and their order can be customized via props.

 <template>
    <DataDetailsActions>
        <ActionButton 
            text="Edit"
            :iconPosition="IconPosition.LEFT"
            icon="mdi:pencil-outline"
            :styleType="ButtonStyleType.PRIMARY_BRAND_FILLED"
        />
        <ActionButton 
            text="Delete"
            :styleType="ButtonStyleType.DELETE_SOFT"
        />
    </DataDetailsActions>
</template>

Props	Default	Type
`reverseOnMobile`	`false`	`boolean`

reverseOnMobile

Reverses the order of the buttons on mobile devices.

 <template>
    <FormActions reverseOnMobile>
        ...
    </FormActions>
</template>

Type: boolean
Default: true

DataField

The DataField component displays a label and corresponding read-only data value.

Have a look at the DataField documentation for more details on how to use this component.