Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Widget

Base class for all instantUI widgets. It creates a new instance of the widget with the given tag name or the given html element. It has methods to manipulate the DOM.

example
const myWidget = new Widget().addChild(
   new Widget("span"),
   ...
)

Hierarchy

Index

Constructors

Methods

Constructors

constructor

  • new Widget(tag?: string | HTMLElement, ns?: string): Widget

  • Parameters

    • tag: string | HTMLElement = "div"

      The tag type of the widget.

    • Optional ns: string

      The namespace of the widget.

    Returns Widget

Methods

addAttribute

  • addAttribute(attribute: string, value: any): Widget

  • Adds given attributes to widget's HTML element.

    Parameters

    • attribute: string
    • value: any

    Returns Widget

    • Itself.

addChild

addChildren

addClass

  • addClass(...args: string[]): Widget

  • Adds given CSS classes to the widget.

    Parameters

    • Rest ...args: string[]

    Returns Widget

    • Itself.

addEventListener

  • addEventListener(event: string, callback: EventListener, options?: boolean | AddEventListenerOptions): Widget

  • Attaches an event handler to the widget

    example
    myWidget.addEventListener("click", () => consoleLog("clicked"))

    Parameters

    • event: string

      A String that specifies the name of the event.

    • callback: EventListener

      Specifies the function to run when the event occurs.

    • options: boolean | AddEventListenerOptions = false

      A Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

    Returns Widget

    • Itself.

align

  • Sets alignment of the widget along the cross axis in parent layout space. This is the vertical axis for Row, horizontal axis for Column.

    example
    // Button will be aligned to center position in it's parent space.
    myWidget.align("center")
    // Button will be aligned to start position in it's parent space. 
    // Once small breakpoint is reached, button will be aligned to end position.
    myWidget.align("start").align("end", "sm")

    Parameters

    Returns Widget

    • Itself.

alignText

  • Sets the alingment of the widget's inner text.

    Parameters

    • Optional value: "start" | "end" | "center"
    • Optional breakpoint: BREAKPOINT

    Returns Widget

    • Itself.

apply

  • Allows performing additional computations inside method chain by providing object - Itself..

    example
    myWidget.addChild(
      new Text().apply(self => {
          count(self, 0);
      })
    )
    function count(widget, timer) {
      widget.setText(`${timer++} seconds passed.`);
      setTimeout(()=>count(widget, timer), 1000);
    }

    Parameters

    Returns Widget

    • Itself.

clearChildren

clearEventListeners

clearSpace

disable

enable

fill

  • Fills the widget on parent's available space on main axis relative to its content size or width value if its set.

    Parameters

    • value: boolean = true
    • Optional breakpoint: BREAKPOINT

    Returns Widget

    • Itself.

fixPosition

  • fixPosition(value?: "fixed-top" | "fixed-bottom" | "sticky-top" | "sticky-sm-top" | "sticky-md-top" | "sticky-lg-top" | "sticky-xl-top"): Widget

  • Fixes position on the screen. It will only work if parent's overflow poroperty not set.

    Parameters

    • Optional value: "fixed-top" | "fixed-bottom" | "sticky-top" | "sticky-sm-top" | "sticky-md-top" | "sticky-lg-top" | "sticky-xl-top"

    Returns Widget

    • Itself.

focus

  • Sets focus on the widget, if it can be focused. The focused widget will receive keyboard and similar events by default

    Returns Widget

    • Itself.

getAttribute

  • getAttribute(attribute: string): undefined | string

  • Returns the value of a specified attribute on the widget.

    Parameters

    • attribute: string

    Returns undefined | string

    Attribute value of specified attribute.

getChild

  • Returns child widget from the specified index.

    Parameters

    • idx: number

    Returns Widget

    Child widget from the specified index.

getChildren

getClientHeight

  • getClientHeight(): number

  • Returns the inner height of an element in pixels.

    Returns number

    The inner height of an element in pixels.

getClientLeft

  • getClientLeft(): number

  • Returns the width of the left border of an element in pixels.

    Returns number

    The width of the left border of an element in pixels.

getClientTop

  • getClientTop(): number

  • Returns the width of the top border of an element in pixels.

    Returns number

    The width of the top border of an element in pixels.

