List

单行列表。List UI 提供与WeLink规范一致的视图。 List组件内容包括：标题列表、图文列表、带图文跳转。

参数说明

Cell

CellHeader、CellBody、CellFooter

import React from 'react';
import {
  Cells,
  CellsTitle,
  Cell,
  CellHeader,
  CellHeaderImage,
  CellBody,
  CellBodySubText,
  CellBodyExplan,
  CellFooter,
  CellFooterImage
} from '@wecode/react-weui';

const iconSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAIAAAAErfB6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUU3QzMwMDU3NEZGMTFFNkIwQzZDNTI2QjgwMzcwMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUU3QzMwMDY3NEZGMTFFNkIwQzZDNTI2QjgwMzcwMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRTdDMzAwMzc0RkYxMUU2QjBDNkM1MjZCODAzNzAzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRTdDMzAwNDc0RkYxMUU2QjBDNkM1MjZCODAzNzAzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjSJHvsAAAU3SURBVHja7J3rThs7FEYphDshEBJAvP+jVREoCrdwv+l8hy19dcczJk2BFLLWr8ngeNJZ3tvbnpH6YzgcLsD3ZZFbgGBAMCAYEAwIBgQDghEMCAYEA4IBwYBgQDCCAcGAYEAwIBgQDAgGBCMYEAwIBgQDggHBgGAEA4IBwYBgQDAgGBCMYEAwIBgQDAgGBAOCAcEIBgQDggHBgGBAMCAYwYBgQDAgGBAMCAYEIxgQDAgGBMMsaH3alV5eXn4Nq8XFWTV+304K33qXX/WVBN/d3Z2ensbxwcHB8vJyU8vHx8eTkxPfmqOjo0K39/f3/j+u+/3+6urqdD9PF3U/5Z+Xon+R/l06WFtb6/V66Z8Gg0EcdDqddrv9/VN0est0N8v3Oo0DKSw0fnh4qL0EzECwM1VqJefm5qZJYW0Ex4FiaIaZEMH/s7Ky4nQ9YVCmCsuNp07OCH43NjY24uDp6SmtQSr5Of6kiPRoeLNx2h5mJjh10BTEPq/R4PZNc7bPKzkzAc9esDS0Wq3yzJrOqc66t7e35dnayT9fxmgQqFka66yDPzaIr66umiJYDuK8xoFGw5tztkeJk78Zj8fX19eaCypX16JlrmL9swXbWUzDlbrXKTeSsyJYDdSsqbGDsrIGG41GFbUeKOJvlsuk6D+YhvOZ1anY46AQxP66wt2CY5PEdiNkRXrd4XBYrsyJ4L+dhkOAEmwlkmzRPpR746Tm0Uoe9gScylPs+mS323XQt9tthbs3nuR48u0qInjKIK6EUaTiypaFG+dFmcPUUS7lcVJjqNfrVVK6PuqkqzzN0KToT93u8Mc0rF14Rz2cjwYPAp05Pz+PM7u7u01X39vbqyQABH/gNJwGcdOaJ93xyEdD1Ns6eH5+jppLHws1lNKyR8w8OG7NYEw1TMORhHM99q3R4Mcyztj5Zoh6KNdQvrrGBII/djVsZ17z5FsW5QheX1+PA9uSPD/4KzMPgmfz+MVWHIjpDmUe8ZW6LJ2AXQlPsfKpXSsv/P6sfroe5j2CbSVKJ31Mdyjz9kraMQIipaerKZfKLo91sLm5OcnPWFpaSofRFJHtoeCrI7g6DUuwbnSEsiumPEtfXFw4pdc+InRuVydTvEGRroknFPzySm1hOO8purLAzR8R5nc/xMejQ0dwelttaOq06SicMNun4yBNBgj+bRqWLUekT5ZXz6GwUm/7FuuvZUPHx8c/X6kskyxYl5jEcSSVPAEguBpw3lQq3Ca7vLy8rM2K8t3pdOL47OysqR9lC4+PSkGXfiz04CivLQUQXFMb5zuUhZTuDJzX26qtoge1UZjmxXD66mT+dZ3Z2tryVdRDUxyPx+N0JdbtdqmiFwq1cV4xNe1ApfNrPmHL7s7OTrycq5aDwSDeGlD21nyZxpy62t7ezq+ik8rbMTJiPa0e1Hjplejk6ZXU7r/8st8sBTdtSb65PVKotxWFMjEajUJSPADOi6n9/f3ar+tkv9/X5OpvFd4PjPGUZwIE1xQmk7xUpRLMggujQSF7eHioqdrlWEVJeS7Qz+j1eopU5eGCXSVzhfu//6Lujwl39b4osZGi1KqwTl/M/tOvB+pEWedrveDXWvjWlJ8sffTX57qKBgQDggHBCAYEA4IBwYBgQDAgGBCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMCAYwYBgQDAgGBAMCAYEIxgQDAgGBAOCAcGAYAQDggHBgGBAMCAYEAwIRjAgGBAMCAYEA4IBwQgGBAOCAcGAYEAwIBjBgGBAMCAYPp//BBgAStflVPGsRa8AAAAASUVORK5CYII=';

