HeadIcon

头像图标。HeadIcon UI提供与WeLink规范一致的视图。

参数说明

import React from 'react';
import { HeadIcon } from '@wecode/react-weui';
import Head1 from './image/head1.jpg';
import Head2 from './image/head2.jpg';
import Head3 from './image/head3.jpg';

export default class HeadIconDemo extends React.Component {
  mockData(size) {
    const exampleDataSingleImage = {
      size,
      src: Head2,
      refAttr1: `exampleData<span class="hljs-subst">${size}_singleImage`,
      className: 'testClassName1'
    };
    const exampleDataSingleText = {
      size,
      src: [{ type: 'text', bgColor: '1', text: '哈哈' }],
      refAttr1: `exampleData<span class="hljs-subst">${size}_singleText`,
      className: 'testClassName1'
    };
    const exampleDataGroup1 = {
      size,
      src: [{ type: 'image', url: Head3 }],
      refAttr1: `exampleData<span class="hljs-subst">${size}_group1`,
      className: 'testClassName1'
    };
    const exampleDataGroup2 = {
      size,
      src: [
        { type: 'image', url: Head3 },
        { type: 'text', bgColor: '6', text: 'MN' }
      ],
      refAttr1: `exampleData<span class="hljs-subst">${size}_group2`,
      className: 'testClassName1'
    };
    const exampleDataGroup3 = {
      size,
      src: [
        { type: 'image', url: Head3 },
        { type: 'text', bgColor: '5', text: 'LF' },
        { type: 'image', url: Head2 }
      ],
      refAttr1: `exampleData<span class="hljs-subst">${size}_group3`,
      className: 'testClassName1'
    };
    const exampleDataGroup4 = {
      size,
      src: [
        { type: 'image', url: Head1 },
        { type: 'text', bgColor: '4', text: '码码' },
        { type: 'image', url: Head2 },
        { type: 'text', bgColor: '3', text: '微微' }
      ],
      refAttr1: `exampleData<span class="hljs-subst">${size}_group4`,
      className: 'testClassName1'
    };
    const abc = {};
    abc[`sImg<span class="hljs-subst">${size}`] = exampleDataSingleImage;
    abc[`sTxt<span class="hljs-subst">${size}`] = exampleDataSingleText;
    abc[`gp1<span class="hljs-subst">${size}`] = exampleDataGroup1;
    abc[`gp2<span class="hljs-subst">${size}`] = exampleDataGroup2;
    abc[`gp3<span class="hljs-subst">${size}`] = exampleDataGroup3;
    abc[`gp4<span class="hljs-subst">${size}`] = exampleDataGroup4;
    return abc;
  }

  mockData2(size) {
    const exampleDataSingleImage = {
      size,
      src: Head2,
      refAttr1: `exampleData<span class="hljs-subst">${size}_singleImage`,
      className: 'testClassName1'
    };

    const exampleDataSingleTextMn1 = {
      size,
      src: [{ type: 'text', bgColor: '1', text: '美娜' }],
      refAttr1: `exampleData<span class="hljs-subst">${size}_singleText`,
      className: 'testClassName1'
    };
    const exampleDataSingleTextMn2 = {
      size,
      src: [{ type: 'text', bgColor: '2', text: 'MN' }],
      refAttr1: `exampleData<span class="hljs-subst">${size}_singleText`,
      className: 'testClassName1'
    };
    const exampleDataSingleTextMn3 = {
      size,
      src: [{ type: 'text', bgColor: '3', text: 'MN' }],
      refAttr1: `exampleData<span class="hljs-subst">${size}_singleText`,
      className: 'testClassName1'
    };
    const exampleDataSingleTextLf1 = {
      size,
      src: [{ type: 'text', bgColor: '4', text: '刘丰' }],
      refAttr1: `exampleData<span class="hljs-subst">${size}_singleText`,
      className: 'testClassName1'
    };
    const exampleDataSingleTextLf2 = {
      size,
      src: [{ type: 'text', bgColor: '5', text: 'LF' }],
      refAttr1: `exampleData<span class="hljs-subst">${size}_singleText`,
      className: 'testClassName1'
    };
    const exampleDataSingleTextLf3 = {
      size,
      src: [{ type: 'text', bgColor: '6', text: 'LF' }],
      refAttr1: `exampleData<span class="hljs-subst">${size}_singleText`,
      className: 'testClassName1'
    };
    const abc = {};
    abc[`sImg<span class="hljs-subst">${size}`] = exampleDataSingleImage;
    abc[`sTxt<span class="hljs-subst">${size}mn1`] = exampleDataSingleTextMn1;
    abc[`sTxt<span class="hljs-subst">${size}mn2`] = exampleDataSingleTextMn2;
    abc[`sTxt<span class="hljs-subst">${size}mn3`] = exampleDataSingleTextMn3;
    abc[`sTxt<span class="hljs-subst">${size}lf1`] = exampleDataSingleTextLf1;
    abc[`sTxt<span class="hljs-subst">${size}lf2`] = exampleDataSingleTextLf2;
    abc[`sTxt<span class="hljs-subst">${size}lf3`] = exampleDataSingleTextLf3;

    return abc;
  }