getClientWidth

  • getClientWidth(): number

  • Returns the inner width of an element in pixels.

    Returns number

    The inner width of an element in pixels.

getDom

  • getDom(): HTMLElement

  • Returns html dom element of the widget.

    Returns HTMLElement

    Html dom element of the widget.

getHeight

  • getHeight(): string

  • Returns height value of the widget.

    Returns string

    height of the widget.

getInnerHTML

  • getInnerHTML(): any

  • Returns inner html value of the widget.

    Returns any

    Inner html value of the widget.

getMaxHeight

  • getMaxHeight(): string

  • Returns max height value of the widget.

    Returns string

    Max height value of the widget.

getMaxWidth

  • getMaxWidth(): string

  • Returns max width value of the widget.

    Returns string

    Max width value of the widget.

getMinHeight

  • getMinHeight(): string

  • Returns min height value of the widget.

    Returns string

    Min height value of the widget.

getMinWidth

  • getMinWidth(): string

  • Returns min width value of the widget.

    Returns string

    Min width value of the widget.

getOffsetHeight

  • getOffsetHeight(): number

  • Returns the height of an element, including vertical padding and borders, as an integer.

    Returns number

    the height of an element, including vertical padding and borders, as an integer.

getOffsetLeft

  • getOffsetLeft(): number

  • Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.

    Returns number

    The number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.

getOffsetTop

  • getOffsetTop(): number

  • Returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.

    Returns number

    The distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.

getOffsetWidth

  • getOffsetWidth(): number

  • Returns the layout width of an element as an integer.

    Returns number

    The layout width of an element as an integer.

getParent

  • getParent(): undefined | Widget

  • Returns parent widget of the widget.

    Returns undefined | Widget

    Parent widget of the widget.

getProperty

  • getProperty(property: string): any

  • Returns the value of a specified property of the widget's dom element.

    Parameters

    • property: string

    Returns any

    Value of a specified property.

getScrollHeight

  • getScrollHeight(): number

  • Returns the height of an element's content, including content not visible on the screen due to overflow

    Returns number

    the height of an element's content, including content not visible on the screen due to overflow.

getScrollLeft

  • getScrollLeft(): number

  • Returns the number of pixels that an element's content is scrolled from its left edge.

    Returns number

    the number of pixels that an element's content is scrolled from its left edge.

getScrollTop

  • getScrollTop(): number

  • Returns the number of pixels that an element's content is scrolled vertically.

    Returns number

    the number of pixels that an element's content is scrolled vertically.

getScrollWidth

  • getScrollWidth(): number

  • Returns the width of an element's content, including content not visible on the screen due to overflow.

    Returns number

    the width of an element's content, including content not visible on the screen due to overflow.

getStyle

  • getStyle(style: string): string

  • Returns the specified style property of the widget.

    Parameters

    • style: string

    Returns string

    Style property

getText

  • getText(): any

  • Returns inner text of the widget.

    Returns any

    Inner text of the widget.

getTransform

  • getTransform(): string

  • Transform value of the widget.

    Returns string

    Transform value.

getWidth

  • getWidth(): string

  • Returns width value of the widget.

    Returns string

    width of the widget.

grow

  • grow(value?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "clear"): Widget

  • Fills the widget on parent's available space on main axis.

    Parameters

    • value: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | "clear" = 1

    Returns Widget

    • Itself.

hasAttribute

  • hasAttribute(attribute: string): boolean

  • Checks if specified attribute is present in the widget.

    Parameters

    • attribute: string

    Returns boolean

hasChild

  • hasChild(child: Widget): boolean

  • Checks if specified widget is child of the widget.

    Parameters

    Returns boolean

hasClass

  • hasClass(className: string): boolean

  • Checks if specified CSS class is present in the widget.

    Parameters

    • className: string

    Returns boolean

hide

hideTooltip

insertChild

invert

  • Inverts the color samples in the input image.

    Parameters

    • Optional value: number
    • unit: UNIT = "%"

    Returns Widget

    • Itself.

isHidden

  • isHidden(): boolean

isInViewport

  • isInViewport(): boolean

  • Checks if widget is in the visible DOM hierarch.

    Returns boolean

removeAttribute

  • removeAttribute(...args: string[]): Widget

  • Removes given attributes from widget.

    Parameters

    • Rest ...args: string[]

    Returns Widget

    • Itself.

