Document Component

Lib

Modal

Description

importimport Modal from "@lib/component/Modal"

Examples

Basic

Cách mở modal cơ bản nhất

Dynamic Postion

Mở Modal nâng cao

Props

Property
Description
Type
Default
backdropBlur
value blur backdrop
number
-
backdropColor
color backdrop
string
rgba(0,0,0,0.4)
onBackdropPress
function run when click backdrop
function()
empty function
className
className Modal
string
-
children
Component inside modal
ReactNode
-
openDuration
Time Open Modal
number
0.3
closeDuration
Time Close Modal
number
0.25
lazyload
Component children chỉ được mount khi Modal mở
boolean
-
unmountOnHide
unmount component when modal close
boolean
-
onOpenEnd
function run when modal is completely opened
function()
empty function
onCloseEnd
function run when modal is completely closed
function()
empty function
borderAnimateModal
Giá trị borderRadius khi thực hiện animate
number
0
initalScale
giá trị scale ban đầu của children
number
0.7

Handler

Method: open: ( parameter1 ) => void

Method có tác dụng để mở Modal

Parameter 1: Object

Property
Description
Type
Default
elementRef
Tham chiếu của element để tính toán điểm bắt đầu của animate
RefObject<HTMLElement>
-
elementLayout
Toạ độ bất bất kỳ để tính toán điểm bắt đầu của animate nếu không truyền vào elementRef
{x: number, y: number, width: number, height: number}
-
options
- Tham số tính toán quãng đường. - xFactor: Khoảng cách từ tâm element đến tâm của màn hình theo trục x (Giá trị từ 0 đến 1 <=> 0 đến 100% khoảng cách). - yFactor: Khoảng cách từ tâm element đến tâm của màn hình theo trục y ((Giá trị từ 0 đến 1 <=> 0 đến 100% khoảng cách)). - InitialScale: Giá trị scale ban đầu của Modal
{xFactor: number, yFactor: number, initialScale: number}
xFactor: 1, yFactor: 1, initialScale: 0.7
Method: close: ( ) => void

Method có tác dụng đóng Modal