home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-08 20:38:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

add Avatar

Browse Source
This commit is contained in:
乐仪
2017-06-09 12:02:24 +08:00
parent bac9cee1d8
commit c30d1b191f
13 changed files with 387 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/__tests__/__snapshots__/index.test.js.snap
+1
View File
@@ -6,6 +6,7 @@ Array [
"Anchor",
"AutoComplete",
"Alert",
"Avatar",
"BackTop",
"Badge",
"Breadcrumb",
components/avatar/__tests__/__snapshots__/demo.test.js.snap
+146
View File
@@ -0,0 +1,146 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
<div>
<div
class="ant-row"
>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
</div>
<div
class="ant-row"
>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
</div>
</div>
`;
exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
<div>
<div
class="ant-row"
>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-circle"
>
U
</span>
</div>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
/>
</span>
</div>
</div>
<div
class="ant-row"
>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-circle"
style="color:#f56a00;background-color:#fde3cf;"
>
U
</span>
</div>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="background-color:#87d068;"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
</div>
</div>
`;
components/avatar/__tests__/demo.test.js
+3
View File
@@ -0,0 +1,3 @@
import demoTest from '../../../tests/shared/demoTest';
demoTest('avatar');
components/avatar/demo/basic.md
+33
View File
@@ -0,0 +1,33 @@
---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
头像有三种尺寸，两种形状可选。
## en-US
Three sizes and two shapes are available.
````jsx
import { Avatar, Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span={4}><Avatar size="large" icon="user" /></Col>
<Col span={4}><Avatar icon="user" /></Col>
<Col span={4}><Avatar size="small" icon="user" /></Col>
</Row>
<Row>
<Col span={4}><Avatar shape="square" size="large" icon="user" /></Col>
<Col span={4}><Avatar shape="square" icon="user" /></Col>
<Col span={4}><Avatar shape="square" size="small" icon="user" /></Col>
</Row>
</div>
, mountNode);
````
components/avatar/demo/type.md
+32
View File
@@ -0,0 +1,32 @@
---
order: 1
title:
zh-CN: 类型
en-US: Type
---
## zh-CN
支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。
## en-US
Image, Icon and letter are supported, and the latter two kinds avatar can have custom colors and background colors.
````jsx
import { Avatar, Row, Col } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span={4}><Avatar icon="user" /></Col>
<Col span={4}><Avatar>U</Avatar></Col>
<Col span={4}><Avatar src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" /></Col>
</Row>
<Row>
<Col span={4}><Avatar backgroundColor="#fde3cf" color="#f56a00">U</Avatar></Col>
<Col span={4}><Avatar backgroundColor="#87d068" icon="user" /></Col>
</Row>
</div>
, mountNode);
````
components/avatar/index.en-US.md
+19
View File
@@ -0,0 +1,19 @@
---
category: Components
type: Data Display
title: Avatar
---
Avatars can be used to represent people or object, which supports image, antd-Icon, or letter.
## API
| Property | Description | Type | Default |
|----------- |--------------------------------------------------------- | ---------- |-------|
| type | to set the shape of avatar | Enum{ 'circle', 'square' } | `circle` |
| size | to set the size of avatar | Enum{ 'large', 'small', 'default' } | `default` |
| src | the address of a image avatar | string | - |
| icon | the icon type of a icon avatar, see `Icon` Component | string | - |
| color | to set the color of the icon or letter in avatar | string | - |
| backgroundColor | to set the background color of the icon or letter in avatar | string | - |
components/avatar/index.tsx
+73
View File
@@ -0,0 +1,73 @@
import React from 'react';
import Icon from '../icon';
import classNames from 'classnames';
export interface AvatarProps {
/** Shape of avatar, options:`circle`, `square` */
shape?: 'circle' | 'square';
/** Size of avatar, options:`large`, `small`, `default` */
size?: 'large' | 'small' | 'default';
/** Src of image avatar */
src?: string;
/** Type of the Icon to be used in avatar */
icon?: string;
/** The icon or letter's color */
color?: string;
/** The backgroundColor of the avatar. Does not apply to image avatars */
backgroundColor?: string;
style?: React.CSSProperties;
prefixCls?: string;
className?: string;
children?: any;
}
export default (props: AvatarProps) => {
const {
prefixCls = 'ant-avatar', shape = 'circle', size = 'default', src,
icon, color, backgroundColor, className, ...others,
} = props;
let sizeCls = '';
switch (size) {
case 'large':
sizeCls = 'lg';
break;
case 'small':
sizeCls = 'sm';
break;
default:
sizeCls = '';
break;
}
const classString = classNames(prefixCls, className, {
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-image`]: src,
[`${prefixCls}-icon`]: icon,
});
let children = props.children;
if (src) {
children = <img src={src} />;
} else if (icon) {
children = <Icon type={icon} />;
}
interface ColorStyle {
color?: string;
backgroundColor?: string;
}
const style: ColorStyle = {};
if (color) {
style.color = color;
}
if (backgroundColor) {
style.backgroundColor = backgroundColor;
}
return (
<span {...others} style={style} className={classString}>
{children}
</span>
);
};
components/avatar/index.zh-CN.md
+19
View File
@@ -0,0 +1,19 @@
---
category: Components
subtitle: 头像
type: Data Display
title: Avatar
---
用来代表用户或事物，支持图片、Icon(antd-Icon)或字符展示。
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- | ------- |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
| size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
| src | 图片类头像的资源地址 | string | - |
| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - |
| color | 设置头像颜色，仅支持 Icon、字符类头像 | string | - |
| backgroundColor | 设置头像背景色，仅支持 Icon、字符类头像 | string | - |
components/avatar/style/index.less
+45
View File
@@ -0,0 +1,45 @@
@import "../../style/themes/default";
@avatar-prefix-cls: ~"@{ant-prefix}-avatar";
.@{avatar-prefix-cls} {
display: inline-block;
text-align: center;
background: @avatar-bg;
color: @avatar-color;
overflow: hidden;
.avatar-size(@avatar-size-base, @avatar-font-size-base);
&-lg {
.avatar-size(@avatar-size-lg, @avatar-font-size-lg);
}
&-sm {
.avatar-size(@avatar-size-sm, @avatar-font-size-sm);
}
&-square {
border-radius: @avatar-border-radius;
}
& > img {
width: 100%;
height: 100%;
}
}
.avatar-size(@size, @font-size) {
width: @size;
height: @size;
line-height: @size;
border-radius: @size / 2;
& > * {
line-height: @size;
}
&.@{avatar-prefix-cls}-icon {
font-size: @font-size;
}
}
components/avatar/style/index.tsx
+2
View File
@@ -0,0 +1,2 @@
import '../../style/index.less';
import './index.less';
components/index.tsx
+2
View File
@@ -19,6 +19,8 @@ export { default as AutoComplete } from './auto-complete';
export { default as Alert } from './alert';
export { default as Avatar } from './avatar';
export { default as BackTop } from './back-top';
export { default as Badge } from './badge';
components/style/themes/default.less
+11
View File
@@ -335,3 +335,14 @@
@back-top-color: #fff;
@back-top-bg: rgba(64, 64, 64, 0.4);
@back-top-hover-bg: rgba(64, 64, 64, 0.6);
// Avatar
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@avatar-font-size-base: 18px;
@avatar-font-size-lg: 24px;
@avatar-font-size-sm: 14px;
@avatar-bg: #ccc;
@avatar-color: #fff;
@avatar-border-radius: @border-radius-base;
tests/__snapshots__/index.test.js.snap
+1
View File
@@ -6,6 +6,7 @@ Array [
"Anchor",
"AutoComplete",
"Alert",
"Avatar",
"BackTop",
"Badge",
"Breadcrumb",