const cellFooterIconStyle = {
  display: 'inline-block',
  width: '16px',
  marginLeft: '12px',
  verticalAlign: 'middle'
};

const cellHeaderStyle = { display: 'block', width: '24px', marginRight: '14px' };

const ListDemo = () => (
  <div>
    <CellsTitle>主文本+次文本</CellsTitle>
    <Cells>
      <Cell list>
        <CellBody>主文本</CellBody>
        <CellFooter>次文本</CellFooter>
      </Cell>
    </Cells>

    <CellsTitle>主文本+次文本(可选)+提示性图标</CellsTitle>

    <Cells>
      <Cell href="javascript:;" access list>
        <CellBody>主文本</CellBody>
        <CellFooter>次文本</CellFooter>
      </Cell>
      <Cell access list>
        <CellBody>主文本</CellBody>
        <CellFooter>次文本</CellFooter>
      </Cell>
    </Cells>

    <Cells>
      <Cell list>
        <CellBody>主文本</CellBody>
        <CellFooter>
          次文本
          <img src={iconSrc} alt="" style={cellFooterIconStyle} />
        </CellFooter>
      </Cell>
      <Cell list>
        <CellBody>主文本</CellBody>
        <CellFooter>
          次文本
          <img src={iconSrc} alt="" style={cellFooterIconStyle} />
        </CellFooter>
      </Cell>
    </Cells>

    <CellsTitle>操作性图标+主文本</CellsTitle>
    <Cells>
      <Cell list icon>
        <CellHeader>
          <img src={iconSrc} alt="" style={cellHeaderStyle} />
        </CellHeader>
        <CellBody>主文本</CellBody>
      </Cell>
      <Cell list icon>
        <CellHeader>
          <img src={iconSrc} alt="" style={cellHeaderStyle} />
        </CellHeader>
        <CellBody>主文本</CellBody>
      </Cell>
    </Cells>
    <CellsTitle>主文本+次文本(可选)+提示性图标</CellsTitle>
    <Cells>
      <Cell list icon>
        <CellHeader>
          <img src={iconSrc} alt="" style={cellHeaderStyle} />
        </CellHeader>
        <CellBody>主文本</CellBody>
        <CellFooter>
          <img src={iconSrc} alt="" style={cellFooterIconStyle} />
        </CellFooter>
      </Cell>
      <Cell list icon>
        <CellHeader>
          <img src={iconSrc} alt="" style={cellHeaderStyle} />
        </CellHeader>
        <CellBody>主文本</CellBody>
        <CellFooter>
          <img src={iconSrc} alt="" style={cellFooterIconStyle} />
        </CellFooter>
      </Cell>
    </Cells>
    <CellsTitle>图文列表</CellsTitle>
    <Cells>
      <Cell image>
        <CellHeader>
          <CellHeaderImage src={iconSrc} />
        </CellHeader>
        <CellBody>相机胶卷（2023）</CellBody>
        <CellFooter />
      </Cell>
      <Cell image>
        <CellHeader>
          <CellHeaderImage src={iconSrc} />
        </CellHeader>
        <CellBody>相机胶卷（2023）</CellBody>
        <CellFooter />
      </Cell>
    </Cells>
    <Cells>
      <Cell list round>
        <CellHeader>
          <CellHeaderImage src={iconSrc} />
        </CellHeader>
        <CellBody>
          主文本<CellBodySubText>次文本</CellBodySubText>
          <CellBodyExplan>辅助说明文体</CellBodyExplan>
        </CellBody>
        <CellFooter />
      </Cell>
    </Cells>
    <Cells>
      <Cell square>
        <CellHeader>
          <CellHeaderImage src={iconSrc} />
        </CellHeader>
        <CellBody>
          主文本
          <CellBodyExplan>辅助说明文体</CellBodyExplan>
        </CellBody>
        <CellFooter />
      </Cell>
    </Cells>
    <Cells>
      <Cell icon>
        <CellHeader>
          <CellHeaderImage src={iconSrc} />
        </CellHeader>
        <CellBody />
        <CellFooter>
          <CellFooterImage src={iconSrc} />
        </CellFooter>
      </Cell>
    </Cells>
  </div>
);

export default ListDemo;