Popup

Demo

Install

import React from 'react';
import { Popup } from 'vant-react';

Usage

Every popup should have its own state.

const [centerPopup, setCenterPopup] = useState(false);

<Button click={() => {setCenterPopup(true)}}/>
<Popup isActive={centerPopup} setActive={setCenterPopup} />

Type

<Popup type='top'/>
<Popup type='bottom'/>
<Popup type='left'/>
<Popup type='right'/>

Size

<Popup size={{width:'200px', height:'200px'}} />
<Popup size={{width:'50vwx', height:'60vh'}} />

Content

<Popup text={{
          text: 'It`s a popup',
          color: '#666',
          fontSize: '30px',
          textAlign: 'center'
        }} />
<Popup content={<Component />} />

CloseIcon

<Popup closeable />
<Popup closeable closeIcon={{ name: 'close', size: '20px' }} />
<Popup closeable closeIconPosition={{ top: '40px', left: '40px' }} />

Round Corner

<Popup borderRadius='50px' />

Custom Color

<Popup color='#b90000' />
<Popup color='rgba(234, 123, 232,0.4)' />

Action

<Popup text={{
          text: 'Click me',
          color: '#000',
          fontSize: '30px',
          textAlign: 'center'
        }}
       size={{width:'300px', height:'60vh'}}
       click={(e) => { alert(e) }} />

API

Props

Event

PreviousNavbarNextField

Last updated