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

## view

> [VERSION] Base Library >= 2.10.0

### Description

View container, the most basic layout component, similar to HTML div

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `hover-class` | `string` | No | - | Specify the pressed style class; when hover-class="none", there is no press state effect |
| `hover-stop-propagation` | `boolean` | No | `false` | Whether to prevent ancestor nodes from showing the press state |
| `hover-start-time` | `number` | No | `20` | Delay before the pressed state appears after holding, in ms |
| `hover-stay-time` | `number` | No | `70` | Time to retain the pressed state after release, in ms |

### Examples

#### Basic layout

*index.tyml*

```xml
// index.tyml
<view class="container">
  <view class="item" bind:tap="onTap" data-index="1">Item 1</view>
  <view class="item" bind:tap="onTap" data-index="2">Item 2</view>
  <view class="item" bind:tap="onTap" data-index="3">Item 3</view>
</view>
<view class="column-container">
  <view class="row-item">Vertical A</view>
  <view class="row-item">Vertical B</view>
</view>
```

*index.tyss*

```css
.container {
  padding: 20rpx;
}
.box {
  background: #f5f5f5;
  padding: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}
.row {
  display: flex;
}
.col {
  flex: 1;
  background: #e0e0e0;
  padding: 20rpx;
  text-align: center;
  font-size: 28rpx;
}
.col:first-child {
  margin-right: 10rpx;
}
```

*index.js*

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

#### Press state effect

*index.tyml*

```xml
// index.tyml
<view
  class="hover-box"
  hover-class="hover-active"
  hover-start-time="{{50}}"
  hover-stay-time="{{300}}"
>
  Press and hold to view pressed state (custom delay)
</view>
<view class="outer" hover-class="outer-hover">
  <view
    class="inner"
    hover-class="inner-hover"
  >
    Inner pressed state
  </view>
</view>
```

*index.tyss*

```css
.demo {
  padding: 40rpx;
}
.btn {
  background: #007aff;
  color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  text-align: center;
  font-size: 28rpx;
}
.btn-hover {
  opacity: 0.6;
}
```

*index.js*

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