diff --git a/components/__tests__/__snapshots__/index.test.js.snap b/components/__tests__/__snapshots__/index.test.js.snap index e2261c093..2e507f928 100644 --- a/components/__tests__/__snapshots__/index.test.js.snap +++ b/components/__tests__/__snapshots__/index.test.js.snap @@ -6,6 +6,7 @@ Array [ "Anchor", "AutoComplete", "Alert", + "Avatar", "BackTop", "Badge", "Breadcrumb", diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap new file mode 100644 index 000000000..ea7abaaf2 --- /dev/null +++ b/components/avatar/__tests__/__snapshots__/demo.test.js.snap @@ -0,0 +1,146 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders ./components/avatar/demo/basic.md correctly 1`] = ` +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+
+`; + +exports[`renders ./components/avatar/demo/type.md correctly 1`] = ` +
+
+
+ + + +
+
+ + U + +
+
+ + + +
+
+
+
+ + U + +
+
+ + + +
+
+
+`; diff --git a/components/avatar/__tests__/demo.test.js b/components/avatar/__tests__/demo.test.js new file mode 100644 index 000000000..bb02eea33 --- /dev/null +++ b/components/avatar/__tests__/demo.test.js @@ -0,0 +1,3 @@ +import demoTest from '../../../tests/shared/demoTest'; + +demoTest('avatar'); diff --git a/components/avatar/demo/basic.md b/components/avatar/demo/basic.md new file mode 100644 index 000000000..d67a9ac36 --- /dev/null +++ b/components/avatar/demo/basic.md @@ -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( +
+ + + + + + + + + + +
+, mountNode); +```` diff --git a/components/avatar/demo/type.md b/components/avatar/demo/type.md new file mode 100644 index 000000000..b85627339 --- /dev/null +++ b/components/avatar/demo/type.md @@ -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( +
+ + + U + + + + U + + +
+, mountNode); +```` diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md new file mode 100644 index 000000000..2204c4ab4 --- /dev/null +++ b/components/avatar/index.en-US.md @@ -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 | - | + diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx new file mode 100644 index 000000000..8de4ccce7 --- /dev/null +++ b/components/avatar/index.tsx @@ -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 = ; + } else if (icon) { + children = ; + } + interface ColorStyle { + color?: string; + backgroundColor?: string; + } + const style: ColorStyle = {}; + if (color) { + style.color = color; + } + if (backgroundColor) { + style.backgroundColor = backgroundColor; + } + return ( + + {children} + + ); +}; + diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md new file mode 100644 index 000000000..7c97cb085 --- /dev/null +++ b/components/avatar/index.zh-CN.md @@ -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 | - | \ No newline at end of file diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less new file mode 100644 index 000000000..12f3bcbd1 --- /dev/null +++ b/components/avatar/style/index.less @@ -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; + } +} diff --git a/components/avatar/style/index.tsx b/components/avatar/style/index.tsx new file mode 100644 index 000000000..3a3ab0de5 --- /dev/null +++ b/components/avatar/style/index.tsx @@ -0,0 +1,2 @@ +import '../../style/index.less'; +import './index.less'; diff --git a/components/index.tsx b/components/index.tsx index 0d951e2c9..5264e5ce4 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -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'; diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 089fca9ad..b82dc1396 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -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; diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap index fc474223e..ff1355fb9 100644 --- a/tests/__snapshots__/index.test.js.snap +++ b/tests/__snapshots__/index.test.js.snap @@ -6,6 +6,7 @@ Array [ "Anchor", "AutoComplete", "Alert", + "Avatar", "BackTop", "Badge", "Breadcrumb",