cloud-ui.vusion
Version:
Vusion Cloud UI
97 lines (85 loc) • 2.94 kB
Markdown
### 基本用法
``` html
<u-linear-layout gap="small">
<span><u-avatar></u-avatar> 王小明</span>
<span><u-avatar type="1"></u-avatar> 李小雪</span>
<span><u-avatar type="2"></u-avatar> 李小雪</span>
<span><u-avatar type="3"></u-avatar> 王小明</span>
<span><u-avatar type="4"></u-avatar> 王小明</span>
<span><u-avatar type="5"></u-avatar> 王小明</span>
<span><u-avatar type="6"></u-avatar> 王小明</span>
</u-linear-layout>
```
### 大小扩展
``` html
<u-linear-layout direction="vertical">
<div><u-avatar size="mini"></u-avatar> 王小明（迷你）</div>
<div><u-avatar size="small"></u-avatar> 王小明（小）</div>
<div><u-avatar></u-avatar> 王小明（正常）</div>
<div><u-avatar size="large"></u-avatar> 王小明（大）</div>
<div><u-avatar size="huge"></u-avatar> 王小明（大）</div>
</u-linear-layout>
```
### 自定义图片
``` html
<u-avatar><img src="../assets/music.png"></u-avatar> 多多
```
### 配合 UBadge 使用
```html
<u-badge :value="3" corner dot>
<u-avatar></u-avatar>
</u-badge>
<br/><br/>
<u-badge :value="120" :max="99" corner>
<u-avatar></u-avatar>
</u-badge>
```
### 配合 UNavbar 使用
``` html
<u-navbar>
<u-navbar-item to="/components">组件</u-navbar-item>
<u-navbar-item>概念</u-navbar-item>
<u-navbar-item disabled>指令</u-navbar-item>
<u-navbar-divider></u-navbar-divider>
<u-navbar-item>配置</u-navbar-item>
<div slot="right">
<u-navbar-item>
<u-avatar></u-avatar> 王小明
</u-navbar-item>
</div>
</u-navbar>
```
``` html
<u-navbar>
<u-navbar-item to="/components">组件</u-navbar-item>
<u-navbar-item>概念</u-navbar-item>
<u-navbar-item disabled>指令</u-navbar-item>
<u-navbar-divider></u-navbar-divider>
<u-navbar-item>配置</u-navbar-item>
<u-navbar-dropdown slot="right">
<span slot="title"><u-avatar></u-avatar> 王小明</span>
<u-navbar-menu>
<u-navbar-menu-item>Basic</u-navbar-menu-item>
<u-navbar-menu-item>Layout</u-navbar-menu-item>
<u-navbar-menu-item>Navigation</u-navbar-menu-item>
</u-navbar-menu>
</u-navbar-dropdown>
</u-navbar>
```
``` html
<u-navbar>
<u-navbar-item to="/components">组件</u-navbar-item>
<u-navbar-item>概念</u-navbar-item>
<u-navbar-item disabled>指令</u-navbar-item>
<u-navbar-divider></u-navbar-divider>
<u-navbar-item>配置</u-navbar-item>
<u-navbar-dropdown slot="right">
<span slot="title"><u-badge :value="120" :max="99" corner><u-avatar></u-avatar></u-badge> 王小明</span>
<u-navbar-menu>
<u-navbar-menu-item>Basic</u-navbar-menu-item>
<u-navbar-menu-item>Layout</u-navbar-menu-item>
<u-navbar-menu-item>Navigation</u-navbar-menu-item>
</u-navbar-menu>
</u-navbar-dropdown>
</u-navbar>
```