---
name: "page-container"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "page-container - Page container"
---

## page-container

> [VERSION] Base Library >= 2.10.0

### Description

Page container that can pop up an overlay from the bottom, top, or center

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `show` | `boolean` | No | `false` | Whether to show the container |
| `duration` | `number` | No | `300` | Animation duration, in milliseconds |
| `z-index` | `number` | No | `100` | z-index level |
| `overlay` | `boolean` | No | `true` | Whether to show a mask overlay |
| `position` | `string` | No | `"bottom"` | Popup position. Options: top, bottom, right, center |
| `round` | `boolean` | No | `false` | Whether to show rounded corners |
| `overlay-style` | `string` | No | `""` | Custom overlay style |
| `custom-style` | `string` | No | `""` | Custom popup style |

#### Events

| Event | Type | Description |
| --- | --- | --- |
| `beforeenter` | `(event: Object) => void` | Triggered before enter |
| `enter` | `(event: Object) => void` | Triggered after enter |
| `afterenter` | `(event: Object) => void` | Triggered after enter completes |
| `beforeleave` | `(event: Object) => void` | Triggered before leave |
| `leave` | `(event: Object) => void` | Triggered after leave |
| `afterleave` | `(event: Object) => void` | Triggered after exit completes |
| `clickoverlay` | `(event: Object) => void` | Triggered when the overlay is clicked |

**beforeenter callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"beforeenter"` |  |

**enter callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"enter"` |  |

**afterenter callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"afterenter"` |  |

**beforeleave callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"beforeleave"` |  |

**leave callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"leave"` |  |

**afterleave callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"afterleave"` |  |

**clickoverlay callback object**

| Field | Type | Description |
| --- | --- | --- |
| `type` | `"clickoverlay"` |  |

### Examples

#### Bottom popup with mask

*index.tyml*

```xml
// index.tyml
<button bind:tap=\"showPopup\">Open bottom popup</button>
<page-container
  show=\"{{visible}}\"
  position=\"bottom\"
  round
  overlay
  duration=\"{{300}}\"
  bind:clickoverlay=\"hidePopup\"
>
  <view class=\"popup-content\">
    <text class=\"popup-title\">Bottom popup</text>
    <text class=\"popup-desc\">Tap overlay to close</text>
    <button bind:tap=\"hidePopup\">Close</button>
  </view>
</page-container>
```

*index.tyss*

```css
.popup-content {
  padding: 40rpx;
  min-height: 300rpx;
  background-color: #fff;
}
.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}
.popup-desc {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 32rpx;
}
```

*index.js*

```javascript
Page({
  data: { visible: false },
  showPopup() {
    this.setData({ visible: true });
  },
  hidePopup() {
    this.setData({ visible: false });
  },
});
```

#### Custom styles and lifecycle

*index.tyml*

```xml
// index.tyml
<button bind:tap=\"showRight\">Right panel</button>
<page-container
  show=\"{{visible}}\"
  position=\"right\"
  round
  overlay
  z-index=\"{{200}}\"
  duration=\"{{400}}\"
  overlay-style=\"background-color: rgba(0,0,0,0.5)\"
  custom-style=\"background-color: #f5f5f5\"
  bind:beforeenter=\"onBeforeEnter\"
  bind:afterenter=\"onAfterEnter\"
  bind:beforeleave=\"onBeforeLeave\"
  bind:afterleave=\"onAfterLeave\"
  bind:clickoverlay=\"hideRight\"
>
  <view class=\"panel\">
    <text class=\"panel-title\">Right panel</text>
    <button bind:tap=\"hideRight\">Close</button>
  </view>
</page-container>
```

*index.tyss*

```css
.panel {
  width: 500rpx;
  padding: 40rpx;
  min-height: 100vh;
}
.panel-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 32rpx;
}
```

*index.js*

```javascript
Page({
  data: { visible: false },
  showRight() {
    this.setData({ visible: true });
  },
  hideRight() {
    this.setData({ visible: false });
  },
  onBeforeEnter() {
    console.log('Before enter');
  },
  onAfterEnter() {
    console.log('After enter');
  },
  onBeforeLeave() {
    console.log('Before leave');
  },
  onAfterLeave() {
    console.log('After leave');
  },
});
```