gadgets
Version:
Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...
53 lines (52 loc) • 1.8 kB
TypeScript
/**
* 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:
* <img src="https://github.com/jmquigley/gadgets/blob/master/images/triangle.png" width="60%" />
*
* ## Examples:
*
* ```javascript
* 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.
*
* @module Triangle
*/
/// <reference types="react" />
import { BaseComponent, BaseProps, BaseState } from "../shared";
export interface TriangleProps extends BaseProps {
nobase?: boolean;
}
export declare type TriangleState = BaseState;
export declare class Triangle extends BaseComponent<TriangleProps, TriangleState> {
static readonly defaultProps: TriangleProps;
constructor(props: TriangleProps);
render(): JSX.Element;
}
export default Triangle;