Skip to content
Demo Time

Components

Demo Time includes several visual components to enhance your presentations.

Arrow

The dt-arrow component draws an arrow with customizable properties:

Show an arrow
<dt-arrow
  x1="0"
  y1="100"
  x2="480"
  y2="100"
  line-color="#15181f"
  line-width="2"
  arrow-head="both">
</dt-arrow>
Arrow component

Properties

  • x1 and y1: Coordinates for the starting point.
  • x2 and y2: Coordinates for the ending point or dimensions.
  • line-color: Color of the line or border.
  • line-width: Thickness of the line or border.
  • arrow-head: Type of arrow head to use.
    • end: Arrow head at the end (default)
    • start: Arrow head at the start
    • both: Arrow heads at both ends

Rectangle

The dt-rectangle component draws a rectangle with customizable properties:

Show a rectangle
<dt-rectangle
  x1="25"
  y1="30"
  x2="375"
  y2="75"
  line-color="var(--vscode-editorError-foreground)"
  line-width="2"
  fill-color="transparent">
</dt-rectangle>
Rectangle component

Properties

  • x1 and y1: Coordinates for the starting point.
  • x2 and y2: Coordinates for the ending point or dimensions.
  • line-color: Color of the line or border.
  • line-width: Thickness of the line or border.
  • fill-color: Fill color for the shape (use transparent for no fill).

Circle

The dt-circle component draws a circle with customizable properties:

Show a circle
<dt-circle
  x1="25"
  y1="25"
  x2="125"
  y2="85"
  line-color="#ffd43b"
  line-width="4"
  fill-color="transparent">
</dt-circle>
Circle component

Properties

  • x1 and y1: Coordinates for the starting point.
  • x2 and y2: Coordinates for the ending point or dimensions.
  • line-color: Color of the line or border.
  • line-width: Thickness of the line or border.
  • fill-color: Fill color for the shape (use transparent for no fill).

Finding the right coordinates

When you open the slide in the preview mode, you can click on the ruler action to see the coordinates of the mouse pointer. This will help you find the right coordinates for your components.

Mouse coordinates