Commit acf00f5cc2c7bc8ebb7262cbae169cdfe235ef7e
1 parent
afb6a9f4
update Avatar style
Showing
2 changed files
with
37 additions
and
0 deletions
Show diff stats
examples/routers/avatar.vue
| @@ -2,6 +2,34 @@ | @@ -2,6 +2,34 @@ | ||
| 2 | <div class="demo-avatar"> | 2 | <div class="demo-avatar"> |
| 3 | <Avatar :style="{background: color}">{{ user }}</Avatar> | 3 | <Avatar :style="{background: color}">{{ user }}</Avatar> |
| 4 | <Button size="small" @click="handleChange">Change</Button> | 4 | <Button size="small" @click="handleChange">Change</Button> |
| 5 | + <div> | ||
| 6 | + <div class="demo-avatar"> | ||
| 7 | + <Avatar icon="ios-person" size="large" /> | ||
| 8 | + <Avatar icon="ios-person" /> | ||
| 9 | + <Avatar icon="ios-person" size="small" /> | ||
| 10 | + </div> | ||
| 11 | + <div class="demo-avatar"> | ||
| 12 | + <Avatar shape="square" icon="ios-person" size="large" /> | ||
| 13 | + <Avatar shape="square" icon="ios-person" /> | ||
| 14 | + <Avatar shape="square" icon="ios-person" size="small" /> | ||
| 15 | + </div> | ||
| 16 | + </div> | ||
| 17 | + <div class="demo-avatar"> | ||
| 18 | + <Avatar icon="ios-person" /> | ||
| 19 | + <Avatar>U</Avatar> | ||
| 20 | + <Avatar>USER</Avatar> | ||
| 21 | + <Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" /> | ||
| 22 | + <Avatar style="color: #f56a00;background-color: #fde3cf">U</Avatar> | ||
| 23 | + <Avatar style="background-color: #87d068" icon="ios-person" /> | ||
| 24 | + </div> | ||
| 25 | + <div class="demo-avatar-badge"> | ||
| 26 | + <Badge :count="1"> | ||
| 27 | + <Avatar shape="square" icon="ios-person" /> | ||
| 28 | + </Badge> | ||
| 29 | + <Badge dot> | ||
| 30 | + <Avatar shape="square" icon="ios-person" /> | ||
| 31 | + </Badge> | ||
| 32 | + </div> | ||
| 5 | </div> | 33 | </div> |
| 6 | </template> | 34 | </template> |
| 7 | <script> | 35 | <script> |
src/styles/components/avatar.less
| @@ -14,10 +14,19 @@ | @@ -14,10 +14,19 @@ | ||
| 14 | background: transparent; | 14 | background: transparent; |
| 15 | } | 15 | } |
| 16 | 16 | ||
| 17 | + .ivu-icon{ | ||
| 18 | + position: relative; | ||
| 19 | + top: -1px; | ||
| 20 | + } | ||
| 21 | + | ||
| 17 | .avatar-size(@avatar-size-base, @avatar-font-size-base); | 22 | .avatar-size(@avatar-size-base, @avatar-font-size-base); |
| 18 | 23 | ||
| 19 | &-large { | 24 | &-large { |
| 20 | .avatar-size(@avatar-size-lg, @avatar-font-size-lg); | 25 | .avatar-size(@avatar-size-lg, @avatar-font-size-lg); |
| 26 | + .ivu-icon{ | ||
| 27 | + position: relative; | ||
| 28 | + top: -2px; | ||
| 29 | + } | ||
| 21 | } | 30 | } |
| 22 | 31 | ||
| 23 | &-small { | 32 | &-small { |