removeChild

removeChildAt

  • removeChildAt(idx: number): Widget

  • Removes child from widget at given index.

    Parameters

    • idx: number

    Returns Widget

    • Itself.

removeClass

  • removeClass(...args: string[]): Widget

  • Removes given CSS classes from widget.

    Parameters

    • Rest ...args: string[]

    Returns Widget

    • Itself.

removeEventListener

  • removeEventListener(callback: EventListener, evnt?: string): Widget

  • Removes specified listener from widget.

    Parameters

    • callback: EventListener
    • Optional evnt: string

    Returns Widget

    • Itself.

removeSpace

  • removeSpace(...args: string[]): Widget

  • Removes given space classes from widget.

    Parameters

    • Rest ...args: string[]

    Returns Widget

    • Itself.

removeStyle

  • removeStyle(...args: string[]): Widget

  • Removes given styles from widget.

    Parameters

    • Rest ...args: string[]

    Returns Widget

    • Itself.

render

  • render(dom?: HTMLElement): Widget

  • Renders widget to given html element once document is loaded.

    Parameters

    • dom: HTMLElement = document.body

    Returns Widget

    • Itself.

replaceChild

rotate

  • Defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.

    example
    // Rotates element by 90 degrees
    myWidget.rotate(90)

    // Rotates element by 2 turns
    myWidget.rotate(2, "turn")

    Parameters

    • Optional value: number
    • unit: ANGLE = "deg"

    Returns Widget

    • Itself.

runOnMount

  • runOnMount(callback: () => void): Widget

  • Runs given function after widget dom is mounted to document. Runs immediately if dom is already mounted.

    example
    myWidget.runOnMount(() => console.log("dom is mounted!"))

    Parameters

    • callback: () => void

      Function to run after widget's dom is mounted to document.

        • (): void

        • Returns void

    Returns Widget

    • Itself.

saturate

  • Saturates or desaturates the input image.

    Parameters

    • Optional value: number
    • unit: UNIT = "%"

    Returns Widget

    • Itself.

scale

  • scale(x?: number, y?: number): Widget

  • Defines a transformation that resizes an element on the 2D plane

    example
    myWidget.scale(2, 2)

    Parameters

    • Optional x: number
    • Optional y: number

    Returns Widget

    • Itself.

scrollIntoView

  • scrollIntoView(alignToTop?: boolean | ScrollIntoViewOptions): void

  • Scrolls widget into view.

    example
    myWidget.scrollIntoView()

    Parameters

    • Optional alignToTop: boolean | ScrollIntoViewOptions

    Returns void

    • Itself.

setBgColor

  • Sets background color of widget.

    Parameters

    • Optional value: BG_COLOR

      primary | secondary | success | danger | warning | info | light | dark

    • gradient: boolean = false

    Returns Widget

    • this.

setBgColorState

  • setBgColorState(bgColorState?: State<any>): Widget

  • Assigns background color state.

    Parameters

    • Optional bgColorState: State<any>

    Returns Widget

setBgGradient

  • setBgGradient(values?: string[], options?: { angleOrPos?: string | number; repeat?: boolean; type?: "linear" | "radial" }): Widget

  • Creates an image consisting of a progressive transition between two or more colors.

    see

    linear-gradient

    see

    radial-gradient

    example
    myWidget.setBgGradient([green, "red 50%"], {type: linear, angleOrPos:60})
    myWidget.setBgGradient([green %10, "red 50%"], {type: linear, angleOrPos:"to bottom right"})
    myWidget.setBgGradient([green, "red 50%"], {type: radial, angleOrPos:"closest-corner"})

    Parameters

    • Optional values: string[]
    • Optional options: { angleOrPos?: string | number; repeat?: boolean; type?: "linear" | "radial" }
      • Optional angleOrPos?: string | number

        The angle or position of the gradient.

      • Optional repeat?: boolean
      • Optional type?: "linear" | "radial"

    Returns Widget

    • Itself.

setBgHoverColor

  • setBgHoverColor(value?: "light" | "dark"): Widget

  • Enables backgroud hover color effect.

    Parameters

    • Optional value: "light" | "dark"

      Dark or light, disables if undefined.

    Returns Widget

