Skip to content

Latest commit

 

History

History
40 lines (31 loc) · 1.24 KB

Triangle.md

File metadata and controls

40 lines (31 loc) · 1.24 KB
Raw

Triangle

Uses SVG to draw and fill a triangle image. This triangle can then be used in other controls as a "pointer" (like the triangle in a tooltip). It follows the libraries typical sizing constraints. It can be drawn in one of four directions using the direction prop. It can be thought of as how the triangle points out its direction. The direction is based on the Direction enum. The four directions are:

  • Direction.up
  • Direction.down
  • Direction.left
  • Direction.right

Screen:

Examples:

import {Direction, Sizing, Triangle} from 'gadgets';
<Triangle sizing={Sizing.large} direction={Direction.up} />

API

Events

N/A

Styles

  • ui-triangle - global style placed on the <svg> root element

Properties

  • direction=Direction.up {Direction} - Determines the direction the triangle will point.
  • nobase=false {boolean} - When set to true, then the side opposite the "pointer" angle will not have a line drawn. The typical triangle has a border on all three sides drawn. This will exclude this side. This is used when overlaying a triangle on the edge of another control.