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
Show stats 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"> <div class="demo-avatar">
<Avatar :style="{background: color}">{{ user }}</Avatar> <Avatar :style="{background: color}">{{ user }}</Avatar>
<Button size="small" @click="handleChange">Change</Button> <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> </div>
</template> </template>
<script> <script>

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

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