# Popup

### [Demo](https://vant.bctc.io/?path=/story/popup--default-popup)

#### Install

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

## Usage

{% hint style="info" %}
Every popup should have its own state.
{% endhint %}

```
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

| Attribute           | Description                                                                                        | Type                                                                           | Default  | Required   |
| ------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -------- | ---------- |
| `type`              | Can be set to `left` `right` `top` `bottom`                                                        | ***string***                                                                   | `center` | *optional* |
| `text`              | <p>Text to be displayed in popup ,<code>{text,color,size,</code></p><p><code>textAlign}</code></p> | ***object***                                                                   | -        | *optional* |
| `color`             | Popup background-color, in hex value:`#b90000`, in gradient value in rgba:`rgb(210,210,210,0.4)`   | ***string***                                                                   | -        | *optional* |
| `borderRadius`      | round corner                                                                                       | ***string***                                                                   | -        | *optional* |
| `size`              | popup size , { width: '10px', height: '100vh' }                                                    | ***object***                                                                   | -        | *optional* |
| `padding`           | <p>content padding ,  </p><p><code>10px</code> <code>0 20px</code> </p>                            | ***string***                                                                   | -        | *optional* |
| `content`           | Component to be displayed in popup                                                                 | <p><em><strong>React</strong></em></p><p><em><strong>Element</strong></em></p> | -        | *optional* |
| `closeable`         | show close icon in popup                                                                           | ***boolean***                                                                  | `false`  | *optional* |
| `closeIcon`         | custom your close icon ,`{iconName, iconSize}`                                                     | ***object***                                                                   | -        | *optional* |
| `closeIconPosition` | `Ex: { top: '40px', left: '40px' }`                                                                | ***object***                                                                   | -        | *optional* |

#### Event

| Event   | Description                                                                  | Arguments      |
| ------- | ---------------------------------------------------------------------------- | -------------- |
| `click` | <p>Triggered when click text in popup </p><p>and not disabled or loading</p> | *event: Event* |