drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Avatar style

Browse source
This commit is contained in:
梁灏 2018-07-03 17:32:32 +08:00
parent afb6a9f400
commit acf00f5cc2
2 changed files with 37 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

28
examples/routers/avatar.vue
View file

@ -2,6 +2,34 @@
<div class="demo-avatar">
<Avatar :style="{background: color}">{{ user }}</Avatar>
<Button size="small" @click="handleChange">Change</Button>
<div>
<div class="demo-avatar">
<Avatar icon="ios-person" size="large" />
<Avatar icon="ios-person" />
<Avatar icon="ios-person" size="small" />
</div>
<div class="demo-avatar">
<Avatar shape="square" icon="ios-person" size="large" />
<Avatar shape="square" icon="ios-person" />
<Avatar shape="square" icon="ios-person" size="small" />
</div>
</div>
<div class="demo-avatar">
<Avatar icon="ios-person" />
<Avatar>U</Avatar>
<Avatar>USER</Avatar>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
<Avatar style="color: #f56a00;background-color: #fde3cf">U</Avatar>
<Avatar style="background-color: #87d068" icon="ios-person" />
</div>
<div class="demo-avatar-badge">
<Badge :count="1">
<Avatar shape="square" icon="ios-person" />
</Badge>
<Badge dot>
<Avatar shape="square" icon="ios-person" />
</Badge>
</div>
</div>
</template>
<script>

9
src/styles/components/avatar.less
View file

@ -14,10 +14,19 @@
background: transparent;
}
.ivu-icon{
position: relative;
top: -1px;
}
.avatar-size(@avatar-size-base, @avatar-font-size-base);
&-large {
.avatar-size(@avatar-size-lg, @avatar-font-size-lg);
.ivu-icon{
position: relative;
top: -2px;
}
}
&-small {