Skip to main content
Version: 0.0.7

Config

This section will guide you through the config options available for the CalcGatewayForm component, which accepts different props that control the styles and layout.

Config Parameter​

The config parameter takes an object with 4 optional attributes. If no config is provided, this default configuration is used:

<CalcGatewayForm
  config={{
      layout: "horizontal",
      size: "default",
      debounceDelay: 500,
      color: "primary"
  }}
/>

Default Styles​

The component uses a set of prefixed tailwind classes to avoid conflicts with your own styles. You can import the default styles from the package to get started quickly.

...
//Import the styles - these are prefixed classes to avoid conflicts with your own styles
import 'kampmann-calcgateway-frontend/dist/style.css'
...

Layout​

The CalcGatewayForm uses a flex layout to arrange the form elements. The form is divided into sections, each containing a set of input fields and sliders. The layout is responsive and adjusts to the available space. If you want to restrict the width or height of the form, you can wrap the CalcGatewayForm in a container with a fixed width or height.

The attribute Layout can be used to control the layout of the form. The following values are supported:

  • horizontal: The form elements are arranged horizontally.
  • vertical: The form elements are arranged vertically.
  • list: The form elements are arranged in a list.

Size​

The size attribute controls the padding between each individual input element (slider, select).

The attribute size supports 3 options:

  • default: padding of 4px between each input element.
  • compact: padding of 2px between each input element.
  • large: padding of 8px between each input element.

Color​

The color attribute controls the overall display style of the form. Mostly influences the slider colors.

The attribute color supports 5 variants:

  • primary: Uses the default color (Kampmann blue).
  • secondary: Uses the secondary color (Kampmann green).
  • aloevera
  • petrol
  • cyan

debounceDelay

A technique called "debounce" is used to reduce the number of requests. This means that a new request is not made with every input (via slider or input fields), but only after a certain period of time.

The time after which a new request will be send can be configured through the debounceDelay attribute. The default value is 500 ms.