---
name: "cover-view"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "cover-view - Text view overlaid on native components"
---

## cover-view

> [VERSION] Base Library >= 2.10.0

### Description

View container that overlays native components; can cover native components such as map, video, and canvas.


### Examples

#### Basic usage

*index.tyml*

```xml
// index.tyml
<map longitude="{{120.15}}" latitude="{{30.28}}" class="map">
  <cover-view class="cover">
    <text>Overlay content</text>
  </cover-view>
</map>
```

*index.tyss*

```css
.map {
  width: 100%;
  height: 400rpx;
}
.cover {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  padding: 10rpx 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 8rpx;
}
```

*index.js*

```javascript
Page({});
```

#### Overlay over video

*index.tyml*

```xml
// index.tyml
<video src="{{videoSrc}}" class="video">
  <cover-view class="cover-btn">
    <text>Custom button</text>
  </cover-view>
</video>
```

*index.tyss*

```css
.video {
  width: 100%;
  height: 400rpx;
}
.cover-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  padding: 10rpx 30rpx;
  background-color: rgba(0, 122, 255, 0.8);
  color: #fff;
  border-radius: 8rpx;
}
```

*index.js*

```javascript
Page({
  data: {
    videoSrc: 'https://images.tuyacn.com/rms-static/602542e0-48f8-11f1-95db-cfd3b8132c07-1778036702734.mp4',
  },
});
```


### FAQ

1. When you need to overlay other components on top of a native component, and the component is not used as a child node of the native component, you must wrap it with `cover-view` at the outermost layer. `cover-view` is not recommended in other scenarios.
2. Do not nest `cover-view` components. `cover-view` is only used as a wrapper tag overlaid on native components.
3. Do not use `cover-view` as a child node of native components.
4. It is recommended that child nodes of `cover-view` do not overflow the parent node.