Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Blockquote

Hierarchy

Index

Constructors

Methods

Constructors

constructor

  • new Blockquote(text?: string, source?: string): Blockquote

Methods

addAttribute

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

addChild

addChildren

addClass

addEventListener

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

  • 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 Blockquote

    • 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 Blockquote

    • Itself.

alignText

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 Blockquote

    • 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 Blockquote

    • Itself.

fixPosition

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

  • 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 Blockquote

    • Itself.

focus

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

    Returns Blockquote

    • 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

getChildren

getClientHeight

  • getClientHeight(): number

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

getDom

  • getDom(): HTMLElement

  • Returns html dom element of the widget.

    Returns HTMLElement

    Html dom element of the widget.

getHeight

  • getHeight(): string

getInnerHTML

  • getInnerHTML(): any

getMaxHeight

  • getMaxHeight(): string

getMaxWidth

  • getMaxWidth(): string

getMinHeight

  • getMinHeight(): string

getMinWidth

  • getMinWidth(): string

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

getParent

  • getParent(): undefined | 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

getTransform

  • getTransform(): string

getWidth

  • getWidth(): string

grow

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

  • 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 Blockquote

    • Itself.

hasAttribute

  • hasAttribute(attribute: string): boolean

hasChild

  • hasChild(child: Widget): 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

isHidden

  • isHidden(): boolean

isInViewport

  • isInViewport(): boolean

removeAttribute

removeChild

removeChildAt

removeClass

removeEventListener

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

removeSpace

removeStyle

render

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 Blockquote

    • Itself.

runOnMount

  • 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 Blockquote

    • Itself.

saturate

scale

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

    example
    myWidget.scale(2, 2)

    Parameters

    • Optional x: number
    • Optional y: number

    Returns Blockquote

    • Itself.

scrollIntoView

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

  • Scrolls widget into view.

    example
    myWidget.scrollIntoView()

    Parameters

    • Optional alignToTop: boolean | ScrollIntoViewOptions

    Returns void

    • Itself.

setBgColor

setBgColorState

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

setBgGradient

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

  • 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 Blockquote

    • Itself.

setBgHoverColor

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

setBgImage

  • Sets background images on the widget.

    Parameters

    • Optional value: string

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

    Returns Blockquote

    • Itself.

setBgPosition

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

  • 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 Blockquote

    • Itself.

setBgRepeat

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

  • 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 Blockquote

    • Itself.

setBgSize

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

  • 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 Blockquote

    • Itself.

setBlur

setBorder

  • 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 Blockquote

    • Itself.

setBottomPos

setBrightness

setChild

setClass

setContrast

setCursor

setDisplay

setDisplayOrder

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

setDropShadow

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

  • 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 Blockquote

    • Itself.

setEditable

setFontItalic

setFontMonospace

setFontSize

setFontWeight

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

setGrayscale

setHeight

setHue

setInnerHTML

setLeftPos

setMaxHeight

setMaxSize

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

setMaxWidth

setMinHeight

setMinSize

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

setMinWidth

setOpacity

  • 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 Blockquote

    • Itself.

setOrigin

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

  • 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 Blockquote

    • Itself.

setOverflow

setPlacement

setPointerInteraction

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

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 Blockquote

    • Itself.

setProperty

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

setRatio

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

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

    Parameters

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

    Returns Blockquote

    • Itself.

setResizable

  • 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 Blockquote

    • Itself.

setRightPos

setRound

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

  • Sets or removes round corners.

    Parameters

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

    Returns Blockquote

    Itsellf

setScrollLeft

setScrollTop

setShadow

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

setSize

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

setSpace

  • 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 Blockquote

    • Itself.

setStyle

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

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

    Parameters

    • type: string
    • value: any

    Returns Blockquote

setText

setTextBreak

setTextColor

setTextDecoration

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

setTextInteraction

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

setTextLineHeight

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

setTextOverflow

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

setTextShadow

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

setTextTransform

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

setTextWrap

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

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" }): Blockquote

  • 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 Blockquote

    • Itself.

setTopPos

setTransform

setVisibility

  • 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 Blockquote

    • Itself.

setWidth

setZIndex

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 Blockquote

    • Itself.

stretch

stretchX

stretchY

translate

  • 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 Blockquote

    • Itself.

translateMiddle

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

  • 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 Blockquote

    • Itself.

truncateText

unfocus

Generated using TypeDoc