setBgImage

  • setBgImage(value?: string): Widget

  • Sets background images on the widget.

    Parameters

    • Optional value: string

      Path to image, valid inputs: "url", "none", "initial", "inherit", "revert", "unset"

    Returns Widget

    • Itself.

setBgPosition

  • setBgPosition(x?: number | "center" | "inherit" | "initial" | "revert" | "unset" | "left" | "right", y?: number | "center" | "top" | "bottom", unit?: UNIT): Widget

  • Sets the initial position for each background image.

    Parameters

    • Optional x: number | "center" | "inherit" | "initial" | "revert" | "unset" | "left" | "right"
    • Optional y: number | "center" | "top" | "bottom"
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setBgRepeat

  • setBgRepeat(x?: "inherit" | "initial" | "revert" | "unset" | "repeat" | "space" | "round" | "no-repeat" | "repeat-x" | "repeat-y", y?: "repeat" | "space" | "round" | "no-repeat"): Widget

  • Sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.

    Parameters

    • Optional x: "inherit" | "initial" | "revert" | "unset" | "repeat" | "space" | "round" | "no-repeat" | "repeat-x" | "repeat-y"
    • Optional y: "repeat" | "space" | "round" | "no-repeat"

    Returns Widget

    • Itself.

setBgSize

  • setBgSize(x?: number | "inherit" | "initial" | "revert" | "unset" | "cover" | "contain" | "auto", y?: number | "auto", unit?: UNIT): Widget

  • Sets the size of the widgets's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.

    Parameters

    • Optional x: number | "inherit" | "initial" | "revert" | "unset" | "cover" | "contain" | "auto"
    • y: number | "auto" = "auto"
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setBlur

  • Applies a Gaussian blur to the input image.

    Parameters

    • Optional value: number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setBorder

  • setBorder(value?: BORDER | BORDER[], options?: { color?: COLOR; subtractive?: boolean; width?: 1 | 2 | 3 | 4 | 5 }): Widget

  • Adds or removes this element’s borders

    Parameters

    • Optional value: BORDER | BORDER[]

      Additive border value.

    • Optional options: { color?: COLOR; subtractive?: boolean; width?: 1 | 2 | 3 | 4 | 5 }
      • Optional color?: COLOR
      • Optional subtractive?: boolean
      • Optional width?: 1 | 2 | 3 | 4 | 5

    Returns Widget

    • Itself.

setBottomPos

  • setBottomPos(value?: string | number, unit?: UNIT): Widget

  • The bottom property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

setBrightness

  • setBrightness(value?: number, unit?: UNIT): Widget

  • Applies a linear multiplier to the input image, making it appear brighter or darker

    Parameters

    • Optional value: number
    • unit: UNIT = "%"

    Returns Widget

setChild

setClass

  • setClass(...args: string[]): Widget

  • Replaces CSS classes with the given ones.

    Parameters

    • Rest ...args: string[]

    Returns Widget

    • Itself.

setContrast

  • Adjusts the contrast of the input image.

    Parameters

    • Optional value: number
    • unit: UNIT = "%"

    Returns Widget

    • Itself.

setCursor

  • The cursor property sets the type of mouse cursor, if any, to show when the mouse pointer is over an widget.

    Parameters

    Returns Widget

    • Itself.

setDisplay

setDisplayOrder

  • setDisplayOrder(value?: 0 | 1 | 2 | 3 | 4 | 5 | "first" | "last", breakpoint?: BREAKPOINT): Widget

  • Sets the display order of item.

    Parameters

    • Optional value: 0 | 1 | 2 | 3 | 4 | 5 | "first" | "last"
    • Optional breakpoint: BREAKPOINT

    Returns Widget

    • Itself.

setDropShadow

  • setDropShadow(x?: number, y?: number, options?: { blur?: number; color?: string; unit?: UNIT }): Widget

  • Applies a drop shadow effect to the input image.

    Parameters

    • Optional x: number
    • Optional y: number
    • Optional options: { blur?: number; color?: string; unit?: UNIT }
      • Optional blur?: number
      • Optional color?: string
      • Optional unit?: UNIT

    Returns Widget

    • Itself.

setEditable

  • setEditable(value?: boolean): Widget

  • Specifies whether the content of an widget should be editable.

    Parameters

    • value: boolean = true

    Returns Widget

    • Itself.

setFontItalic

  • setFontItalic(value?: boolean): Widget

