菜单指南规范组件资源
子菜单安装快速上手更新日志按钮 Button面包屑 Breadcrumb头像 Avatar提示框 Tooltip菜单 Menu消息框 Message多选框 Checkbox标签页 Tabs分页 Pagination日期选择器 Datepicker对话框 Modal步骤条 Steps表单 Form图标 Icon输入框 Input表格 Table

头像

基础用法

头像有三种样式可选。

M
M
M
1
2
3
<div class="woui-avatar">M</div>
<div class="woui-avatar woui-avatar-border">M</div>
<div class="woui-avatar woui-avatar-circle">M</div>

大小选择

头像有四种大小可选。

M
M
M
M


M
M
M
M


M
M
M
M
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="woui-avatar woui-avatar-mini">M</div>
<div class="woui-avatar woui-avatar-small">M</div>
<div class="woui-avatar">M</div>
<div class="woui-avatar woui-avatar-large">M</div>
<br><br>
<div class="woui-avatar woui-avatar-mini woui-avatar-border">M</div>
<div class="woui-avatar woui-avatar-small woui-avatar-border">M</div>
<div class="woui-avatar woui-avatar-border">M</div>
<div class="woui-avatar woui-avatar-large woui-avatar-border">M</div>
<br><br>
<div class="woui-avatar woui-avatar-mini woui-avatar-circle">M</div>
<div class="woui-avatar woui-avatar-small woui-avatar-circle">M</div>
<div class="woui-avatar woui-avatar-circle">M</div>
<div class="woui-avatar woui-avatar-large woui-avatar-circle">M</div>

颜色选择

可选择不同颜色背景。

M
M
M
M
M
1
2
3
4
5
<div class="woui-avatar woui-avatar-large woui-avatar-circle woui-avatar-red">M</div>
<div class="woui-avatar woui-avatar-large woui-avatar-circle woui-avatar-blue">M</div>
<div class="woui-avatar woui-avatar-large woui-avatar-circle woui-avatar-orange">M</div>
<div class="woui-avatar woui-avatar-large woui-avatar-circle woui-avatar-purple">M</div>
<div class="woui-avatar woui-avatar-large woui-avatar-circle woui-avatar-green">M</div>

不同类型

支持三种类型: 头像、Icon、以及字符。

M
1
2
3
<div class="woui-avatar woui-avatar-circle">M</div>
<div class="woui-avatar woui-avatar-circle"><i class="woui-icon icon-lock"></i></div>
<div class="woui-avatar woui-avatar-circle"><img src="http://img1.gtimg.com/ent/pics/9635/9635554.jpg"></div>

带徽标的头像

通常用于消息提示。

M
1
M
1
M
1
M
1
M
1


M
M
M
M
M
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-count">1</div>
</div>
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-count woui-avatar-blue">1</div>
</div>
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-count woui-avatar-green">1</div>
</div>
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-count woui-avatar-orange">1</div>
</div>
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-count woui-avatar-purple">1</div>
</div>
<br><br>
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-dot"></div>
</div>
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-dot woui-avatar-blue"></div>
</div>
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-dot woui-avatar-green"></div>
</div>
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-dot woui-avatar-orange"></div>
</div>
<div class="woui-avatar-badge">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-dot woui-avatar-purple"></div>
</div>

自动调整字符大小

对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。

MMM




MMM


1
2
3
4
5
6
7
8
9
<div id="woui-avatar1" class="woui-avatar woui-avatar-circle">MMM</div>
<br><br>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="muse()">变成Muse</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="charles()">变成Charles</button>
<br><br>
<div id="woui-avatar2" class="woui-avatar woui-avatar-border">MMM</div>
<br><br>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="muse2()">变成Muse</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="charles2()">变成Charles</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var test = document.querySelector('#avatar1');
avatar1 = new woUI.Avatar({
  el: test
});
function muse() {
  avatar1.change({
    text: 'muse',
    color: '#ff5150',
    textColor: 'white'
  })
}
function charles() {
  avatar1.change({
    text: 'Charles',
    color: '#3f4464',
    textColor: '#13ce66'
  })
}
var avatar2 = new woUI.Avatar({
  el: '#woui-avatar2'
});
function muse2() {
  avatar2.change({
    text: 'muse',
    color: '#ff5150',
    textColor: 'white'
  })
}
function charles2() {
  avatar2.change({
    text: 'Charles',
    color: '#3f4464',
    textColor: '#13ce66'
  })
}

根据不同的参数可以灵活调整样式。

M
1


1
2
3
4
5
6
7
8
9
10
11
<div class="woui-avatar-badge" id="avatar3">
  <div class="woui-avatar woui-avatar-border">M</div>
  <div class="woui-avatar-badge-count">1</div>
</div>
<br><br>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="muse3()">变成Muse</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="charles3()">变成Charles</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="badge()">徽标背景绿色</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="badge2()">徽标字体紫色</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="badge3()">徽标内容变成3</button>
<button class="woui-btn woui-btn-red woui-btn-small" onclick="value1()">获取徽标值</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var avatar3 = new woUI.Avatar({
  el: '#avatar3'
});
function muse3() {
  avatar3.change({
    text: 'muse',
    color: '#ff5150',
    textColor: 'white'
  })
}
function charles3() {
  avatar3.change({
    text: 'Charles',
    color: '#3f4464',
    textColor: '#13ce66'
  })
}
function badge() {
  avatar3.change({
    badgeColor: '#13ce66'
  })
}
function badge2() {
  avatar3.change({
    badgeTextColor: '#3f4464'
  })
}
function badge3() {
  avatar3.change({
    badgeText: '3'
  })
}
function value1() {
  alert(avatar3.getBadgeValue(function (result) {
    console.log(result)
  }));
}
M


1
2
3
4
5
6
7
8
<div class="woui-avatar-badge" id="avatar4">
	<div class="woui-avatar woui-avatar-border">M</div>
	<div class="woui-avatar-badge-dot woui-avatar-red"></div>
</div>
<br><br>
<button class="woui-btn woui-btn-small woui-btn-red" onclick="muse4()">变成Muse</button>
<button class="woui-btn woui-btn-small woui-btn-red" onclick="charles4()">变成Charles</button>
<button class="woui-btn woui-btn-small woui-btn-red" onclick="badge4()">徽标背景绿色</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var avatar4 = new woUI.Avatar({
  el: '#avatar4'
})
function muse4() {
  avatar4.change({
    text: 'muse',
    color: '#ff5150',
    textColor: 'white'
  })
}
function charles4() {
  avatar4.change({
    text: 'Charles',
    color: '#3f4464',
    textColor: '#13ce66'
  })
}
function badge4() {
  avatar4.change({
    badgeColor: '#13ce66'
  })
}
  1. 头像
    1. 基础用法
    2. 大小选择
    3. 颜色选择
    4. 不同类型
    5. 带徽标的头像
    6. 自动调整字符大小

WoUI 1.0 Alpha Version

Powered By 联通支付用户体验设计中心