Skip to content

V99 Document

V99Inform

V99Inform¶

V99Inform: Notifications are used to notify users of important changes or newly changed statuses. Use this component if you need to communicate with the user by floating a message.

I. Props¶

Name	Type	Default	Description
title	string	-	Set V99Inform title
message	string	-	Set V99Inform message
type	low \| medium \| high \| custom	medium	Set V99Inform type
width	string \| number \| undefined	100%	Set V99Inform width
icon	IconCDNType	-	Set icon (only use for custom type)
iconSize	V99IconSizeType	-	Set icon size (only use for custom type)
bgColor	ColorValue	-	Set background color (only use for custom type)
borderColor	ColorValue	-	Set border color (only use for custom type)
textAlign	'center' \| 'justify' \| 'auto' \| 'left' \| 'right' \| undefined	'center'	Set text message align (only use for custom type)

II. Import¶

import { V99Inform } from 'v99-kits'

III. V99Inform list:¶

V99Inform low
V99Inform medium
V99Inform high
V99Inform custom

1. V99Inform low¶

Example¶

        <V99Inform
            marginBottom={10}
            title={'Không nên chụp màn hình!'}
            message={'Ký để xác minh bạn là chủ sở hữu của ví, hành động này không tốn phí.'} 
            type={'low'}>
        </V99Inform>
        <V99Inform 
            marginBottom={10} 
            message={'Ký để xác minh bạn là chủ sở hữu của ví, hành động này không tốn phí.'} 
            type={'low'}>
        </V99Inform>

Demo¶

Demo

2. V99Inform medium¶

Example¶

        <V99Inform
            marginBottom={10}
            title={'Không nên chụp màn hình!'}
            message={'Ký để xác minh bạn là chủ sở hữu của ví, hành động này không tốn phí.'} 
            type={'medium'}>
        </V99Inform>
        <V99Inform 
            marginBottom={10} 
            message={'Ký để xác minh bạn là chủ sở hữu của ví, hành động này không tốn phí.'} 
            type={'medium'}>
        </V99Inform>

Demo¶

Demo1

3. V99Inform high¶

Example¶

        <V99Inform
            marginBottom={V99Spacing.s12}
            title={'Không nên chụp màn hình!'}
            message={'Ký để xác minh bạn là chủ sở hữu của ví, hành động này không tốn phí.'} 
            type={'high'}>
        </V99Inform>
        <V99Inform 
            marginBottom={V99Spacing.s12} 
            message={'Ký để xác minh bạn là chủ sở hữu của ví, hành động này không tốn phí.'} 
            type={'high'}>
        </V99Inform>

Demo¶

Demo2 ``

4. V99Inform custom¶

Example¶

<V99Inform
    marginBottom={V99Spacing.s8}
    message={
        'Bạn cần hoán đổi tối thiểu 1,000,000 VIC hoặc chọn chế độ thông thường để tiếp tục'
    }
    type={'custom'}
    icon={'system_warning_info_color_fill'}
    bgColor={V99Colors.red90}
    borderColor={V99Colors.red70}
    textAlign={'left'}
/>

Demo¶

Demo2