setFontMonospace

  • setFontMonospace(value?: boolean): Widget

setFontSize

  • setFontSize(value?: string | number, unit?: UNIT): Widget

  • Sets the size of the font.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setFontWeight

  • setFontWeight(value?: "light" | "bold" | "bolder" | "normal" | "lighter"): Widget

  • Sets the tickness of the font.

    Parameters

    • Optional value: "light" | "bold" | "bolder" | "normal" | "lighter"

    Returns Widget

    • Itself.

setGrayscale

  • Converts the input image to grayscale.

    Parameters

    • Optional value: number
    • unit: UNIT = "%"

    Returns Widget

    • Itself.

setHeight

  • setHeight(value?: string | number, unit?: UNIT): Widget

  • Sets height of the widget.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setHue

  • Rotates the hue of an widget and its contents.

    Parameters

    • Optional value: number
    • unit: ANGLE = "deg"

    Returns Widget

    • Itself.

setInnerHTML

  • setInnerHTML(value?: string): Widget

  • Sets the inner HTML of the widget.

    Parameters

    • Optional value: string

    Returns Widget

    • Itself.

setLeftPos

  • setLeftPos(value?: string | number, unit?: UNIT): Widget

  • The left property participates in setting the horizontal position of a positioned element. It has no effect on non-positioned elements.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setMaxHeight

  • setMaxHeight(value?: string | number, unit?: UNIT): Widget

  • Sets max height of the widget.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setMaxSize

  • setMaxSize(width?: string | number, height?: string | number, unit?: UNIT): Widget

  • Sets max width and max height of the widget.

    Parameters

    • Optional width: string | number
    • Optional height: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setMaxWidth

  • setMaxWidth(value?: string | number, unit?: UNIT): Widget

  • Sets max width of the widget.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setMinHeight

  • setMinHeight(value?: string | number, unit?: UNIT): Widget

  • Sets min height of the widget.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setMinSize

  • setMinSize(width?: string | number, height?: string | number, unit?: UNIT): Widget

  • Sets min width and min height of the widget.

    Parameters

    • Optional width: string | number
    • Optional height: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setMinWidth

  • setMinWidth(value?: string | number, unit?: UNIT): Widget

  • Sets min width of the widget.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setOpacity

  • setOpacity(value?: number): Widget

  • Sets the opacity of an widget. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

    Parameters

    • Optional value: number

    Returns Widget

    • Itself.

setOrigin

  • setOrigin(x?: number | "center" | "left" | "right", y?: number | "center" | "top" | "bottom", unit?: UNIT): Widget

  • Sets the rotation origin. Clears if nothing is passed.

    Parameters

    • Optional x: number | "center" | "left" | "right"
    • Optional y: number | "center" | "top" | "bottom"
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setOverflow

  • Sets the desired behavior for an element's overflow. Clears if nothing is passed.

    Parameters

    Returns Widget

    • Itself.

setPlacement

setPointerInteraction

  • setPointerInteraction(value?: "auto" | "none"): Widget

  • Enables or disables cursor interaction for this element.

    Parameters

    • Optional value: "auto" | "none"

    Returns Widget

    • Itself.

setPosition

  • The position property sets how an element is positioned in a document. The setTopPos, setRightPos, setBottomPos, and setLeftPos properties determine the final location of positioned elements.

    Parameters

    Returns Widget

    • Itself.

setProperty

  • setProperty(property: string, value: any): Widget

  • Adds given propery to widget's DOM object.

    Parameters

    • property: string
    • value: any

    Returns Widget

setRatio

  • setRatio(ratio?: "1x1" | "4x3" | "16x9" | "21x9"): Widget

  • Manages the aspect ratios of content. Width needs to be defined.

    Parameters

    • Optional ratio: "1x1" | "4x3" | "16x9" | "21x9"

    Returns Widget

    • Itself.

setResizable

  • setResizable(value?: string): Widget

  • Sets the resizing methot of layout. The resize property does not apply to inline elements or to block elements where overflow="visible". So, make sure that overflow is set to "scroll", "auto", or "hidden".

    Parameters

    • Optional value: string

    Returns Widget

    • Itself.

