Popup
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
Last updated