Skip to content

sc-separator

This document is a user guide for the sc-separator component version 6.3.6.1 (released Jan 15, 2021).

go-to-typical-definition

sc-separator-Example-1-Image-1


1 Purpose

sc-separator places a horizontal separator line on a form. Separator lines can be used to visually separate the different sections of a form.

The sc-separator definition provides fields for setting the properties of a separator line and is fully described below.


2 Definition

sc-separator is defined by a set of name/value pair fields consisting of:

  • Required system fields
  • Required customizable fields
  • Optional customizable fields

Note:

  1. Default values for fields described in the tables below are shown in bold text.

2.1 Required System Fields

Field Valid Values Description
componentName sc-separator The component name.

Example:
"componentName": "sc-separator"

2.2 Required Customizable Fields

sc-separator does not have any required customizable fields.

2.3 Optional Customizable Fields

Field Valid Values Description
colour Colour name OR colour hex value Defines the colour of the separator line.

Example:
"colour": "red"
Example:
"colour": "#ff0000"
black Default value. The colour of the separator line is black.
fullWidth true The separator line displays full width on the form.

Example:
"fullWidth": true
false Default value. The separator line does not display full width on the form.
lineStyle dotted The separator line displays as a dotted line on the form.

Example:
"lineStyle": "dotted"
double The separator line displays as a double line in the form.

Example:
"lineStyle": "double"
solid Default value. The separator line displays as a single solid line on the form.
Size Number of pixels Defines the thickness of the separator line in pixels (px).

Example:
"size": "10px"
1px Default value. The separator line displays with a thickness of 1 pixel.
visible false The separator line is not visible on the form.

Example:
"visible": false
true Default value. The separator line field is visible on the form.


3 Typical Definition

Below is a typical sc-separator definition, defined with its required fields plus any optional field whose value is typically other than its default value.

{
    "componentName": "sc-separator",
    "fullWidth": true
}

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

    "colour": blue,
    "lineStyle": double,
    "size": "2px"
    "visible":false,


4 Examples

Example 1

Sc-separator defined with the typically needed fields.

{
    "componentName": "sc-separator",
    "fullWidth": true
}

Resulting field on the form:

sc-separator-Example-1-Image-1


Example 2

Sc-separator defined with the typically needed fields plus the "colour", "lineStyle" and "size" fields.

{
    "componentName": "sc-separator",
    "fullWidth": true,
    "colour": "red",
    "lineStyle": "dotted",
    "size": "2px"
}

Resulting field on the form:

sc-separator-Example-2-Image-2


Example 3

Sc-separator defined with the typically needed fields plus the "colour", "lineStyle" and "size" fields.

{
    "componentName": "sc-separator",
    "fullWidth": true,
    "colour": "#0000FF",
    "lineStyle": "souble",
    "size": "6px"
}

Resulting field on the form:

sc-separator-Example-3-Image-3