setRightPos

  • setRightPos(value?: string | number, unit?: UNIT): Widget

  • The right property participates in setting the horizontal position of a positioned element. It has no effect on non-positioned elements.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setRound

  • setRound(value?: "start" | "end" | "top" | "bottom" | "all" | "circle" | "pill", size?: 0 | 1 | 2 | 3 | 4 | 5): Widget

  • Sets or removes round corners.

    Parameters

    • Optional value: "start" | "end" | "top" | "bottom" | "all" | "circle" | "pill"
    • Optional size: 0 | 1 | 2 | 3 | 4 | 5

    Returns Widget

    Itsellf

setScrollLeft

  • setScrollLeft(value: number): Widget

  • Sets the number of pixels that an element's content is scrolled from its left edge.

    Parameters

    • value: number

    Returns Widget

    Itself

setScrollTop

  • setScrollTop(value: number): Widget

  • Sets the number of pixels that an element's content is scrolled vertically.

    Parameters

    • value: number

    Returns Widget

    Itself

setShadow

  • setShadow(value?: "sm" | "md" | "lg" | "xl"): Widget

  • Sets shadow of the widget.

    Parameters

    • Optional value: "sm" | "md" | "lg" | "xl"

    Returns Widget

    • Itself.

setSize

  • setSize(width?: string | number, height?: string | number, unit?: UNIT): Widget

  • Sets width and height of the widget.

    Parameters

    • Optional width: string | number
    • Optional height: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setSpace

  • setSpace(...args: string[]): Widget

  • The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

    Where property is one of:

    • m - for classes that set margin
    • p - for classes that set padding

      Where sides is one of:
    • t - for classes that set margin-top or padding-top
    • b - for classes that set margin-bottom or padding-bottom
    • s - for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
    • e - for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
    • x - for classes that set both *-left and *-right
    • y - for classes that set both *-top and *-bottom
    • blank - for classes that set a margin or padding on all 4 sides of the element

      Where size is one of:
    • 0 - for classes that eliminate the margin or padding by setting it to 0
    • 1 - (by default) for classes that set the margin or padding to $spacer * .25
    • 2 - (by default) for classes that set the margin or padding to $spacer * .5
    • 3 - (by default) for classes that set the margin or padding to $spacer
    • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
    • 5 - (by default) for classes that set the margin or padding to $spacer * 3
    • auto - for classes that set the margin to auto
    example
    myWidget.setSpace("m-2", "ps-1")

    Parameters

    • Rest ...args: string[]

    Returns Widget

    • Itself.

setStyle

  • setStyle(type: string, value: any): Widget

  • Set a specific style of an element using different CSS properties.

    example
    myWidget.setStyle("backgroundColor", "white")

    Parameters

    • type: string
    • value: any

    Returns Widget

setText

  • setText(value?: string): Widget

  • Sets the inner text of the widget.

    Parameters

    • Optional value: string

    Returns Widget

    • Itself.

setTextBreak

  • setTextBreak(value?: boolean): Widget

  • Prevent long strings of text from breaking your components.

    Parameters

    • value: boolean = true

    Returns Widget

    Itelf

setTextColor

  • Sets the text color. Reset inherits the color from its parent. None removes color class.

    Parameters

    Returns Widget

    • Itself.

setTextDecoration

  • setTextDecoration(value?: "none" | "underline" | "line-through"): Widget

  • Sets text decoration style.

    Parameters

    • Optional value: "none" | "underline" | "line-through"

    Returns Widget

    • Itself.

setTextInteraction

  • setTextInteraction(value?: "auto" | "all" | "none"): Widget

  • Sets the selectable state of the widget's inner text.

    Parameters

    • Optional value: "auto" | "all" | "none"

    Returns Widget

    • Itself.

setTextLineHeight

  • setTextLineHeight(value?: "sm" | "lg" | "1" | "base"): Widget

  • Sets text line height.

    Parameters

    • Optional value: "sm" | "lg" | "1" | "base"

    Returns Widget

    • Itself.

setTextOverflow

  • setTextOverflow(value?: "clip" | "ellipsis"): Widget

  • Sets text overflow behavior.

    Parameters

    • Optional value: "clip" | "ellipsis"

    Returns Widget

    • Itself.

setTextShadow

  • setTextShadow(value?: "sm" | "md" | "lg", color?: string): Widget

  • Sets text shadow.

    Parameters

    • Optional value: "sm" | "md" | "lg"
    • color: string = "#000000"

    Returns Widget

    • Itself.

