mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

upgrade avatar demos

Browse Source
This commit is contained in:
afc163 2017-06-19 12:13:33 +08:00
parent 3afa6faa36
commit b4c70d2913
3 changed files with 116 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
components/avatar/__tests__/__snapshots__/demo.test.js.snap
View File

@ -200,79 +200,51 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
<div>
<div
class="ant-row"
>
<div
class="ant-col-4"
<div>
<span
class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-icon"
>
<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"
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<div
class="ant-col-4"
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"
>
<span
class="ant-avatar ant-avatar-sm ant-avatar-circle ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<i
class="anticon anticon-user"
/>
</span>
</div>
<div
class="ant-row"
>
<div
class="ant-col-4"
<div>
<span
class="ant-avatar ant-avatar-lg ant-avatar-square ant-avatar-icon"
>
<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"
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-square ant-avatar-icon"
>
<span
class="ant-avatar ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<div
class="ant-col-4"
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"
>
<span
class="ant-avatar ant-avatar-sm ant-avatar-square ant-avatar-icon"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
<i
class="anticon anticon-user"
/>
</span>
</div>
</div>
`;
@ -303,87 +275,55 @@ exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
<div>
<div
class="ant-row"
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
>
<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"
>
<span
class="ant-avatar-string"
>
U
</span>
</span>
</div>
<div
class="ant-col-4"
>
<span
class="ant-avatar ant-avatar-circle"
>
<span
class="ant-avatar-string"
>
USER
</span>
</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"
<i
class="anticon anticon-user"
/>
</span>
<span
class="ant-avatar ant-avatar-circle"
>
<div
class="ant-col-4"
<span
class="ant-avatar-string"
>
<span
class="ant-avatar ant-avatar-circle"
style="color:#f56a00;background-color:#fde3cf;"
>
<span
class="ant-avatar-string"
>
U
</span>
</span>
</div>
<div
class="ant-col-4"
U
</span>
</span>
<span
class="ant-avatar ant-avatar-circle"
>
<span
class="ant-avatar-string"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="background-color:#87d068;"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
</div>
USER
</span>
</span>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
/>
</span>
<span
class="ant-avatar ant-avatar-circle"
style="color:#f56a00;background-color:#fde3cf;"
>
<span
class="ant-avatar-string"
>
U
</span>
</span>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
style="background-color:#87d068;"
>
<i
class="anticon anticon-user"
/>
</span>
</div>
`;

29
components/avatar/demo/basic.md
View File

@ -14,20 +14,27 @@ title:
Three sizes and two shapes are available.
````jsx
import { Avatar, Row, Col } from 'antd';
import { Avatar } 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>
<Avatar size="large" icon="user" />
<Avatar icon="user" />
<Avatar size="small" icon="user" />
</div>
<div>
<Avatar shape="square" size="large" icon="user" />
<Avatar shape="square" icon="user" />
<Avatar shape="square" size="small" icon="user" />
</div>
</div>
, mountNode);
````
<style>
#components-avatar-demo-basic .ant-avatar {
margin-top: 16px;
margin-right: 16px;
}
</style>

25
components/avatar/demo/type.md
View File

@ -14,20 +14,23 @@ title:
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';
import { Avatar } from 'antd';
ReactDOM.render(
<div>
<Row>
<Col span={4}><Avatar icon="user" /></Col>
<Col span={4}><Avatar>U</Avatar></Col>
<Col span={4}><Avatar>USER</Avatar></Col>
<Col span={4}><Avatar src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" /></Col>
</Row>
<Row>
<Col span={4}><Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar></Col>
<Col span={4}><Avatar style={{ backgroundColor: '#87d068' }} icon="user" /></Col>
</Row>
<Avatar icon="user" />
<Avatar>U</Avatar>
<Avatar>USER</Avatar>
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
</div>
, mountNode);
````
<style>
#components-avatar-demo-type .ant-avatar {
margin-top: 16px;
margin-right: 16px;
}
</style>