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
  autoFocus?: boolean;Optional
  showEnumerators?: boolean;Optional
  showPageIndicators?: boolean;Optional
  showProgressbar?: boolean;Optional
  color?: string;Optional
  textColor?: string;Optional
  backgroundColor?: string;Optional
  palette?: {
    themePrimary?: string;
    themeLighterAlt?: string;
    themeLighter?: string;
    themeLight?: string;
    themeTertiary?: string;
    themeSecondary?: string;
    themeDarkAlt?: string;
    themeDark?: string;
    themeDarker?: string;
    neutralLighterAlt?: string;
    neutralLighter?: string;
    neutralLight?: string;
    neutralQuaternaryAlt?: string;
    neutralQuaternary?: string;
    neutralTertiaryAlt?: string;
    neutralTertiary?: string;
    neutralSecondary?: string;
    neutralSecondaryAlt?: string;
    neutralPrimaryAlt?: string;
    neutralPrimary?: string;
    neutralDark?: string;
    black?: string;
    white?: 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.

🏷ī¸ backgroundColor​

Specifies the background color for the runner.

Type​

string

🏷ī¸ color​

Specifies the primary color for the runner.

Type​

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.

🏷ī¸ palette​

Specifies the color palette (theme) for the Fluent UI controls. If this property is omitted the runner will generate a color palette from the specified color, backgroundColor, and textColor.

tip

Use the Fluent UI Theme Designer to generate a theme for the form.

Type​

{
  themePrimary?: string;
  themeLighterAlt?: string;
  themeLighter?: string;
  themeLight?: string;
  themeTertiary?: string;
  themeSecondary?: string;
  themeDarkAlt?: string;
  themeDark?: string;
  themeDarker?: string;
  neutralLighterAlt?: string;
  neutralLighter?: string;
  neutralLight?: string;
  neutralQuaternaryAlt?: string;
  neutralQuaternary?: string;
  neutralTertiaryAlt?: string;
  neutralTertiary?: string;
  neutralSecondary?: string;
  neutralSecondaryAlt?: string;
  neutralPrimaryAlt?: string;
  neutralPrimary?: string;
  neutralDark?: string;
  black?: string;
  white?: string;
}

🏷ī¸ 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

🏷ī¸ textColor​

Specifies the text color for the runner.

Type​

string