vant userect用法(一)
Vant UI 组件的用法详解
1. Button 按钮组件
基本用法
使用<van-button>标签可以创建一个按钮。可以通过设置type属性来设置按钮的类型，常用的类型有primary、info、warning和danger。
- 使用 `primary` 类型的按钮：
  ```html
  <van-button type="primary">主要按钮</van-button>
•使用 info 类型的按钮：
<van-button type="info">信息按钮</van-button>
•使用 warning 类型的按钮：
<van-button type="warning">警告按钮</van-button>
•使用 danger 类型的按钮：
<van-button type="danger">危险按钮</van-button>
```
按钮大小
按钮的大小可以通过设置size属性来调整，可选值有large、normal和small。
- 使用 `large` 大小的按钮：
  ```html
  <van-button size="large">大按钮</van-button>
•使用 normal 大小的按钮：
<van-button size="normal">普通按钮</van-button>
•使用 small 大小的按钮：
<van-button size="small">小按钮</van-button>
```
2. NavBar 导航栏组件
基本用法
NavBar 是一个顶部导航栏组件，可以设置标题、左侧和右侧的内容。
- 设置标题：
  ```html
  <van-nav-bar title="标题"></van-nav-bar>
•设置左侧内容：
<van-nav-bar left-texthtmlbutton属性="返回" left-arrow></van-nav-bar>
•设置右侧内容：
<van-nav-bar right-text="按钮" right-arrow></van-nav-bar>
•同时设置左侧和右侧内容：
<van-nav-bar title="标题" left-text="返回" right-text="按钮"></van-nav-bar>
```
固定在顶部
NavBar 默认是随页面滚动的，如果需要将其固定在顶部，可以设置fixed属性为true。
- 将 `NavBar` 固定在顶部：
  ```html
  <van-nav-bar title="标题" fixed></van-nav-bar>
```
以上是 Vant UI 中 Button 和 NavBar 两个组件的用法详解。在实际开发中，我们可以根据自己的需求选择合适的组件和属性来构建页面。请根据具体情况进行选择和使用。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。