Function keyValue

  • keyValue(props): Element

  • Creates a key-value component for displaying labeled data with optional icons and extra information.

    Parameters

    • props: UiKeyValueProps

      Configuration object

    Returns Element

    A JSX element representing the key-value component

    Example

    Basic usage with static content

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

    Example

    Usage with dynamic content from central state

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

    Example

    Usage with icon and horizontal layout

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

Settings