import React, {useState} from 'react';
import { Avatar,Popover, AvatarGroup, RadioGroup, Radio } from '../../index';
export default {
title: 'Avatar',
}
export const Basic = () => (
U
console.log('ok')}>U
U
U
U
U
);
export const CustomAvatar = () => (
);
export const GroupSize = () => (
medium
LL
CX
CX
RM
ZL
YZ
default
LL
CX
CX
RM
ZL
YZ
small
LL
CX
CX
RM
ZL
YZ
);
export const OverlapFromDemo = () => (
overlapFrom=start
LL
CX
RM
ZL
YZ
overlapFrom=end
LL
CX
RM
ZL
YZ
);
export const MaxCountDemo = () => (
maxCount=3
LL
CX
RM
ZL
YZ
);
const renderMore = (restNumber, restAvatars) => {
const content = restAvatars.map((avatar, index) => {
return (
{React.cloneElement(avatar, { size: 'extra-small' })}
这是段文字描述
);
});
return (
{`+${restNumber}`}
);
};
export const RenderMoreDemo = () => (
);
export const ExtraExtraSmallOverlap = () => (
LL
CX
RM
ZL
YZ
LL
CX
RM
ZL
YZ
LL
CX
RM
ZL
YZ
);
export const focusTest = () => {
return (
<>
{
console.log('click avatar 1');
}}
/>
{
console.log('click avatar 2');
}}
/>
);
}
const srcGroup = {
'successSrc1': 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg',
'successSrc2': 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
'errorSrc': 'https://xxx.png',
}
export const srcChange = () => {
const [src, setSrc] = useState('successSrc1');
const onChange = (e) => {
setSrc(e.target.value);
}
return (
<>
点击选择src类型
成功的src
成功的src
失败的src
{
console.log('loading error');
}}
/>
)
}