Details Component

Beta

0.1.1

<ecc-utils-design-details/>

EccUtilsDesignDetails

Overview

This component is used to render a detailed view of items. It provides a user-friendly interface for displaying data in a structured manner, with built-in support for rendering fields and actions.

Preview

Examples

Basic Usage

EccUtilsDesignDetailsExample.tsx

import React from 'react';
import EccUtilsDesignDetails from '@elixir-cloud/design/dist/react/details';
 
export default function CodeEditor() {
  return <EccUtilsDesignDetails
    items={[...]}
  />;
}

Properties

Property	Required	Default	Type	Description
`data`	`true`		`Object`	The data to be rendered.
`fields`	`true`		`fields`	An array of fields and its configuration
`actions`	`false`	`[]`	`Array`	An array of buttons and its configuration

data*

The data property allows you to define the data to be rendered in the component. The data object can be a simple object or a complex object with nested properties.

fields*

The fields property allows you to define an array of fields along with their configuration. Fields can be used to render specific data from the data object.

Property	Required	Default	Type	Description
`key`	`true`		`string`	A unique identifier for the field, used to distinguish between fields in the configuration.
`path`	`true`		`string`	The path to the data to be rendered.
`tab`	`false`		`string`	The tab group to which the field belongs.
`parentKey`	`false`		`string`	The parent key of the field. Recommended if tab is not provided.
`label`	`false`		`string`	The display name or label for the field.
`tooltip`	`false`		`string`	The tooltip to be displayed on hover.
`copy`	`false`	`false`	`boolean`	A flag to indicate if the field should be copied.
`arrayOptions`	`false`		`arrayOptions`	The configuration for rendering arrays.

arrayOptions

The arrayOptions property allows you to define the configuration for rendering arrays.

Property	Required	Default	Type	Description
`type`	`false`	`detail`	`'detail' \| 'tag'`	The type of array to be rendered. Prefer `tag` for smaller values.
`labelOptions.path`	`false`		`string`	The path in the child object to be used as the label.
`labelOptions.prefix`	`false`		`string`	The prefix to be added to the label.
`labelOptions.suffix`	`false`		`string`	The suffix to be added to the label.

actions

The actions property allows you to define an array of actions along with their configuration. Actions can be used to render buttons or links.

Property	Required	Default	Type	Description
`key`	`true`		`string`	A unique identifier for the action, used to distinguish between actions in the configuration.
`label`	`true`		`string`	The display name or label for the action.
`type`	`false`	`button`	`button \| link`	The type of action to be rendered.
`position`	`false`	`right`	`left \| right`	The position of the action.
`buttonOptions`	`false`		`Object`	The configuration for the button. Can be used if `type` is `button`.
`linkOptions`	`false`		`Object`	The configuration for the link. Can be used if `type` is `link`.

buttonOptions

Property	Required	Default	Type	Description
`variant`	`false`	`primary`	`primary \| success \| neutral \| warning \| danger \| text`	The variant of the button.
`loading`	`false`	`false`	`boolean`	A flag to indicate if the button should be in a loading state.
`disabled`	`false`	`false`	`boolean`	A flag to indicate if the button should be disabled.
`size`	`false`	`medium`	`small \| medium \| large`	The size of the button.
`icon.url`	`false`		`string`	The URL of the icon to be displayed.
`icon.position`	`false`	`prefix`	`prefix \| suffix`	The position of the icon.

linkOptions

Property	Required	Default	Type	Description
`url`	`true`		`string`	The URL to be navigated to.
`size`	`false`	`medium`	`small \| medium \| large`	The size of the link.

Events

Event Name	React Event Name	Description
`ecc-utils-button-click`	`EccUtilsButtonClickEvent`	Fired when a button is clicked. The event payload contains the key of the clicked button.

Event Payload

Property	Type	Description
`key`	`string`	The unique identifier of the clicked button.

Collection Form