UAvatar4 头像
顶部导航栏或页面中局部使用的用户头像。扩展自 Proto UI 的 UAvatar 组件。
示例
基本用法
<u-linear-layout direction="vertical">
<div><u-avatar-4 shape="square"></u-avatar-4> 王小明</div>
</u-linear-layout>
大小扩展
<u-linear-layout direction="vertical">
<div><u-avatar-4 shape="square" size="mini"></u-avatar-4> 王小明(迷你)</div>
<div><u-avatar-4 shape="square" size="small"></u-avatar-4> 王小明(小)</div>
<div><u-avatar-4 shape="square"></u-avatar-4> 王小明(正常)</div>
<div><u-avatar-4 shape="square" size="large"></u-avatar-4> 王小明(大)</div>
<div><u-avatar-4 shape="square" size="huge"></u-avatar-4> 王小明(大)</div>
</u-linear-layout>
自定义图片
<u-avatar-4><img src="~proto-ui.vusion/src/components/u-avatar.vue/assets/music.png"></u-avatar-4> 多多
配合 UBadge 使用
<u-badge :value="3" corner dot>
<u-avatar-4></u-avatar-4>
</u-badge>
<br/><br/>
<u-badge :value="3" corner dot>
<u-avatar-4 shape="square"></u-avatar-4>
</u-badge>
<br/><br/>
<u-badge :value="120" :max="99" corner>
<u-avatar-4></u-avatar-4>
</u-badge>
<br/><br/>
<u-badge :value="120" :max="99" corner>
<u-avatar-4 shape="square"></u-avatar-4>
</u-badge>
配合 UNavbar 使用
<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-4 shape="square"></u-avatar-4> 王小明
</u-navbar-item>
</div>
</u-navbar>
<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-4 shape="square"></u-avatar-4> 王小明</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>
<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-4 shape="square"></u-avatar-4></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>
API
Props/Attrs
Prop/Attr | Type | Default | Description |
---|---|---|---|
shape | String | 'circle' |
形状。可选值:circle , square 两种类型 |
size | String | 'normal' |
头像大小。可选值:'mini' 、'small' 、'normal' 、'large' 、'huge' 。如需自定义大小,可以直接设置style="width: 40px; height: 40px;"
|
Slots
(default)
添加自定义图片或内容。