Document Component

Lib

Bubble Element

no description

importimport BubbleElement from "@lib/component/BubbleElement";

Examples

tranformOrigin
tranformOrigin

Clone Element

Props

Property
Description
Type
Default
backdrop
Hiển thị backdrop hoặc ẩn backdrop
boolean
true
backdropBlur
Value blur backdrop
number
-
backdropColor
Màu của backdrop
string
rgba(0,0,0,0.4)
onBackdropPress
Function chạy khi click vào backdrop
function()
empty function
openDuration
Thời gian mở popup (đơn vị: s)
number
0.3
closeDuration
Thời gian đóng popup (đơn vị: s)
number
0.25
lazyload
Component children chỉ được mount khi Popup mở
boolean
-
unmountOnHide
unmount component khi popup đóng
boolean
-
onOpenEnd
Function chạy khi popup mở hoàn toàn
function()
empty function
onCloseEnd
Function chạy khi popup đóng hoàn toàn
function()
empty function
elementScale
Value khi muốn scale Element khi bubbleElement open
number
1
transformOrigin
Giống với tranformOrigin trong css
TransformOrigin
top left

Handler

Method: open: ( ) => void

no description

Method: close: ( ) => void

no description

Method: isVisible: ( ) => boolean

no description

Method: isOpening: ( ) => boolean

no description

Method: isClosing: ( ) => boolean

no description

BubbleElement.Element

Thành phần hiển thị Element Thông thường. Thành phần này sẽ được clone lại toàn để nổi lên nếu không có CloneElement

Property
Description
Type
Default
className
string
-
onClick
Function run khi click vào Element
(open: () => void, close: () => void, elementRef: RefObject<HTMLElement>) => void
() => void

BubbleElement.CloneElement

Thành phần Custom Element nổi lên của BubbleComponent

Property
Description
Type
Default
className
string
-
onClick
Function run khi click vào Clone Element
(open: () => void, close: () => void, elementRef: RefObject<HTMLElement>) => void
() => void