Skip to content
Television Simulator

Vertical Split

Vertical split (v-split) is a layout that divides the screen into two or more stacked sections. Each section can contain any engine, including another layout, allowing for complex arrangements of content.

v-split:
  - image: /placeholders/cable-ad-2.png
  - guide:
      theme: "1989"
      themeOptions:
        ticker:
          - "Hypercom cable - connecting you to the future"
          - "Pay-Per-View Movies - Ch 1 - Straight from Hollywood to your home, anytime!"

This layout will display an image on the top half of the screen and a program guide on the bottom half.

Use the object form when you need layout options such as gaps or a legacy splitPercentage:

v-split:
  gapSize: 8
  gapColor: black
  components:
    - image: /placeholders/cable-ad-2.png
    - guide:
        theme: "1989"

Properties

Section titled “Properties”

components required since TVS 6.0.0

Section titled “components ”

Type: content engine[]

The content sections to display from top to bottom. The v-split value can be this array directly, or an object with a components array when you also need split layout options. Each component can be any engine, including another layout.

_split.weight since TVS 6.0.0

Section titled “_split.weight ”

Type: number

Default: 1

Description: The relative height of one component compared with the other components in the split. For example, a component with _split.weight: 2 takes twice as much available height as a component with the default weight of 1.

v-split:
  - image: /placeholders/cable-ad-2.png
  - guide:
      theme: "1989"
    _split:
      weight: 2
  - color: black

splitPercentage

Section titled “splitPercentage”

Type: number

Default: 0.5

Description: Legacy two-section split control. When exactly two components are present and neither component specifies _split.weight, this sets the percentage of the screen height allocated to the first component, ranging from 0.0 to 1.0. For example, 0.3 makes the first section 30% of the screen height and the second section 70%.

gapSize

Section titled “gapSize”

Type: number

Description: The pixel size of the gap between the top and bottom sections. The default value is 0.

gapColor

Section titled “gapColor”

Type: string

Description: The color of the gap between the top and bottom sections. Accepts any valid CSS color value. The default value is black.