Matterway
    Preparing search index...

    Function keyValue

    • Key-value component for displaying labeled data with optional icons and extra information.

      Parameters

      • props: UiKeyValueProps

        Configuration object

        • value

          Value to display. Can be either a static string or a function that receives params with data and value, returning a string

        • label

          Label text. Can be either a static string or a function that receives params with data and value, returning a string

        • extra

          Additional text content. Can be either a static string or a function that receives params with data and value, returning a string

        • icon

          Icon to display next to the label

        • layout

          Layout orientation of the component. Defaults to 'vertical'

      Returns Element

      Basic usage with static content

      keyValue({
        label: 'Username',
        value: 'john.doe'
      });

      Usage with dynamic content from params with data and value

      keyValue({
        label: 'Current User',
        value: ({data}) => `${data.user.firstName} ${data.user.lastName}`,
        extra: ({data}) => `Last login: ${data.user.lastLogin}`
      });

      Usage with icon and horizontal layout

      keyValue({
        icon: 'user',
        label: 'Account Status',
        value: 'Active',
        layout: 'horizontal'
      });

    Settings