IAutoscrollStyles interface
đ Descriptionâ
Interface that specifies the styles for the runner. Supply it to the styles property of the runner.
đ Type declarationâ
interface IAutoscrollStyles { direction?: "horizontal" | "vertical";Optional verticalAlignment?: "top" | "middle" | "bottom";Optional hidePast?: boolean;Optional hideUpcoming?: boolean;Optional color?: string;Optional autoFocus?: boolean;Optional showSeparateSubmit?: boolean;Optional showPreviousButton?: boolean;Optional showNavigation?: "auto" | "always" | "never";Optional showProgressbar?: boolean;Optional showEnumerators?: boolean;Optional hideRequiredIndicator?: boolean;Optional showScrollbar?: boolean;Optional disableScrolling?: 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 navigation?: { backgroundColor?: string; textColor?: string; progressbarColor?: string; };Optional }
đī¸ Propertiesâ
đˇī¸ autoFocusâ
When set to true, the runner tries to gain focus as soon as it is displayed.
Typeâ
string
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
đˇī¸ directionâ
Specifies the scroll direction of the runner (default is vertical).
Typeâ
"horizontal" | "vertical"
đˇī¸ disableScrollingâ
Specifies if scrolling (with the mousewheel or touch input) should be disabled (default is false).
Typeâ
boolean
đˇī¸ 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;
}
Read the Using fonts guide for more information on changing the font.
đˇī¸ hidePastâ
When set to true, all the blocks before the active block become invisible.
Typeâ
boolean
đˇī¸ hideRequiredIndicatorâ
Specifies if the required asterisk (*) should be made invisible (default is false).
Typeâ
boolean
đˇī¸ hideUpcomingâ
When set to true, all the blocks after the active block are invisible.
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;
}
đˇī¸ navigationâ
Specifies the styles for the navigation bar.
Typeâ
{
/* Background color of the navigation bar. */
backgroundColor?: string;
/* Text color of the navigation bar. */
textColor?: string;
/* Progressbar color of the navigation bar. */
progressbarColor?: string;
}
đˇī¸ noBrandingâ
Specifies if the Tripetto branding (a link to the Tripetto website) should be invisible (default is false).
Typeâ
boolean
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
đˇī¸ showNavigationâ
Specifies the behavior of the navigation bar. It can be one of the following values:
auto: The navigation bar is only displayed when thedisplaymode is set topage(this is the default setting);always: The navigation bar is always shown;never: The navigation bar is never shown.
Typeâ
"auto" | "always" | "never"
đˇī¸ showPreviousButtonâ
Specifies if a back button is shown (default is true). When clicked, the respondent returns to the previous block.
Typeâ
boolean
đˇī¸ showProgressbarâ
Specifies if a progressbar is shown in the navigation bar (default is true).
Typeâ
boolean
đˇī¸ showScrollbarâ
Specifies if a visual scrollbar should be shown (default is false).
Typeâ
boolean
đˇī¸ showSeparateSubmitâ
Specifies if the submit button should be shown as a separate block (that scrolls into view) or that the button is shown in the last active question block (default is true).
Typeâ
boolean
đˇī¸ verticalAlignmentâ
Specifies the vertical alignment of the content in the runner (default is middle).
Typeâ
"top" | "middle" | "bottom"