  render() {
    const {
      sImg80
    } = this.mockData2('80');
    const {
      sImg56
    } = this.mockData('56');
    const {
      sImg48
    } = this.mockData2('48');
    const {
      sImg40, gp140
    } = this.mockData('40');
    const {
      sImg36, gp136
    } = this.mockData('36');
    const {
      sImg32
    } = this.mockData2('32');
    const {
      sImg30
    } = this.mockData2('30');
    const {
      sImg20
    } = this.mockData2('20');

    return (
      <section>
        <div className="page__bd page__bd_spacing">
          <HeadIcon size="320" src={Head3} />
          <span className="page__desc">320*320</span>
        </div>
        <br />
        <div className="page__bd page__bd_spacing">
          <HeadIcon {...sImg80} />
          <HeadIcon size="80" src={Head3} />
          <span className="page__desc">80x80</span>
        </div>
        <br />
        <div className="page__bd page__bd_spacing">
          <HeadIcon {...sImg56} />
          <HeadIcon size="56" src={Head3} />
          <span className="page__desc">56x56</span>
        </div>
        <br />
        <div className="page__bd page__bd_spacing">
          <HeadIcon {...sImg48} />
          <HeadIcon size="48" src={Head3} />
          <span className="page__desc">48x48</span>
        </div>
        <br />
        <div className="page__bd page__bd_spacing">
          <HeadIcon {...sImg40} />
          <HeadIcon {...gp140} />
          <span className="page__desc">40×40</span>
        </div>
        <br />
        <div className="page__bd page__bd_spacing">
          <HeadIcon {...sImg36} />
          <HeadIcon {...gp136} />
          <span className="page__desc">36x36</span>
        </div>
        <br />
        <div className="page__bd page__bd_spacing">
          <HeadIcon {...sImg32} />
          <HeadIcon size="32" src={Head3} />
          <span className="page__desc">32x32</span>
        </div>
        <br />
        <div className="page__bd page__bd_spacing">
          <HeadIcon {...sImg30} />
          <HeadIcon size="30" src={Head3} />
          <span className="page__desc">30x30</span>
        </div>
        <br />
        <div className="page__bd page__bd_spacing">
          <HeadIcon {...sImg20} />
          <HeadIcon size="20" src={Head3} />
          <span className="page__desc">20x20</span>
        </div>
        <br />
        {/* // old example: */}
        <div className="page__bd page__bd_spacing">
          <HeadIcon size="md" src={Head2} />
          <HeadIcon size="md" src={Head3} />
          <span className="page__desc">32×32</span>
        </div>
        <br />
        <div className="page__bd page__bd_spacing">
          <HeadIcon size="sm" src={Head2} />
          <HeadIcon size="sm" src={Head3} />
          <span className="page__desc">20×20</span>
        </div>
      </section>
    );
  }
}