Skip to content

V99 Document

V99Dialog

V99Dialog¶

Show dialog.

I. Props¶

Name	Type	Default	Description
title	string	-	Set title
message	string	-	Set message
buttonText	string	OK	Set text for primary button
showTime	number	-	Set duration for dialog display
backdropForClosing	boolean	-	If true can close dialog when press outside
onClose	() => void	-	Handle callback close dialog when press on secondary button or close button
onPress	() => void	-	Handle callback when press primary button
showCancelButton	boolean	-	Show secondary button under primary button
cancelButtonText	string	-	Set text for secondary button
icon	IconCDNType	-	Set icon
type	'success' \| 'error' \| 'warning' \| 'custom'	'custom'	Set type

II. Usage¶

import { V99Dialog } from 'v99-kits'

III. Dialog list:¶

Dialog non description
Dialog 1 CTA
Dialog 2 CTA
Dialog without icon

1. Dialog non description¶

Example¶

    <V99Dialog
        title={'Cập nhật thất bại'}
        backdropForClosing={true}
        buttonText={'Thử lại'}
        type={'error'}
    />

Demo¶

Demo

2. Dialog 1 CTA¶

Example¶

      <V99Dialog
        title={'Cho phép truy cập thông báo của bạn'}
        message={
            'Vui lòng cho phép truy cập thông báo của bạn để sự dụng tính năng này'
        }
        backdropForClosing={true}
        buttonText={'Kích hoạt'}
        type={'warning'}
      />

Demo¶

Demo1

3. Dialog 2 CTA¶

Example¶

      <V99Dialog
        title={'Cập nhật phiên bản mới'}
        message={
            'Phiên bản mới hiện đang có. Vui lòng cập nhật phiên bản mới ngay bây giờ!'
        }
        backdropForClosing={true}
        buttonText={'Cập nhật'}
        showCancelButton={true}
        cancelButtonText={'Bỏ qua'}
        icon={'system_download_color_fill'}
        type={'custom'}
      />

Demo¶

Demo2

4. Dialog without icon¶

Example¶

      <V99Dialog
        title={'Cập nhật phiên bản mới'}
        message={
            'Phiên bản mới hiện đang có. Vui lòng cập nhật phiên bản mới ngay bây giờ!'
        }
        backdropForClosing={true}
        buttonText={'Cập nhật'}
        showCancelButton={true}
        cancelButtonText={'Bỏ qua'}
        type={'custom'}
      />

Demo¶

Demo3