Skip to main content

IClassicStyles interface

📖 Description​

Interface that specifies the styles for the runner. Supply it to the styles property of the runner.

📃 Type declaration​

interface IClassicStyles {
  mode?: "paginated" | "continuous" | "progressive";Optional
  color?: string;Optional
  autoFocus?: boolean;Optional
  showEnumerators?: boolean;Optional
  hideRequiredIndicator?: boolean;Optional
  showPageIndicators?: boolean;Optional
  showProgressbar?: boolean;Optional
  noBranding?: boolean;Optional
  font?: {
    family?: string;
    size?: number;
    sizeSmall?: number;
  };Optional
  background?: {
    color?: string;
    url?: string;
    opacity?: number;
    positioning?: "auto" | "100% auto" | "auto 100%" | "cover" | "contain" | "repeat";
  };Optional
  inputs?: {
    backgroundColor?: string;
    borderColor?: string;
    borderSize?: number;
    roundness?: number;
    textColor?: string;
    errorColor?: string;
    agreeColor?: string;
    declineColor?: string;
    selectionColor?: string;
  };Optional
  buttons?: {
    baseColor?: string;
    textColor?: string;
    roundness?: number;
    mode?: "fill" | "outline";
    finishColor?: string;
  };Optional
}
🖱ī¸ Hover with the mouse over a property name for a tooltip with the description of that property. Click it for more information.

🗃ī¸ Properties​


🏷ī¸ autoFocus​

When set to true, the runner tries to gain focus as soon as it is displayed.

Type​

string

warning

If the display mode of the runner is set to page this option is automatically used and therefore always true.


🏷ī¸ background​

Specifies the background settings for the runner.

Type​

{
/* Background color. */
color?: string;

/* Background image. */
url?: string;

/* Background opacity (0..100%). */
opacity?: number;

/* Background positioning. */
positioning?: "auto" | "100% auto" | "auto 100%" | "cover" | "contain" | "repeat";
}

🏷ī¸ buttons​

Specifies the styles for the buttons.

Type​

{
/* Button base color. */
baseColor?: string;

/* Button text color. */
textColor?: string;

/* Button roundness in pixels. */
roundness?: number;

/* Button mode. */
mode?: "fill" | "outline";

/* Finish (or complete) button color. */
finishColor?: string;
}

🏷ī¸ color​

Specifies the base color for the runner.

Type​

string


🏷ī¸ font​

Specifies the font to use. The font family can be a regular font name or a font from Google Fonts. You can also use a custom font by supplying an URL to a custom font stylesheet appended with a hash-sign #, followed by the name of the font (for example, https://yourdomain.com/custom-font.css#fontname). See the Using fonts guide for more information.

Type​

{
/* Font family to use. */
family?: string;

/* Font size in pixels for regular devices (default is 16). */ z
size?: number;

/* Font size in pixels for small devices (default is 14). */
sizeSmall?: number;
}
tip

Read the Using fonts guide for more information on changing the font.


🏷ī¸ hideRequiredIndicator​

Specifies if the required asterisk (*) should be made invisible (default is false).

Type​

boolean


🏷ī¸ inputs​

Specifies the styles for the input elements of the form.

Type​

{
/* Input field background color. */
backgroundColor?: string;

/* Input field border color. */
borderColor?: string;

/* Input field border size in pixels. */
borderSize?: number;

/* Input field roundness in pixels. */
roundness?: number;

/* Input field text color. */
textColor?: string;

/* Input field error color. */
errorColor?: string;

/* Input field color for agree buttons. */
agreeColor?: string;

/* Input field color for decline buttons. */
declineColor?: string;

/* Input field text selection color. */
selectionColor?: string;
}

🏷ī¸ mode​

Specifies the operation mode of the runner. It can be one of the following values:

  • progressive: Presents the whole form at once (this is the default mode);
  • continuous: Keeps answered blocks in view while working through the form;
  • paginated: Use pagination for the form and let the user navigate through the form using a next and back button.

Type​

"progressive" | "continuous" | "paginated"


🏷ī¸ noBranding​

Specifies if the Tripetto branding (a link to the Tripetto website) should be invisible (default is false).

Type​

boolean

License required!

You are only allowed to remove the Tripetto branding if you have bought a license. See the pricing page for more information about licensing and pricing. Read the Disable Tripetto branding guide for more information about this feature.


🏷ī¸ showEnumerators​

Specifies if enumerators (question numbers) should be shown (default is false).

Type​

boolean


🏷ī¸ showPageIndicators​

Specifies if a page indiciators should be shown when the mode is set to paginated (default is false).

Type​

boolean


🏷ī¸ showProgressbar​

Specifies if a progressbar should be shown when the mode is set to paginated (default is false).

Type​

boolean