setTextTransform

  • setTextTransform(value?: "lowercase" | "uppercase" | "capitalize"): Widget

  • Parameters

    • Optional value: "lowercase" | "uppercase" | "capitalize"

      { "lowercase" | "uppercase" | "capitalize" | "none" }

    Returns Widget

    • Self.

setTextWrap

  • setTextWrap(value?: "wrap" | "nowrap"): Widget

  • Parameters

    • Optional value: "wrap" | "nowrap"

      { "wrap" | "nowrap" | "none" }

    Returns Widget

    • Self.

setTooltip

  • setTooltip(content?: string, options?: { animation?: boolean; delay?: number; offset?: [number, number]; onHide?: () => any; onShow?: () => any; placement?: "left" | "right" | "top" | "bottom" | "auto"; title?: string; trigger?: "click" | "hover" | "focus" | "manual" }): Widget

  • Adds tooltip to given position. Existing tooltip will be removed if title is not given.

    Parameters

    • Optional content: string
    • Optional options: { animation?: boolean; delay?: number; offset?: [number, number]; onHide?: () => any; onShow?: () => any; placement?: "left" | "right" | "top" | "bottom" | "auto"; title?: string; trigger?: "click" | "hover" | "focus" | "manual" }
      • Optional animation?: boolean

        Apply a CSS fade transition to the popover

      • Optional delay?: number

        Delay showing the popover (ms)

      • Optional offset?: [number, number]

        Offset of the popover relative to its target

      • Optional onHide?: () => any
          • (): any

          • Returns any

      • Optional onShow?: () => any
          • (): any

          • Returns any

      • Optional placement?: "left" | "right" | "top" | "bottom" | "auto"

        How to position the popover { "top" | "bottom" | "right" | "left" | "auto" }

      • Optional title?: string
      • Optional trigger?: "click" | "hover" | "focus" | "manual"

        How popover is triggered { "click" | "hover" | "focus" | "manual" }

    Returns Widget

    • Itself.

setTopPos

  • setTopPos(value?: string | number, unit?: UNIT): Widget

  • The top property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

setTransform

  • setTransform(value?: string): Widget

  • The transform CSS property lets you rotate, scale, skew, or translate an element.

    Parameters

    • Optional value: string

    Returns Widget

    • Itself.

setVisibility

  • setVisibility(value?: boolean): Widget

  • Control the visibility of elements, without modifying their display, with visibility utilities. Invisible widgets still take up space in the page.

    Parameters

    • Optional value: boolean

    Returns Widget

    • Itself.

setWidth

  • setWidth(value?: string | number, unit?: UNIT): Widget

  • Sets width of the widget.

    Parameters

    • Optional value: string | number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

setZIndex

  • setZIndex(value?: number): Widget

show

showTooltip

shrink

skew

  • Defines a transformation that skews an element on the 2D plane.

    example
    myWidget.skew(.2, .4, "rad")

    Parameters

    • Optional x: number
    • Optional y: number
    • unit: ANGLE = "deg"

    Returns Widget

    • Itself.

stretch

  • Stretches widget to parent width and height. Margings should not be set to be able to work properly.

    Parameters

    Returns Widget

    • Itself.

stretchX

  • Stretches widget to parent width. Margings should not be set to be able to work properly.

    Parameters

    Returns Widget

    • Itself.

stretchY

  • Stretches widget to parent height. Margings should not be set to be able to work properly.

    Parameters

    Returns Widget

    • Itself.

translate

  • translate(x?: number, y?: number, unit?: UNIT): Widget

  • Repositions an element in the horizontal and/or vertical directions

    example
    myWidget.translate(100, 80)

    Parameters

    • Optional x: number
    • Optional y: number
    • unit: UNIT = "px"

    Returns Widget

    • Itself.

translateMiddle

  • translateMiddle(value?: "clear" | "both" | "x" | "y"): Widget

  • Applies the transformations translateX(-50%) and translateY(-50%) to the element which, in combination with the edge positioning utilities, allows you to absolute center an element.

    Parameters

    • value: "clear" | "both" | "x" | "y" = "both"

    Returns Widget

    • Itself.

truncateText

  • truncateText(value?: boolean): Widget

unfocus

Generated using TypeDoc