update Avatar style
This commit is contained in:
parent
afb6a9f400
commit
acf00f5cc2
2 changed files with 37 additions and 0 deletions
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Add table
Reference in a new issue